帮助你了解全局的城市地图
通常大家都会认为设计师是一群关注细节的人，但事实上，设计师不仅要关注细节，还需要考虑整体，就象画画时一样，你需要时不时地从细节中抽身出来，退后几步眯起眼睛看看整个画面的样子。
那么对于从事产品的设计师来说，在进入具体内容之前（不管是视觉、交互还是功能），最好能对整个产品的概况有所把握。那么，我们用什么方式来得到产品的整体印象呢？
在以往的项目中，我有时会根据用户操作的路径给自己画一张流程图，其中包括用户从哪儿进入，从哪儿离开，中间如何走到各个功能上去⋯⋯看上去与程序员画的流程图很相似，但我的关注点不是底层的逻辑，而是用户与界面的交互过程。
如果把产品比喻成一座城市的话，这幅图对我而言就像是城市的导游图。它首先能帮助我理解这个城市里有什么建筑，也就是这个产品的主要功能是什么；其次，它能模拟人们在城市里行走的主要路径，即理想状态下用户会如何使用这个产品；最后，它还能告诉我银行大厦和保险大厦的关系，即产品功能之间的关系。
为什么要画？
从这幅图能产生的三种作用（理解产品目的、模拟使用路径、了解功能关系）来讲，团队里的每一个人都需要它。从工作范围来讲，我们更需要的是第二种。作为界面设计师（我知道，大多数公司分工都不是很明确，所以只好模糊地称为UI），我们应该掌握用户在城市里通常是怎么行动的，他们有可能在什么地方迷路，有没有绕远路，有没有不通车的路⋯⋯以及如何标识两条不同的路，十字路口要怎么标识方向，不同的建筑物要如何区别⋯⋯等等，因为在屏幕上，用户所有的方向全部来自你的指引——不象在现实生活中，没有指南针还可以看星星什么的——所以设计师的一点点疏漏，就会让用户搞不清楚身在何处。
由于关注点不一样，所以我们不能依赖程序员或产品经理的地图。如果你需要从银行开具财产证明去国外留学，那么程序员关心的是你的钱够不够申请留学，产品经理则关心的是银行要用什么方法来评估你的财产，而我们则要关心你有没有带齐所有的资料，免得你跑冤枉路。
怎么画？
前面已经提到了一点。首先我会确定用户从哪儿进入，从哪儿离开，这通常就是这个产品本身，比如某个系统的登录界面和退出界面。然后遵循从整体到局部的基本原则，在两者之间把最大的功能模块都放进去，就像把城市划成CBD和金融街一样。接着集中精力攻克其中一个功能（比如银行大厦），如果它的子功能与其它街区有联系的话，先连接过去，但暂不考虑它们之间的关系（比如银行开具财产证明，然后你才可以去办出国手续，那就先划一条线到海关去）。功能模块内部的交互过程都完成以后，再来考虑模块之间的交互关系。经过这样一点点地增加模块和线条，最后这幅图就会从刚开始的两个点，变成一幅规模宏大的地图。这，就是我们想要的全局。
用什么画？
最好的工具？当然是纸和笔。相信我，不管你用多么简单的软件，都不可避免地会涉及到操作的问题。这个方块怎样才能往右移一点点？怎样才能画一个箭头？在考虑这些的时候，你就已经被这些手工的问题分掉了一些注意力。哪怕你是使用这个软件的高手，你肯定也有鼠标选不中某条细线的时候，更何况你的电脑时不时的还要休息一会儿。如果你曾经做过视觉设计，你更是下意识地想把某条线和某个方块对齐，或摆成一条线什么的（亲身经历啊！）。总之，只要你面对屏幕，总会有这样那样的干扰来让你无法集中注意力去考虑眼下这件事，所以最好的办法就是：远离电脑。
纸和笔可以用来画一些简单的流程，如果你的城市很大，那么我建议你准备以下几样东西：整面墙的大白板、即时贴、白板笔、相机。
你知道要怎么做了？白板就是整个产品，黄色的即时贴是每一个最小单位的功能。首先在白板上画几个框，也就是最重要的功能模块，比如注册或管理，有几个主要功能模块就画几个。接着在左右两端确定入口和出口。在即时贴上写子功能模块的名字，贴到相应的主模块中。然后开始工作，比如注册成功进入管理模块，就用白板笔把它们连起来，在线上标明它们之间的关系。尽量把所有相关的即时贴都连接起来，检查是否有重复的、不通畅的（有进没出的）、多余的线，如果即时贴的位置不合适的可以扯下来重新贴。如果可能的话，不同的功能区使用不同颜色的白板笔，这样能看得更清楚。
最后用相机把整个白板拍下来。那张照片，就是我们的全局图。如果你需要向领导汇报或与同事分享，这个时候可以回到电脑旁边，根据照片来做一幅图，你想要多规整多漂亮都可以。这样的话，我们才能做到思考的时候不被分心，创作的时候也可以全神贯注。
一些建议
不要因为时间来不及就偷懒，事前准备充分以免事后补救，其实后一种情况会让你花掉更多的时间和浪费更多的工作。
不要因为画不好而放弃，如果你不试，你永远不知道自己能做到多好。
不要考虑太多细节和逻辑关系，在画地图期间，我们关注的是线路而不是功能或需求。
4月 15th, 2007 at 23:07
很感谢Angela的分享：）应该少花时间在电脑作图上…… 的确用电脑作图的时候，强迫症就会作祟……然后就会把大多数的创意时间花费在每个方块之间的对齐上……
4月 16th, 2007 at 9:05
椅子！呵呵 恩，说的好！一个设计师如果完全理解这些，并产生共鸣，相对成熟了！多多学习。
4月 16th, 2007 at 10:33
收益匪浅，如果能配上你亲手绘的图表就更舒服了。
4月 16th, 2007 at 12:10
呵呵！我很关注你们的文章，值得学习，在此对你们表示感谢！！！
4月 16th, 2007 at 16:22
好文章，我喜欢！呵呵。
4月 16th, 2007 at 21:36
[…] 概念设计确定后，产品设计也差不多.. 好文章，我喜欢！呵呵.. 呵呵！我很关注你们的文章，值得学.. […]
4月 17th, 2007 at 0:37
[…] 帮助你了解全局的城市地图 - 以用户为中心的设计 […]
4月 17th, 2007 at 8:40
to Bozi：我会尽量放一些可公开的图形上来，这点请体谅。
4月 17th, 2007 at 20:59
我不是设计师，我只是个运营~我是来这学用户体验的！
4月 18th, 2007 at 6:03
Hi Angela, I love the "city map" metaphor you're using in this article to introduce the "sitemap" and "user flow" of UCD life cycle. You've done a great job to articulate why and how to make your own "city map". This is my favorite quote from your article:
"作为界面设计师（我知道，大多数公司分工都不是很明确，所以只好模糊地称为UI），我们应该掌握用户在城市里通常是怎么行动的，他们有可能在什么地方迷路，有没有绕远路，有没有不通车的路⋯⋯以及如何标识两条不同的路，十字路口要怎么标识方向，不同的建筑物要如何区别⋯⋯"
The same idea could be extended to the "re-design" concept. If you're working on updating new version of the product, or redesign a Website, the current "city map" would be a useful reference guide to help you plan out the redesigned roadmap and also user testing sessions. Thank you for this excellent article.
4月 18th, 2007 at 12:41
大体步骤类似信息架构中的sitemap的构建方法。不过我的经验里一般在sitemap上，没有办法表现类似十字路口如何标识方向，不同建筑物如何区别的细节。很希望angela能给出一张你说的这样的城市地图来，我们学习学习。：）
4月 24th, 2007 at 8:57
白板上画是很好的,但我更建议在之前能在脑海里画,那样可以三维的体现很多平面上无法展现的细节关系.如何在脑海里全部模拟信息架构也许是个基本技能,我在比特宝博客里可能写过关于目前论坛信息架构的可能改进一文中提到过,现有的论坛的数据结构问题也是无法体现数据间超链接和继承的可能.互联网的hyperlink很简单,但多个hyperlink链接时,带来的是多维信息的展开.同理,在以用户为中心的设计时,用户不是孤立的一个角度看待我们的产品,所以需要多维的考虑流程,数据,以及功能.白板等于是脑海里的一个二维投影.
4月 24th, 2007 at 10:26
哈哈，
当然一切都是开始于大脑，
但我不赞成先在大脑里规划好，
想到什么就记录下什么，然后你会发现很多放在大脑里闷不出来的东西…
5月 14th, 2007 at 19:06
写得不错
5月 23rd, 2007 at 10:36
[…] 本想详细谈谈纸面原型的制作，发现与 Angela 的文章有些重合。所以取消了纸面原型部分的内容，等谈到交互设计的时候再议。作为补偿，再次推荐《Paper Prototyping》和《Communicating Design》两本书 […]
6月 5th, 2007 at 18:05
很棒的文章，谢谢。
6月 13th, 2007 at 22:23
[…] 帮助你了解全局的城市地图 […]
6月 22nd, 2007 at 13:08
学习了
6月 24th, 2007 at 13:55
[…] 那么，概念设计是不是只在产品设计之初才会有作用呢？概念设计是不是只能在从无到有的开始阶段夸夸其谈呢？答案当然是否定的。很显然，概念设计的作用不仅仅只是在产品设计之初，而且概念设计也不完全是虚拟的。正如Angela在本期文章中的比喻：”画画时一样，你需要时不时地从细节中抽身出来，退后几步眯起眼睛看看整个画面的样子”，其实在产品设计之初画概念图可以让整个团队在整个产品设计过程中不断的统一和调整思路； […]
12月 28th, 2007 at 15:34
学习学习，那这样的工作量大约有多大呢？如果是一个中型网站的话…
我理解这个过程应该是在网站构建之初吧？从这个导游图里提取出来的导航是不是更合理更可用一些？如果在网站构建之后呢？还适用吗？
10月 27th, 2011 at 13:39
[…] 帮助你了解全局的城市地图 http://ucdchina.com/blog/?p=22 […]