原型设计介绍,了解一下?

作者:Hindy

原文地址:uicircle.club/a/203

转载无限欢迎,但请注明「作者」和「原文地址」。感谢您对作者版权的尊重。


前言

本文是 UI 设计进阶系列的第 6-2 篇,系列目录:uicircle.club/a/128

通过本文,你将快速认识原型是什么,以及我们为什么要做原型。


原型介绍

UI 设计进阶 6-2:原型设计介绍了解一下?.002.jpeg

我们前面所做的工作放到双钻流程中可以归为 Discover、Define 和 Develop,而接下来要做的工作就是 Deliver 了,重在建造和测试(build and test)。

UI 设计进阶 6-2:原型设计介绍了解一下?.003.jpeg

我们知道做工业产品设计时会建立一系列的模型(model),来对设计进行一系列测试。而原型(prototype)则相当于数字产品的模型。你也可能会听到有人叫它 demo 版。

我们为什么要做原型?我在之前的文章中其实就有介绍,任何低保真原型都具有以下作用:

  • 在早期检测和修复主要问题

  • 构建起来容易、成本低

  • 让人更有迭代的动力和意愿

  • 得出的反馈侧重于高层次的概念而不是执行

  • 易于携带,展开测试活动


原型的分类

UI 设计进阶 6-2:原型设计介绍了解一下?.004.jpeg

按保真程度分,原型可以笼统地分为:

  • Low-fidelity Prototype(低保真原型)

  • High-fidelity Prototype(高保真原型)

在 GUI 设计中,高保真原型我这习惯将其归为视觉稿(即便不是最终版),而低保真原型又可以有以下这些形式:

  • Sketch(草图):快速表达概念。

  • Storyboard(故事板):视觉化表现产品如何工作。

  • Paper Prototype(纸面原型):将页面画在一张张纸上用作演示。

  • Wireframe(线框图):视觉化呈现一个个独立页面及交互逻辑。

另外,还有:

  • Interactive Prototype(可交互原型):可供用户操作的原型,它可以是低保真的,也可以是高保真的。

故事板和草图我们在前面的文章都已经介绍过了(请自行查阅)。本文稍微再介绍下纸面原型、线框图以及可交互原型。


纸面原型

纸面原型制作起来非常方便,基本就是画完草图,然后将画面裁剪成「模型」就行。相比草图,它的拟真度更高,对于交互的表达也更直观。

UI 设计进阶 6-2:原型设计介绍了解一下?.008.jpegUI 设计进阶 6-2:原型设计介绍了解一下?.009.jpeg


线框图

线框图则已经非常接近最终的视觉稿了。但相比视觉,线框图允许忽视美感,只注重功能和信息的呈现。而如果绘制人员拥有基础的设计能力,那么他很可能会在这步就重视页面的布局和版式。

在国内,线框图通常由产品经理或交互设计师绘制。视情况,可能还会将其做成流程图,写上交互逻辑和开发细节。(具体我就不具体介绍了,大家可以观察下图就能发现很多特点。)

UI 设计进阶 6-2:原型设计介绍了解一下?.011.jpegUI 设计进阶 6-2:原型设计介绍了解一下?.012.jpeg


可交互原型

顾名思义,可交互原型就是可让人进行互动操作的原型。一般还是先绘制静态页面,然后添加各种操作效果,最基础的比如滑动、跳转页面等。

值得提的一点是,我们经常看到的页面细节动效,并非「可交互原型」。它们更多是为了开发某一效果而做的演示。可交互原型更像是一个正常的产品,可供人使用。因此当我们做原型测试时,可交互原型是最好的选择。

UI 设计进阶 6-2:原型设计介绍了解一下?.014.jpeg


原型设计工具的选择

网上有很多原型设计工具,尤其是近些年新兴了许多,我们究竟如何选择适合我们的工具呢?

在做原型前,不妨先让我们回答下面几个问题:

  • 你为什么要做这次原型设计?

  • 你是在为什么平台做设计,手机、平板、桌面……?

  • 你要做什么类型的原型,需要什么程度的保真度?

  • 你有多少时间完成设计?

  • 你需要展示多少的产品体验?

明确上面的目标后,我们再去选择设计工具。

UI 设计进阶 6-2:原型设计介绍了解一下?.016.jpeg

设计咨询公司 Cooper 做了一个非常有意思的原型设计工具筛选器,大家可以上去看看都有哪些软件:www.cooper.com/prototyping-tools?

然而我们实际投入工作使用的可能就那么几款,下面是我个人推荐的:

UI 设计进阶 6-2:原型设计介绍了解一下?.017.jpeg

追求速度可以用:

  • Marvel

  • InVision

  • Principle

  • 墨刀

追求保真度可以用:

  • Origami

  • Framer

  • InVision

  • Webflow


原型测试

UI 设计进阶 6-2:原型设计介绍了解一下?.020.jpeg

在《Don’t make me think》(中译《点石成金》)一书中,令我印象最深的有两句话:

  • 测试一个用户也比不做测试好一倍!

  • 早测试一个用户,好过最后测试五十个用户!

虽然看着有点夸张,但用意就是告诫我们测试至关重要。在早期找三五人简单试用下,就能发现绝大多数问题。而更多关于用户测试的方法与细节,等到第 9 章再完整介绍罢,see ya~


免费获取完整 PPT,请关注公众号 uicircle,回复「原型设计」即可。

UI 设计进阶系列目录uicircle.club/a/128


如果你想提升设计能力,亦或充实自己的周末,欢迎加入我们的会员社区 👉点这报名


参考阅读

成为会员

UIcircle Member

Local Groups

UIcircle 会员

目前仅需 59 元即可加入我们

成为会员后,您可以

  • 加入所在城市的微信群
  • 免费参与各种线上活动、线下聚会
  • 其他会员福利,如周边礼物、软件折扣等

如有疑问,可以先 了解我们

加入我们