淘宝网的设计流程by承志

我们的设计流程by承志淘宝面试的最后一个环节，是请应聘者向面试官提问，使面试官有机会解答应聘者对公司、团队以及工作等等方面的疑问。在我面试过的设计师当中，大约有三分之一会问我：“淘宝的设计流程是怎么样的？”我不是很了解问这个问题的人为什么会有如此高的比例。也许这是一个“安全”的问题，不会对面试有什么危害；也许目前设计师在工作中普遍碰到“流程”问题或“没有流程”的问题；也许这个话题涉及各家公司的“机密”，确实无从找到相关的资料。总而言之，虽然来面试淘宝的设计师人数有限，但我斗胆假设：目前国内所有网页设计师中的三分之一想了解更多关于“设计流程”方面的知识，而我们也不认为这是什么“机密”的话题(我了解的各公司设计过程都八九不离十，名称不同，本质上是一样的)。所以，就在此简单介绍一下淘宝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之后就是这个页面了：——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htmStep0.5/1.5/2.5/3.5居然还有半个半个的步骤？是的，这是我们的用户研究过程。在各个阶段的前后，我们会根据具体情况选择是否投入精力到用户研究上。用户研究的形式也很自由：给会员打个电话，旺旺上随便找人聊聊，到公司来做可用性测试，到会员家中访谈……怎么方便怎么实用就怎么做。我们还没有精力放在太多的“学术”性质的理论研究上，对研究方法也是不拘一格，“能抓老鼠”就行。关键的关键，研究的结果如何表现到产品上，如何吸收单个用户的意见来服务所有用户。在这一点上，我们做得还很不够，积累也很薄，需要向同行们多多学习，也请大家多多指点。最后……关于流程，要注意：1.设计流程的目标，在于保证“无论谁来做这个产品的设计，都能达到80分”；2.“100分”的完美作品，很有可能没有遵循流程，而是天才地融合了创新、传承和执行力的作品；3.“流程”这种东西，只有与环境相匹配才能带来正面的作用。以上是我们UED团队目前的设计流程，也许你也发现了，它和大多数公司的设计流程是差不多的。我们也在不断地修改和发展这个体系，有不足的地方也请大家多指教。如果你借鉴了我们的流程，在工作中发现有什么问题，也请回来告诉我们，谢谢大家！2007-08-1313:06分类:设计探讨.62Responsesto“我们的设计流程”1.青云Says:2007-08-1313:08沙发先，坐着慢慢看！2.ccyunSays:2007-08-1313:36学习!3.AsunSays:2007-08-1314:11好东西啊，非常好。很有意思的流程。另外为什么很多人问起流程呢？因为流程是公司的做事方法，对一个人的工作和发展的影响很大:)4.sageSays:2007-08-1314:14受益匪浅5.williamSays:2007-08-1315:21其实好像大家都是这么干的……6.dgSays:2007-08-1316:08斗胆问一句,贵公司用的Photoshop是正版的吗?有几套正版?7.承志Says:2007-08-1316:33@william：是的，大多数公司都是这么做的，我在文中也提到了两次。只是因为有很多人问我，所以再和大家都分享一下。对一些成熟的公司来说，我们的流程也是非常幼稚。如果发现有什么不好的地方，请不吝赐教。谢谢：）@dg：是的。所有的软件都要求使用正版。要武装一个设计师的成本确实比较高。8.haxSays:2007-08-1316:38我想，如果我来面试，肯定也会问这个问题。但是我的意思，其实不仅是你所描述的这个工作流程，而是更大的流程。例如产品的总的概念，目标，定义。设计的不同维度上的衡量准则。需求如何来的，从策划到设计的环节，开发者的参与，测试……总之，我会想了解更加big的图景。以及与之匹配的组织结构。不知道能不能透露一二？9.yukiSays:2007-08-1316:55牛呈是很重要的~~要不会把人累死的~~10.承志Says:2007-08-1316:59@hax：我从来没有认为设计师问我这个问题是要了解这么大的图景，个人也不认为他们在面试时就了解这些有什么好处。这些东西应该在工作中去了解，在实战中去体会和改进。花上三五分钟说或是写几篇文章，连皮毛都无法涉及。所以，我还是先写点实际的，大家看了说：“我早就知道是这样了，不过你们这个方法里这点这点还不错，我会去试试”。那已经太太太高兴了！^_^11.wkcowSays:2007-08-1317:06看了原型，有几个地方想征求下意见：1.已有多少人收藏和标签的位置要换一下，左面既然是标签云，那么左边自然放标签，同时多少人收藏与右边的收藏人数自然贴近，方便用户点击。2.多少评论放在收藏数量下面是否会影响产品的特点，收藏和评论有什么关系，如果有关系也和主题有关。所以联合1条来看，先是评论，然后标签，然后更多收藏人数3.看了图片，愕然发现使用TAG的人其实最少，而原型中显著的位置都是TAG,看来要重新思考TAG的作用了4.1，2，3联合看，建议原型为最简单的多少人评论，多少人收藏。TAG自然废弃，其实对于有搜索框的页面TAG是不是个垃圾功能需要仔细思考，至少不是个主功能12.OLDMANSays:2007-08-1317:21流程只是一部分，另一部分是这个流程中的人，谁能决定什么不能决定什么，谁从哪里开始跟，跟到什么时候结束，等等等等。。。大部分公司纸面上的流程一样，可实际操作中的人员就千差万别了，这个大概才是更关心的东西…13.承志Says:2007-08-1317:43@wkcow:1.我不觉得把tag列表和单个收藏的tag放得“近”有什么好处，何况页面一滚也就不近了。它们不是需要关联操作的功能。此外“有xxx人收藏”的文字长短不有太大的变化，这样页面上的图标会对得比较齐，视觉上更清楚一点。2,3,4.关于tag和评论的重要性，在上线前我们也不是非常有把握，现在上线了，看看用户怎么用就有数了。你很快能看到我们的调整。你的思路非常清晰，赞！如果你也能得到我能得到的用户数据，就可以少很多“脑力劳动”来“猜”用户的行为，设计的结果也许也会和我的类似：）@OLDMAN:太对了，所以我在文尾说：“流程”这种东西，只有与环境相匹配才能带来正面的作用。“人”，是环境中最重要的一个部分。打个比方，如果设计师的能力还没达到一定程度，就强行让他按交互设计、视觉设计这样的流程来做，估计他做出来的东西会更糟：）14.小东瓜Says:2007-08-1318:00嘿，承志：Axure画完原型图后，是不是只能导成图片格式的？不能导成html？15.承志Says:2007-08-1318:24@小东瓜：可以的，可以导出成HTML，还可以导出成DesignSpec形式的Doc文档。装个小插件还可以导出成.chm、Axure是个非常非常好的工具，有时间的话，我会写几篇文章来介绍它。这玩意儿，除了贵点，真是谁用谁知道啊！hahaha16.小东瓜Says:2007-08-1318:26我在官网上下了一个测试的，好象没找到导成html的？？17.承志Says:2007-08-1318:30@小东瓜：按F5就可以了。18.wayne_dengSays:2007-08-1322:52Axure真的很不错，谢谢介绍！19.sageSays:2007-08-1409:06Axure没有找到破解和汉化，软件确实非常帅。20.mingSays:2007-08-1410:01已阅21.幻沙Says:2007-08-1411:57学习了赞一个1。个人觉得把收藏人数和谁收藏了这件宝贝放在一起会好些起码这两个功能是有关联性的2。估计会有很多商品标签会空对用户来说填写了没什么用处，在这个页面上的应用22.moglySays:2007-08-1510:14幻沙说的有道理。还有评论数放到主体阅读内容的上面或下班要好点.23.小东瓜Says:2007-08-1511:24谢谢承志！！24.robinhamSays:2007-08-1514:21Axure………………..我要，我要~哈哈提供一下25.nbvghostSays:2007-08-1517:42前一段时间，我也到处寻找这方面的资料，油茶研究会发了一些国外的资料给我，相对