UI产品设计流程,一定要看哦!

小编:有很多童鞋不知道UI详细的产品设计流程到底是怎样的,今天这篇就很详细的讲述一个产品的诞生过程,从概念草图、线框图到原型稿,作者对于各类文档的优缺点以及编制原则都很明确的展示了各种技巧。

在本篇文章中,来自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等公司的视觉案例。

designmodo

文章来源:优设

译者:蒋灿

(0)

相关推荐

  • 产品设计的从0到1 | 深度解析产品是如何诞生的

    AV8D,又见面了,在此之前,和多位同行有过沟通,发现很多人反映自己的基础不太扎实,没有系统的知识体系支撑自己进阶.转岗.这让我产生了反思,所以这段时间梳理了一些关于交互设计师的知识架构,这也是我今年 ...

  • UI交互设计是什么【优就业】

    UI即User Interface(用户界面)的简称.UI设计分为实体UI和虚拟UI,互联网说的UI设计是虚拟UI,一般是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得 ...

  • PS改进IOS设计流程的30个窍门 (看了少犯错)

    设计是一个漫长和痛苦的过程,期间可以用点技巧来减少痛苦,30+ tips to improve your iOS design workflow (in Photoshop)一文总结30个实用的技巧可 ...

  • 简述实用的网页UI设计流程

    小编:新手或者初入职的小伙伴常常搞不清楚自己的工作范围.@yangxiaoou用他多年的工作简单的像我们介绍了一个非常实用的UI设计流程.让我们快速的了解了自己工作的上下游,以及整个项目的运转流程. ...

  • 8个设计师必看的免费UI图标设计资源站

    图标是我们日常APP及网页设计过程中必不可少的元素之一,通过小小的图标,可以快速方便的实现视觉引导和功能划分.在创作时,我们需要寻找各种各样的图标来满足自己的设计需求,非常浪费时间和精力.今天,小编给 ...

  • UI进阶产品设计之用户体验地图

    用户体验地图可以快速的帮助设计师有效的开发理清思路,清晰地看到每个环节对应的设计点,从而可以更高效的产出.那么要如何有效的制作用户体验地图呢?设计师(宛苏)将带小伙伴们清晰的了解用户地图的制作过程. ...

  • 国内知名UED团队的设计流程!

    @diff_:这个设计流程,更适合"对设计有要求的创业公司",因为,它既包含大公司的规范化.核心设计过程,同时,又能适应小团队的快速作战.这个流程,虽然有9步,但其实不复杂,在我们 ...

  • Apple Watch平台认知与产品设计

    时至今日,Apple Watch已然高调进入我们的视野,却仍未正式进入我们的世界,绝大多数人的信息来源仍限于Apple官方的介绍.大家有期许,有探索,也有失望.持负面态度者的普遍看法是,"这 ...

  • 从C端到B端,我的产品设计之路

    记得当年我面试Lenovo的UX设计岗时,面试官问我C端和B端的区别是什么.有什么设计差异,这个问题对于当时只做过C端的我来说,简直是一脸懵,由于脑子里对B端的概念还不太明确,所以回答的也不全面 不精 ...