涨姿势！超细致的产品设计流程技巧全科普

编者按：今天的好文节选自《用户体验设计与流程文档编制指南》，这节给大家科普一个产品的诞生过程，从概念草图、线框图到原型稿，作者都有实实在在的干货与技巧分享，特别是对于各类文档的优缺点以及编制原则都很明晰，产品设计师们都可以进来涨下姿势咯。

在本篇文章中，来自UXPin —— 用户体验设计应用的Chris Bank将为大家详细讲解在产品初步成型阶段需要打造的各种草图、原型以及设计规格。更多在产品设计阶段提升用户体验的小技巧请见我们的《用户体验设计与流程文档编制指南》。这一领域的专家和专业公司包括Aarron Walter、Ian McAllister、Vurb、MailChimp和Apple等。

从简单的拉链到Dropbox for iOS等移动应用，每件产品在产生之前都要经历“纸上”（或屏幕上）的阶段。这一设计阶段是所有产品必不可少的阶段——不论是合格的产品还是达不到标准的产品。

产品设计的定义固然简单，但在当今社会，要做出一件完美的产品需要无穷无尽的反复思考：产品是否能帮助用户？是否简单易用？首次使用后能否给用户带来熟悉感？有鉴于此，产品设计师肩负着重大责任，其产品需要让用户觉得简单、有用。所谓产品，实际上是传递难忘体验的媒介。

虽然表面上看这一过程可能纷杂琐碎，好像是一堆纸片和乱七八糟的屏幕画面堆积在一起，但你心里明白最后终会有方法从杂乱中找到蹊径。在本篇文章中，我们将为大家讲解各种不同的文档编制方法，以便大家在将创意融入设计时使用。下面我将为大家介绍概念草图绘画和线框图绘制、低保真和高保真原型，以及产品设计规格。

反复进行草图和线框图绘制

草图大概算得上是用户体验设计过程中最为常见的文档类型了。正如《用户体验设计与流程文档编制指南》中所详细探讨的一样，这一项工作的一般流程是绘制模型，然后进行可用性测试（既包括内部测试也包括面向特选测试人员的测试），再然后是反反复复的更换迭代。

不过你使用何种工具绘制草图，最重要的是牢记用户的特性。在绘制草图时，应当参考分析阶段时设定的用户特性，时刻以用户为重。下面，我们来看看粗创草图和线框图的绘制。

1. 粗创草图绘制

铅笔、钢笔、马克笔、蜡笔、纸张应用，甚至经典的Microsoft油漆刷等等等等，但凡是能在平面上留下痕迹的东西都可以拿来画草图。

Laura Busche（Smashing Magazine设计写手）曾指出，手绘草图具有延展记忆、帮助集中注意力和提高灵活性这几项独特的好处。手绘同时也是视觉呈现理念的最快方法，因此其应作为你的常用备选方法。

产品设计公司ZURB非常重视通过纸绘草图来呈现产品的功能和流程。他们偏好于使用记号笔，因为其能够限制细节的程度，让草图更加侧重于表现整体概念。对于他们来说，纸绘更快、更专注并且更灵活，但可扩展性和交互性不太强，因为你无法使用模板，而且也无法把不同的草图相互联系起来。

2. 线框图绘制

数字线框图绘制软件放眼皆是，但其中只有少数几个应用值得大家仔细体验，例如UXPin、Balsamiq、Axure和Proto.io等。如果你选择用纸，那么可以把纸张分成不同的部分绘制线框图，然后在需要的地方添加网格线和图框。线框图绘制应当是一个产品的骨架。有关这方面的建议和练习，请看《线框图绘制指南》。

Anthony Tseng，UX Movement的总编辑认为，如果你的当前的目标是更好的反映出产品的实际形式和功能，以便说服相关人员，则可以提高设计的保真度。高保真线框图虽然更耗费时间而且在快速收获反馈方面不太理想，但是更易于明确展现界面，让相关人员和用户能够明晰哪些内容是表单，哪些是按钮。

详细模型

根据你流程的不同，详细模型既可以是高保真的线框图，也可以是概念模型的升级版。

有些公司会完全跳过线框图绘制这一阶段，直接打造低保真度的概念模型，然后逐步增加保真度最后达到详细模型程度。也有的公司会选择循序渐进的途径，使用线框图作为模型的骨架。有时你可能会听到有人混用“线框图”和“模型”这两个词，但其实这两者是完全不同的两个文档类型。线框图的作用是展现出结构，随后通过注入材质和细节演变成模型作为应用或网站的原型。

两者具体的区别可直接右戳学习！《涨姿势！聊聊线框图、原型和视觉稿的区别》

根据UXPin CEO Marcin Treder介绍，细节程度较高的模型通常就是设计初稿乃至实际的视觉设计。一个精心打造的模型可以达到贴近真实的程度，从而刺激人们关注项目的视觉面。线框图中可能包含各种形状、线条，也可能有一些细节（如果是高保真图），但详细模型却专注于展现具体的字体、颜色方案和整体的最终外观。

Treehouse的设计师Nick Pettit曾反复强调：详细模型可以作为设计沟通的手段，但还不能就直接丢入开发阶段。他解释道：考虑到响应式设计和灵活方法的出现，花费几个小时时间做出详细模型作为产品规格然后丢给开发人员的方法已经不再合适。另外，低保真度的线框图更加方便迭代更新，因为其实现简单，而且制作原型也能够更加轻松的联系不同功能。

原型制作原则

如果说线框图注重的是结构，那么原型就更加注重体验。线框图或模型可以使用Invision或UXPin等应用相互联系从而创建可以实际点击的原型。

如上图所示，保真度和工作流有各种不同的维度。HubSpot的前任用户体验总监Josh Porter喜欢从草图绘制直接过渡到原型创作阶段（跳过线框图）这一比较简单的工作流程。对于他来说，草图耗时少，但能够回答“页面上呈现哪些物体、这些物体能执行哪些操作”等功能性的问题，而建立原型则需要投入更多精力。这并不意味着线框图和模型没有用，相反，其说明可以将时间从开发静态资源上转移到交互资源上。

原型制作的真正强项在于其能够让团队把思考的中心从交付作品转移到实用性上来。正如《最小化可用产品指南》中所述，很多成功的公司甚至把原型作为第一代产品直接发布。

低保真原型

人们在谈到快速原型制作和精简用户体验时，通常指的就是低保真原型。低保真原型重视对交互的精炼而不是视觉或技术执行的细节，因此有助于避免视野受到局限。低保真原型可以使用很多在线应用（Balsamiq、Invision或UXPin）制作，也可以用老办法：HTML编程。

著名企业家Andrew Chen认为，低保真原型是实现客户驱动型设计的最佳方法之一。使用在线应用创作的低保真原型尽管可能外观不怎么样，但相比经过编程的或高保真度的原型，其能帮助你进行快速迭代更新，保证你所推出的产品就是自己想要的产品（不考虑迭代）。对此，他总结出了低保真原型的4项好处，具体如下：

反馈效果更佳也更真实

对于图片精美的原型，人们可能会将注意力更多集中在视觉效果而不是价值主张上。他们可能会觉得难以深入你的理念，因为华丽的效果让他们望而却步。

适合于A/B测试

在能够对各种细节变化进行尝试和优化的UI层面，其多样性推动了A/B测试的兴盛。因此，UI的10-20种粗犷变化比2-3种完美到像素级别的变化更具透彻性。

犯错误的代价更低

低保真原型所涉及的资源较少，团队对于改变不会太较真，因此使用低保真原型作为工作核心相对更为容易。

专注于流程而不是页面

页面的外观不是关键，真正重要的是页面的前后联系。低保真原型就像一个沙箱环境，在这里你可以画出并联系大量的小页面、体验交互以及尝试其他让自己感到自然舒适的想法。

如果你要选择低保真原型，根据过往经验，建议你将精力集中到占比为20%但实际使用时间为80%的功能上。

定义、设计、再定义

正如我们前面所展示，产品设计的定义源自于多项技术技巧，这些技术技巧能帮助你把创意转变成体验。无论你选择低保真还是高保真，草图、线框图和原型制作的根本目标都是交付出优秀的产品理念，而不是简单的产品。

有关其他将文档编制融入设计流程的好想法，请下载《用户体验设计与流程文档编制指南》。我们的专家意见来自Aarron Walter、Laura Klein、Ian McAllister等等等等。另外，该指南中还囊括了来自Vurb、MailChimp、Apple、Google等公司的视觉案例。

交互设计高级教程合集！

总监级设计师的信息架构经验分享！
《从优秀到卓越！交互设计师怎样理解信息架构？》

设计流程！进大公司的敲门砖！
《超多干货！国内知名UED团队的设计流程是怎样的？》

交互设计的好问题与好答案：
《对话资深设计师YOYO！交互设计往前走的问与答》

原文地址：designmodo
译者：蒋灿

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量83万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：