[ISUX转译]设计追波风

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

__________________以下为译文正文__________________

设计追波风

1

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

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

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

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

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

2

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

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

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

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

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

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

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

3

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

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

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

4

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

5

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

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

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

思考一下设计的四个层面

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

6

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

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

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

7

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

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

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

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

_____的时候,我打算_____,这样我就可以_____

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

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

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

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

更新

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

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

__________________全文完__________________

Tags: , , ,

wellso
wellso
Windows 10 新特性变化研究
上一遍
见微知著,谈移动缺省页设计
下一遍
27,335
QQ空间 新浪微博 Facebook Google+

相关推荐

留下你的想法吧

  1. DH says:

    感谢分享,受益很多,过分追求一些美术效果,而非真正的用户体验是不对的

  2. MartinRGB says:

    老文,当时没觉得什么,这次重读了一遍,发现深有体会。Dribbble上很多设计都是与产品开发脱节的,结合最近的实践。好的设计可能设计本身只占40%,实现却占60%。

  3. beckyguo beckyguo says:

    学到了,牛赞!

  4. huang says:

    看不到图

  5. Liu.S.C says:

    老实说,他的概念图还有架构图没看懂。
    不知道哪位能够给解释一下。谢谢!

  6. 希热仁清 says:

    入木三分的观点。设计是为了更好的传播信息和解决问题,这是创作的缘起。

  7. 希热仁清 says:

    入木三分的观点。设计是为了更好的传播信息和解决问题,这是创作的缘起。

    刚才的邮箱号填写错了。

  8. 希热仁清 says:

    论点精辟,入木三分。设计是为了更好的传播信息和解决问题,这是创作的缘起。

    刚才的邮箱号填写错了。

  9. ron says:

    非常认同观点,设计的根本目的是巧妙地解决问题。

  10. showv says:

    很深入的见解,赞。一个好的设计师不应该局限在“画图师”的范畴,他可以而且应该是博采众长的。
    关于几个层次的架构图其实个人更倾向于五层划分法:
    战略层(strategy)、范围层(scope)、结构层(structure)、框架层(skeleton)、表现层(surface)[引自:《用户体验要素》]

  11. 有个人 says:

    疯狂奇思妙想的创造力+经验累积的方法=不断让人意外的设计惊喜
    如果楼主的意思是追波上的是种偏执,难道偏于方法不一样是一种偏执?个人以为优秀的设计生于方法,也最终死于方法...

  12. 泠曦 says:

    全局考虑的思路

  13. Alex says:

    学习了,受益良多。好的设计本质上还是商业问题解决方案,思想最为重要,贯穿一些列过程的始终,没有清晰的思想就只是个美工罢了

  14. John says:

    第一个图片“最炫追波风”是什么字体呢?

  15. 孙硕 says:

    首先,追波的东西就像欣赏美女。适合设计人员无事闲来冲浪。学生族练级用的。

    在追波上炫技的设计师首先一定是设计狂。而接地气的设计往往登不上追波的“大雅之堂”。追波的作品、站酷的作品经常会惊艳到我。有的务平台交互逻辑非常复杂。需要满足上几百个功能,表格分裂、筛选、钻取、时间轴……真是炸天多。在页面表象上看,简洁、相似功能的归类分区,业务实现的扁平,交互的连贯流畅才是整个设计的灵魂。
    视觉的设计是要在业务、功能、逻辑、易用性基础上展开的。

  16. cly says:

    受益匪浅,真赞

  17. ab says:

    有工业设计背景的人做UI设计往往比较强

  18. 粒粒 says:

    说的真好。

  19. julio says:

    基本观点是同意的,但是也不能完全否定这些设计的价值,至少对于我这样的不懂设计的人来说,这些作品是可以用来参考的,虽然这些作品无法达到作者所说的其他几个层次,但是在配色上至少应该是过关的,并不是所有的项目都会有配套的设计师的,当我想做个项目的时候,我就会在dribbble上找相关的设计案例来参考,我觉得这就是它的价值所在~~

  20. Crystal says:

    感觉这更像一个产品眼中的追波,而绝不是一个冷静的设计师。
    追波小图展示的等等特性决定了它就是个灵感平台,每个设计必须是让人眼前一亮的小火花,按照完整产品设计的眼光来对待 是不冷静和严苛的,Behance等平台才是完整产品设计出现的地方。
    一个“炫技”的设计能给你带来一丝灵感,这才是追波的价值。

  21. 郭喜嘉 says:

    这是不是架构吐槽视觉设计师的?

  22. 小源子 says:

    其实我一直觉得做
    UI做的更多的是美工,设计师都在追求一种主流,并且对着主流稍加修改。

  23. says:

    不错哦

  24. bigwoll says:

    或许只是一帮脑子超级灵感的乐天派们,聚在了一起,说:”我就喜欢做酷炫的东西!哇哦!最近界面设计很火嘛,我也要做!“哐哐哐 duang~闪瞎狗眼的设计诞生了。
    当然。他们确实没有考虑产品设计的概念,只是做自己而已,没有对错!
    但是感谢这个文章,提了个醒,因为如果新手们一股脑的追随它,但是发现工作中根本就不是这回事!他们会不会放弃设计呢?会不会把责任都归结于,“他们根本不懂设计!”这样的定论呢?从而一个有可能会很伟大的设计师就消失了!
    这,太可怕了!

  25. Ahigono says:

    追波本来就是以视觉为主的设计,以引领流行或超前视觉为核心,想让视觉设计师也要全部包揽交互设计师的活吗?有当然更好,没有的话也无可厚非,就像多啦a梦的作者藤子·F·不二雄,他里面作品的一些超前科技产品设计在以前看来是不可能的,也没有逻辑性的,但是,正因为人们喜爱这些科技产品,向往这些产品,我们生活中逐渐出现了以往没有的东西,他的作用在于引导人们去实现它,或许遥不可及,但总是引领着进步,在我理解看来,追波的意义就在于此吧。

  26. sansun says:

    作者的文章有很多值得学习的地方,但某些观点感觉不太认同;

    dribbble设立之初的目的就是让更多的设计师通过作品彼此认识,它更多的是鼓励设计师抒发设计灵感,表达创意,所以它规定只能发800*600(400*300)的图片,如果需要讲清楚设计的思路与过程,那可能需要长篇大论,一般很多设计师就会选择behance,behance上可以找到很多从产品体验角度去深入思考的设计……

    所以每次看到有人借dribbble发表文章,而且还是长篇大论,感觉有些没有弄清楚这个网站的创立目的……但确实现在有很多设计师作品同质化严重,这是个值得深思的问题。

    总之:如果设计师点开了dribbble就是为了看灵感、看炫技、看天马行空,但不代表他们不关注体验,如果要看体验与设计思路,他们会选择其他的设计网站。

    大概就这么多吧.....嗯

  27. Glenn says:

    赞同楼上观点~

  28. Real says:

    有一辆马车,是由并驾齐驱的几匹马拉着的,其中一匹马太生猛,跑得太用力了。于是,另一匹马就兴冲冲地说了:你要考虑整体呀,你跑得这么用力其实跟乘客的体验根本不是一回事,你这不是在炫耀你跑得快嘛,拉车的精髓在于能把车拉动就行了,干嘛这么拼呢,你要···“过不多久,主人发现着几匹马里,有几匹老跑不动,以为他们有病,就把它们干掉了。

  29. Momoko says:

    文中作者对设计师一职的阐述是我的追求,即设计师不单只是画图师,而是能优雅地解决实际问题,产生效益。我会经常逛Dribbble,虽然细看很多关于UI的设计是不合实际使用逻辑的,但是逛Dribbble就像逛菜市场一样,里面都是新鲜热辣的“货”,看着就开心虽然不一定能直接吃。感觉Dribbble就是炫技的地方啊,而且会炫技的设计师不一定也不关注实际项目中的体验,或许就是实际项目中无法施展这些炫的技能所以才来Dribbble呢。相比之下Behance里面的则是比较完整的产品设计展示。

    不过很困惑的一点就是,假如老板也逛Dribbble,那就有点麻烦了,他会说:哎呀你看人家画的多炫啊,人家那耀眼的光效,那细腻的质感,那舒服的配色,歪果仁就是牛逼啊... ...

  30. Dorothy says:

    渐渐感受到读工业设计做ui的优势,逻辑性会更强,对人机交互也会更有思考。

  31. 小Ken says:

    追波也有可能不是设计师的本意,经常会听领导、客户说:交互要做的炫,要用扁平化,要用大幅banner,要用瀑布流,要用win8 风格等。。。总之一系列和潮流相关的词,他们都希望在设计中去体验,而不关注,自己要做的是一个什么样的产品

  32. julian says:

    关于追随形式还是功能的争论一直都有,过去有,现在会有,以后也会有,各行各业都会有。

  33. Wawa says:

    这些想法我都认同,但是在当今互联网公司还不成熟的情况下,这些设计思维设计方法是很难面试成功的。因为小公司面试官很多都不懂,他们要的就是炫技,看你在作品好不好看靓不靓炫不炫出众不。就算你跟他解释再多深层的东西也没有用。我相信肯定有跟我身同感受的人……

  34. 大三学生一枚 says:

    老师说得很有道理!真正实际运用中,用户体验更加重要,单纯的追求视觉效果老板不买账,客户更不买账!还有,一个优秀的牛逼的设计师,确实应该懂代码,尤其是在这一样一个互联网的时代,更应该有这样的觉悟!我很庆幸,我在这方面没有选错,而且大二就已经在外面公司工作,以及和自己的 团队一起成长,代码方面就是他们这样一群充满朝气和志向的伙伴多次的警醒让我坚持在做设计的时候,学会代码,这样合作起来大家都好!感谢老师你的证实,感谢我的伙伴们!

  35. Irenezlh says:

    看完让我想到了用户体验要素里面提及的几个层级以及一些XX,做事需首先抓住目的,然后规划再执行。

  36. anjanu says:

    这个只能针对到达一定技术级别的设计师,技术已经吊吊嗒那些。
    想想那些刚入行,或者完全没有单独负责过项目,或者设计不是特别厉害的设计师。
    追波上的“炫技”能启发他们很多,很多可能没什么软用的ReDesign,也能起嘛让他们熟知一下界面的设计流程。也是有很多好处的。凡事总是过犹不及。

  37. 古叉 says:

    挺不错的。终究是要走上学习编程的路啊。