设计追波风！值得每个设计师阅读思考的深度剖析文

编者按：这篇博文来自国外，一经发表即掀起设计圈的一阵轰动，文章言辞虽激烈但一针见血，戳痛处也不忘给干货，现在腾讯的Wellso同学把它翻译过来，Dribbble 大牛务必冷静阅读。

前言

wellso：13年底，Intercom 的产品VP Paul Adams 在 Intercom 官博发表了 一篇博文 。文章讲述了网络上设计社区里普遍存在的一种现象，大意是“许多设计师在社区中分享的作品往往是为了炫技，而产品的逻辑通常都经不起推敲的，真正优秀的设计应该从更高的层面出发，而不只是做表面上的工作”。

文章发布后，在 Twitter 、HN 及博客评论下引起了反响。虽然部分内容在一些设计师眼里看起来比较有攻击性（也就是俗称“开喷”），甚至还带有些地图炮，但是文中关于“设计的四个层次”以及“when..I want to..then I can…”等设计观点和方法论都非常值得我们回味并运用到工作当中。

文章是2月前Sam推荐给我的，随后到 twitter 上获得了作者的授权，在这里也应作者需要，贴上 Intercom 的官博连接：http://blog.intercom.io/ 。

译文开始，Dribbble 大牛务必冷静阅读。 =D

提醒，搭配此文阅读效果更佳：《重磅推荐！如何设计传单才不会被人随手扔掉？》

设计追波风

这些天气app中，只有一个试图解决用户的实际问题。

现在的产品设计和交互设计界发生了一些奇怪的事情。一方面有着如 Ryan Singer 和 Julie Zhuo 这样能写出很赞的文章的人来推动我们设计水平的发展。另一方面则是越来越多的人在 Dribbble 上发布与交流他们的作品，不过最后结果是追波上的这些玩意反而使我们的水平倒退了。 我写这篇文章不是在谈追波的好坏是非，而是想探讨什么才是追波真正的价值。我会将“产品设计”贯穿始终，尤其是在谈到用户体验和交互设计的时候。

“屌爆了！”Dribbble就是用这种形式来鼓励大家炫技

去年我看了不少应聘 Facebook 和 Intercom 的求职者的设计作品，然后我发现了一个令人担忧的现象。太多的设计师都在为吸引同行的关注而做设计，而不是把心思花在解决实际的工作问题上。这点一直都是广告创意领域才有的毛病（比起优先解决客户需求，做酷炫的作品拿个奖攒点人气似乎更重要），并且，这在产品设计以及交互设计的领域越来越突出。

我最近看的许多求职者的产品设计作品都聚焦在最表层，只关注于自己做的东西是否足够的“追波味儿”。所以他们做出来的设计，好看却不中用。“完美的扁平化设计”，“像素级的精致度”，听起来很犀利，但往往这些作品都没有实现产品的真正目的。既没有解决用户每天真实遇到的问题，也没有将完整的业务体系考虑进来。追波上的设计师们喜欢钻研界面的轮廓和绚丽的色彩等细节，以此交朋结友，相互点赞和分享。看完别人的作品后，自己跟着兴冲冲来一发。结果就是大量的设计在追波上都长得差不多。不管你做的是社交软件，金融软件，电商网站还是天气应用，同样的风格都可以套进去使。你想想，如果给你的眼睛加一层毛玻璃效果，再看看这些界面，你能说出他们到底有什么不同吗？

设计最重要的一步，往往并不会去追求外观的美

相比之下，优秀的求职者通常都附上了他们的思考过程。手绘稿、图解、利弊、 阻碍、权衡、解决方案，以及阐明交互和动效的原型。在真实参数的考量下，描述产品的模块如何移动和变化，它们的动态效果又如何呈现。

而糟糕的求职者，只会发他们的酷炫扁平 PNG 或牛逼线框 PDF 过来。没有关于待解决问题的关键点，看不到商业和技术层面的限制，也不描述使用场景和上下文联系。这些完美的视网膜像素级的 PNG 或许在追波上看起来很赞，但实际上，这些东西却连基本的设计价值都难以体现。

这就是为什么追波的许多“ReDesign”类的作品实属愚蠢。因为许多人做设计的时候，并不清楚这个产品的渊源，用户真实的需求，技术有哪些限制，深层的组织架构又如何。

如果产品设计是在一个具体的约束中为用户解决问题，这些自称为产品/用户体验设计师的人实际上就是个美工而已。设计师应当是艺术家，是造型师，创造美丽事物是一项伟大的工程，而不是像这样闷着脑袋乱画。

产品设计总是与使命，愿景以及架构息息相关

从广泛的构思到像素级的细节，设计师应该始终思考公司的使命、愿景和产品架构。他们在设计中所做的每件事都需经历这个过程。

设计始于公司最顶层的使命，其次是公司的愿景。在一个没有清晰和可执行的使命与愿景的团队中，很难开展设计。不要低估这个问题的重要性，如果你所在的公司缺少清晰的使命，那就将缔造它作为你工作的一部分。

在使命和愿景之后的，则是产品的架构。不是指技术层面上的东西，而是产品内各部分之间彼此的关联，是一个总体的系统。我在 Facebook 上班的第一天早上，Chris Cox（产品VP）做了一个绝妙的演讲 （你可以点开感受一下） 。下面的听众来自公司各个部门， Chris 侃侃而谈，然后着重阐述产品的架构，以及它是如何与公司的目标关联的。

对 Facebook 来说，架构里有联系人、好友、兴趣点，上至世界名牌下到街边小店，还有一个能够显示所有这些事物关系的示意图。这是一个非常清晰简洁的产品，直击目标需求点。以我的经验来说，在没有一个清晰明了的构架想法前是很难在这团杂七杂八的玩意下做出一个超赞的设计的。在很多情况下，就像这个项目一样，作为设计师应该去解决问题并改进架构。比如谈到Facebook跳转其他应用的时候，我通常会在白板上画些类似这样的概念图：

产品的架构不是信息堆砌，它不是一个页面连着这个那个模块和空间，或者一堆死板的演示告诉你点这里是干嘛的，一个交互原型通常就可以很好地处理这些信息。一个更深层次的表达方式，这就是产品的架构图。它能表现出各个模块在整体系统中所处的位置以及它们的联系。而在intercom我们是用这种方式进行架构设计的：

我甚至没有印象在追波上有看到过类似上图这种表述设计思路的架构图。很少能看到设计师讲述他的作品如何匹配需求目标，如何驱使产品的视野向前，或是在整个架构中发挥了什么作用等等，以呈现这些设计的重要度。这应当是设计的基本，而非特例。

一旦你明确产品清晰的使命、愿景和架构，你就可以开始思考其它的细节。只要用户达成了目标，他们就会开心、满足，并获得成就感。你产品的服务为用户提供了哪些便利，又存在着哪些瑕疵。

这些粗糙的草图远远要比追波上那堆PNG要重要得多。从产品创立伊始到成品的推出，在这一套程序当中，PSD文件和PNG图片是我认为最不吸引人也是最无用的材料。更为重要的是设计中如何权衡轻重做出取舍的思考和讨论的过程，比如产品的优缺点考量，如何将设计匹配公司的愿景，抑或是解决产品的架构问题。所有这些白板草图，手绘稿，甚至在餐巾纸后面勾勾画画的解决方案才是设计者应该发布在追波上的，我更希望看到这些。就连 产品叙述文档 都比单单一个苍白的PNG或者PDF文档来的重要。

思考一下设计的四个层面

设计是一个多层面的过程。以我的经验而言，如何依次经过这几个层面来思考是有一个最佳顺序的。最简单的一种就是回想一下这四个层面：

我看见一个又一个的设计师单单专注于第四个层面而完全忽视了其他因素，这样自下而上的方式做出来的设计当然不如至上而下。如果其他三个层面的问题还没有解决好，那么诸如栅格、字体、色彩、美感等方面的深入都是无用功。许多设计师说他们这样考虑过而没有付诸行动，是因为有时候只是觉得画一些好看的图片，和把自己掩埋在像素中比处理一些复杂的商业决策和人际关系要更加有趣。只关注第四个层面的因素，这无伤大雅，但这只是画画而不是设计。这样的话，你是一个数字艺术家，但并不是一个设计师。

设计系统越来越重要，因为网络无处不在

网络的发明将带来自工业革命以来最大的社会变更。网络渗透到每一个角落，它在我们的家里，在我们的办公场所，当我们熟睡的时候在床头，在我们的口袋中走到哪里跟到哪里。网络随时随地与我们同在。并逐渐来到我们的车里，衣服上，进入到我们所拥有的一切，还被用来检测我们的健康。到2020年为止，或更早，所有的业务都会基于网络而存在。正如 Charles Eames 曾经说过，“最终一切都会相互连接起来”：

静态网页设计是一个在垂死边缘的职业。随着移动技术惊人的发展，不同的API、SDK涌现，以及平台与产品之间开放的合作关系，这一切描绘出了一个无比清晰的未来，那时我们都将参与到系统化的设计中。将满是线框图的PDF作为交付品这样的情况即将逝去，Photoshop也已经是一个衰落中的设计工具。推动我们水平进步的设计师们，往往沉浸在手绘稿、白板稿和原型工具上（Quartz Composer，After Effects，Keynote，CSS/HTML）。

这就是有人说牛逼设计师应该学学代码的原因之一。无论你赞同与否，设计师的确需要通过探讨系统中组件之间的联系去定义问题和寻求解决方案，而不是通过抠像素来做这个事。实现可交互的原型，当真实操作中不可避免地反馈出设计时被忽视的问题和没有预先想到的状况时，他们就可以对此进行细节调整。在真实的交互中去感受，往往能令你对你设计的产品有更好的理解。

设计师代码指南：

1. 《给设计师们的代码指南！HTML与CSS简介（一）》
2. 《给设计师们的代码指南！代码里的图层（二）》
3. 《给设计师们的代码指南！定位与布局（三）》

我们做设计时采用的方法体系

在 Intercom，我们用 Clay Christensen（哈佛商学院教授）法 来进行产品设计。我们把每一个设计问题置于一个方法体系中，聚焦于引发问题的事件或者场景，动机和预期，以及期望目标：

当_____的时候，我打算_____，这样我就可以_____。

举个栗子：当重要的用户注册的时候，我们需要被告知，这样我就可以和他们开始对话。

这给我们理清了思路。我们可以将这个方法使用到设计任务中，从而考虑优先级。这确保我们始终能思考设计的四个层面。我们可以知道系统里的哪些组件是这个工作的一部分，明白产品内不同模块的相互关系和促成这些关系的必要互动。在达到视觉设计之前，我们可以自上而下地从目标、架构，到交互这个顺序来进行设计。

在使用这个方法的同时, 我们正在建立一个式样库，来帮助我们达到设计工作的系统性。我们将会通过运用式样库的代码而不是用Photoshop来进行更多的设计。虽说这一过程并不完美，但我们会反复改进。

我想了解在读完这个以后你对于如何工作这方面有什么共鸣，请在下方评论。

更新

为了回复这里和twitter等地的评论，我写了一篇新文章 —— 如何筛选一个设计师。

一些朋友在Twitter和HN上认为我将视觉设计和体验设计弄混了，我并不赞同。我认为，你无法在没有考虑交互和系统的情况下，来做一个产品的视觉设计。我们并不是在画图，我们不只是设计海报或道标而已。

【想成为解决问题的设计师？来看实战项目！】

什么样的海报设计能让人停住脚步？
《设计易容术！如何设计一张高品位高水准的海报（二）》

瞬间提高浏览量的设计心理学是怎样的？
《超实用的设计心理学！怎么用隐喻设计引导用户？》

让设计真真正正为问题服务！
《秒变专业范儿！如何避免设计中有廉价的感觉》

原文地址：腾讯ISUX

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量90万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
官方微信：想在手机上、被窝里获取设计教程和各种意想不到的"福利"吗？添加优设哥微信号：youshege