草图/线框/原型/样机四种产出图横向大比对,UXD教你如何正确地使用表达方式

交互设计产出过程中,我们经常会听到一些专业术语Sketch草图,Wireframe线框,Prototype原型和Mockup样机。但是大家总是分不清这些图纸之间用途的区别。

今天UXD就带同学们横向对比这四种常见的交互设计产出产物,探讨他们的使用时间、使用方式以及注意事项,从此见到他们再也不会傻傻分不清。

01
Sketch

Sketch是写在纸上或数字工具中的手绘图,是用于提供概念的基本表示方法。

Paper sketches. Image by Behance

When什么时候使用:

在设计过程的概念化和初始可视化阶段,Sketch可能会非常有用。一张图片胜过千言万语。人们是视觉学习者,视觉可以比单词文字更好地解释思想。

How如何使用:

可以使用笔和纸或几乎任何设计工具来创建Sketch。

Sketch时要记住的事情:

·不要尝试细节化Sketch。可以绘制粗略的Sketch,只要它们可以帮助你传达主要思想。

·使用模具可以更快地绘制,这点对于手绘能力较差的同学非常有帮助。

Stencils. Image by Amazon

·练习Crazy Eights方法,Crazy Eights是Google Ventures Design的sprint技术,可让产品团队在短时间内可视化很多创意。该过程要求每个团队成员在五分钟内勾勒出八个想法。

Crazy eights. Image by GV

·为Sketch拍照。这有三个原因:首先,图像可以用作项目的文档。其次,你将可以使用这些照片作为你的投资组合。第三,Marvel POP之类的工具可以帮助你将笔和纸的想法转变为交互式iPhone或Android原型。

Its possible to turn any sketch or image into an interactive prototype. Image by Marvel


02
Wireframe

Wireframe是低保真度的设计工件,仅表示UI的基本元素(Wireframe看起来就像是用线设计的,这就是名称的来历)。Wireframe充当设计的骨架,它们描绘了基本的UI,并成为产品的蓝图。

Wireframes for various types of apps. Image by Balsamiq

When什么时候使用:

Wireframe在产品设计过程的初始阶段最为相关。Wireframe可用于:

·评估单个页面/屏幕的结构;

·了解相关屏幕/页面如何协同工作(从用户角度);

·准备详细的项目需求文档(Wireframe可以作为很好的参考)。

How如何使用:

类似于Sketch,可以使用笔和纸创建Wireframe。在数字工具方面,Balsamiq也许是最有用的工具。

制作Wireframe时要记住的事情:

·不要给Wireframe添加太多细节。Wireframe是产品的准系统结构。Wireframe的目的是评估设计,而不是抛光细节。因此,仅添加将在页面/屏幕上显示的基本元素。

·使用颜色引起注意。Wireframe传统上是用黑白创建的,但是可以使用有限数量的颜色(例如,一种或两种对比色)来创建视觉强调。

·添加简短的注释。如果你打算向团队展示Wireframe,请添加注释。注释有助于创建上下文并快速交付关键思想。

Annotated wireframes. Image by Chaymae Lougmani.

·从静态Wireframe创建可单击的Wireframe。可点击的Wireframe可以帮助其他人更好地理解你的想法。

03
Prototype

Prototype是应用程序/网页的工作模型。Prototype允许设计人员模拟用户交互。与上面提到的所有其他工件不同,Prototype始终是交互式的。Prototype的目的是模拟用户与界面之间的交互。

Prototype created in Adobe XD. Image by Adobe

When什么时候使用:

在设计过程的功能设计阶段,Prototype可能会很有帮助。Prototype可以帮助你:

·评估用户旅程。Prototype将帮助产品团队确定交互流程中的潜在问题。

·测试可用性。通过与用户一起测试设计,你可以在编码之前建立信心。

How如何使用:

Figma可以帮助你为Web,移动,智能手表甚至语音体验等各种界面创建Prototype。

(0)

相关推荐

  • 素描不“素”

    只要学过两天画的人,都会知道"素描"这个词.有人说它是"一切造型艺术的基础",也有人这样说,"画中国画学素描是用西洋画改造中国画",&quo ...

  • 草图、线框图、高保真图和原型图都是什么?

    如果您从事设计工作,那么通常会听到草图(Sketch).线框(Wireframe).模型(Mockup)和原型(Prototype). 许多设计师互换使用这些术语.因为他们是相关的,但是其实它们是不同 ...

  • 草图生成UI组件

    今天介绍一款叫felipe的sketch插件 用于草图生成UI Turn Wireframes to UI https://www.arielverber.com/felipe/ def Wirefr ...

  • 技巧 | 如何将图片导入CATIA作为参考

    将图片导入CATIA中,作为描图或者草图绘制的参考,可以大幅提高设计的效率. 本文简单介绍一下实现这一目标的方法! 首先,切换到"外形--sketch Tracer"模块. 然后选 ...

  • 降水的四种类型图

    降水的四种类型图

  • 股票如何有效做T?日内做T想做好,就熟记这四种T图!

    T的分类根据不同的角度,可以有不同的划分,根据买入卖出的先后顺序,分为正T和负T,根据风险收益程度,分为趋势T和波动T. 正T和负T 正T:先低吸后高抛,日内杀了一个低点出来,认为该股不会继续下跌,因 ...

  • 四种分时图全解 开盘如何抓牛股

    一.突破前高 突破前高,是指股价在上升中途中超过前期高点的走势.分时图突破本波行情中的高点和突破前期行情中的高点. 注意: 1.在超过前期波峰的高点时,第一.第二次的突破前高时,可以放心做多.在第三次 ...

  • 科创板收益:四种公募基金的横向对比

    对于持有基金的机构投资者如何参与科创板,本文共梳理了4种公募基金:FOF基金.战略配售基金.科创板打新基金及普通基金参与科创板的方式和收益分析对比. 一.科创板发行定价新规 网上新股申购的主要参与者为 ...

  • 曾国藩:人有四种福相,两大凶德!

    第一福相:端庄厚重. 端庄厚重,就是说一个人气度沉稳,不轻佻:做事扎实,不浮躁.厚重的人,说话慢,办事稳,思虑周全,眼光长远,让人安心,让人放心. 第二福相:谦卑含容. 山外有人,天外有天.一个人必须 ...

  • 最大的非洲象可达13吨多,但曾有四种大象都更大,都在我国存在过

    陆地上最大的动物是大象,每当我们看到这种庞然大物,都觉得非常震撼,心想一种动物怎么可以长得这么巨大呢? 如今世界上的大象主要分为两种,分别是亚洲象和非洲象,亚洲象里面又包括印度象,苏门答腊象.斯里兰卡 ...

  • 【鬼谷子】人有四种福相,两大凶德!

    育英教育 08-05 阅读 464 关注 生活中,每个人都想成为一个有福气的人.有福之人,必有福相.这几种福相,你有吗? 1 端庄厚重是贵相 做人当如山,即使一言不发,也能让人感受到一种无形的力量,这 ...

  • 联合训练要强化四种理念 − 国防 − 理论大视野 ...

    联合训练焦点是"联"与"合",是参训力量训练成果异质集成.凝练升华的过程,也是彼此间作战要素.作战单元.作战系统有机反应.扩容增值的过程.联合训练的这一特质,要 ...

  • 二十四种杂粮:功效大揭秘!受用一生…

    健康饮食不能长期只吃精粮, 要适当搭配杂粮食用, 不同的杂粮药性不一样, 有着不同的滋补作用, 许多人都不知道什么样的体质该吃哪种杂粮. 那么,这篇文章一定对你有用! 1.小米 小米能益肾和胃.除热补 ...