本文作者：Angela

通常大家都会认为设计师是一群关注细节的人，但事实上，设计师不仅要关注细节，还需要考虑整体，就象画画时一样，你需要时不时地从细节中抽身出来，退后几步眯起眼睛看看整个画面的样子。

那么对于从事产品的设计师来说，在进入具体内容之前（不管是视觉、交互还是功能），最好能对整个产品的概况有所把握。那么，我们用什么方式来得到产品的整体印象呢？

在以往的项目中，我有时会根据用户操作的路径给自己画一张流程图，其中包括用户从哪儿进入，从哪儿离开，中间如何走到各个功能上去⋯⋯看上去与程序员画的流程图很相似，但我的关注点不是底层的逻辑，而是用户与界面的交互过程。

如果把产品比喻成一座城市的话，这幅图对我而言就像是城市的导游图。它首先能帮助我理解这个城市里有什么建筑，也就是这个产品的主要功能是什么；其次，它能模拟人们在城市里行走的主要路径，即理想状态下用户会如何使用这个产品；最后，它还能告诉我银行大厦和保险大厦的关系，即产品功能之间的关系。

为什么要画？

从这幅图能产生的三种作用（理解产品目的、模拟使用路径、了解功能关系）来讲，团队里的每一个人都需要它。从工作范围来讲，我们更需要的是第二种。作为界面设计师（我知道，大多数公司分工都不是很明确，所以只好模糊地称为UI），我们应该掌握用户在城市里通常是怎么行动的，他们有可能在什么地方迷路，有没有绕远路，有没有不通车的路⋯⋯以及如何标识两条不同的路，十字路口要怎么标识方向，不同的建筑物要如何区别⋯⋯等等，因为在屏幕上，用户所有的方向全部来自你的指引——不象在现实生活中，没有指南针还可以看星星什么的——所以设计师的一点点疏漏，就会让用户搞不清楚身在何处。

由于关注点不一样，所以我们不能依赖程序员或产品经理的地图。如果你需要从银行开具财产证明去国外留学，那么程序员关心的是你的钱够不够申请留学，产品经理则关心的是银行要用什么方法来评估你的财产，而我们则要关心你有没有带齐所有的资料，免得你跑冤枉路。

怎么画？

前面已经提到了一点。首先我会确定用户从哪儿进入，从哪儿离开，这通常就是这个产品本身，比如某个系统的登录界面和退出界面。然后遵循从整体到局部的基本原则，在两者之间把最大的功能模块都放进去，就像把城市划成CBD和金融街一样。接着集中精力攻克其中一个功能（比如银行大厦），如果它的子功能与其它街区有联系的话，先连接过去，但暂不考虑它们之间的关系（比如银行开具财产证明，然后你才可以去办出国手续，那就先划一条线到海关去）。功能模块内部的交互过程都完成以后，再来考虑模块之间的交互关系。经过这样一点点地增加模块和线条，最后这幅图就会从刚开始的两个点，变成一幅规模宏大的地图。这，就是我们想要的全局。

用什么画？

最好的工具？当然是纸和笔。相信我，不管你用多么简单的软件，都不可避免地会涉及到操作的问题。这个方块怎样才能往右移一点点？怎样才能画一个箭头？在考虑这些的时候，你就已经被这些手工的问题分掉了一些注意力。哪怕你是使用这个软件的高手，你肯定也有鼠标选不中某条细线的时候，更何况你的电脑时不时的还要休息一会儿。如果你曾经做过视觉设计，你更是下意识地想把某条线和某个方块对齐，或摆成一条线什么的（亲身经历啊！）。总之，只要你面对屏幕，总会有这样那样的干扰来让你无法集中注意力去考虑眼下这件事，所以最好的办法就是：远离电脑。

纸和笔可以用来画一些简单的流程，如果你的城市很大，那么我建议你准备以下几样东西：整面墙的大白板、即时贴、白板笔、相机。

你知道要怎么做了？白板就是整个产品，黄色的即时贴是每一个最小单位的功能。首先在白板上画几个框，也就是最重要的功能模块，比如注册或管理，有几个主要功能模块就画几个。接着在左右两端确定入口和出口。在即时贴上写子功能模块的名字，贴到相应的主模块中。然后开始工作，比如注册成功进入管理模块，就用白板笔把它们连起来，在线上标明它们之间的关系。尽量把所有相关的即时贴都连接起来，检查是否有重复的、不通畅的（有进没出的）、多余的线，如果即时贴的位置不合适的可以扯下来重新贴。如果可能的话，不同的功能区使用不同颜色的白板笔，这样能看得更清楚。

最后用相机把整个白板拍下来。那张照片，就是我们的全局图。如果你需要向领导汇报或与同事分享，这个时候可以回到电脑旁边，根据照片来做一幅图，你想要多规整多漂亮都可以。这样的话，我们才能做到思考的时候不被分心，创作的时候也可以全神贯注。

一些建议：

• 不要因为时间来不及就偷懒，事前准备充分以免事后补救，其实后一种情况会让你花掉更多的时间和浪费更多的工作。
• 不要因为画不好而放弃，如果你不试，你永远不知道自己能做到多好。
• 不要考虑太多细节和逻辑关系，在画地图期间，我们关注的是线路而不是功能或需求。

出处：UCDChina.com
责任编辑：moby

上一页 可以模拟未来的设计师 下一页 概念设计123