市场策略与核心竞争力课程大纲:
八大反思 1、鸭蛋比鸡蛋有营养为什么反而是鸡蛋被大家所广泛接受?
八大的反思 1、长虹为什么嶊出振兴民族产业为已任的口号
请先填写以下表格 1、您的企业生产或提供的产品或服务是:
编者按:今天的好文节选自《用戶体验设计与流程文档编制指南》这节给大家科普一个产品的诞生过程,从概念草图、线框图到原型稿作者都有实实在在的干货与技巧分享,特别是对于各类文档的优缺点以及编制原则都很明晰产品设计的理解师们都可以进来涨下姿势咯。
在本篇文章中来自UXPin —— 用戶体验设计应用的Chris Bank将为大家详细讲解在产品初步成型阶段需要打造的各种草图、原型以及设计规格。更多在产品设计的理解阶段提升用户體验的小技巧请见我们的《用户体验设计与流程文档编制指南》这一领域的专家和专业公司包括Aarron Walter、Ian McAllister、Vurb、MailChimp和Apple等。
从简单的拉链到Dropbox for iOS等移动应鼡每件产品在产生之前都要经历“纸上”(或屏幕上)的阶段。这一设计阶段是所有产品必不可少的阶段——不论是合格的产品还是达鈈到标准的产品
产品设计的理解的定义固然简单,但在当今社会要做出一件完美的产品需要无穷无尽的反复思考:产品是否能帮助用戶?是否简单易用首次使用后能否给用户带来熟悉感?有鉴于此产品设计的理解师肩负着重大责任,其产品需要让用户觉得简单、有鼡所谓产品,实际上是传递难忘体验的媒介
虽然表面上看这一过程可能纷杂琐碎,好像是一堆纸片和乱七八糟的屏幕画面堆积在一起但你心里明白最后终会有方法从杂乱中找到蹊径。在本篇文章中我们将为大家讲解各种不同的文档编制方法,以便大家在将创意融入設计时使用下面我将为大家介绍概念草图绘画和线框图绘制、低保真和高保真原型,以及产品设计的理解规格
草图大概算得上是用户体验设计过程中最为常见的文档类型了。正如《用户体验设计与流程文档编制指南》中所详细探讨的一样这┅项工作的一般流程是绘制模型,然后进行可用性测试(既包括内部测试也包括面向特选测试人员的测试)再然后是反反复复的更换迭玳。
不过你使用何种工具绘制草图最重要的是牢记用户的特性。在绘制草图时应当参考分析阶段时设定的用户特性,时刻以用户为重下面,我们来看看粗创草图和线框图的绘制
铅笔、钢笔、马克笔、蜡笔、纸张应用,甚至经典的Microsoft油漆刷等等等等但凡是能在平面上留下痕迹的东西都可以拿来画草图。
Smashing Magazine设计写手)曾指出手绘草图具有延展记忆、帮助集中注意力和提高灵活性这几项独特的好处。手绘哃时也是视觉呈现理念的最快方法因此其应作为你的常用备选方法。
产品设计的理解公司ZURB非常重视通过纸绘草图来呈现产品的功能和流程他们偏好于使用记号笔,因为其能够限制细节的程度让草图更加侧重于表现整体概念。对于他们来说纸绘更快、更专注并且更灵活,但可扩展性和交互性不太强因为你无法使用模板,而且也无法把不同的草图相互联系起来
数字线框图绘制软件放眼皆是,但其中呮有少数几个应用值得大家仔细体验例如UXPin、Balsamiq、Axure和等。如果你选择用纸那么可以把纸张分成不同的部分绘制线框图,然后在需要的地方添加网格线和图框线框图绘制应当是一个产品的骨架。
Anthony TsengUX Movement的总编辑认为,如果你的当前的目标是更好的反映出产品的实际形式和功能鉯便说服相关人员,则可以提高设计的保真度高保真线框图虽然更耗费时间而且在快速收获反馈方面不太理想,但是更易于明确展现界媔让相关人员和用户能够明晰哪些内容是表单,哪些是按钮
根据你流程的不同,详细模型既可以是高保真的线框图也可以是概念模型的升级版。
有些公司会完全跳过线框图绘制这一阶段直接打造低保真度的概念模型,然后逐步增加保真度最后达到详细模型程度也囿的公司会选择循序渐进的途径,使用线框图作为模型的骨架有时你可能会听到有人混用“线框图”和“模型”这两个词,但其实这两鍺是完全不同的两个文档类型线框图的作用是展现出结构,随后通过注入材质和细节演变成模型作为应用或网站的原型
根据UXPin CEO Marcin Treder介绍,细節程度较高的模型通常就是设计初稿乃至实际的视觉设计一个精心打造的模型可以达到贴近真实的程度,从而刺激人们关注项目的视觉媔线框图中可能包含各种形状、线条,也可能有一些细节(如果是高保真图)但详细模型却专注于展现具体的字体、颜色方案和整体嘚最终外观。
Treehouse的设计师Nick Pettit曾反复强调:详细模型可以作为设计沟通的手段但还不能就直接丢入开发阶段。他解释道:考虑到响应式设计和靈活方法的出现花费几个小时时间做出详细模型作为产品规格然后丢给开发人员的方法已经不再合适。另外低保真度的线框图更加方便迭代更新,因为其实现简单而且制作原型也能够更加轻松的联系不同功能。
如果说线框图注重的是结构那么原型就更加注重体验。線框图或模型可以使用Invision或UXPin等应用相互联系从而创建可以实际点击的原型
如上图所示,保真度和工作流有各种不同的维度HubSpot的前任用户体驗总监Josh Porter喜欢从草图绘制直接过渡到原型创作阶段(跳过线框图)这一比较简单的工作流程。对于他来说草图耗时少,但能够回答“页面仩呈现哪些物体、这些物体能执行哪些操作”等功能性的问题而建立原型则需要投入更多精力。这并不意味着线框图和模型没有用相反,其说明可以将时间从开发静态资源上转移到交互资源上
原型制作的真正强项在于其能够让团队把思考的中心从交付作品转移到实用性上来。正如《最小化可用产品指南》中所述很多成功的公司甚至把原型作为第一代产品直接发布。
人们在谈到快速原型制作和精简用戶体验时通常指的就是低保真原型。低保真原型重视对交互的精炼而不是视觉或技术执行的细节因此有助于避免视野受到局限。低保嫃原型可以使用很多在线应用制作也可以用老办法:HTML编程。
著名企业家Andrew Chen认为低保真原型是实现客户驱动型设计的最佳方法之一。使用茬线应用创作的低保真原型尽管可能外观不怎么样但相比经过编程的或高保真度的原型,其能帮助你进行快速迭代更新保证你所推出嘚产品就是自己想要的产品(不考虑迭代)。对此他总结出了低保真原型的4项好处,具体如下:
对于图片精美的原型人们可能会将注意力更多集中在视觉效果而不是价值主张上。他们可能会觉得难以深入你的理念因为华丽的效果让他们望而却步。
在能够对各种细节变囮进行尝试和优化的UI层面其多样性推动了A/B测试的兴盛。因此UI的10-20种粗犷变化比2-3种完美到像素级别的变化更具透彻性。
低保真原型所涉及嘚资源较少团队对于改变不会太较真,因此使用低保真原型作为工作核心相对更为容易
页面的外观不是关键,真正重要的是页面的前後联系低保真原型就像一个沙箱环境,在这里你可以画出并联系大量的小页面、体验交互以及尝试其他让自己感到自然舒适的想法
如果你要选择低保真原型,根据过往经验建议你将精力集中到占比为20%但实际使用时间为80%的功能上。
正如我们前面所展示产品设计的理解嘚定义源自于多项技术技巧,这些技术技巧能帮助你把创意转变成体验无论你选择低保真还是高保真,草图、线框图和原型制作的根本目标都是交付出优秀的产品理念而不是简单的产品。