淘宝的设计流程.pdfVIP

淘宝的设计流程 淘宝面试的最后一个环节，是请应聘者向面试官提问，使面试官有机会解答应聘 者对公司、团队以及工作等等方面的疑问。在我面试过的设计师当中，大约有三 分之一 会问我：“淘宝的设计流程是怎么样的？”我不是很了解问这个问题的 人为什么会有如此高的比例。也许这是一个“安全”的问题，不会对面试有什么 危害；也许目 前设计师在工作中普遍碰到“流程”问题或“没有流程”的问题； 也许这个话题涉及各家公司的“机密”，确实无从找到相关的资料。 总而言之，虽然来面试淘宝的设计师人数有限，但我斗胆假设：目前国内所有网 页设计师中的三分之一想了解更多关于“设计流程”方面的知识，而我们也不 认为这是什么“机密”的话题(我了解的各公司设计过程都八九不离十，名称不 同，本质上是一样的)。所以，就在此简单介绍一下淘宝 UED 的设计流程，期 望对这三分之一的设计师有所帮助。 Step 1：原型（Prototype） 设计的第一个阶段，我们称之为原型设计，主要是设计产品的功能、用户流程、 信息架构、交互细节、页面元素等等。如果你觉得听上去这些概念都比较悬的话， 我就用大白话来说：原型设计，就是完全不管产品长得好不好看，只把它要做的 事情和怎么做这些事情想清楚，把它怎么和用户交互想清楚，而且把所有这些都 画出来，让人可以直观地看到。 至于怎么画出来，那就随你了。用纸笔画，用白板水笔画，用Photoshop画，用 Visio画，或者像我们一样用Axure画，都可以。只要把上面提到的这些都事无巨 细地表达出来。 在原型的交付物（Delivery，也就是某个阶段的产出物）中，最重要也最常见的 就是线框图（Wire Frame ），这玩意儿不用多解释了，看下面这张图就明白： 在画线框图的时候，要把握好细节的刻画程度。有些东西只要画个框就行了，而 有些东西需要把文案都设计好。以免你的老板或是需求方揪住角落里的广告 banner该有多大这种问题与你纠缠不休，而忽视了最重要的页面主体部分。 此外，还要牢记：原型就是用来让人改的。它存在的价值就体现在被修改了几次， 被更新了几次，以及它的下一步被少改了几次。 Step 2：模型（Mock-up） 在原型被大家接受之后，就该关心产品长得好不好看了。 我们以“模型”这个 词来统称该步骤的交付物。和原型相比，它关注于产品的视觉设计，包括色彩、 风格、图标、插图等等。 要清楚的是，这不是一步由“美工”来“美化”的工作。视觉设计师需要对原型 设计有深刻的理解，对交互设计和尚未进行的HTML/CSS/JS的 Code都要有充分 的了解。如果不能从全局的角度来做视觉设计，则只能是做做把水晶效果改成金 属效果这样的“自娱自乐”，而对产品本身没有任何有价值的帮助。如果原型说： “在这个页面上，A比B重要。”，那他的脑子里就要有十七八种可以表现“A 比B重要”的视觉语言可供选择。这是对设计模型的视觉设计师的 基本要求。 更高一些的要求，才是视觉设计的“原始功能”。“倒底是选水晶效果还是金属 效果？”，“这个按钮选什么颜色好？”等等。这一类的 思考和选择，应着眼 于产品的气质、品牌等等，在各种产品间保持一定的统一，在用户心里打下视觉 的烙印。其实要做到这一点是很难的，特别是还要满足上一点的 要求。一般来 说，如果能90%的把交互设计的成果和品牌形象表达出来，已经是很好的结果了。 从我自己来说，就常常很郁闷不能用好的视觉语言来表达自己在原 型设计中的 想法，总是做完模型就打个七折:( 更更高的要求， 有些问题用交互设计是很难解决的，这时就需要一个有创造能 力的视觉师，可以从视觉设计的角度来创造性地解决问题（一时还没想出好的例 子，想出来再补上）。 总的来说，模型设计是件非常困难的事情。它的工具是感性的，但设计过程又要 求非常理性，必须在各种约束条件中解决问题。而目前能从较高的角度来来看 “视觉设计”的人还不多，大多还停留在“效果”、“风格”等表面议题上。个 人以为在“Web标准”和“用户体验”之后，视觉设计是Web设计专业化运动的 第三波， 市场的需求已经存在，只差有人推动一下。 模型的设计一般来说都是用Photoshop了，下是是个例子（与原型的例子对应）： S