header_v1.7.40

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

95天前发布

原创文章 / 多领域 / 教程
hindydesign 原创,如需商业用途或转载请与hindydesign联系,谢谢配合。

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

前言

本文是 UI 设计进阶系列的第 6-2 篇,系列目录:www.zcool.com.cn/article/ZNjI0MDI4.html

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


原型介绍

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

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

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

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

  • 构建起来容易、成本低

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

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

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


原型的分类

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

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

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

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

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

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

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

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

另外,还有:

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

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


纸面原型

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


线框图

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

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


可交互原型

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

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


原型设计工具的选择

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

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

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

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

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

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

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

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

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

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

追求速度可以用:

  • Marvel

  • InVision

  • Principle

  • 墨刀

追求保真度可以用:

  • Origami

  • Framer

  • InVision

  • Webflow


原型测试

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

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

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

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


UI 设计进阶系列目录www.zcool.com.cn/article/ZNjI0MDI4.html


作者:Hindy

个人主页:hindydesign.com

转载请私信授权,未经允许请勿转载,感谢您对作者版权的尊重。

4

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功