1.1 原型设计与工具
原型设计以用户为中心的思想会贯穿整个产品,设计师们会利用专业的眼光和丰富的设计经验快速构建出一个产品原型,产品原型可以是低保真的原型,也就是产品前的一个简单框架,也可以是高保真的原型(也就是视觉效果和交换效果和最终产品效果几乎一样)。
1.1.1 什么是原型设计
信息化高速发展的今天,用户的需求激增,但是用户并不明白自己到底想要什么样的产品,产品原型能快速地挖掘出用户的需求,因此原型设计就显得至关重要。设计师们可以根据项目的大小、项目的类型、项目的工期,以及用户的需求来制作原型。
原型大致可以分为草图原型、低保真原型和高保真原型3类。
(1)草图原型:不少设计师们喜欢在白板上画个自造的草图,像流程图却非流程图,这样的做法有一个巨大的好处,可以帮助设计师在交付成果之前,与整个团队进行沟通,事先得到大家一定程度的反馈,预防在正式投入开发之后,才发现可以避免的问题。这样的原型适合于小项目、工期短、用户需求少的产品,它可以简单、快捷地描述出产品大概需求,记录瞬间的灵感。
(2)低保真原型:根据现存的界面或者系统,利用相关原型设计工具进行设计,包括系统的大致结构和基本交互效果,虽然它可以反映出用户需求的基本功能和使用效果,但是在美观度和效果的真实程度上还欠佳。低保真原型是与项目经理和开发人员进行有效沟通的方式,可以快速构建产品大致结构,提供基本交互效果。
(3)高保真原型:它是用于产品的演示(Demo)或者概念设计的展示,在视觉上与实际产品一样,在体验上也几乎接近真实产品。为了达到完整的效果,设计师需要在设计上花费很多精力,包括产品的构建,交互效果的真实设计。高保真原型可以是用来给客户进行演示,在视觉和体验上征服客户,最终赢得用户的信赖。
1.1.2 目前常用的原型设计工具
原型设计可以大大提高人们的工作效率并降低沟通成本。原型设计工具也在不断更新,本书要介绍的是Axure RP,这个工具在国内很多大型互联网公司正在使用与推广(如淘宝等),同时它也是产品经理必备的原型设计工具,因为它上手快、操作简单,满足产品经理的需求。
人们最初在白板上或者草纸上手绘,瞬间记录创意和灵感,虽然上手快,可以即时进行修改,但是难以表达软件的整体流程和交互效果。之后经历了用画图工具进行绘制,包括Windows的画图工具,Photoshop工具,Word画图、Excel画图或PPT画图,这些画图工具不利于表达交互效果和演示效果。后来又经历了Visio、Dreamweaver画原型,但是这两种工具功能相对比较复杂,操作难度大,在交互效果上也不是很到位。最后是现在的Axure等专业的原型设计工具。原型设计的方式是由客户的需求决定的,早期的软件设计简单,基本没有什么交互,设计师用手绘或者画图工具就可以表达出软件的原型。但是随着用户体验的增多,用户需求的变动,需要原型最真实地表达出软件的功能,增加交互效果,而要满足这种原型设计就需要专业的原型设计工具,Axure无疑是专业原型设计工具的最佳选择。
Axure既能做出低保真原型又能做出高保真原型,解决需求部门和技术部门的沟通问题,原型所表达出的效果和软件真实的功能在视觉上和体验上基本一样,不需要用文档描绘效果,就能达到最佳的沟通效果。
注意:在制作原型的时候,并不是只能使用一种原型设计方式,比如纸笔可以在初期记录创意和思路,Word适合于文字的详细表达,而PPT是演示讲解时最好的选择方式,Axure可以作为内部沟通的一种方式,也可以给用户演示产品。
1.1.3 Axure RP的设计目的
使用Axure进行原型设计的理由很简单,因为它够专业、够快、容易学。刚刚接触原型设计并选择Axure作为原型设计工具的设计者,大多数是因为工作安排的缘故,需要使用Axure进行产品设计。
笔者在最初接触Axure原型设计工具时,也是因为工作的需要。通过对Axure的学习,开始时基本会使用Axure RP制作出软件的基本结构,随着软件使用的深入,逐渐掌握各种交互效果,当完整地做出一款产品原型时,笔者发现Axure RP能让用户快速掌握它的使用,并且解决了人们工作上的难题,从此以后笔者便离不开Axure了。
1.1.4 Axure RP的设计优势
互联网行业产品经理的一项重要工作,就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作,就是结合批注、大量的说明以及流程图画框架图,将自己的产品所要表达的效果完整而准确地展示给用户界面(UI)、用户体验(UE)、程序工程师、市场人员,并通过会议沟通,反复修改,直至最终确认,最后开始后期编程、投入使用。
目前在市场上,进行产品原型设计的软件工具比较多,本书所介绍的Axure RP,是淘宝、当当等国内大型网络公司的团队在推广使用的原型设计软件。同时,此软件也在产品经理圈中广为流传。Axure RP能得到大家的认同和推广,是因为其通过简便的操作能达到逼真的产品最终效果,所以产品经理、交互设计师们都比较热衷于Axure RP。
1.1.5 Axure RP 8 的特色
Axure RP 8 版本强化了Axure的3个核心功能——原型、交互和协作,新版启动画面如图1.1所示。
1.用户界面
Axure RP 8 版本相对于老版本,用户界面有以下变化。
图1.1 新版启动画面
(1)合并了3个部分:部件交互和注释、部件属性和样式、页面属性。将“页面属性”从底部提至右侧,主要编辑区域变得更为开阔,如图1.2所示。
图1.2 Axure RP 8工作界面
(2)站点地图(Sitemap)改为页面(Pages)。
(3)部件管理(Widget Manager)改为提纲(Outline)。
(4)工具栏有所删减。
(5)Mac和PC版本使用相同的顶部工具栏。
2.默认控件
Axure RP 8 相对于老版本,默认控件有以下变化(见图1.3)。
(1)增加许多控件样式,包括不同形状的框和按钮等。
(2)增加“标记”控件,如“快照、便签、箭头”部件等。
(3)在文本字段和文本区域,选中焦点后将隐藏提示文本。
(4)优化了矩形形状。
图1.3 Axure RP 8默认控件
3.元件样式
Axure RP 8 相对于老版本,元件样式有以下变化(见图1.4)。
图1.4 元件样式
(1)可以在检视页面(页面右侧原“部件交互和注释”的位置)中添加、更新元件样式。
(2)所有样式均以新的默认样式为基准。
(3)样式下拉可显示预览。
4.编组
Axure RP 8 相对于老版本,编组有如下变化(见图1.5)。
图1.5 编组操作
(1)编组将在提纲(Outline)中列出。
(2)可以在整个编组上添加交互。
(3)可以在编组上做一些动作,比如隐藏编组、显示编组等。
5.钢笔工具和自定义形状
Axure RP 8 相对于老版本,钢笔工具和自定义形状有如下变化(见图1.6)。
图1.6 钢笔工具
(1)可以绘制自定义形状和图标。
(2)可以将形状部件转换为自定义形状。
(3)可以通过翻转、合并、减去、相交、排除来改变形状。
6.流程图
Axure RP 8 相对于老版本,流程图有如下变化。
(1)所有形状、图像和快照部件都有连接点。
(2)只有当使用连接工具或鼠标放在部件上时,连接点才是可见的。
(3)连接点更大,更容易选择。
7.操作
Axure RP 8 相对于老版本,操作有如下变化。
(1)可以进行旋转操作。
(2)形状、图像、热区、表单部件等都可以设置尺寸大小。
(3)设置尺寸大小时有锚点。
(4)设置自适应视图。
(5)事件(用于在小部件或页面上触发事件)。
(6)为移动行为设置了合理的边界,如图1.7所示。
图1.7 设置边界
8.新事件
Axure RP 8 相对于老版本,新事件有如下变化。
(1)加载事件(OnLoad)可用在所有部件上。
(2)旋转事件(OnRotate)可用在形状、图像、线、热区上。
(3)OnSelectedChange、OnSelected、 OnUnSelected等事件可用在形状、图像、线、热区、复选框、单选按钮、树状结构上。
(4)调整大小(OnResize)可用在动态面板上。
(5)调整项目大小(OnItemResize)可用在中继器上。
9.快照部件
Axure RP 8 相对于老版本,快照部件有如下变化(见图1.8)。
图1.8 页面快照元件
(1)可捕捉页面图像或控件主体图像。
(2)调整偏移量。
(3)在参考页面上可更换图像。