Shane Ketterman
Shane有建筑学背景, 信息技术, 客户体验, 和用户体验设计.
Shane有建筑学背景, 信息技术, 客户体验, 和用户体验设计.
1487年，列奥纳多·达·芬奇画了一幅名为“战车他是在米兰公爵卢多维科·斯福尔扎的资助下设计的. 虽然这台机器被故意设计得不能正常工作, 一群工程师在2010年重建了它. 达芬奇的 schematic 这是最早的基本线框的例子之一吗.
The term wireframe has been 使用了几十年早在它被网页设计界采用之前. 线框图最初用于计算机辅助设计(CAD)软件来说明一个对象的设计，而不需要细节. 结果是 blueprint 这看起来像是用电线做的，因此，我们最终得到了线框.
但是什么是 wireframe 在设计中，有一个的目的是什么?
数字设计中的线框是一种视觉指南或页面示意图，它被剥离了排版风格, colors, graphics, 互动元素, 表示设计过程中的一个特定点. 它的目的是展示描述功能的页面级布局思想, behavior, 内容的优先级.
设计师使用线框图将潜在的概念结构与网站或应用程序屏幕的视觉设计联系起来. 线框图有三种不同的类型:
线框图在数字设计中的演变是另一个UX工件和可交付物:线流. Wireflows 线框图和流程图的组合是两个工件吗 用户体验设计师 为了另一个目的而慢慢地合并成一个:说明和跟踪在一个产品(如web应用程序)中代表任务流的交互.
设计师在使用线框图时遇到的一个问题是传达用户的旅程. 虽然有更复杂的方式来显示用户旅程, 有一种趋势是将它们包括在线框图的简单性中. 一个有用的工具是 线框地图.
线框图将线框图与用户旅程(或用户流程)结合起来，使用线框图演示用户在产品中的旅程.
Designers 在决定使用哪个线框图工具时有很多选择. 新工具不断进入市场，所以很难跟上. 下面是一些优秀线框图工具的特点:
本指南中的一些工具更侧重于线框图, 而其他人则试图在线框图和原型之间取得平衡, 以及模型功能. 选择使用一种工具而不是另一种工具(或者同时使用几种工具)取决于设计师的偏好.
Balsamiq 是低保真度的, 简单易用的线框图工具，因其易于使用和标志性的“手绘”外观而受到青睐. 它附带了一组预先构建的模板，可以通过拖放编辑器快速轻松地使用. 设计师可以添加他们自己的资产和自定义布局.
当项目以全屏呈现模式或导出PDF时，可以通过链接模型来创建简单的点击体验，从而实现基本的原型设计.
Balsamiq提供桌面版本(Windows和Mac), 云服务, 或者作为Google Drive的插件, 融合, and JIRA.
Moqups 是否有另一种专注于线框图但也可以用于原型制作的创造性协作工具. 不像Balsamiq, 它纯粹是基于web的，旨在为web和移动应用程序制作线框.
Moqups和Balsamiq的主要区别在于线框的保真度. 而Balsamiq制作的是“手绘”外观, Moqups为包括iOS在内的移动应用程序和网页设计提供全彩色模板和工具包, Android, 和引导.
Moqups与Balsamiq在其他几个方面有所不同. 该软件允许有限对象编辑和页面管理, 赋予设计师定义“主”对象的能力, 在迭代过程中对线框图进行更改时，哪一种方法可以节省大量时间.
例如，设计人员创建一个 master 具有特定大小、形状和颜色的按钮对象. 此按钮在整个线框中被多次使用. Later, 在迭代过程中, 如果设计者需要改变按钮的颜色, 而不是改变每一个按钮对象, 他们可以改变一次, 所有的子按钮对象都会立即受到影响.
Pidoco 一个顶级的线框图工具是否专注于一些基本交互性的低保真交付. 也基于云计算的, 它使用可重用的组件，并与Balsamiq和Moqups区别开来，具有更强大的点击线框体验.
Pidoco对移动应用程序和网页设计很有帮助，因为它有内置的移动视图，所以设计师可以看到他们的应用程序页面在不同屏幕尺寸上的效果. 另一个内置功能是 出口和规格功能. 这可以帮助 designers 从线框到原型/模型，无需插件或扩展.
Picoco的外观和感觉都很低保真度，但它包含了一些在更复杂的设计工具中通常能找到的功能. 它非常适合做精益UX的设计师，他们需要用更短的反馈周期快速迭代.
Gliffy 是一个中等保真度的线框图工具，有一些独特的功能，区别于Balsamiq和Mockups. 一个独特的功能是能够创建线流. Gliffy具有内置的流程图和图表功能，包括模板, mind maps, 以及业务流程建模.
像其他线框图工具一样, Gliffy提供了一个形状库, icons, 以及本地共享线框图的能力 Atlassian的融合, Slack, Basecamp, Trello, and WordPress.
这是一个相对较新的UX线框设计工具, however, 它拥有庞大的专业设计师用户群，他们正在寻找简单的集成和超越静态线框的功能.
Wireframe.cc 是一个基本的线框图工具，很像Balsamiq. 它有一个干净的界面，没有很多分散注意力的工具栏和图标. 与许多其他工具不同，它允许您用鼠标“绘制”线框图.
Wireframe.Cc提供了一个模板库，以及干净、简单的对象处理. 线框是一个有用的元素.使用精益UX时，cc提供的, 是一个URL为每个线框页面，以便它可以共享反馈快速和容易.
它没有内置原型或交互性，因为它纯粹专注于低保真线框图.
它被称为线框图的“谷歌文档”， Whimsical 模拟绘图工具，如 OmniGraffle and Visio. 它不关注原型/模型, 因为它的主要焦点是线框图和流程图, 使其成为产生线流的绝佳候选.
像Gliffy, 异想天开是一个中等保真度的线框图工具，包括一个大的可配置元素库(按钮), inputs, 复选框, etc.).
对于远程设计团队来说，在同一时间对同一线框文档进行无限协作是一个很好的内置功能.
Adobe XD 最近因其简单的界面而引起了设计师的注意, 与其他Adobe产品的紧密联系, 易用性, 内置功能减少了对插件和扩展的依赖.
有两种方法可以在Adobe XD中构建线框. 它们可以使用线条和形状来创建对象和元素, 或者它们也可以使用预制的UI工具包来构建 behance.net and XD资源.
的一个省时功能 adobexd是 创建“主”组件的能力(称为草图中的符号), 哪些是有用的，当进行更改，因为所有组件实例化从主将继承任何更改.
使用XD作为线框图工具的另一个优点是可以通过点击鼠标切换到原型模式. 原型模式是内置在XD和工作在后台，所以 designers 从线框到原型不要浪费时间.
Sketch, UX/UI设计师的流行设计工具, 提供矢量编辑的平台, 原型设计, 和协作, 并且拥有不断增长的数百个插件库来扩展其功能.
线框图中 Sketch很像Adobe XD 使用套件/模板和绘图工具. 素描广泛使用 Symbols 哪些是可重用的组件，可以定义一次并使用多次(按钮等).). 实例化的符号也接受对“主”符号所做的任何更改. 这对设计师来说是有利的，因为在整个线框图过程中经常需要进行许多更改.
Sketch允许设计师创建高保真线框图、原型和模型. 它不是一个基于云的应用程序，一个潜在的缺点是它只能在macOS上运行.
UXPin 是支持交互状态的顶级线框工具吗, logic, 编程组件使设计师能够 code 条件交互、变量和表达式.
UXPin远远超出了线框图, 主要关注UI组件库的原型, symbols, 矢量绘图工具, 和co-editing.
有Windows、macOS和云/浏览器版本. 对于高保真线框图，UXPin的工作原理与Sketch和Adobe XD非常相似. 它不像Balsamiq那样拖放，但它确实将原型和模型提升到了一个新的水平 designers 希望保持在单一的生态系统中.
Marvel, 另一个流行的设计工具，方便线框图和原型, 为设计人员提供了一个熟悉的拖放界面，用于创建低保真度到高保真度的线框.
漫威不需要任何附加组件或扩展，因为所有资产都包括在内. 该平台是完全基于云的，这使得与其他设计团队成员或客户共享线框变得快速和容易.
设计师选择Marvel进行线框图的原因之一是它与Jira等其他平台的集成, Sketch, 融合, Dropbox, Slack, 还有很多其他的. 与开发人员协作, 远程设计团队, 和客户, 这个功能为设计师节省了很多时间.
漫威还有一个产品叫 Pop 它可以将笔和纸上的线框图草图转化为交互式iPhone和Android原型. Pop allows designers 给他们的草图拍照，然后把它们变成交互式线框.
Axure RP 已经存在很长时间了，是创建静态线框图(以及高度交互式原型)的好工具。. 它不是基于云的，但它可以在Windows和macOS上运行.
线框图可以使用其庞大的拖放组件库来完成, however, Axure RP是一个复杂的工具，远远超出了线框图. 使用Axure RP的编程功能, 设计人员可以创建具有反映完整工作应用程序功能的高级原型.
考虑到Axure的高学习曲线，将其单独用于静态线框图是没有意义的. However, 如果你的目标是制作出非常精致和实用的原型, 那它就会是一个完美的工具 产品设计师.
我们联系了一些人 Toptal设计师 找出专业设计师使用的线框图工具及其原因. 他们是这么说的.
“我最喜欢的是Adobe XD和UXPin. 我开始选择XD作为我的最爱，因为它很容易快速制作线框图和测试想法, 然后我就可以开始设计，甚至在同一个平台上制作原型.” - 迈克尔•克雷格
“我最喜欢的是Pop，因为它太快了. 反正我总是在纸上画线框图, 所以它工作得很好，我不需要双重处理任何事情. 我还发现它很适合“不要爱上解决方案”，因为它显然是低保真的.” - 尼古拉·拉什顿
“在我的设计工作中，我几乎一直在使用Axure. 它是一种被高度低估的综合设计工作工具，具有非常高的复杂性 安迪Omtvedt
“实际上我不再使用线框图本身了，因为我认为这些工具足够强大，可以制作出低保真度的原型, 所以几乎把最初的线框和更好的视觉效果结合起来. 我从今年1月开始使用Framer X，我很喜欢它.” - 查理•威廉姆斯
考虑到制作复杂原型的能力，线框图是否仍然相关? 一些专业设计师会认为线框图是过去的遗物, 而其他人则坚定地捍卫他们对设计过程的持续重要性.
今天有大量的线框图工具可以促进设计过程. 有些人继续专注于线框图, 虽然趋势是走向混合产品，从线框图开始，但也包括原型的能力, 并且在许多情况下产生功能齐全的模型.
虽然它已经从一个低保真交付到一个中保真或高保真, 线框图肯定不会消失.
用户体验线框是网页、产品或应用程序的表示形式，它显示了将存在的元素. 线框图通常是一种聚焦于内容的二维插图, behaviors, 和功能. 它们通常不包括样式、颜色或图形.
线框设计工具是设计师用来创建线框、原型和模型的工具. Typically, 该软件将包括预先构建的元素库, 也称为模板, 线框图工具, 或者可以使用拖放来构建线框布局的附加组件.
一个好的线框应该在二维布局中既有形式又有功能. 它将优先考虑内容和页面元素、产品或应用程序的预期行为. 好的线框图，就像蓝图一样，告诉你如何在没有不必要细节的情况下构建东西.
线框应该表示页面上组件之间的空间分配, 内容的表示形式, 功能可用, 以及预期行为. 它不需要颜色、图像或特殊的排版.
线框图是必要的，因为它们有助于将网站的信息架构与其视觉设计联系起来, 确定接口的预期功能, 并让设计师更好地理解如何在用户界面上显示各种组件.
世界级的文章，每周发一次.
世界级的文章，每周发一次.