GUI开发:为什么一张逼真的UI设计效果图是必需的(为什么只有设计草图是不够的)

在前端GUI开发的早期,无论是做新的产品,还是在原有产品基础上增添新的界面,开发人员都需要一张样图:对于界面设计,文字描述总是苍白而又容易引起误解的;因此,我们需要一张图来记录设计的结果,从而在开发过程中有章可循。

这样的界面样图,可以是一张逼真的设计效果图(顾名思义,有配色、有图标,看上去就跟最终产品的样子差不多,一般用Photoshop等图像处理软件生成),也可以是UI设计草图(直接用铅笔在白纸上绘画后扫描,或者用Balsamiq Mockups这样的软件进行绘制),还可以是用代码编写的界面原型的截图。以下是一个UI设计草图的例子:

UI设计草图,来源:http://www.balsamiq.com

在GUI开发的最初阶段,一张UI设计草图是必不可少的: 首先,设计草图在布局设计(layout)上的表现力很强,可以让项目成员对界面最终所能提供的功能达成基本的共识。 其次,设计草图的绘制和修改成本比较低,这对于UI设计早期,计划波动比较大的情况下,是非常适合的。

但是,如果仅有UI设计草图,开发人员拿着草图直接去做界面的开发,那是不够的 — 除了设计草图外,还需要设计效果图。虽然效果图的绘制和修改成本比较高,而拿着草图直接开发,也能开发出产品来;但是个人认为,这样的开发方式,带来的问题远远大于只绘制草图节省时间所带来的便利。

在UI开发过程中,需求和设计经常会发生变动,最后的成品往往和一开始的设计图相去甚远。这其中有对业务逻辑理解不到位的因素,也有对产品到底要做成什么样子心里没底的原因。在《乔布斯传》中提到过这样一个非常常见的故事:

在许多重大项目上,如《玩具总动员1》和苹果零售店,乔布斯都会在其接近尾声的时候叫停,要求作出重大修改。iPhone的设计过程也逃不开这个命运。其最初设计是将玻璃屏幕嵌入铝合金外壳。一个周一早晨,乔布斯走到艾弗跟前说:“我昨晚一夜没睡,因为我意识到就是不喜欢这个设计。”这是自第一台麦金塔问世后乔布斯最重要的产品,可他就是看不顺眼。艾弗瞬间意识到,乔布斯说的没错,于是很沮丧:“我记得自己当时感到非常尴尬,因为居然要等到他来发现这个问题。”

为什么很多情况下,设计一直在变 — 人只有当看到真实产品的时候,才知道自己真正想要的是什么。当最终的那个东西越来越清晰的时候,我们才越来越趋近于自己内心的那个答案。就像挑衣服一样,无论怎么观察模特照片或者比较尺码参数,都不如去店里亲身试穿一下。大脑的图形想象能力终究是有限的,某个设计也许“粗看上去很美”,一旦落到实处却往往并不那么如意。因此,一个以假乱真的UI效果图可以让开发者尽早纠正设计中的缺陷。

另一个UI设计效果图可以提供的东西是“联想” — 与设计草图相比,UI效果图可以更好地刺激大脑与曾经见过的UI界面之间建立联系,从而得到更多的设计思路。UI效果图中包含了比草图多得多的设计细节(配色、阴影、图标、精细的界面布局等),这一切都有利于大脑从以往的记忆中挖掘资源。

与设计草图相比,UI效果图还可以提供一个额外的好处:在开发过程中UI开发人员可以直接使用效果图中的图标和配色方案,减少对美工人员的等待和依赖,从而尽快地做出产品的第一个版本。

而设计草图所带来的问题是:当看到草图的时候,大脑对于界面产品的质量是用草图的标准来衡量的;就像当看到一个装修简陋的饭馆的时候,是用亲民廉价的饭馆标准来衡量饭菜质量一样。于是,经常发生的一幕上演了:当发布设计草图征询修改意见的时候,建议寥寥,大家都觉得还行;但当产品样子做出来之后,却收到一大堆的意见和建议,导致UI开发非常的被动。众所周知,设计层面的调整越早,成本就越低;调整时间越晚,成本就越高。

结语 从文字描述到设计草图,再到设计效果图,投入于设计的时间精力逐级增加,而获取的反馈精确度也越来越高,因设计导致的理解不一致也越来越小。吝于早期对设计效果图的投入往往就意味着平庸甚至糟糕的产品,因为在项目进展中,越迟发现的设计缺陷,就越意味着更多的妥协 — 毕竟,像乔布斯一样勇于在项目后期作重大修改的是不多的。