BLOG

UI 设计的未来与 90 年代迷梦

洞察|2014-07-09

最近,eico 北京办公室迎来了一位新成员,音效设计师 SLioN。其实在 2008 年,eico 成立专门负责动态界面设计的 Motion Lab 之后,就已经在一些公开场合招募音效设计师和专职文案了。今天的分享基于这三种职位,谈谈如何运用音效、动画以及文案赋予产品更难忘的体验。
以下文章选自美国电商网站 Shopify 的一位女性产品设计师 Helen Tran 的个人博客。她通过自己的工作经历,认识到情感化设计的重要性。认为应用本身是否具有“愉悦感”是区分优秀作品与伟大作品的关键。
一次,当客户执意要求在某个产品中加入“社交功能”后,尽管我本人不喜欢这样跟风,但还是做了妥协,设计了一枚心形图标。但在后来做动画测试时,却被工程师做了改动。原因在于,团队中其他所有男性成员都认为这枚心形图标过于女性化,没有男士愿意点击。

事实上,这并非个例,拒绝在应用软件中加入情感化设计早已是整个科技行业的“通病”,因为整个界面设计行业的视觉风格偶尔会模仿科幻电影的场景。这也很容易解释:今天的设计师正是当年那些看科幻故事长大的孩子。自上世纪 70 年代以来,我们就一直被科幻景象所包围。如今,这种势头依然存在。

0101

而到了上世纪 90 年代末,这种视觉风格似乎已经完全形成。彼时,纵向排列的数字、精确的几何图形、冰冷的背景色调已然成了设计美学的核心,除了偶尔能看到的智能人脸,几乎所有界面都去除了带有人文色彩的元素。

在 90 年代的科幻迷梦里,我们幻想全世界的每一台计算机都能够融入我们的日常生活。每天清晨醒来,首先映入我们眼帘的是它们;每天夜晚入睡,最后与我们接触的也是它们。它们的任务就是每天为我们服务,预测需求,满足欲望。看着它们的界面,我们就像跟自己的朋友进行交谈一样那么亲切自然。这个时候,科技俨然成了我们进行沟通的主要手段(或者说唯一手段),而我们只需要跟这些照顾我们的计算机处好关系即可。

换句话说,我们在利用没有任何情感的计算机界面来传递感情。

人类的情感与生俱来,或深或浅,或浓或淡。我们使用工具是因为它们自身具有功能性,仅此而已。但有些工具却让我们日渐着迷,甚至产生依赖,原因在于它们具有情感体验。

愉悦来自细节

假设你当前使用的一款产品能够满足你的需求,让你方便快捷地完成任务。但是仅有这些还不够,接下来还要考虑它能给你带来多少愉悦感,这才是优秀的设计与伟大的设计的区别所在。

在《The Shape of Design》一书中,Frank Chimero 写道:“温馨而又热烈的交谈氛围、令人愉悦的设计风格不仅能拉近观众与作品的距离,还很容易让观众在作品中体会到设计者的存在,当作品本身的色调和效果被赋予更多人性化元素时,用户很容易想到作品背后的创作者。”

虽然科技的发展史已经相当漫长,但它终究难以取代面对面的沟通——我们需要有个人在另一端与我们沟通。虽然很多用户还没有注意到那一两处小细节,但总有一天他们会感受到这些细节累积起来的温馨情感。

那么,当前可以运用的工具有哪些?设计者又如何在基本审美观不变的情况下融入个性因素?接下来从声音、动画和文案这三个方面依次解释。

声音

声音对我们的影响主要体现在生理、心理、认知和行为等方面。当我们还在探索声音应该如何融入应用时,熟练掌握声音运用技巧的游戏业已做出示范。

0202

《Journey》,又名《风之旅人》,陈星汉 that game company 开发的一款游戏。它是一款在音效技术运用方面表现得十分纯熟的独立游戏。作曲家 Austin Wintory 在整个设计过程中,主要负责根据玩家的进度切换游戏的音乐主题。比如,游戏的背景音乐会根据用户的操作行为随时变化,这种反馈效果非常美妙。很多玩家都说说这款游戏“感人至深”,宛若“朝圣之旅”,而这也成了对设计师们辛勤付出的最高褒奖。Wired 网站的 Patrick Shaw 坦言,这款游戏让他经历了“情感的诸多转变,有惊喜,有恐惧,也有悲伤”。

030303

Clear&Duolingo

尽管说应用软件的界面不一定非得配上让人身临其境的音乐,但是音效的添加却会在一定程度上为用户体验加分。例如,像 Clear 和 Duolingo 这样的应用软件会在用户完成操作后播放出振奋人心的狂欢式音乐,而这不仅提示用户已经成功完成了任务,更加深了用户对这种用绿色表示的成功状态的视觉符号的认知。

动画

除此之外,我们还可以自由地选用动画来表达产品,以此和静止的广告牌进行区分。当用户界面里的动画模仿自然世界里的动作出现在用户眼前时,他们会觉得很舒服。这是因为我们的设计在自然环境中建立起了情感纽带,一旦它通过其他媒介重现出来,就会产生美妙的用户体验。

05050

情感纽带的创建是在那些没有生命的物体中融入人性,而且这种关系一旦成立,就会存在数日、数月甚至数年之久。

作为动画业的翘楚, Pixar 一直都处于领域前沿地位,它在创作融合人类情感的动画方面技艺娴熟。在 2011 年举行的迪士尼 D23 展会现场,有人这样问 Pixar 团队:“Pixar 电影中有没有这样一种东西,让你们的电影变得‘别具特色’或者‘与众不同’?”  John Lasseter 这样回答:“是那种你能从迪士尼的老电影中获得的感觉,就像看到小飞象丹波探望被人类锁起来的妈妈时的感觉,看到小鹿斑比的妈妈被人类杀害时的感觉,或者说是看到匹诺曹在欢乐岛时的感觉。现代的好莱坞大片已经很难让你感受到这样深厚的情感了。”

因此,Pixar 成功的关键就在于他们能理解人类情感的重要价值,能明白到底是什么驱使人们为每一个角色、每一部动画注入更多情感。

既然如此,我们需要考虑的是,能从这些动画制作业的大师身上学习到什么以及如何将自己学习到的东西运用到工作中。重现我们日常生活的所见之景会让用户联想到自己的个人体验,因此,我们进行产品设计的首要目标就是让每一个动作都变得栩栩如生。

迪士尼动画设计师 Ollie Johnston 和 Frank Thomas 曾合作出版过一本图书——《生活的幻象:迪士尼动画》,他们在书中列出了十二项让动画创作更具真实性的设计原则。虽然本书并不以界面设计为重点,但是从微观层面上来讲,我们完全可以将这些原则应用到界面设计中来。Tweetbot、Apple Maps 以及 Vine 都是画面效果真实、让人情感愉悦的优秀动画案例。Apple Maps (点击查看 gif 图)上的大头针会人让产生这样的感觉:就好像你自己手中的大头针掉落一样,一开始它会缓慢下落,而后则迅速降落进行定位方。Vine 的界面虽然简单,但它的动画效果让人觉得像是一个打开的抽屉,而不仅仅是一个下拉菜单。

文案

虽然文案看起来像是一种很浅显的交流方式,可事实上,它是容易被人忽略的重要信息。通常,设计师们总是匆忙地使用图像,而忘记了文案的重要性。

充分利用文案的优势与用户进行交流,可以减少形式上的繁琐,甚至提供有趣的小“彩蛋”。

学习型编程网站 Codecademy 鼓励用户积极应对科技的发展。他们会主动地与用户展开对话,甚至会向潜在用户问一些简单的问题,而不是把自己的口号和简介放在那里,对用户置之不理。这种方式虽然很不起眼,但它的效果却很明显,至少它教会了用户怎样使用网站。

06060

Codecademy 采用的对话式教育方法既方便可行又平易近人。

最后是 Clear,它主要通过一系列的手势进行互动交流,不需要任何额外的文案就能正常运作。但是,用户完成任务时,界面上会出现名人名言。因此,这不仅仅是一种乐趣,更像是一种提示,告诉我们为什么一直在用 Clear。而 Clear 总会与我们一道庆祝自己的胜利。

070707

Clear 界面中出现的名人名言是一种激励,更是对人们辛劳一天后的小小奖励。

科技领域的激烈竞争每天都在上演,因此,说服用户并让他使用自己的产品才是取胜的关键。通过在产品设计中融入声音、动画和文案,设计师们可以为界面赋予更多的愉悦因素,从而让产品与用户之间建立起情感联系。尽管科幻电影给我们带来了很多启发,但是我们更需要明白如何与用户深入沟通。

因此,界面设计的未来不再是源于上世纪 90 年代的一个梦,而是更多涉及到人的情感意识。怎样与人交流,就怎样跟产品交流吧。

译文来源:Medium

更多内容

洞察

你是消费者还是创造者?

正在发生

“150mm与150m的对话”

新闻News

Albert Cheng—eico space 联合创始人

正在发生

真正的设计师,从不相信效果图

正在发生

一加上海体验店

正在发生

eico design 找玩伴儿

媒体报道

Create Change 信息交互论坛

正在发生

UX TOUR 中国行

媒体报道

一加手机,做艺术的生活家

正在发生

亚马逊

正在发生

人人贷

正在发生

小鱼儿科技

正在发生

快的打车

正在发生

快的打车4.0版设计故事

团队活动

我们在 H2OS 发布会拍下了这个!

媒体报道

我是 Rokey,这是我的利器

设计利器

我是刘娜,这是我的利器

设计利器

我是喻秦,这是我的利器

设计利器

我是孙琦,这是我的利器

设计利器

我是张坡,这是我的利器

设计利器

我是朱明明,这是我的利器

设计利器

我是瑞东,这是我的利器

设计利器

我是蓝方,这是我的利器

设计利器

我是郭沛君,这是我的利器

正在发生

丁香医生 × eico

正在发生

和我们一起 inspire the world!

正在发生

一加天气 App

正在发生

智能家电的用户体验设计

正在发生

黄太吉

媒体报道

手机编辑说最想看到eico做手机,你呢?

正在发生

来设计公司做 HR 大管家吧!

团队活动

欢迎 Mike 加入我们

团队活动

西文书法与手绘字体

设计利器

设计者的利器

正在发生

那些年和诺基亚造的各种神器

媒体报道

除了 Weico,eico 还做什么?

正在发生

专注互联网体验与线下空间的自然结合

荒岛唱片

eico 荒岛唱片 第一辑

媒体报道

一加启示录

团队活动

世界那么大,我却遇见了你们

正在发生

鼓浪屿对面的办公室

正在发生

eico 上海团队入住新家

设计沙龙

让停车不再困难

正在发生

Apple Watch 的一天

正在发生

美图发布会

正在发生

eico 新版网站上线

正在发生

蚂蜂窝 × eico

正在发生

阿里巴巴选择 eico

创意产品

eico 2014 生活集

洞察

CES 归来,反思智能家居“智能”化

洞察

智能汽车,我们到底应该关注什么?

正在发生

我们需要什么样的可穿戴设备?

正在发生

漫游旧金山,在诗人角落读书

正在发生

Happy New Year & de Young Museum !

正在发生

America,we are coming!

正在发生

为下一个十年而创造

创意产品

eico 限量版礼盒新鲜登陆

媒体报道

侬好,上海!

媒体报道

eico design 疯狂设计师

团队活动

Sneaker 文化分享会

正在发生

eico 与魅族,七年一同走过

团队活动

深呼吸,以设计思维探讨社会问题

洞察

TechCrunch 北京峰会:设计、科技与创业

团队活动

180分钟 创想设计

团队活动

如何与客户更好地沟通?

设计沙龙

INSIGHT 体验设计沙龙影像回顾

洞察

UI 设计的未来与 90 年代迷梦

媒体报道

更智能的奔驰还是年轻人的菜吗?

设计沙龙

INSIGHT 体验设计沙龙

洞察

一切关乎情境

正在发生

eico Creative+ 跨界合作正当时

洞察

字型,没那么简单

洞察

车内人机交互设计原则

洞察

设计师的咖啡馆 周末分享会

洞察

智能电视时代的⽤户体验机遇

洞察

FamilySearch 用研背后的故事

创意产品

九周年海报设计故事

正在发生

加入我们,让你的设计更具影响力!

团队活动

寻找不一样的沙巴

创意产品

eico 九周年生日快乐!

洞察

iOS 7 中的动态焦点设计思想

媒体报道

商业产品的设计外脑

媒体报道

从 eico 看设计公司如何探索互联网

媒体报道

走进 eico design

创意产品

eico card V2 版本已经出炉

媒体报道

MIIC 移动互联网创新大会演讲

媒体报道

右脑互联网

媒体报道

微博创业记

媒体报道

用户体验新势力

媒体报道

做 Weico 的 eico design

媒体报道

个性化 UI 的商业潜能

扫描二维码,
关注eico微信公众号

保存或扫描二维码
关注eico微信公众号

确定

您的需求已成功发送
我们将在72小时内与您取得联系

确定

合作机会

一封邮件或许正是成就一个出色产品的开端。
欢迎填写表格或发送合作邮件至:service@eicodesign.com,您也可以直接拨打咨询热线:010-59273171

*
*
*
*
  • 北京
  • 上海
  • 广州
  • 深圳
  • 珠海
  • 厦门
  • 杭州
  • 南京
  • 武汉
  • 西安
  • 成都
  • 重庆
  • 青岛
  • 沈阳
  • 其他
  • 汽车
  • 通信
  • 智能设备
  • 行业方案
  • AR/VR
  • 出行
  • 医疗健康
  • 供应链
  • 零售
  • 媒体
  • 餐饮
  • 家电
  • 金融
  • 投资
  • 旅游
  • 娱乐
  • 效率工具
  • 社交
  • 电商
  • 其他
  • 需要现在开始
  • 1个月左右

媒体联系:press@eicodesign.com