[ISUX转译]设计追波风

 设计追波风

20150213103749793

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

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

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

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

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

20150213103808280

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

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

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

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

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

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

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

20150213103822728

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

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

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

20150213103838284

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

20150213103852160

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

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

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

思考一下设计的四个层面

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

20150213103901230

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

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

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

20150213103913931

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

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

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

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

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

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

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

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

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

更新

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

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

本文来自:腾讯ISUX (http://isux.tencent.com/the-dribbblisation-of-design.html)

 

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/4943/

(0)
CatherineCatherine
上一篇 2015-04-15 10:05
下一篇 2015-04-17

相关推荐

  • Axure RP 8.0软件安装教程及下载地址

    破解文件下载地址在文末,请查看!1.双击AxureRP-Setup.exe安装文件。2.点击Next。3.勾选I Agree,然后点击Next。4.一般是默认安装路径。5.点击Next。6.点击Next。7.等待安装。8.取消勾选!取消勾选!Run Axure RP 8使其处于未选中状态,然后点击Finish。9.在桌面找到Axure RP 8,鼠标右击选择打开。10.点击确定。11.勾选Don’t  show this at star...

    2018-03-27
  • 2017年视觉设计的六大趋势

    我们在去年的趋势基础上进行筛选提炼,在历时两周的最终定义阶段之后,整合出一份2017年的设计趋势分析报告,希望能给各位从事并热爱设计的同学们带来一些启发和帮助。

    2017-05-09
  • 设计师要懂心理学の周边视觉还是中央视觉?

    人有两种视觉,中央视觉和周边视觉。中央视觉用来直视事物观察细节,而周边视觉则展现视野中的其他区域,也就是人眼能看到的周边区域。人可以用眼角的余光观察事物,这当然很有用,不过,堪萨斯州立大学最新研究表…

    2014-11-28
  • 微软设计师分享|七个技巧,帮你提高产品的用户体验

    今天为大家带来的一位在微软工作的用户体验设计师——JoannaNgai的设计分享,主要讲述了7个如何提高产品设计体验的小的技巧,个人觉得她的见解结合了产品思维和设计思维,简单明了,当然要让我们体会的更深刻,就需要我们在日后工作中来细细体会。

    2017-05-09
  • 五个技巧,设计优质的新用户引导流程

    新用户引导绝对是个瓶颈。花费时间设计和开发,找了用户测试调研,最后上线了,依然拦不住汹涌的用户流失潮。很多时候,也许只是新用户引导没做好而已。今天的文章,我们来聊聊新用户引导的设计~新用户不去注册是因为他们乐于了解你的产品的UI是如何工作的。他们注册是因为他们认可你的产品所呈现出来的价值。好的空状态设计,能够化腐朽为神奇。

    2017-05-09
  • 【面试】不吹牛13,我是如何7天拿到百度&网易&创新工厂等6个实习offer的...

      “不卑不吭,保持谦逊”,这是管静总结的与HR和面试官打交道的八字法典。 又是一个40度的夏天,没有喧闹,只有窗外吱吱的蝉鸣。刚过完大三的同学,都开始了寻找实习的路程,有人欢喜有人愁。就读于贵州一所普…

    交互设计 2015-08-17
  • 制作在线UX作品集的四个步骤

    本文作者将帮你系统梳理一下创建一份作品集的全部步骤,让你明白UX作品集的常规创建流程。

    2017-05-02
  • seeds对话未来丨“用户交互设计天才”Kaveh Shirdel

    对话未来丨seeds系列分享会seeds, 由蔚来原创打造,是一个分享有趣观点、新知与灵感的讲堂,它寓意着每一个思想的火花都像一颗种子,被灵感浇灌后,汇成大树。2015年3月seeds诞生,从一个面向蔚来全球员工的内部讲演平台,发展到不断吸引各行各业的主讲人,并且在蔚来App公开直播的产品。到目前为止,seeds 已举办了13场演讲。今年,seeds会走进我们各个城市的蔚来中心,成为常设活动。我们也欢迎各位用户成为seeds的主讲人。人...

    2018-04-29
  • 无限滚屏、分页亦或加载更多,到底怎么选?【UXRen译#139】

    作者:Christian Holst(翻译:xiuxiu  审校:Gogi) 电商网站里展示商品的最佳交互形式是什么?是分页、“加载更多”按钮还是无限滚屏?我们在Baymard机构开展了几项持续整年的大规模可用性测试,研究了50多家主流电…

    2017-08-04
  • VR/AR开发程序中直接搜索Sketchfab的3D素材 / Vive Pro 如何买更省钱?/ Vulkan拥有直接内存分配器

    从今天起试试这个新形式,把重点的资讯提炼后合并成一条,欲知详情就摁紧二维码跳转阅读啦。我们依然尽量让这些从外媒翻译过来的信息以最合适的中文翻译方法论润饰和(或)修改后放在这里。有什么好想法新想法告诉我们!【Sketchfab推出新API,3D内容“搜索引擎”可植入VR/AR应用中】Sketchfab今天推出了最新的 Download API(下载API),允许应用开发者直接把Sketchfab内容导入他们的3D、VR和AR软件,这样就无...

    2018-03-21