cover_image

得到简单设计方案的过程是复杂的

5key 5key 2016年03月17日 00:09


前段时间有件“大事儿”, Facebook Reactions 终于面向全球用户开放 了。之所以说这是件大事是因为这是一个核心体现在设计上的重要项 目,Facebook 的标志性操作 Like 体系从此将步入新的时代。


自从去年下半年传出 Facebook Reactions 的计划,网上就有着不少的 评论。其中有不少人认为这就是一个简单的换表情的工作,坦白讲这样 的看法和评价都是相当肤浅的。很多大型的互联网公司在做一个决策之 前都会有大量的背景工作,一个理所当然的结论背后很有可能躺着大量被毙掉的思路。


前几天 Facebook 的产品总监 Geoff Teehan 在 Medium 上发布了一篇 文章,简单回顾了 Reactions 的设计历程,再一次的告诉大家「得到简单设计方案的过程是复杂的」 。虽然这里讨论的产品是一款海外的 社交应用,但在设计方法和理念上是非常值得我们学习的。今天正好借 着这篇文章聊一聊这两年我对设计流程、方法的一些感受。


我们首先还是回到 Geoff Teehan 的这篇文章,先帮大家简单总结一下 这篇文章的核心观点。下图是最终上线的 Reactions,从今天起我们只 需要在 Facebook 中长按 Like 按钮就可以选择唤出这个新的面板。相 对于之前的 Like 按钮, 新的设计让人更愿意(容易)对好友发布的信 息进行互动,也非常的有趣。而它的整个设计过程也非常的有意思。

图片


Reactions 这个项目其实从一年前就开始启动了,Facebook 希望对 Like 按钮进行一些改进来进一步增强用户互动的意愿,也让 Like 更加具有表现力。这是一个看起来很简单,但实际操作起来有非常复杂的项目。


Facebook 的设计团队首先将这个问题进行了一个拆分:


  1. 除了 Like 按钮,还有哪些 reactions 我们可以采用

  2. 有了这些,用户将会如何使用


这是两个非常好的问题,将项目的需求「增强互动意愿、提升表现力」具象了出来,让大家有了进一步开动的方向。


就像我们在做购物类应用时提出要「增强用户的购买意愿度」一样,这只是我们想要的目的或者说是想要达到的目标。而想要打掉这个目标我们需要将它分解成执行项,比如找到影响用户购买意愿的关键点是哪些,我们哪些手段来改进他们。只有在对问题进行正确的拆分,我们才有可能将工作顺畅的推进下去。


沿着上面的思路,Facebook 的设计团队制定了两条设计原则:


  1. Reactions 应该是具有大众普遍认知的(对于 Facebook 这样一个覆盖多国家、多文化的产品来说考虑还会更多)

  2. Reactions 应该是被广泛使用的,并且富有表现力


对于 Reactions 这个项目来说,最终的呈现主要就在这几个表情的设计上。而如何在多国家、多文化的情景中被大家无障碍的理解并准确表达是一个不简单的问题。


Facebook 用大量的数据分析和用户调研来回答了这个问题,这也再一次的说明对于绝大部分商业产品的而言设计是一个理性加感性的工作,它并不是简单的一个表情包那么简单。


关于设计原则这一块,这两年我的感触非常的深。早些时候我们有大量的基础功能建设有待完成,我们迫切需要解决的是让这个功能能够被实现。而当我们完成基础建设后,更多的是需要进行精细化设计。


从这两年用户在应用市场给我们的留评你就会发现,之前大家更多的在抱怨功能的缺失,而如今有为数不少的用户会在应用评价中抱怨很多很细节的设计问题。所以这两年来我对核心项目和新产品的设计流程中要求加入完整的设计原则并进行详细的论证,以确保我们的设计思路是满足用户、商业的述求。


接着说 Reactions,在确定了设计原则后 Facebook 非常“有心机”的去通过数据去挖掘了用户的需求,他们去尝试回答了三个非常具体的问题。


1.日常大家用的最多的表情是什么

图片


2.大家搜索的最多的表情是什么

图片


3.大家发的最多的短评论是什么

图片


前两个都是和用户对表情的使用直接相关,而第三个问题则非常有趣。看上去它似乎与表情并没有太大关系,但事实上这些简短的评价是完全可以用表情来替代的,而表情相对于这些单词也会更富有表现力。


在以上这些信息的基础上设计团队对关键词进行抽取,最终提炼出最核心的几个关键词。而它们就是 Reactions 最原始的雏形。

图片

这里的做法其实和购物类产品的思路很类似,对于一个优秀的平台很多的 Promotion 和 Collection 并非完全是人为设计出来的,更多的是通过对用户热搜词、购买商品类型等多维度聚合的来的。是数据挖掘和分析证明了他们存在的意义和相对于平台的优先级。所以并非某个竞品做了某个活动就意味着我们应该“Copy”一份,这些内容很有可能由于业务类型、用户现状以及产品在终端上的竞争力而决定的。


最终 Facebook 设计团队将他们具象出了以下这些接近最终成品的表情。此后 Facebook 的设计团队还在这些原型的基础上进行了动效的制作和交互形式的探索。相比较而言,前面的这些探索过程对我们设计师的意义更大,所以后面的部分大家有兴趣可以阅读原文来进一步了解。

图片


回到之前网络上的评论,很多人将它想得过于简单。这六个动态表情并不是一个表情包那么简单,它背后有着产品、设计团队的大量工作(其中还会有大量的工作文中并未提及)。这也充分了体现了我们今天的主题「得到简单设计方案的过程是复杂的」。


再回到我们的日常工作。我们经常会看到某个产品的某个设计,然后开始吐槽这个设计如何如何的糟糕(有些甚至攻击到其设计师),这一点其实非常的不好(当然有些设计确实是有问题)。


我们且不说尊重问题,在不了解其背景的前提下就妄加评论是没有任何意义和营养的。在这个行业工作了十多年我有一个非常深刻的感受,每一个你不理解的设计可能并没有你想象的那么简单。


每一家公司他们的目标、商业规划、资源情况都是不一样的,某个不好的设计很有可能是由于项目的 Deadline、业务特性等多方面因素造成的,而就中国公司里设计师的话语权来看它可能还需要一段时间以及大量设计师的努力才能得以改变。


顺便说一下,这也是为什么我一直和团队设计师强调我们的工作是完成我们的设计思路、方法,项目的设计方案只是我们在这个过程中的“衍生物”。当你有一天离开公司的时候,你能带走的是你的经验和思路、方法。项目是带不走的,而且没准你也不太想和人家提。


那么说到设计思路、方法我还是想先定义一下做商业产品的设计师。在我看来 TA 是一个通过专业技能来解决商业问题的角色,所以我们需要感性&理性的看待问题,而这其中理性的部分往往是设计师所缺乏的。


在我参加过的设计评审和晋升评审中,有很多设计师面对提问的回答都是“我觉得是.......”,而这一类的设计师无论是在日常工作还是工作考核中都会受到一定的质疑。


在一个大家都在用数据说话的环境里这些感性的结论很难获得大家的认同,即使有些时候需求方认同你的观点,仔细回想一下这其中有很多时候很有可能因为你的想法正好也是他们所想的。


很多设计师在晋升季抱怨作为设计师很难通过数据来证明自己的能力(无法与产品经理的贡献区分),导致自己的职业历程受到阻扰。其实我并不这么认为,数据在很多时候反而是设计师的一把利器。


在中国这样一个用户体量如此之大的一个市场里,任何一个稍有知名度的产品其用户量都值得设计师对其数据进行深入的挖掘和研究。通过它你能准确的定位问题或者挖掘机会点,再借由一系列科学的方法一步步推导出自己的设计方案。这个时候你就会发现面对大家的问题你会由“我觉得是.......”转变为“因为......所以......”。而今天 Facebook 的这个案例就充分的证明了这一点。


在我自己现在的工作流程中,一个完整的项目必须要包含以下几点:


  1. 核心问题的拆分

  2. 现有数据的分析

  3. 商业竞品&设计竞品的分析

  4. 核心流程用户使用情景的分析

  5. 设计原则的制定

  6. 用户测试


大家可以发现以上几点几乎全都不设计到产品的细节设计,而事实上我们在具体设计稿的产出上所投入的时间占整个项目的周期非常的少。


其实道理也很简单,当我们把前期的工作做到位了,后面的具体实施对于有经验的设计师都不是难题(完整的 UI Kit 也给了我们很大的帮助)。


而当我们站在业务方面前来陈述设计方案(第12期周刊主题)时大家不是在质疑设计师是不是又在凭着“设计情怀”工作,更多的而是在讨论我们应该选择哪个方向或者是如何协调各方资源更好的将设计方案实现出来。


以上提到的这些并不是在贬低设计师感性的力量,而是希望用数据分析和工作方法的理性来“武装“我们的感性的那一面。让设计师也能够在产品的共建中占有真正重要的地位。


就像 Facebook 这次的项目一样,作为业务方他们很难质疑(过程中肯定也会有一些坎坷)设计方案的科学性、合理性。虽然 Facebook 还并没有对这次改版的数据验证做一些信息上的公开,但至少我以及 Facebook 上的好友们对于新的 Reactions 玩得不亦乐乎呢。


PinDesign 会员计划:


本期周刊我们将整个设计的过程分成了设计策略思考和细节设计两部分。设计策略主要是为了帮助我们对设计方向有明确的把控,而交互设计这个环节则能更多关注整个功能、流程的精细化设计。


本期#31的 PinDesign 会员周刊主题是:「设计流程(第二章)- 动手设计之前不能忽视的准备工作 」,从竞品分析、框架设计、Sitemap、UserFlow 分析了设计前这些工作对于交互设计环节的影响。

图片

本文章仅授权付费转载,谢绝其他一切形式转载(不含转发)。本文仅发布在 Pinapps 微信公众号和知乎专栏。


图片

点击「阅读原文」了解会员计划

继续滑动看下一个
5key
向上滑动看下一个