线框编辑器

NinjaMock包括所有用于web和移动线框的典型模板。

我们的模板看起来很粗略-就像是手绘的。 这是因为它可以帮助人们专注于线框中的交互和内容,而不是颜色,样式,详细布局和其他高保真方面。

模板组织在应用程序左窗格中的工具箱中,并根据其类型和用法进行分组。 我们目前支持几种类型的项目(例如iOS,Android,Windows Phone等),对于每个项目类型,工具箱都包含您需要的模板。

(Android,iPhone,iPad,Windows Phone,Microsoft Surface,网站和freehand)

图标和图像

如果不包含图标和图像,线框就不完整。 在NinjaMock中,您可以使用许多方便的选项来设计您的界面以包含这些视觉元素。

嵌入式图标

我们的嵌入式图标使用与其他模板元素相同的手绘风格,使您的整个线框设计具有统一的外观和感觉。

嵌入的图标因项目类型而异。 例如,在Android和iPhone线框项目中,它们类似于给定平台的真实图标,但它们仍然具有粗略的手绘外观。

嵌入的图标是矢量。 您可以调整它们的大小,甚至可以更改填充和笔画而不会丢失质量。

IconFinder

如果您在我们的嵌入式图标中找不到您需要的内容,我们还可以与IconFinder直接集成。 只需在NinjaMock线框编辑器内的IconFinder选项卡上搜索图标,无需离开。

请注意,IconFinder图标不是矢量,您无法更改其填充或笔画。

你自己的档案

您的计算机上是否有要在项目中使用的图标或图像? 只需将您的视觉资产上传到我们服务器上的个人存储中,您就可以在任何项目中使用它们。 我们目前为每个用户提供500mb的可用空间。

您可以将图像文件直接从桌面拖放到NinjaMock线框编辑器中。 这些文件将自动上传到您的个人存储空间。

来自网络的图像

您是否在web上找到了项目所需的完美图标或图像? 没问题,只需将链接复制并粘贴到文件中,您就可以使用它而无需将其上传到我们的服务器。

只要确保这个图像不会从你找到它的任何地方被删除。

您可以将图像直接从打开的浏览器拖放到NinjaMock设计图面上。 我们将通过引用图像的URL自动添加图像。

手动绘制的图标

有时,当你找不到任何适合你需要的东西时,创建自己的图标会更方便。 通过使用NinjaMock强大的矢量编辑工具,您可以快速创建自己的图标。

按照以下3个简单步骤创建自己的图标:

1. 使用任何矢量编辑工具来绘制您需要的内容。
2. 选择新绘制的元素。
3. 右键单击并选择 导出选择到 -> 我的图像....

您的矢量绘图现在将被保存为一个可重复使用的图像在您的个人空间在我们的服务器。 从现在开始,您可以使用此图像作为图标源。 在下面的示例中,您可以看到一个手动绘制的图标,该图标在iPhone的标签栏元素中使用:

视频支持

Ninjamock允许您通过添加视频存储的URL来在项目中使用外部视频。 Ninjamock支持来自YouTube、Vimeo、Dailymotion和Rumble的视频,以及MP4、WEBM和OGG等格式的视频文件。

表情符号支持

在Ninjamock中,您可以在项目中使用标准表情符号,这些表情符号可以调整大小并放置在项目的任何位置。

定制模板

如果你找不到你需要的模板,你可以直接在NinjaMock线框编辑器中自己制作。 您可以从在设计图面上创建的任何对象选择中创建自己的可重用元素。

自定义模板当前仅在创建它们的项目中可用。

以下是如何创建自己的可重用模板:

1. 通过使用现有的模板和/或绘制独特的元素(顺便说一下,我们有强大的矢量编辑工具)来创建您需要的任何东西。
2. 选择要包含在自定义模板中的所有元素。
3. 右键单击,选择 资产 -> 转换为资产.

新创建的模板将被添加到工具箱底部的组"我的资产"中,您现在可以在当前项目中的任何页面上使用它。

您可以随时修改模板(右键单击,选择 资产 -> 编辑资产) 您的更改将应用于整个项目中模板的所有实例。

矢量图形

NinjaMock线框编辑器具有强大的内置矢量编辑工具。 除了简单的元素,如线条,圆形和矩形,NinjaMock线框编辑器还包括一个徒手铅笔和钢笔工具(与贝塞尔曲线支持),用于创建任何类型的形状。

矢量编辑工具位于绘图表面左侧的工具调色板中。

绘图工具如何工作?

绘图工具(线,矩形,椭圆,钢笔和铅笔)的工作方式与其他模板有点不同。 要开始绘制形状,请选择一个起点,按住鼠标左键并将鼠标移动到所需的终点。 形状准备就绪时释放鼠标左键。 绘图行为与您可能从其他专业绘图应用程序中了解的工具非常相同。

如果你的形状被证明是错误的大小,不用担心-你可以随时改变它之后,无论是通过调整大小用鼠标或使用属性窗格进行调整。

让我们从简单的绘图工具开始:

线工具

用线工具就可以了。.. 达达! -画一条线。

捷径: L 钥匙.

要绘制直线,请在绘制时按住Shift键。 然后,该工具将捕捉到15度增量,以帮助您。

线条工具生成粗略的线条。 该应用程序在幕后绘制一条复杂的路径,使线条看起来是手绘的。 如果您需要一条非粗略的(完全直线的)线,您可以使用我们的钢笔工具或将您的线转换为路径。

矩形工具

使用矩形工具,您可以。.. 鼓-卷-画一个矩形。

捷径: R 钥匙.

要锁定形状的宽高比,请在绘制时按住Shift键。

矩形工具也会像线条工具一样生成草图形状。 如果您需要一个非粗略的矩形,您可以使用我们的矩形工具或将您的矩形转换为路径。

椭圆工具

使用椭圆工具,您可以为项目添加漂亮的椭圆。

捷径: C 钥匙.

要锁定形状的宽高比,请在绘制时按住Shift键。

让我们来看看我们更高级的矢量工具:

钢笔工具

使用钢笔工具,您可以创建任何类型的折线和多边形。

捷径: P 钥匙.

在使用路径编辑工具应用贝塞尔曲线之前,笔可用于制作形状的快速草图(添加控制点)。 您还可以在添加控制点时添加贝塞尔曲线,只需在添加点时拖动即可。

使用钢笔工具的提示:

要将点添加到任何现有路径,请选择钢笔工具,然后单击路径上的任意位置以添加另一个点。

要从路径中删除点,请选择钢笔工具,然后单击要删除的现有点。

要关闭一个多边形,只需将最后一个点直接添加到第一个点的顶部。 鼠标光标将改变以指示多边形现在将被关闭。

路径编辑工具

使用路径编辑工具,您可以修改任何现有的路径,无论它是如何创建的–无论是通过钢笔,铅笔或任何其他矢量编辑工具。

捷径: A 钥匙.

路径编辑工具可用于调整路径,例如移动点和编辑贝塞尔曲线。

如何使用路径编辑工具创建曲线:

1. 将鼠标悬停在要转换为曲线控制点的路径点上。
2. 按住Alt键(在Mac上的Option键)并将鼠标光标"拉"到任何一侧,在向下单击时远离该点。
3. 曲线调整手柄将出现(图中用细线连接的蓝点)。 根据需要使用这些手柄调整曲线。
4. 您还可以通过alt键单击控制点将曲线转换回正常的角度角。

铅笔工具

使用铅笔工具,您可以创建任何徒手绘图。

捷径: Y 钥匙.

只要确保你有良好的手绘技巧:-)使用铅笔工具时,Wacom板或其他绘图板可以派上用场。

手动工具

您可以使用手动工具在设计图面周围平移。 这是方便的,当你有一个高水平的缩放应用,你需要做微妙的滚动调整,使事情进入视野。

捷径: H 钥匙. 或者,您可以按住空格键并使用鼠标左键暂时激活手动工具。 当您使用其他工具(例如笔)并且需要在不停用笔的情况下滚动时,这很有用。 只需松开空格键,笔将再次成为活动工具。

几何形状

在我们的工具箱中,你会发现许多更常用的矢量形状。

这些形状显示在所有类型的项目中(工具箱中的其他模板特定于项目类型)。

矢量对象的常见属性

我们所有的矢量对象都支持一组共同的属性–笔画画笔,笔画宽度和填充画笔(如果适用)。

这使您可以灵活地以与设计的其余部分相匹配的样式快速绘制形状。

复制和粘贴

您可以轻松地在页面或项目之间复制和粘贴元素。 您可以在同一个线框项目中复制和粘贴,也可以从一个项目中复制并粘贴到另一个在不同选项卡、窗口甚至不同浏览器中打开的项目中。

只需在设计中选择要复制的元素,然后使用键盘上的Ctrl+C(Mac上为Cmd+C)组合键将其复制到剪贴板。

要粘贴剪贴板上的元素,只需浏览到要将它们复制到的项目中的页面,然后点击键盘上的Ctrl+V(Mac上的Cmd+V)按钮。 就这样! 粘贴的元素现在被复制到新位置。

出于安全原因,在浏览器选项卡之间复制仅在使用键盘快捷键时有效。 它不会从右键单击激活的上下文菜单中工作。

粘贴图形

即使您在Adobe Photoshop等其他图形应用程序中处理高保真设计,NinjaMock也支持您的工作流程。 即使您可能已经结束了设计工作的概念和线框阶段,您仍然可以轻松地使用NinjaMock通过将像素完美的设计粘贴到NinjaMock来继续您的工作流程。 这使您可以轻松地将抛光的视觉设计分发给您的同事、利益相关者和客户,以获得反馈和批准。 没有更多沉重的电子邮件线程或杂乱的文件共享来处理您的设计评论!

当您在您选择的图形应用程序中完成模型设计工作时,您需要做的就是使用应用程序的复制命令复制您所拥有的设计,返回到NinjaMock,然后使用Ctrl+V(Mac上的Cmd+V)组合键将图形粘贴到NinjaMock中。 您不再需要担心将设计作品保存或导出为图形应用程序中的图像文件! 您还可以使用操作系统的剪贴板功能复制所需的图形。 例如,在Mac上,您可以使用Cmd+Ctrl+Shift+4组合键打开剪贴板复制选择选取框,拖动选择以适合您要复制的内容,然后将其粘贴到NinjaMock中。

不支持透明度。 从其他应用程序复制的视觉对象中的透明区域将以白色背景呈现。

由于某些限制,Firefox浏览器目前不支持这种类型的粘贴。

合作关系

线框背后的基本思想是关于沟通你的想法. 与您的团队或客户分享您的工作,以获得即时反馈,并确保每个人都是最新的项目进展。

分享

只需单击一下,您就可以与任何人共享线框项目。 NinjaMock自动生成一个特殊的秘密链接(例如"ninjamock.com/s/some-code"),然后可以用来打开和查看您的项目。

与您分享此链接的人不需要NinjaMock帐户。 这对于将您的工作提交给不使用线框工具的客户特别有用。 即使您的客户没有NinjaMock帐户,他们仍然可以查看设计和评论,甚至可以将自己的评论添加到您的项目中。

如果没有NinjaMock帐户的人在您的线框或模型设计上留下评论,评论作者将显示为"Shadow Ninja#some-number"。 这是一个特殊的临时帐户,我们专门为非客户在添加评论时创建。

如何开始分享你的项目:

1. 在顶部导航栏中,单击共享按钮。
2. 点击"开始共享"按钮。
3. 将自动生成的链接发送给您希望的任何人。

要停止共享项目,只需单击同一对话框中的"停止共享"按钮即可。 您的秘密链接将不再工作,直到您再次开始共享。

部分分享

通常,您可能只想与客户共享线框项目的特定部分,而他们却无法访问未完成的部分。 您可能希望继续处理项目的下一部分,同时等待他们查看已准备好的内容。 通过使用我们的页面状态,您可以很容易地控制哪些页面是共享的,哪些不是共享的。

在上图中,仅共享状态为"设计完成"或"已批准"的页面。 任何使用秘密链接的人(如果您想测试它,包括您自己)都不会看到任何标记为"正在进行中"的线框页面。

启动页面

为了测试线框内的各种流程,选择一个您希望审阅者开始查看设计的特定页面通常很有用。 在NinjaMock中,您可以直接在共享对话框上设置启动页面。

启动页面保存在项目本身中。 这意味着您可以随时更改启动页面,而无需向客户发送大量不同的秘密链接。 任何通过秘密链接访问您的项目的人都将从同一个启动页面开始。

在移动设备上打开

NinjaMock项目也可以在平板电脑和智能手机上打开,这使得看到你的线框和模型设计如何出现在特定设备上非常方便!

团队合作

有时能够分享一个项目以供审查和接收评论是不够的。 NinjaMock线框编辑器允许您共享您的工作区,并与您的团队实时协作。 邀请您的业务合作伙伴和同事加入您的项目,并为他们分配权限,以便他们可以直接做出贡献。

每个人都可以被邀请在您的共享工作区工作。 只需发送邀请,如果您的邀请没有帐户,他们只需在几秒钟内创建自己的帐户。 另一个伟大的事情是,他们不使用自己的可用项目,如果他们加入你的! -别担心-你是老板,你决定你的合作者对你的每个项目都有什么特权。

访问角色

工作区的权限是由用户分配的角色定义的. NinjaMock中有四个角色:所有者、管理员、设计器和审阅者。

Who can do what?

业主 - 是创建文件夹和项目的用户。 业主对项目有完全的控制权. 所有者邀请协作者并为他们分配角色。 每个创建的项目都计入所有者的可用项目数。

署长 - 拥有对文件夹和项目的完全控制,并可以邀请其他合作者。 这些项目不计入管理员自己帐户的可用线框和模型项目的数量。

设计师 - 正如人们所期望的那样,设计师在项目中工作。 但是,此用户将无法管理其他用户及其角色。 该项目也不计入设计师自己帐户的可用项目数量。

审稿人 - 权限最少的角色是审阅者。 正如名称所解释的那样,他们可以查看项目并对其进行评论,但无法在项目中进行设计并更改模型。 此外,审阅者无法管理其他用户及其角色。 项目不计入审稿人自己帐户的可用项目数量。

共享工作区

共享项目的工作区从未如此简单:只需单击项目编辑器中的团队选项即可。

您还可以使用"项目"、"文件夹"或"帐户"级别的"管理团队"选项,从"我的项目"页面上的线框和模型项目列表中启动工作区共享。

当您发送共享工作区的邀请时,您可以添加现有的NinjaMock用户或邀请新用户创建他们自己的NinjaMock帐户并加入您的项目。

您可以添加任意数量的协作者。

管理团队

作为项目所有者,您可以完全控制线框和模型项目。

NinjaMock线框编辑器允许您在项目,文件夹和帐户级别上设置用户权限。 为您的合作者分配尽可能多或尽可能少的项目权力:使他们成为管理员,设计师或审阅者。

管理团队在三个不同的层次上工作:帐户,文件夹或项目。 添加权限,并具有访问权限和权限的完全自定义。 在最低级别上设置的权限将始终优先。

访问共享工作区

如果有人与您共享项目工作区,您将收到一封电子邮件,其中包含访问项目的链接。 如果您还没有NinjaMock帐户,系统会要求您创建一个。 这只需要几秒钟!

与项目访问一起,您将获得某些权限:管理员,设计人员或审阅者。 这些权限由帐户所有者授予您。

从一个地方访问所有项目的工作区(您的或与您共享):我的项目。 在帐户之间切换以访问其项目。

除了项目访问权限外,您还可以被授予对文件夹或帐户级别的访问权限。 这样,您将对文件夹中的所有项目或整个帐户具有相同的权限。

已与您共享的项目不会影响您自己计划的项目计数。

一起工作

项目上的协作意味着所有用户都可以访问项目工作区并根据其权限贡献项目。

所有更改和移动都实时显示给团队的其他成员,并保存到服务器。

评论

NinjaMock线框编辑器的特点是一个直观和熟悉的方式留下评论的个别线框和跟踪他们的状态。

注释是特定于它们被留下的页面。 如果一个页面被删除,其相应的注释将不再可见。

我们的评论是实时同步的,所以你不需要重新打开或刷新项目来获得最新的评论!

添加注释

可以从设计图面右侧的注释窗格中添加新注释,也可以通过右键单击线框上的任意位置并从弹出菜单中选择"添加注释"来添加新注释。

我们对谁可以留下或编辑评论没有任何限制。 任何打开项目的人都可以添加,编辑甚至删除任何评论。

评论泡沫

每个注释都由设计图面上的蓝色"语音气泡"图标表示。 在语音气泡内部,会显示唯一的注释编号。

您可以自由地将气泡移动到设计图面上的任何位置,以帮助查看者了解注释引用的线框元素。

双击语音气泡图标以查看或编辑注释。

跟踪评论状态

解决注释后,语音气泡图标将变灰,注释将移动到"注释"窗格中列表的底部。 这有助于您专注于显示在注释列表顶部的活动(未解析)注释。

要检查整个项目中是否有任何未解决的注释,请使用 全部 在注释窗格的顶部切换。 这样,您将看到所有页面的注释,而不是仅针对当前页面的注释。

点击一个评论语音泡沫图标,你将被直接带到该评论被留下的页面。 滚动位置也将被调整,使这个语音气泡图标定位在屏幕的中心。

电邮通知

NinjaMock线框编辑器还具有添加新评论或回复时自动电子邮件通知的功能。

作为项目的所有者,您将收到来自所有审阅者的评论通知。

然而,如果审阅者是注册的NinjaMock用户,他们将只收到他们参与的注释线程的通知。 非NinjaMock-通过秘密链接访问项目并留下评论的用户将不会收到通知。

页面状态

您可能需要跟踪工作进度,以便了解项目的完成程度。 在NinjaMock线框编辑器中,您和您的审阅者可以控制各个页面的状态。

每个页面都可能具有以下状态之一"正在进行"(默认状态),"设计完成"和"已批准"。

对页面状态的所有更改都是手动进行的。 我们还没有实施任何复杂的工作流程,规定谁可以更改状态或在什么时间更改状态。 相反,我们决定保持简单和灵活;任何有权访问您的项目的用户都可以随时更改任何状态。

页面状态实时同步,因此您无需刷新浏览器即可查看页面的最新状态。

项目概览

要查看整个线框或模型项目而不是特定页面的状态,可以使用项目概述网页。 您可以通过单击"概述"来访问它。

概述页面包含项目中所有页面的详细信息,例如页面状态和未解析注释的数量。

导出为PDF/PNG

导出为PDF并在纸上打印仍然是线框的重要组成部分。 许多创意创作者打印出他们的线框,并把它们放在办公室的墙上;有些人用它们来获得灵感,其他人则作为一个小组讨论设计,并在墙上添加评论。

在NinjaMock线框编辑器中,我们支持这种做法,让您有机会导出带有页面链接和页面注释的线框。 这样,即使设计在纸面上,您也可以浏览设计的交互。

当您导出并选择包含注释时,我们会将所有页面注释添加到线框页面旁边。

注释具有与NinjaMock设计图面中相同的唯一注释编号。

导出到HTML

您也可以将项目导出为HTML。 导出为HTML允许您将文件下载到您的计算机或将它们添加到您自己的web服务器,以便于访问和存储。 这可以方便地与您的合作伙伴和客户共享您的项目。

HTML原型在预览工作时提供了更具交互性的体验,例如,允许您键入文本并标记复选框。

项目管理

我们喜欢在NinjaMock线框编辑器中保持组织。 我们提供了在项目中对页面进行分组的方便方法,我们还允许您在文件夹中组织项目-就像计算机上的文件一样。

页面组

当您的项目增长并且变得更加难以导航时,将页面分成组是很好的。 例如,您可以在应用程序设计中按各自的区域对它们进行分组;例如登录页面,设置页面等-或您喜欢的任何其他方式。

页面组只是一组命名的页面(一个页面一次只能在一个组中)。 您可以根据需要创建任意数量的组,在组之间移动页面,或在组内对其进行排序。

要创建页组,请通过单击窗格右上角的相应图标展开"页"窗格。

项目文件夹

想想你电脑上的文件。 当你有太多的文件,它变得很难找到你想要的,你只需创建文件夹,并移动里面的文件,对不对?

我们在NinjaMock中重现了相同的体验;您可以创建项目文件夹,将不同的线框和模型项目放入文件夹,将文件夹移动到其他文件夹等。 这是一个方便和熟悉的方式来组织你的工作。

将项目(或文件夹)移动到文件夹中:

1. 突出显示(将鼠标悬停在)项目列表中的项目。
2. 点击"移动。.."文本链接。
3. 选择目标文件夹,然后单击"移动"按钮完成。

要展开或折叠弹出窗口中的文件夹,请单击灰色文件夹图标。

线框编辑器快速指南