万书网 > 文学作品 > 腾讯产品法 > 视觉:对关系和情感的探索

视觉:对关系和情感的探索




在产品设计实践中,存在着一些对视觉设计的误解。比如认为产品在外包装上、视觉设计上投入越多,产品最终效果越好;又或者产品的视觉设计方案一定要显眼和特别,不能泯然众人等等。这并不是说隆重的包装和特别的视觉设计一定是错的,但刻意追求与众不同显然违背了视觉设计的本意。

视觉位于表现层,它永远是产品策略的一部分,必须和产品的需求、当下所处的战略阶段、交互表现形式等保持一致,增益它们而非减损它们。为视觉而视觉,为自认为的“美”而设计反而有可能给产品带来灾难。

但是审美志趣千人千面,我们究竟该在视觉设计中做些什么?腾讯QQ2010版视觉设计的探索历程给这个问题带来了一个经典的启示。

最初项目预设的主题是“多样化满足用户需求,自由自在地使用QQ”,为了让这一版本的页面能够给用户带来个性化体验,腾讯的视觉设计师不断在保持和超越习惯间反复尝试,在用户习惯使用的界面风格之外另行设计了两个风格。但是很快,团队发现这条路压根儿行不通,多样变幻的界面让用户感到压力,个性化诉求变成了一种情感上的负担。团队这才发现,用户在使用QQ的时候,个性并不是最本真、最底层的愿望,可靠才是他们情感上的愿景。

于是很快的,设计师们将界面主色调回了最初默认的蓝色,并在此基础上进行优化创新。团队首次明确地提出了QQ的设计愿景——希望给用户提供一个朴素的容器,一个既可靠又兼容个性化的容器,用户在这个容器里可以自由展现他们的个性化需求。用Tencent  CDC设计师的话来说,就是“我们不能用自身既定的思维去限定或者认定用户的审美倾向,要做的仅仅是去提供用户能投入自身情感的有效的、便捷的途径”。

Tencent  CDC图:QQ2010

“做用户情感容器”的设计理念正是一种“以人为本”的理念,其视角纵横开阔,不再拘泥于产品本身,而是凌空俯瞰人(使用者)与物(产品)之间的关系。从某种意义上讲,视觉设计与前面产品方案设计的底层思路是相通的。视觉表达只是手段,通过不同手段探索人与物建立连接的可能、形态,并兼容变化。

日本著名设计师原研哉对此也有类似的看法,他认为:“在这个时代中,设计的使命不再是激起人们购买自己不需要的物品的欲望,而是应当去提出一种‘社会共同的伦理’,其今后面临的课题,也‘并非在于如何生产吸引人的产品,而是在于如何重新树立一种让人们能感受到物品吸引人之处的生活方式’……理想的设计,它的对象不是物品,而是人与人之间的关系。”[18]

重要的永远是关系。不只是“人与产品”的关系,设计还应体现“人—产品—社会—环境”之间的关系。事实上QQ2010对环境因素已经有了初步探索,但受制于当时的技术成熟度,没能运用动效形成深度整合。直至QQ2013,我们终于看到设计师们对关系的深度拓展。QQ2013版本将自然、时间的维度巧妙地融合到了产品细节之中。

Tencent  CDC:QQ2013消息会话图

Tencent  CDC:QQ2013登录框图

比如,QQ面板会根据用户当时当地的天气状况发生变化,登录页也会根据登录时间的不同显示出不同状态。

对关系的探索不止于此。收回宏观视角,回到更具体的细节,设计师仍需面对“什么地方用什么颜色”“字体大小和样式如何确定”的问题。事实上这也是关系的问题,认真思考页面中各元素之间的关系,我们就能找到答案。

携程首页图

去哪儿首页图

例如,携程与去哪儿的首页乍一看设计得并不美观,但实际上非常符合其产品的目标:让用户高效地找到自己想要的服务。通常用户对旅行项目的个性化组合需求强烈,因此会分开预订机票、车船票、住宿、门票等,这就决定了预定行为是分散的,连续性不强。要将众多呈现点状分布的需求有机组合到一起,分类就变得异常重要。

颜色就是最直观的分类工具,大面积运用色块可以有效提升用户识别度。想象一下携程和去哪儿网首页如果没用色块区分,仅仅使用文字和icon组合,用户要找到自己需要的服务将有多么费劲?

微信深谙此道。在设计收付款页面时,微信团队将收款页底色设定为黄色,付款页底色则设定为绿色,有效区分了两种截然不同的货币流转类型。更有趣的是,在中国的文化语境中,绿色除了广义上代表清新、自然外,在货币交易领域中常意味着损失金钱,比如股市会以绿色示意股票的下跌。

美国圣约瑟夫大学Haub商学院营销学教授、消费者研究中心主任迈克尔.R.所罗门(Michael  R.Solomon)对消费者行为颇有研究。他在《消费者行为学》一书中这样总结:“有证据表明,有些颜色(尤其是红色)能产生唤醒的感觉并刺激食欲,而有些颜色(比如蓝色)则令人放松。”美国运通公司研究发现,人们把蓝色形容为‘带来一种无限和宁静的感觉’,因此推出蓝色的信用卡。腾讯视频的logo标识以播放键为视觉载体,特意选用了红、绿、蓝三原色,意为可组合出任意色彩。造型像一个五彩缤纷的热带鱼,综合寓意是方便快捷的观看体验和自由丰富的选择。

除了探索关系,设计更需要了解生活、理解人性,触摸人类内心深处共有的情感。

日本当代陶艺大师小野哲平在描述他的创作感受时谈道:

不是被触摸,被观赏,而是靠感受。若要说感受什么,

那可能是我,可能是你,这才是最重要的。

做饭,洗衣服,打扫房间,和孩子在一起,

用过日子的态度,去做东西。[19]

一位禅寺的僧人看到这段文字后,表示“这话了不得”。“用过日子的态度去做东西”,多么意味深长的一句话。我们谁会在过日子的时候,穿上所有最华丽的服装,戴上我们的最喜欢的科技产品,开上我们最好的车……有人会那样做吗?那不是生活本来的模样。

生活本来的模样就是你熟悉的样子。比如,微信红包的视觉设计,用的就是人们最熟悉的红包,文字导引也是中国人传统的祝福语句。心理学上有个概念叫Familiarity  bias(熟悉度偏见),说的是人们倾向于相信自己熟悉的东西。熟悉能产生信任,不熟悉产生疑虑。有研究者认为,微信红包是将心理学“熟悉的偏见”用得最成功的案例之一。

设计总在陌生和熟悉间寻找平衡,一点新,一点旧。这也解释了为什么很多新产品都用人们日常生活中熟悉的场景来设计。优秀的设计师喜欢捕捉生活中所有熟悉和陌生的细节,他们能从中发现人性的秘密所在。

可看见是一回事,如何运用又是另一回事,这取决于设计者有着怎样的设计价值观。

管理学大师大前研一曾说过,如果一家企业的管理者请他去解决问题却说要解决的问题不止一个,那他从来都是直接回绝。因为问题只有一个,现象才是多个。同样的,人的外部行为多种多样,但隐匿在背后的内在逻辑往往只有简单的几种。好的设计会理解并拥抱它们,而非刻意评断。尊重真实,尊重人性,并在此基础上守护人们内心最重要的那几样东西,所谓设计的真意不过如此吧。

原型设计:工具无法替代思考

产品初学者刚开始画交互时常会陷入一个误区,容易把一些浮于表象的东西视作产品品位与格调的体现。这些东西包括但不限于高保真的原型图或动效、酷炫新奇的手势操作、精美的应用启动画面、优雅简约的背景图等等。

这并不是说能画一手好原型:能做出酷炫的动效不好。这些技能是我们的一个加分项,也是为产品锦上添花的东西。可残酷的事实是,当产品在战略需求层、规则框架层、流程方案层的总分还没能达到一定水平线时,产品根本连“锦”都不是,在上面添“花”也变得毫无意义。

更可怕的问题在于:我们在某项工具技能上投入的时间越多,往往就越容易依赖它、无法否认它。这不是某个人的问题,而是人性共同的弱点。它让我们慢慢形成一种错觉:只要我还在画图,还在持续不断地输出,那么对产品来说就是好的,我所做的一切就是在创造和输出价值。

可事实真是这样吗?

当我们沉迷于原型图的细节,不断修改打磨时,不妨停下来问问自己:它们真有那么重要?同样的时间成本,我可不可以用来做点更重要的事,能在产品前几个层级拿分的事?

骨骼没有验证之前,绝不能一头栽进雕琢细节的工作里。在“天天爱消除”游戏项目中,天美艺游工作室的美术负责人Vivi就本着这样的设计理念创造了“暴力拼图法”。它指的是:“当一个想法不知是否靠谱时,不管是否美观,就去将所有的要素用参考图拼出一张图,用图形去拼想法。制作人和策划员工都有很好的美术素养,完全可以通过拼图感受到最终的效果,这就有了最早的验证,再通过不断交互实现持续优化。拼图成本非常低,更重要的是实现快速验证。效果不好,立即放弃。而不是像之前一样,一定将所有的效果都做出来,然后再去测试,浪费大量的时间和成本。”[20]

细枝末节的优雅无法代表一个产品的格调,真正的优雅体现在产品解决问题的方案上。

事实上,我们也看到产品原型设计工具不断地进化。在互联网创业浪潮助推之下,原型设计成了一件门槛越来越低的事。从最早用Viso、Axure画交互,到能轻松画出高保真原型的Sketch,再到2017年年初上线,拖拽控件就能生成原型的xiaopiu。设计工具的进化,一方面节省了我们的时间——不用再在画图上耗费过多的精力;一方面将更多人拉到同一起跑线上,倒逼我们去思考更重要的问题。