淘宝网的设计流程

淘宝面试的最后一个环节，是请应聘者向面试官提问，使面试官有机会解答应聘者对公司、团队以及工作等等方面的疑问。在我面试过的设计师当中，大约有三分之一会问我：“淘宝的设计流程是怎麽样的？”我不是很瞭解问这个问题的人为什麽会有如此高的比例。也许这是一个“安全”的问题，不会对面试有什麽危害；也许目前设计师在工作中普遍碰到“流程”问题或“没有流程”的问题；也许这个话题涉及各家公司的“机密”，确实无从找到相关的资料。

总而言之，虽然来面试淘宝的设计师人数有限，但我斗胆假设：目前国内所有网页设计师中的三分之一想瞭解更多关于“设计流程”方面的知识，而我们也不认为这是什麽“机密”的话题(我瞭解的各公司设计过程都八九不离十，名称不同，本质上是一样的)。所以，就在此简单介绍一下淘宝UED的设计流程，期望对这三分之一的设计师有所帮助。

Step1：原型（Prototype）

设计的第一个阶段，我们称之为原型设计，主要是设计产品的功能、用户流程、资讯架构、交互细节、页面元素等等。如果你觉得听上去这些概念都比较悬的话，我就用白话来说：原型设计，就是完全不管产品长得好不好看，只把它要做的事情和怎麽做这些事情想清楚，把它怎麽和用户交互想清楚，而且把所有这些都画出来，让人可以直观地看到。

至于怎麽画出来，那就随你了。用纸笔画，用白板笔画，用Photoshop画，用Visio画，或者像我们一样用Axure画，都可以。只要把上面提到的这些都钜细靡遗地表达出来。

在原型的交付物（Delivery，也就是某个阶段的产出物）中，最重要也最常见的就是线框图（Wireframe），这玩意儿不用多解释了，看下面这张图就明白：

在画线框图的时候，要把握好细节的刻画程度。有些东西只要画个框就行了，而有些东西需要把文桉都设计好。以免你的老闆或是需求方揪住角落里的广告banner该有多大这种问题与你纠缠不休，而忽视了最重要的页面主体部分。

此外，还要牢记：原型就是用来让人改的。它存在的价值就体现在被修改了几次，被更新了几次，以及它的下一步被少改了几次。

Step2：模型（Mock-up）

在原型被大家接受之后，就该关心产品长得好不好看了。我们以“模型”这个词来统称该步骤的交付物。和原型相比，它关注于产品的视觉设计，包括色彩、风格、图示、插图等等。

要清楚的是，这不是一步由“美工”来“美化”的工作。视觉设计师需要对原型设计有深刻的理解，对互动设计和尚未进行的HTML/CSS/JS的Code都要有充分的瞭解。如果不能从全局的角度来做视觉设计，则只能是做做把水晶效果改成金属效果这样的“自娱自乐”，而对产品本身没有任何有价值的帮助。如果原型说：“在这个页面上，A比B重要。”，那他的脑子里就要有十七八种可以表现“A比B重要”的视觉语言可供选择。这是对设计模型的视觉设计师的基本要求。

更高一些的要求，才是视觉设计的“原始功能”。“到底是选水晶效果还是金属效果？”，“这个按钮选什麽颜色好？”等等。这一类的思考和选择，应着眼于产品的气质、品牌等等，在各种产品间保持一定的统一，在用户心里打下视觉的烙印。其实要做到这一点是很难的，特别是还要满足上一点的要求。一般来说，如果能90%的把互动设计的成果和品牌形象表达出来，已经是很好的结果了。从我自己来说，就常常很鬱闷不能用好的视觉语言来表达自己在原型设计中的想法，总是做完模型就打个七折:(

更更高的要求，有些问题用互动设计是很难解决的，这时就需要一个有创造能力的视觉师，可以从视觉设计的角度来创造性地解决问题（一时还没想出好的例子，想出来再补上）。

总的来说，模型设计是件非常困难的事情。它的工具是感性的，但设计过程又要求非常理性，必须在各种约束条件中解决问题。而目前能从较高的角度来来看“视觉设计”的人还不多，大多还停留在“效果”、“风格”等表面议题上。个人以为在“Web标准”和“用户体验”之后，视觉设计是Web设计专业化运动的第三波，市场的需求已经存在，只差有人推动一下。

模型的设计一般来说都是用Photoshop了，下是是个例子（与原型的例子对应）：

Step3：展示版本（Demo）

这步我就不多说了，Demo就是按照原型和模型用xHTML/CSS/JavaScript等等前端技术实现出来，以便后端的开发工程师可以接手编码。这个过程让小马、正淳专门起个新帖来详细介绍吧。只提一点，前端开发在有些公司是不放在设计团队的，而我们认为前端开发从很大程度上来说是对用户体验的提升和保证，开发只是它的一个手段和形式。所以就把这块工作一直留在我们团队，现在看起来这样很棒：）

把上述原型、模型转为xHTML/CSS之后就是这个页面了：

http://favorite.taobao.com/collect_list——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm

Step 0.5 / 1.5 / 2.5 / 3.5

居然还有半个半个的步骤？是的，这是我们的用户研究过程。在各个阶段的前后，我们会根据具体情况选择是否投入精力到用户研究上。用户研究的形式也很自由：给会员打个电话，旺旺上随便找人聊聊，到公司来做可用性测试，到会员家中访谈……怎麽方便怎麽实用就怎麽做。我们还没有精力放在太多的“学术”性质的理论研究上，对研究方法也是不拘一格，“能抓老鼠”就行。关键的关键，研究的结果如何表现到产品上，如何吸收单个用户的意见来服务所有用户。

在这一点上，我们做得还很不够，积累也很薄，需要向同行们多多学习，也请大家多多指点。

最后……

关于流程，要注意：

1. 设计流程的目标，在于保证“无论谁来做这个产品的设计，都能达到80分”；
2. “100分”的完美作品，很有可能没有遵循流程，而是天才地融合了创新、传承和执行力的作品；
3. “流程”这种东西，只有与环境相匹配才能带来正面的作用。

以上是我们UED团队目前的设计流程，也许你也发现了，它和大多数公司的设计流程是差不多的。我们也在不断地修改和发展这个体系，有不足的地方也请大家多指教。如果你参考了我们的流程，在工作中发现有什麽问题，也请回来告诉我们，谢谢大家！

分享
访客留言

饲料鸡 2009/6/9 11:54:46
>视觉设计师需要对原型设计有深刻的理解，对互动设计和尚未进行的HTML/CSS/JS的Code都要有充分的瞭解。

如果不能认知好的视觉设计师不是靠教育靠学习就能培养，永远这类自以为知性理性就该高高在上的人士会佔据不适合的位置，见多了，台湾成文化沙漠不是没有原因的，HTML/CSS/JS的Code拿来卖弄？外行领导内行，当Code技术彼此差异不大时，量产网站本来就靠外观，左一句美工右一句美工，教育环境养出来的饲料鸡还真以以为是。

jimmy lin 2010/7/27 12:19:45
美工之所以被称为美工, 往往是因为自己只发挥出一个美工的效益
我认为他并没有要贬低设计师的意思，一个网页视觉设计师，css等code是必须要的最基本，

jimmy lin 2010/7/27 12:29:56
若有好好看文章，
『….视觉语言可供选择。这是对设计模型的视觉设计师的基本要求。
更高一些的要求，才是视觉设计的“原始功能”。“到底是选水晶』

这段裡面，明明是陈述网页设计应该把code当成一个最基本的要素, 基本有了，再要求具备更高的需求->设计能力

很多设计师被称之为美工，则是因为他们只认为』具备有设计能力即可, 甚麽code不code的是外行人领导内行』

不管是网页设计师也好，平面设计，印刷设计，设计的本质如果没有其他相对的基础知识配合，弄出来的东西往往就是设计师自己弄爽的而已。

我自己本身也是从事设计行业，的确设计的价值常常被企业所贬低，但我也看过很多设计师是自己过度高估自己，过度膨胀自己。

不懂CSS就去弄网页版型设计，不懂印刷相关，就去弄名片设计，弄出来的东西往往缺乏专业性质，你说他不懂设计吗？不，他可能很会设计，但他不懂的是』基本』的重要。