通常大家都会认为设计师是一群关注细节的人,但事实上,设计师不仅要关注细节,还需要考虑整体,就象画画时一样,你需要时不时地从细节中抽身出来,退后几步眯起眼睛看看整个画面的样子。
那么对于从事产品的设计师来说,在进入具体内容之前(不管是视觉、交互还是功能),最好能对整个产品的概况有所把握。那么,我们用什么方式来得到产品的整体印象呢?
在以往的项目中,我有时会根据用户操作的路径给自己画一张流程图,其中包括用户从哪儿进入,从哪儿离开,中间如何走到各个功能上去⋯⋯看上去与程序员画的流程图很相似,但我的关注点不是底层的逻辑,而是用户与界面的交互过程。
如果把产品比喻成一座城市的话,这幅图对我而言就像是城市的导游图。它首先能帮助我理解这个城市里有什么建筑,也就是这个产品的主要功能是什么;其 次,它能模拟人们在城市里行走的主要路径,即理想状态下用户会如何使用这个产品;最后,它还能告诉我银行大厦和保险大厦的关系,即产品功能之间的关系。
为什么要画?
从这幅图能产生的三种作用(理解产品目的、模拟使用路径、了解功能关系)来讲,团队里的每一个人都需要它。从工作范围来讲,我们更需要的是第二种。 作为界面设计师(我知道,大多数公司分工都不是很明确,所以只好模糊地称为UI),我们应该掌握用户在城市里通常是怎么行动的,他们有可能在什么地方迷 路,有没有绕远路,有没有不通车的路⋯⋯以及如何标识两条不同的路,十字路口要怎么标识方向,不同的建筑物要如何区别⋯⋯等等,因为在屏幕上,用户所有的 方向全部来自你的指引——不象在现实生活中,没有指南针还可以看星星什么的——所以设计师的一点点疏漏,就会让用户搞不清楚身在何处。
由于关注点不一样,所以我们不能依赖程序员或产品经理的地图。如果你需要从银行开具财产证明去国外留学,那么程序员关心的是你的钱够不够申请留学,产品经理则关心的是银行要用什么方法来评估你的财产,而我们则要关心你有没有带齐所有的资料,免得你跑冤枉路。
怎么画?
前面已经提到了一点。首先我会确定用户从哪儿进入,从哪儿离开,这通常就是这个产品本身,比如某个系统的登录界面和退出界面。然后遵循从整体到局部 的基本原则,在两者之间把最大的功能模块都放进去,就像把城市划成CBD和金融街一样。接着集中精力攻克其中一个功能(比如银行大厦),如果它的子功能与 其它街区有联系的话,先连接过去,但暂不考虑它们之间的关系(比如银行开具财产证明,然后你才可以去办出国手续,那就先划一条线到海关去)。功能模块内部 的交互过程都完成以后,再来考虑模块之间的交互关系。经过这样一点点地增加模块和线条,最后这幅图就会从刚开始的两个点,变成一幅规模宏大的地图。这,就 是我们想要的全局。
用什么画?
最好的工具?当然是纸和笔。相信我,不管你用多么简单的软件,都不可避免地会涉及到操作的问题。这个方块怎样才能往右移一点点?怎样才能画一个箭 头?在考虑这些的时候,你就已经被这些手工的问题分掉了一些注意力。哪怕你是使用这个软件的高手,你肯定也有鼠标选不中某条细线的时候,更何况你的电脑时 不时的还要休息一会儿。如果你曾经做过视觉设计,你更是下意识地想把某条线和某个方块对齐,或摆成一条线什么的(亲身经历啊!)。总之,只要你面对屏幕, 总会有这样那样的干扰来让你无法集中注意力去考虑眼下这件事,所以最好的办法就是:远离电脑。
纸和笔可以用来画一些简单的流程,如果你的城市很大,那么我建议你准备以下几样东西:整面墙的大白板、即时贴、白板笔、相机。
你知道要怎么做了?白板就是整个产品,黄色的即时贴是每一个最小单位的功能。首先在白板上画几个框,也就是最重要的功能模块,比如注册或管理,有几 个主要功能模块就画几个。接着在左右两端确定入口和出口。在即时贴上写子功能模块的名字,贴到相应的主模块中。然后开始工作,比如注册成功进入管理模块, 就用白板笔把它们连起来,在线上标明它们之间的关系。尽量把所有相关的即时贴都连接起来,检查是否有重复的、不通畅的(有进没出的)、多余的线,如果即时 贴的位置不合适的可以扯下来重新贴。如果可能的话,不同的功能区使用不同颜色的白板笔,这样能看得更清楚。
最后用相机把整个白板拍下来。那张照片,就是我们的全局图。如果你需要向领导汇报或与同事分享,这个时候可以回到电脑旁边,根据照片来做一幅图,你想要多规整多漂亮都可以。这样的话,我们才能做到思考的时候不被分心,创作的时候也可以全神贯注。
一些建议
不要因为时间来不及就偷懒,事前准备充分以免事后补救,其实后一种情况会让你花掉更多的时间和浪费更多的工作。
不要因为画不好而放弃,如果你不试,你永远不知道自己能做到多好。
不要考虑太多细节和逻辑关系,在画地图期间,我们关注的是线路而不是功能或需求。