形式和功能–顶级线框工具指南 _原型设计

本文概述

顶级线框图工具
顶级设计师最喜欢的线框工具
摘要

1487年, 达芬奇(Leonardo da Vinci)在米兰公爵Ludovico Sforza的赞助下绘制了一个原理图, 称为” 战斗车辆” 。尽管机器的设计目的是使其无法正常运行, 但一群工程师在2010年对其进行了重新设计。达芬奇的示意图是基本线框的最早示例之一。

文章图片
莱昂纳多·达·芬奇(Leonardo da Vinci)的” 格斗车” 被绘制为示意图, 工程师可以在2010年对其进行重新创建。
线框一词已经使用了数十年, 远远早于网页设计界所采用。线框最初用于计算机辅助设计(CAD)软件中, 无需详细说明即可说明对象的设计。结果是一个蓝图, 看起来是由电线制成的, 因此, 我们最终得到了线框。
但是设计中的线框是什么, 拥有线框的目的是什么？
数字设计中的线框是一种可视化的指南或页面示意图, 剥去了印刷样式, 颜色, 图形和交互式元素, 并表示设计过程中的特定点。其目的是显示页面级布局概念, 以描述功能, 行为和内容的优先级。

文章图片
线框说明了页面级别的布局细节, 没有样式, 图像和交互式元素。 (米克洛斯·菲利普斯)
设计师使用线框将基本概念结构与网站或应用程序屏幕的视觉设计联系起来。线框共有三种类型：

低保真-早期图纸, 没有很多细节。低保真线框通常是手绘草图, 或代表创意的线条和形状。
中保真度-线框开始显示更多组件详细信息, 并专注于内容布局和整体页面结构。
高保真-后期(迭代后)图纸, 描绘了组件的更多细节和更高级渲染, 具有行为特征并着重于内容布局。

文章图片
线框可以在纸上绘制草图, 而不必使用软件, 并且通常在移动到线框工具之前以此方式启动。 (米克洛斯·菲利普斯)
数字设计中线框的发展是另一个UX工件和可交付成果：线流。线流是线框和流程图的结合, 这是UX设计人员为了另一个目的将两个工件慢慢合并为一个工件的过程：演示和跟踪表示Web应用程序等产品中任务流的交互。

文章图片
Wireflow是UX交付品, 用于说明使用线框的任务流。 (来源：NNGroup)
设计人员在使用线框时遇到的一个问题是传达用户旅程。尽管有更复杂的方式来显示用户的旅程, 但有一种趋势是将它们包含在线框的简单中。一个有用的工具是线框图。
线框图将线框与用户旅程(或用户流程)结合在一起, 以使用线框演示用户浏览产品的旅程。
顶级线框图工具在决定使用哪种线框图工具时, 设计师有很多选择。新工具不断进入市场, 因此很难跟上。以下是要寻找的出色线框图工具的一些特征：

产生各种保真度的能力(从低到高)
易于使用且经常更新的稳定软件
具有附加功能的内置模板, 符号和标准UI组件

本指南中的某些工具更侧重于线框图, 而其他工具则试图在线框图和原型以及模型功能之间取得平衡。选择使用一种工具而不是另一种(或一起使用)取决于设计人员的偏好。
Balsamiq工作室
Balsamiq是一种低保真, 易于使用的线框图工具, 因其易用性和标志性的” 手绘” 外观而受到青睐。它带有一组预构建的模板, 可通过拖放编辑器快速轻松地使用它们。设计人员可以添加自己的资产并自定义布局。
当以全屏演示模式或导出的PDF显示项目时, 可以通过链接模型来创建简单的点击体验以进行可用性测试, 从而实现基本的原型制作。
Balsamiq可作为台式机版本(Windows和Mac), 云服务或Google云端硬盘, Confluence和JIRA的插件提供。

文章图片
香脂生产的低保真线框看起来像” 手绘” 。 (米克洛斯·菲利普斯)
Moqups
Moqups是另一个创造性的协作工具, 专注于线框图, 但也可用于原型制作。与Balsamiq不同, 它完全基于Web, 旨在为Web和移动应用程序制作线框。
Moqups和Balsamiq之间的主要区别在于线框的保真度。 Balsamiq产生” 手绘” 外观, 而Moqups提供用于移动应用程序和Web设计(包括iOS, Android和Bootstrap)的全彩色模具和工具包。
Moqups在其他一些方面与Balsamiq有所不同。该软件允许有限的对象编辑和页面管理, 使设计人员能够定义” 主” 对象, 在迭代过程中更改线框时可以节省大量时间。
例如, 设计者创建具有特定大小, 形状和颜色的主按钮对象。整个线框中多次使用此按钮。后来, 在迭代过程中, 如果设计人员需要更改按钮的颜色, 而不是更改每个按钮对象, 则他们可以更改一次, 并且所有子按钮对象都将立即受到影响。

文章图片
Moqups是一款出色的线框UX / UI工具, 专注于线框图并添加了其他功能, 例如对象编辑和页面管理。 (Atlassian市场)
皮多科
Pidoco是一款顶级线框图工具, 专注于具有某些基本交互功能的低保真可交付成果。它也是基于云的, 利用可重用的组件, 并与Balsamiq和Moqups区别开来, 具有更强大的点击式线框体验。
Pidoco具有内置的移动视图, 因此可用于移动应用程序和网页设计, 因此设计人员可以在各种屏幕尺寸上查看其应用程序页面的外观。另一个内置功能是导出和规范功能。这有助于设计人员从线框过渡到原型/模型, 而无需插件或扩展。
Picoco的外观和感觉低保真, 但包含一些通常在更复杂的设计工具中发现的功能。对于正在执行精益用户体验并需要使用较短的反馈周期进行快速迭代的设计人员而言, 它非常有效。

文章图片
Pidoco允许设计师在多个屏幕尺寸上查看其线框, 使其成为移动应用程序设计的理想工具。
格里菲
Gliffy是中保真线框图工具, 具有一些独特的功能, 可将其与Balsamiq和Mockups区分开。一种独特的功能是能够创建线流。 Gliffy具有内置的流程图和图表功能, 其中包括模板, 思维导图和业务流程建模。
像其他线框图工具一样, Gliffy提供了一个形状, 图标库, 并能够与Atlassian的Confluence, Slack, Basecamp, Trello和WordPress本地共享线框。
这是一个相对较新的UX线框设计工具, 但是, 它拥有大量的专业设计师用户, 他们正在寻求除静态线框之外的简单集成和功能。

文章图片
Gliffy提供了用于流程图, 思维导图和业务流程建模的模具, 使设计人员可以创建线流。 (G)
Wireframe.cc
Wireframe.cc是类似于Balsamiq的基本线框图工具。它具有简洁的界面, 没有太多分散注意力的工具栏和图标。与许多其他工具不同, 它允许你使用鼠标” 素描” 线框。
Wireframe.cc提供了一个模具库, 以及对对象的干净, 简单的处理。 Wireframe.cc在使用精益UX时提供的一个有用元素是每个线框页面的URL, 因此可以快速, 轻松地共享它以获取反馈。
由于纯粹专注于低保真线框, 因此没有内置的原型或交互性。

文章图片
Wireframe.cc是最适合精益UX的低保真简约线框图工具。
异想天开
异想天开的模拟图表工具(例如OmniGraffle和Visio)被称为线框的” Google文档” 。它不关注原型/模型, 因为它主要关注线框图和流程图, 使其成为产生线流的理想选择。
像Gliffy一样, Whimsical是中保真线框图工具, 并且包含大量可配置元素(按钮, 输入, 复选框等)的库。
对于远程设计团队来说, 同时在同一线框文档上进行无限协作是一个很棒的内置功能。

文章图片
Whimsical是一种中等保真度的线框设计工具, 其中包括流程图和团队协作。
Adobe XD
Adobe XD最近因其简单的界面, 与其他Adobe产品的紧密联系, 易用性以及内置功能(减少了对插件和扩展的依赖)而吸引了设计师的注意。
有两种在Adobe XD中构建线框的方法。它们可以使用线条和形状来构建以创建对象和元素, 也可以使用预制的UI套件(例如behance.net和XD资源)来构建。
Adobe XD的一项省时功能是能够创建” 主” 组件(在Sketch中称为” 符号” ), 该功能在进行更改时非常有用, 因为从主实例化的所有组件都将继承任何更改。
使用XD作为线框图工具的另一个优势是能够通过单击鼠标切换到原型制作模式。原型制作模式内置于XD中, 并且在后台运行, 因此设计人员在从线框过渡到原型时不会浪费时间。

文章图片
线框UI套件可用于在Adobe XD中创建高保真线框。
草图
Sketch是面向UX / UI设计师的流行设计工具, 它为矢量编辑, 原型设计和协作提供了一个平台, 并且拥有不断增长的包含数百个扩展其功能的插件的库。
Sketch中的线框图与Adobe XD相似, 它使用了工具包/模板和绘图工具。 Sketch广泛使用了Symbols, 这些Symbols是可重复使用的组件, 可以定义一次并多次使用(按钮等)。实例化符号还可以对” 主” 符号进行任何更改。这对于设计人员是有利的, 因为在整个线框图制作过程中经常需要进行许多更改。
Sketch允许设计人员创建高保真线框, 原型和模型。它不是基于云的应用程序, 潜在的缺点之一是它仅适用于macOS。

文章图片
Sketch是一个设计系统, 可生成高保真线框, 交互式原型和模型。它是仅在macOS上运行的软件应用程序。
UXPin
UXPin是一种顶级线框工具, 它支持交互状态, 逻辑和编程组件, 使设计人员能够编写条件交互, 变量和表达式的代码。
UXPin远远超出了线框图, 它主要致力于使用UI组件库, 符号, 矢量绘图工具以及共同编辑进行原型制作。
有Windows, macOS和云/浏览器版本。对于高保真线框, UXPin的工作原理类似于Sketch和Adobe XD。它不像Balsamiq那样拖放, 但是对于希望留在单一生态系统中的设计师来说, 确实可以将原型和模型提高到一个新的水平。

文章图片
UXPin是一种高保真线框工具, 能够添加编程功能。 (UXPin)
奇迹
Marvel是另一种流行的设计工具, 可简化线框设计和原型制作工作, 它为设计师提供了熟悉的拖放界面, 可用于创建低至高保真度的线框。
Marvel不需要任何附加组件或扩展, 因为包括所有资产。该平台完全基于云, 这使得与其他设计团队成员或客户的线框共享变得快捷, 容易。
设计师选择Marvel进行线框设计的原因之一是其与其他平台(例如Jira, Sketch, Confluence, Dropbox, Slack等)的集成。对于与开发人员, 远程设计团队和客户的协作, 此功能可以节省设计师很多时间。
漫威还拥有一款名为Pop的产品, 该产品可帮助将笔和纸的线框图转换为交互式iPhone和Android原型。 Pop允许设计师为自己的素描拍照, 并将其转换为交互式线框。

文章图片
由于其高保真的拖放功能以及与许多流行的协作工具的集成, Marvel是顶级的线框图工具。 (奇迹)
Axure RP
Axure RP已经存在了很长时间, 并且是创建静态线框(以及高度交互的原型)的绝佳工具。尽管它可以在Windows和macOS上运行, 但它不是基于云的。
可以使用其庞大的拖放组件库来完成线框图, 但是, Axure RP是一个复杂的工具, 远远超出了线框图的范围。利用Axure RP的程序设计功能, 设计人员可以创建具有与完整的应用程序相同的功能的高级原型。
考虑到Axure的高学习曲线, 仅将其用于静态线框是没有意义的。但是, 如果目标是生产高度抛光和实用的原型, 那么它将是产品设计师的理想工具。

文章图片
Axure RP是一种先进的线框图工具, 拥有创建模仿成熟应用程序功能的编程元素的能力。 (Axure)
顶级设计师最喜欢的线框工具我们联系了一些srcmini设计师, 以了解专业设计师使用的线框图工具以及原因。这就是他们不得不说的。
“ 我的最爱是Adobe XD和UXPin。我开始选择XD作为最爱, 因为它易于制作快速的线框和测试想法, 并且从那里我实际上可以在同一平台上开始设计甚至原型。” -迈克尔·克雷格
“ 我最喜欢的是Pop, 因为它是如此之快。无论如何, 我总是将线框画在纸上, 所以效果很好, 而且我不需要双重处理。我还发现, 对于整个” 不要爱上解决方案” 这件事来说, 这是一件好事, 因为它是如此清晰。 -尼古拉(Nicola Rushton)
“ 在设计工作中, 我几乎一直都在使用Axure。它是用于全面设计工作的高度低估的工具, 具有很高的复杂性” -Andi Omtvedt
“ 我实际上不再是线框本身, 因为我认为这些工具足够强大, 可以生成低保真度的原型, 因此几乎可以将初始线框与更好的视觉效果结合在一起。从今年1月开始, 我就采用了Framer X, 我很喜欢它。” -查理·威廉姆斯
摘要鉴于具备生产复杂原型的能力, 线框图仍然有意义吗？一些专业设计师会认为线框是过去的遗迹, 而其他一些设计师则坚定地捍卫了它们对设计过程的持续重要性。
如今, 有大量的线框工具可以简化设计过程。一些趋势继续纯粹地集中在线框图上, 即使趋势正在转向以线框图开始但又具有原型功能的混合产品, 并且在许多情况下还可以生成功能齐全的模型。
尽管它已经从低保真交付物演变成中保真交付物, 但Wireframing肯定不会消失。
【形式和功能–顶级线框工具指南】? ? ?
在srcmini设计博客上进一步阅读：