超多干货！国内知名UED团队的设计流程是怎样的？

编者按：阿里上市了，木有进入大公司的同学也不要灰心，今天分享一篇国内知名UED团队的设计流程的好文，现在学起来，以后可以更快上手，同时也能一窥大公司的工作流程，让自己更加专业，赶紧来学习吧！

写在前面：流程用好了是好东西，用不好是阻碍。

今天写的设计流程的思考，以下。：）

设计存在于设计流程中。

设计师的工作是基于设计流程的。

和很多朋友讨论过设计流程。这个流程在每个国家、每个行业、每个公司、甚至是同个公司的不同业务下，都是不一样的。所以要写出来，很难统一概括。

与设计师相关的设计流程，可能一个基本认知是这样的：

产品需求，交互设计，视觉设计，前端开发。

再丰富一些：

市场分析，创意阶段，用户研究，概念设计，设计控件预设，交互设计，交互Demo，用户测试，视觉预研，视觉设计，设计Demo，用户验证测试，前端开发，开发Demo，展示Demo，迭代，用户测试，测试数据回收，用户数据验证，灰度，全量，项目总结，规范输出，控件库，用户跟踪反馈……

再凌乱一些：

以上所有点，顺序是可以根据敏捷开发的需求，灵活排列的。也可以随机组合。

所以，现在大多公司的设计流程，是一个标准且完整的架子。在实际设计项目中使用，并不一定是那么规范和统一的。有时项目大，可能流程走的完整；有时项目小步快跑，流程就会被精简为一个可用且贴合业务的小流程。

设计流程为什么这么不可控？因为设计不是完全理性、可工程化的。

一辆汽车可以通过完整有效的流程快速组装起来，且能保证质量；点子、思路、设计，不能这样。没有人能提供一个设计流程，能保证任何人进入这个流程，挨着一步一步做，就能做出设计精品。所以设计流程，是帮助产品设计推动，且为设计思路提供思考维度的一个不可工程化的方式。

我在美国、中国、德国工作时，都和设计师小伙伴一起制定了很多设计流程和方法。每个都不一样。

但是我发现，思考维度是类似的。

所以今天，我想借用Jesse James Garrett书中对用户体验要素分层的一个参考，来描述下设计流程的思考维度。

书名：用户体验要素：以用户为中心的产品设计
作者：Jesse James Garrett

1，Surface 表现层
2，Skeleton 框架层
3，Structure 结构层
4，Scope 范围层
5，Strategy 战略层

这是书中对用户体验要素分层的想法。我觉得贴合设计流程来描述，应该反过来说。

一、Strategy 战略层

经营者想要什么？用户想要什么？这两个问题能回答清楚，才能算是了解这个产品设计的战略层。

经营者想要什么是商业需求，用户想要什么是用户需求。有了这个基本理解，才能准确理解产品设计的商业价值和用户价值。

听上去很简单。但是做起来不一定简单。很多设计师在执行层，得到需求，完成设计工作。我个人认为大部分设计师是能清晰理解用户需求的；但是不一定每个设计师都能清晰理解商业需求。

例如做一个社交产品。年轻设计师很清楚这个社交产品面对的用户群体和核心用户场景（做了基本的Persona和Scenario分析），比较了解用户在使用这个产品过程中的心理模型和行为习惯（通过共感等方式）。但是年轻设计师可能不够了解这些问题：这个社交产品的商业价值是什么？怎么给公司带来收益？每一个点击、每一个新增用户、每一个广告位、每一个流失、每一个转化率各自意味着什么？这些细节对商业数据的影响？

这个理解程度差异直接给年轻设计师带来两个问题：与产品方合作的时候讲不清楚，达不成一致；对产品理解的全局观不到位（很难成为产品的Owner）。

我有时会对团队的设计师提一些问题，是与用户体验设计相对无关的。例如：

这个产品的未来3年你怎么看？
这个产品现在所处的区间，是否有巨大优势且可以成功？
这个产品真实的产品差异点在哪儿？

这些都是战略层问题。也是一些设计师小伙伴忽略的部分。

所以，设计流程第一步，我觉得应该是透彻理解产品的战略层，包括商业价值和用户价值，也就是，怎样帮助公司持续发展地赚钱？怎样帮助用户提升他们的生活品质？

这一点有10年经验的广告人E大也谈过，更加具体，右戳学习！《职场好经验！如何应对客户想看效果图的要求》

二、Scope 范围层

产品到底需要什么样的功能和特性？换言之，这个产品要做什么。

早期的互联网产品，怎么丰富怎么来。产品经理希望把100个内容模块都一起扔到一个页面上。那个时候做设计真心是痛苦啊。现在好多了，大家都越来越清楚聚焦、简洁的重要性。

一个产品，有1-3个杀手级功能、特性就足够精彩。

例如：Facebook的赞；Foursquare的Check in；Yo的Yo；微信的语音聊天等。

设计流程第二步，就是要知道产品需要什么样的功能。这些功能要足够满足第一步中的商业价值和用户价值，还需要把故事说清楚。在一个产品中，功能不需要太多。

设计师面临的挑战是：做新产品的时候，输入方太多，点子太多，如何选择如何执行，压力很大；做改版的时候，可能现有版本的功能特性已经很多，没有办法聚焦，你要改动的时候，又会影响产品现有的形态和利益，如何精进？

这些问题都可以从第一步战略层的思考得到输入和帮助，甚至可以直接解决问题。

三、Structure 结构层

结构层里重点思考结构的具体表达方式，例如流程的进行方式、界面元素的位置逻辑、导航的布局原则等，所以这个层关注信息框架和交互流程设计。

这就是设计师进入交互设计的时候，是第三步。海量的设计准则、丰富的设计经验、灵感和创意，都可以在交互设计中得到体现。交互设计可以说是具体设计的第一步，一个产品执行过程中的质量和创新程度，交互设计是起始点。

产品方和用户关注最多的，一个产品好不好用，就依赖于交互设计中的每个细节：流程是否流畅；提示是否充足；容错性好不好；操作是否自然；界面是否统一；效率是否高……

在设计流程的第三步中，交互设计需要准确把握商业价值、用户价值，理解产品的核心功能特性，有效有质量地描述整个产品结构、节奏、特质。是设计执行中非常关键的一步。

四、Skeleton 框架层

框架层主要就是做每个界面了。这是设计执行中，交互设计量最大的工作。

界面中每个元素，例如文字、图片，如何细致地布置在一个页面中。文字设计要精确到字段的大小、字体的大小，图片设计要精确到组合布局的展示、形状的释义等。精细的交互稿可以完全展现产品形态，一个黑白的产品形态。

框架层，大部分设计师每天都接触，就不一一讲述方法了。只讲两个点。

细致

这个时候的细致体现在设计师每个元素布局、像素精准、整体感观、交互逻辑定位、交互标注等方面。足够细致的交互稿，可以提升产品设计结果品质、帮助视觉设计更好地进行视觉创意、帮助开发测试更准确理解产品设计。

创新

战略层、范围层，我们已经经历了创新的主要阶段。框架层是二次创新的黄金机会。很多微创新、界面创新、特效创新，都来自这个阶段。苹果新的iOS与Google新的设计准则中强调的交互动效创新，很多可以发生在框架层设计阶段。

五、Surface 表现层

关注感官的关键阶段。视觉设计师、艺术家是核心。

一个产品经历了各种打磨，终于到最终呈现的阶段。最终用户看到的产品，80%是来自于表现层的设计工作。虽然产品设计背后的业务逻辑、功能巧思、开发创新非常多，但是用户看到的感官部分，表现层设计是最多的。

表现层是最直观地看设计师本事的阶段。优秀的视觉设计师、动效设计师、品牌设计师可以在这个层发挥得淋漓尽致。

以上5层并没有区分角色。而且我不认为每个角色应该局限在某一个层中。

交互设计师

我建议是要完全进入5个层的，这样对你把握整个产品的特质、故事、灵魂非常重要。要做到不仅仅是Designer，而是Owner，这5个层你都得完整理解并有一定控制权。

视觉设计师

也不要仅仅停留在后几个层。诚然，视觉设计师在设计流程的后面多一些，所以要去理解前几个层不那么直观，例如视觉设计师可能不会参加战略层和范围层的会议。但是你想想，视觉设计师已经有充足的艺术气息、视觉设计技能，再加上对前几个层的理解，会是多么强大啊。

用户研究工程师

在这5个层是非常关键的。你们是用户和业务之间的桥梁。用户是什么样子，他们的一颦一笑一举一动，都是你们带来的。所以用户研究应该贯穿在5个层中，通过使用不同的用户研究方法（专家测试、用户测试、用户画像、问卷、数据分析等）去提供产品设计支持。

前端开发工程师

现在的要求更高了，不仅仅是要实现，还要创造。强大互联网公司（Google）的工程师文化是有依据的，技术创新是设计创新的一大输入点。前端开发工程师精通技术，如果再理解业务懂设计，基本是无敌的。

希望这个5层的设计流程思考维度分析，对你以后对设计的理解有一定帮助。：）

谢谢阅读。

thanks，yoyo

设计师进阶好文推荐！

腾讯设计师的进阶建议，超实用！
《17条经验之谈！视觉设计师如何进阶提升自己能力》

想过稿就得先了解下设计评审！
《说到心坎了！关于设计评审的一些思考》

提高效率才有时间进步呀！
《秒变设计快刀手！10个帮设计师提高效率的经验分享》

原文地址：zhihu
作者：@EDC尤原庆
uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量78万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：