草图/线框/原型/样机四种产出图横向大比对,UXD教你如何正确地使用表达方式
交互设计产出过程中,我们经常会听到一些专业术语Sketch草图,Wireframe线框,Prototype原型和Mockup样机。但是大家总是分不清这些图纸之间用途的区别。
今天UXD就带同学们横向对比这四种常见的交互设计产出产物,探讨他们的使用时间、使用方式以及注意事项,从此见到他们再也不会傻傻分不清。
Sketch是写在纸上或数字工具中的手绘图,是用于提供概念的基本表示方法。
When什么时候使用:
在设计过程的概念化和初始可视化阶段,Sketch可能会非常有用。一张图片胜过千言万语。人们是视觉学习者,视觉可以比单词文字更好地解释思想。
How如何使用:
可以使用笔和纸或几乎任何设计工具来创建Sketch。
Sketch时要记住的事情:
·不要尝试细节化Sketch。可以绘制粗略的Sketch,只要它们可以帮助你传达主要思想。
·使用模具可以更快地绘制,这点对于手绘能力较差的同学非常有帮助。
·练习Crazy Eights方法,Crazy Eights是Google Ventures Design的sprint技术,可让产品团队在短时间内可视化很多创意。该过程要求每个团队成员在五分钟内勾勒出八个想法。
·为Sketch拍照。这有三个原因:首先,图像可以用作项目的文档。其次,你将可以使用这些照片作为你的投资组合。第三,Marvel POP之类的工具可以帮助你将笔和纸的想法转变为交互式iPhone或Android原型。
Wireframe是低保真度的设计工件,仅表示UI的基本元素(Wireframe看起来就像是用线设计的,这就是名称的来历)。Wireframe充当设计的骨架,它们描绘了基本的UI,并成为产品的蓝图。
When什么时候使用:
Wireframe在产品设计过程的初始阶段最为相关。Wireframe可用于:
·评估单个页面/屏幕的结构;
·了解相关屏幕/页面如何协同工作(从用户角度);
·准备详细的项目需求文档(Wireframe可以作为很好的参考)。
How如何使用:
类似于Sketch,可以使用笔和纸创建Wireframe。在数字工具方面,Balsamiq也许是最有用的工具。
制作Wireframe时要记住的事情:
·不要给Wireframe添加太多细节。Wireframe是产品的准系统结构。Wireframe的目的是评估设计,而不是抛光细节。因此,仅添加将在页面/屏幕上显示的基本元素。
·使用颜色引起注意。Wireframe传统上是用黑白创建的,但是可以使用有限数量的颜色(例如,一种或两种对比色)来创建视觉强调。
·添加简短的注释。如果你打算向团队展示Wireframe,请添加注释。注释有助于创建上下文并快速交付关键思想。
·从静态Wireframe创建可单击的Wireframe。可点击的Wireframe可以帮助其他人更好地理解你的想法。
Prototype是应用程序/网页的工作模型。Prototype允许设计人员模拟用户交互。与上面提到的所有其他工件不同,Prototype始终是交互式的。Prototype的目的是模拟用户与界面之间的交互。
When什么时候使用:
在设计过程的功能设计阶段,Prototype可能会很有帮助。Prototype可以帮助你:
·评估用户旅程。Prototype将帮助产品团队确定交互流程中的潜在问题。
·测试可用性。通过与用户一起测试设计,你可以在编码之前建立信心。