>

奥门新萄京娱乐场能够设计员解读UI分界面动作效

- 编辑:奥门新萄京娱乐场 -

奥门新萄京娱乐场能够设计员解读UI分界面动作效

原标题:拟人形法则,让用户的第一眼就被吸引

最近又被杜蕾斯的文案刷屏了,小小感恩节,一口气调戏 13 个品牌,引发全网热议,胃口之大,手段之高,不得不让人佩服。

什么是设计的可供性?

可供性是一个很值得玩味的专业词汇。一方面,在中文语境下这个词很难翻译得准确,它包含太丰富的语义。另一方面,这个词汇又可以用在很多的设计语境中,任何一个不好的设计,你都可以说它可供性不好,因为可供性跟设计目标几乎是息息相关的。那么可供性究竟是怎么定义的?先看维基:

可供性(affordance),或称为直观功能、预设用途、可操作暗示、支应性、示能性等,指一件物品实际上用来做何用途,或被认为有什么用途。也就是说在物品的某个方面,具有让人明显知道该如何使用它的特性。例如门提供“打开”的功能,椅子提供“支撑”的功能。人们得知如何使用物品有一部分来自认知心理学,另一部分来自物品的外形。

茶杯把手意味着可以茶杯可以「拿起来」

从维基的定义来看,可供性是产品一种不言而喻的功能隐喻,让人一眼就能看出它具有什么功能,该如何操作它。《通用设计法则》这本书则把 affordance 翻译为「功能可见性」,这样翻译似乎更通俗易懂点。书中举了 Don Norman 这个经典的案例来说明 affordance ,门把手的功能可见性是「拉」,但「推」的标示却跟门把手互相矛盾,解决方案是右图,用平面金属板代替把手,消除「拉」的功能可见性。

门的「推」与「拉」

可供性的设计理念首先是从工业产品发端的。一件好的工业品,使用者可以不假思索地使用它。原研哉的书中经常提到可供性这个概念,强调产品应该融进使用场景,其实就是产品可供性的外延。

原研哉《设计中的设计》中的设计案例

上图的两个案例,第一个下垂的拉绳提供强烈的下拉隐喻,一个不假思索的下拉动作,音乐随即响起。第二个案例中的雨伞,设计者为了解决一手提袋子一手拿雨伞的窘境,在雨伞把手上设计出了一个凹下去的凹痕,让使用者不用思考就学会了把袋子挂把手的操作。这两个案例是对可供性这个概念的很好的诠释。通俗点讲,可供性就像是文章的上下文语境,工业产品通过造型和周边环境的映衬,来给用户足够的操作和功能隐喻。

腾讯同学的教程一向都是良心之作,今天这篇长文收罗了常见的UI动效设计方法,不仅有案例,而且分析透彻入微,从表现形式到动效的作用,对用户产生的影响,都有全面专业的解说。今年动效也是一大热门,想自我提升的同学可以放手来学习了。

情感化设计是完善产品,提升用户体验的关键,在当今移动应用泛滥的时代,只有存在情感化设计的产品才能脱颖而出。如今的用户不再满足于与冰冷的机器进行互动,更希望在每次的操作中附有有情感上的互动。情感化设计在很多时候可以缓解用户负面情绪,帮助用户快速熟悉产品等。所以了解情感化设计并有效的运用情感化设计是一款好产品必不可少的环节。

拟人形不仅仅指的是模拟人的外形、动作、语言,还可以模拟人的情感,人对现实世界的感受。在遇到产品交互难题的时候,试试文章中提到的拟人形法则能不能帮到你~

奥门新萄京娱乐场 1

UI 中的可供性

为了不使讨论过于泛化,我们可以把可供性在 UI 中可以理解为隐喻,比如常见的图标、按钮、控件就是 UI 中的隐喻要素。一个齿轮图标代表设置,一支笔的图标表示编辑功能。这种隐喻在 UI 设计中随处可见。但 UI 是二维的,它的功能可供性跟工业产品不一样,工业品可以通过触感、嗅觉、光影等等去增强可供性,UI 只能通过平面的手段去寻找办法。

比如谷歌的 material design 企图通过模拟材料本身的特性来提供界面隐喻。比如光影、质感、符合物理定律的运动等都是为了解决数字世界中的的交互隐喻,提供更有力的可供性。MD 的投影隐喻界面中的层次感,并借鉴了传统的印刷设计——排版、网格、空间、比例、配色,来构建用户熟悉的视觉世界。而这一切都建立在谷歌的理论根据之上:人对材质触感有着天然的感知,这是一切隐喻的基础。

Material Design 的理念

与谷歌截然不同的另一套界面设计理念,苹果在 iOS 7 之后提出的,俗称毛玻璃效果,则从利用玻璃质感来构建 UI 的层级关系。正如 iOS 设计指南中写到:

半透明的 UI 元素底下的内容隐约可见,这种界面的隐喻帮助用户理解当前界面的后面还隐藏着更多内容,层级感一目了然。

毛玻璃的效果确实更接近真实世界的视觉经验,距离 iOS 7 发布四年过去了,大众早已习惯了毛玻璃,众多安卓厂商都在竞相模仿,Material Design 那一套为数字虚拟世界构建的隐喻体系似乎打动不了用户,这说明真实世界的映射映射是多么重要。

控制中心

概要

目录

奥门新萄京娱乐场 2

左图为杜蕾斯感恩节文案之一,右图为品牌回应杜蕾斯的文案,一来一往,非常精彩

图形化隐喻增强 UI 的可供性

在图形化界面的初期,人们对界面的认知是空白的,毫无经验的,所以软件图标基本都是拟物化的,设计者都希望用户可以借用现实经验来理解这些虚拟的数字化产品,所以容量图标画个实体硬盘,主页图标画个房子,设置画个齿轮等等,但随着用户对数字化产品的认知逐渐加深,不再需要借用现实经验来加强用户认知了,因为它本身已经自成体系。

以 iOS 的桌面图标为例,从 iOS 6 到 iOS 11,图标原有拟物化的质感被去掉,代之以抽象的色块、渐变、线条、符号,图标的历史使命,即帮助人们从真实世界跨向虚拟世界的认知跃升已完成。现在 UI 中的图标,已经基本脱离现实的隐喻,想想百度、淘宝、京东等主流应用的图标吧,完全是基于虚拟世界构建的视觉认知。

iOS 图标扁平化的过程就是在逐渐减少现实隐喻

虽然界面中的图形已经逐渐脱离现实经验的隐喻,但在一些跟实体有关联的产品中,我们还能看到很多用现实经验隐喻来增强界面的使用体验。比如音乐播放界面用唱片机的样子,读书产品的页面跳转模拟真实翻书的效果,共享单车 APP 还是用单车的形象等。UI 利用现实隐喻来增强界面功能可供性的做法会一直存在,只是随着人们虚拟世界的经验越来越丰富,会越来越少而已。

提供丰富现实隐喻的应用界面

xavieryuan:UI是基于静态页面来设计的,页面之间通过跳转切换。在设计过程中,设计师很重视单页的视觉效果,却经常忽略了对界面跳转的处理。这些未经处理的跳转由于没有提供足够的预期,所以用户在使用时经常会觉得困惑。与此相反,在卡通领域,由于使用了足够的动画效果,用户可以非常容易理解某个动作,即使夸张的动作也没问题。

什么是情感化设计?

拟人形法则指的是把事物人格化,赋予事物和人一样的特性,和我们人一样有感情、有声音、有动作。拟人能更加生动的表达出事物的特点,让人感同身受。而现在拟人在设计上的运用也日益广泛,把抽象的、用户不熟悉的元素拟人化,能让用户第一眼就知道你这个产品是什么,引起他们的关注,从而建立对产品的情感共鸣。

除了杜蕾斯惯用的借势营销,整合营销,更令琛姐感叹的是,杜蕾斯的品牌“拟人化”进程又上了一个新台阶:“杜杜”不再是一个人玩了,他有朋友了!而交朋友恰恰是品牌拟人化的重要手段之一。

最后

可供性在 UI 设计中的讨论越来越少了,可能是因为扁平化到现在,很多界面越来越多的使用文字按钮了,功能所见即所点,隐喻似乎没有必要了。在更有未来感的科幻片中,你也会发现所有的操作面板几乎都是文字按钮,这样更直观,符合人机交互的理想境界:忘记界面,自如操控。


尽管UI设计和卡通动效之间存在差异:卡通更侧重于娱乐,而用户界面却是严谨的互动式工具。但是我们还是可以借鉴卡通动效的优点,从情感和认知层面上将两者的优势相结合。

情感化设计三要素与产品的结合

一、模拟人的形态

拟人化的好处非常明显:

参考资料

《Universal Principle of Design》by William Lidwell、Kritina  Holden、Gil Butler

《The Design of Design》by 原研哉

《iOS Human Interface Guideline》by Apple

《Materila Design》by Google

Keywords:UI、动画效果、卡通。

情感化设计的作用

最基础的拟人化就是模拟人的外在形态——高矮胖瘦等,把自己的产品和人的外在形态建立联系。在 UI 界面中,我们经常会用拟人化的卡通形象来增加页面的氛围,胖胖圆圆的圆润造型可以营造轻松、活泼的联想。

1.让产品形象更生动,帮助用户了解产品。主要通过对产品外形特征的拟人化来实现,比如,Topline Gums 口香糖以接吻来比拟口香糖的味道(表情再销魂一些就更好了):

  1. UI界面 VS 卡通

情感化设计的风险

奥门新萄京娱乐场 3

奥门新萄京娱乐场 4

大家都知道,UI界面一般都是基于静态页面来设计 —— 无数个页面组成了一个软件。通常情况下,视觉设计师直接开始设计静态页面,几乎不考虑它们之间如何切换。由于用户对界面之间的关联没有预期,所以他们经常会受到惊吓。用户苦思冥想,想了解界面之间到底发生了什么。

小结

二、模拟人的动作

2.促进品牌和消费者的沟通,提高品牌忠诚度。有研究表明,品牌沟通和正常人际沟通最大的区别在于内容集中度,大部分的品牌文案都是紧紧围绕产品做广告,内容集中度过高,很容易引发消费者反感,从而放弃沟通。

奥门新萄京娱乐场 5

奥门新萄京娱乐场 6

肢体语言往往比外在形态更生动,而且通用性更强。如下图bilibili的登录页,当用户输入密码的时候,页面上方两个卡通人物会用手捂住自己的脸。

而拟人化的文案内容集中度较低,这种不集中能够创造出如同真实社交环境一般的缓和感,减少交流压力,幽默风趣的拟人化文案更是会吸引消费者积极参与,比如,上面提到的杜杜感恩节文案,就吸引了大批用户参与互动。

(我们的app都是由很多页面组成的,由于用户对界面之间的关联没有预期,所以经常会受到惊吓或者感到困惑。图片来自:)

一、什么是情感化设计

奥门新萄京娱乐场 7

那么,这么有用的拟人化营销怎么做呢?

当用户感知不到页面之间的关系时,就说明页面之间的因果关系不够清晰。让用户理解页面之间的关系至关重要,这直接关系到操作效率。在没有辅助解释的的情况下,用户只能通过经验去理解。这是一个非常有挫折感的体验。

情感化设计是旨在抓住用户注意力、诱发情绪反应,以提高执行特定行为的可能性的设计。通俗的讲,就是设计以某种方式去刺激用户,让其有情感上的波动。通过产品的功能、产品的某些操作行为或者产品本身的某种气质,产生情绪上的唤醒和认同,最终使用户对产品产生某种认知,在他心目中形成独特的定位。(出自《设计心理学》第三部)

其实这来源于生活中的场景,当你在银行取款的时候,输入密码的时候自己会用手挡住,别人也会自觉回避。当界面中运用到这一点的时候,用户看到的时候也会觉得很熟悉,会心一笑,对你的产品的好感度瞬间倍增。

品牌拟人化的实质是把品牌视作人,包括外部特征相似的有限拟人化到注入人的感知、情感乃至灵魂的完整拟人化。所以,拟人化营销可以从以下 4 个维度着手:外部特征、感知、情感、灵魂。

举例来说,在Windows中,如果我们的任务是:打开我的电脑中的D盘,那流程是这样的:

二、情感化设计三要素与产品的结合

奥门新萄京娱乐场 8

外部特征拟人

1.双击计算机图标;

在唐纳A诺曼的《设计心理学3-情感化设计》一书中从知觉心理学的角度解释了人的本性三个特征层次,即本能的、行为的、反思的。

三、模拟人的声音

外部特征拟人,主要是指形式上的拟人,比如,用昵称替代产品或品牌名,像杜蕾斯自称“杜杜”、麦当劳自称“麦麦”,故宫淘宝经常自称“朕”。

2.图标扩展成一个窗口;

奥门新萄京娱乐场 9

人的声音和动作一样,都能在短时间内引起用户的共鸣。在自己的产品中植入一段有特点的音频,也是一个不错的选择。这种在游戏类 app 里面最常见了,小孩子玩的益智类游戏也会经常出现,比如翻牌消消乐,错误的时候配合着抖动会发出 “啊哦” 的声音,有一种惋惜的意思,鼓励小孩子再接再厉。

拟人的外形。许多产品都拥有拟人化的外形,比如琛姐小时候经常吃的鬼脸嘟嘟饼干,比如很多汽车的设计,都和人脸很像。杜杜更是经常借用漫画的形式为自家产品创造人格化外形:

3.在窗口中选择D盘。

  1. 本能水平的设计

加入音频后会让反馈信息更加明确,因为音频本身就带有情感,正确、错误、开心与否都能通过声音体现出来。

奥门新萄京娱乐场 10

在这种情况下,第一步的元素是图标,第二步元素是扩展的窗口。界面之间的跳转是非常突然且直接,且没有前后关联。如果用户第一次使用Windows,这样的界面跳转需要理解一阵子。

本能水平的设计的基本原理来自人类本能,这一层次的主要物理特征是,视觉、听觉、触觉占主要支配因素。一般人刚看到一个物品时就想要,往往是出于本能选择好看的。

奥门新萄京娱乐场 11

拟人的动作。说到拟人动作的运用,就不得不提到长城葡萄酒的经典广告,“三毫米的旅程,一颗好葡萄要走十年”,一个“走”字,巧妙拟人,也传递了品牌脚踏实地的精神:

奥门新萄京娱乐场 12

案例结合:本能水平的设计,在移动端UI设计中的运用就是,视觉的体现(符合大众的认知设计),我们的产品视觉要让用户看到后就有想下载的冲动,所以由此可见设计师的重要性,颜值才是产品和用户的敲门砖。如下图所示:

四、模拟人的行为

奥门新萄京娱乐场 13

(在Windows中,图标和窗口之间的跳转十分直接,如果第一次Windows使用会让用户很困惑)

奥门新萄京娱乐场 14

人是一个很奇怪的物种,大多数人都认为自己做一个决定的时候,是完全出于内心的选择、绝对不会受他人影响的。但其实人作为一个社会性物种,一言一行都会受到周围环境以及习惯的影响。

百事柠檬味可乐的文案,采用柠檬打斗的画面,与文案“pepsi  with  a  touch  of  lemon”形成呼应,很好地展现了柠檬的新鲜感:

用户往往通过经验来克服这些问题。前几次的体验是最糟糕的; 最终用户学习了机器的行为才能有效地与它进行交互。尽管这些界面的认知可以通过反复使用来提高,但认知负担依然沉重。例如,用户知道点击图标将打开一个窗口,但是突然的变化(突然从图标变成窗口)也会让用户迟疑。

两款银行类App,抛开不同银行的情景,两张界面同为银行的首页界面,如果选择一个 App 留在手机中会怎么选择?我咨询了100位亲朋好友,最终选择掌上生活的人占82%;选择交通银行的占18%。

4.1 行为会受环境的影响

奥门新萄京娱乐场 15

卡通中的动画效果,非常擅长于提供足够的信息让观众理解。动画中一些令人费解的行为没有让用户感到困惑;动画人物并不会突然消失,突然出现;动画在发生形状变化时非常自然。

奥门新萄京娱乐场 16

从众

外形特征拟人是品牌拟人化的初级形式,更高级的拟人化应该围绕品牌个性(品牌有 5 类基本个性,包括:真诚、刺激、野性、有教养、有能力,琛姐已在上周的文章《品牌“个性化”完全指南》中进行了分析),建立品牌感知、情感和灵魂。

动画提供了必要的视觉线索,让人理解某个动作前后发生了什么。不像UI一样认知沉重并非常依赖经验,且还将理解界面的责任的归咎于用户。动画利用真实的动作来展示对象变形,让人更加容易理解。

所以通过这个测试我们可以看出视觉效果在产品初期的下载率上会起到决定性作用。

社会心理学里讲过一个现象:从众心理,指的是个人的行为会受到外界人群行为的影响,而在自己的知觉、判断、认识上表现出符合于公众舆论或大多数人的行为方式。从众心理是部分个体普遍所有的心理现象。

需要注意的是,个性的确立必须具有一贯性和差异性。根据个性心理学,一个人内在的稳定因素使得一个人的行为在不同的场合表现出持续的一贯性,并与其他人在相同的情况下的行为有所差异。对品牌而言,正是用自己“在不同的场合表现出持续的一贯性和差异性”,来确立自己的个性。

从认知和情感两个角度来说,将动画融入到界面切换中是有好处的。通过对系统的解释,动画允许用户持续的思考一个任务,而无需回想之前的操作。由于没有突然的视觉变化,动画降低了用户被UI界面吓到的机会,从而减少了不安全感。因此,使用动画不仅有助于用户理解界面,提高使用效率。而且还使界面的体验更愉快更舒适。

  1. 行为水平的设计

奥门新萄京娱乐场 17

这就是为什么杜蕾斯能给大众留下“老司机”的印象,而其他模仿者却不行,因为杜蕾斯长期坚持以“老司机”的方式蹭热点,并且是首位成功塑造“老司机”个性的品牌。

2.在UI界面中使用动画的几个方法

行为水平的设计注重的则是效用,物品功能好,简单易懂,操作简单,物理感觉(真实感觉)。以使用者为中心才是设计的核心。

其实在很多产品的设计上,都有在利用用户的从众心理,比如把产品的销量、评价数外漏展示的特别明显,仿佛在告诉用户我这个东西很受欢迎,很多人都买了,好评页很高,那么自然而然用户就会对这个产品多看一眼,而且最后很有可能也会购买。

感知拟人

多年来,动画师们已经研究出了很多动画设计的方法。这里选择一些同时符合UI和动画的设计原则,同时展示了如何在UI设计中应用。

案例结合: 上面说的视觉是敲门砖,那么行为水平的设计就是决定愿不愿继续交往的关键,也是提升用户体验最关键的部分,即便再好看的设计,如果用户使用起来诸多不爽也是枉然,所以行为水平的设计都有什么呢?下面整理了一部分的案例。

奥门新萄京娱乐场能够设计员解读UI分界面动作效果设计指南,关于激情化设计必需掌握的知识点。回想自己在淘宝购物的时候,是不是总是会选择销量最高、好评最高,这其实就是一种从众心理——大家都买的应该差不到哪里去。

品牌的感知主要体现在对用户需求的感知,和对社会热点的感知。

我们从3个维度来讨论,分别是:拟物化,夸张和增强现实。本节提到的所有动画设计原则都来自Disney 《Animation: The Illusion of Life》。

贴心的功能

奥门新萄京娱乐场 18

奥门新萄京娱乐场能够设计员解读UI分界面动作效果设计指南,关于激情化设计必需掌握的知识点。1.对用户需求的感知

2.1 拟物化

共享单车系列的产品中,我最喜欢的产品就是7号单车,什么原因呢?如下图所示:

攀比

如果一个品牌的文案无视用户需求,不能即时反馈,只顾自说自画,自然会给用户一种冷冰冰,缺乏人情味的感觉,所以,越来越多的品牌开始利用社交媒体和用户互动,但海尔的新媒体部门显然玩得更溜,因为他不仅和自己的用户互动,还感知到了其它品牌用户的需求,比如,故宫淘宝的粉丝建议做款名为“冷宫”的冰箱贴,海尔跑过来接茬了:

把UI中的元素当作真实的,有重量的物体。在动画片中,人物和元素都是真实的,有重量的物体。他们每次走动都好像是生活在真实世界中一样,这种感觉非常真实。这种拟物感不仅仅是填充一个像素区域那么简单,这些物件的运动是通过增加惯性来实现的。动画的所有的原则,例如:慢进慢出,跟随,和弧形运动,其随后所有的讨论,都是基于这个原则,他们是有质量的物体。

奥门新萄京娱乐场 19

攀比也会激励人去做一件事情,各种 App 里都会有榜单排行榜,也是利用的用户的这一心理。

奥门新萄京娱乐场 20

奥门新萄京娱乐场 21

图中分别展示了摩拜单车和7号电车,7号单车在开车后的界面中有两个操作,临时锁车和结束用车,这就是功能好,摩拜并没有考虑到一个使用场景,我需要到达多个目的地且停留时间都很短的情况,如果不锁车可能被别人偷骑走,锁了车又会被别人再次开锁骑走,所以就功能而言7号单车的体验更好。

奥门新萄京娱乐场 22

然后,概念图就出来了,紧接着 7 天内,冷宫冰箱就横空出世了,并迅速送到了用户手上,同时附上了一封信:每一个人的意见对我们都很重要。如此敏感的感知能力让用户不得不感动。

(所有元素是有重量的物体。这是所有的运动的基础。图片来自:)

引导用户

奖励

奥门新萄京娱乐场 23

把UI界面中的元素变成独立的,区别于背景的物体,并让其拥有动作惯性是非常重要的。在UI界面中,元素应该被绘制为一个在三维中的对象,用户可以连续并稳定的操作他们。

产品初期和迭代都会存在用户不了解信息以及功能,所以我们需要用文字的形式帮助和引导用户去了解使用新的功能,就像老师一样。如下图所示:

奖励算是影响人的行为的最快的一种方式了,新手注册、邀请好友、每日签到…各种奖励方式,都在激励用户。

冷宫冰箱概念图

光是把一个元素拟物化还远远不够,性能优化也是必须的。为了保持移动的假象,对象在运动时,帧速率必须够高(当动画达到每秒24帧时,人眼看到是正常速度的运动)。由于性能下降可能导致移动延迟,从而造成卡顿的现象。这样用户容易分心,体验就会折损。

奥门新萄京娱乐场 24

各个奖励方式按照目的可划分为:拉新和留存,不同的目的所采取的奖励方式也不一样。当用户不熟悉你的产品的时候,通用奖励是一种很好的方式,通用奖励指的是你所奖励的东西不仅仅局限你的平台使用,而最常见、最能被用户接受的就是现金了,这也是拉新最常用的一种方式。

支付宝对于用户需求的感知也非常敏感,比如,对于用户经常提到的“如何才能不还花呗”的问题,支付宝官方公众号多次用幽默的文案进行了回应:

2.1.1 拟物化的方法一:运动模糊

Keep 选择用包含图标文字按钮的组合引导用户如何去更好的使用 Keep,微信则是用一个纯文字的弹出框引导用户需要注意的事件。所以在产品中运用通俗易懂的图文来告诉用户当下发生的事情和需要去执行的事情也是情感化设计的重要环节。

奥门新萄京娱乐场 25

奥门新萄京娱乐场 26

拟物化和无卡顿只是最基本的需求。如果用户大幅移动一个对象,例如从屏幕左侧跨越到右侧。由于视觉停留效应,用户在屏幕上会看到2个以上的对象。眼睛呈现两个短暂对象也被称为视觉暂留效应。

  1. 反思水平的设计

4.2 行为会受习惯的影响

2.对社会热点的感知

动画设计师面临这个问题时,使用了一个经验法则:如果一个物体移动超过物体本身一半的大小(或者更大)的任何两帧之间,加入运动模糊效果。使用运动模糊填补旧新位置之间的间隙,让眼睛更能接受物体的移动。虽然涉及到抗锯齿的问题,但运动模糊确实是一个低成本的解决方案。

当用户在使用产品后,理性的思考往往会让用户对产品做出一个评价。这个层次涉及文化、教育、个人经历等各方面,一个人感觉很好,可能另一个人会觉得很讨厌。每个人自我的感觉不一样。

俗话说三天能养成一个习惯,而且习惯养成后很难改变,每个人都会有自己的一点小癖好。

也就是俗称的蹭热点,蹭热点并不完全是为了蹭流量,另一个很重要的作用是体现品牌的感知能力,相关的成功案例非常多,就不一一列举了(文章开头提到的杜蕾斯感恩节文案就是一个),这里想强调的是,一定要从品牌个性的角度去看待热点,比如,杜蕾斯的蹭热点文案都是从一个老司机的角度来写的,因为只有这样,才能形成品牌个性。

奥门新萄京娱乐场 27

案例结合:一说到平台中的点赞功能,大家想到的都是一个大拇指,所以用户也不会因为点赞而记住产品。所以我们需要反思那些常规且用户习惯的设计,如何可以做到即合理又有特点呢?如下图所示:

一个吃素的人,你跟他宣传你的肉食多么多么的好吃,那也是徒劳无功,而一个天天吃肉的人你让他改吃素,这别人轻易也接受不了。

情感拟人

(在Windows中,鼠标指针可以设置成运动模糊,方便用户去追踪鼠标指针)

奥门新萄京娱乐场 28

虽说每个人的习惯各有不同,但其中还是有些共性的,比如:按钮、卡片、头像给人感觉就是可点的、而置灰的就不可点了;点击弹窗旁边的蒙层可关闭弹窗;

情感包含浅层情感(喜、怒、哀、乐等)和深层感情(亲情、友情、爱情等)。

动画师发现,有两种不同的运动模糊方式可以使用。最简单的就是使用半透明的条纹。这种条纹就像尾巴一样跟随在图标后,使用透明条纹来模拟现实的物理作用,并产生非常逼真的效果。另一方式是在单个帧中插入多个图像。例如,手臂迅速来回摆动时,单个帧显示多个手臂,每个手臂在不同的位置呈现。这种技术可以有效提高帧速率,并且很有说服力。

左侧是微博的点赞图标是常规的设计「大拇指」,不会给用户留下深刻的印象,而右侧虎扑则是用个灯泡图标配上文字「亮了」,既有新意,又符合使用场景,增加用户的点击欲望。可能有人会觉想反驳,这样的形式增加了用户的学习成本,我们在前面讲到我们需要反思的是那些常规且已经习惯设计,所以即便改变了造型,只要是符合用户使用习惯的反思,就不会增加用户的学习成本。

奥门新萄京娱乐场 29

1.浅层情感

奥门新萄京娱乐场 30

产品不仅是所有功能的集合,他们真正的价值可以是满足人们的情感需求,而其中最重要的需求就是建立自我形象与社会地位。 反思是包含并超越前两个层次,我们要经常思考,为什么同类型的产品,我们要选择它,为什么它给我留下了很深刻的印象,这都是反思水平的设计需要做的。

所以在做设计的时候,我们可以去找找自己的目标人群有没有一些共有的行为习惯,针对这个共有的习惯去做一些针对性的设计。

浅层情感主要包括喜、怒、哀、乐等人类常见的情绪,在文案中表达此类情绪,会让产品或品牌的人格化形象更鲜明,也能让用户更有共鸣,比如王老吉的“对不起”系列文案,就表达出强烈的隐藏在歉意中的愤怒:

(运动模糊的全部帧效果,可以通过每帧展示多个竖线来达到提高帧数的效果)

三、情感化设计的作用

拟人形法则并不仅仅只是模拟人的外在形态、动作、语言等,更深层次的是模拟人的情感。

奥门新萄京娱乐场 31

运动模糊的效果表明:运动不仅是一系列的静止图像的集合。它会给用户一个模糊的线索。这种感知来源于人的视觉系统的工作原理。卡通动画师经常使用运动模糊,即使只是粗略进行运动模糊的渲染,也足以打造一种快速运动的幻觉。在App设计中,由于手机尺寸的限制,一般不会出现超远距离的拖动,但是在大屏幕的电脑上就会遇到这个问题。

  1. 缓解负面情绪

人的形态、动作、语言只是一种我们对他的认知,比如看到全身都是妖魔鬼怪纹身的人会不由自主的害怕;经常笑的人会给人面善的感觉;同一句话不同的语气表达的意思可以截然相反…

江小白的文案则传递出浓浓的关于青春的愁绪:

2.1.2 拟物化的方法二:出现和消失

众所周知,在生活中等待是最容易让人产生负面情绪的,所以我们在设计中也是如此,为了缓解用户因为等待所产生的焦虑,减少等待时间是很必要的。但有的时候界面加载时间是受很多客观因素影响的,没有办法保证其速度。所以我们就需要通过一些情感化设计来缓解用户的负面情绪。

奥门新萄京娱乐场 32

奥门新萄京娱乐场 33

除了移动,元素无规则的出现和消失也会造成用户困惑。在UI设计中,有三种方式展示出现消失的效果:移入,擦除,和模糊消失。他们的动作是快而连续的,给用户必要的视觉线索来理解发生了什么。

案例结合:我们可以在需要用户等待的地方加入一些动画效果,而不同的动画效果也会有不同的情感传达,如下图所示:

这些认知都是我们主观上所认为的,拟人形模拟的其实是一种内在情感,一种人们对他的主观认知,是人对现实世界的看法,而拟人的“人”只是起到一个媒介作用。

故宫的卖萌文案令人忍俊不禁:

奥门新萄京娱乐场 34

奥门新萄京娱乐场 35

五、模拟人的情感

奥门新萄京娱乐场 36

(从左到右动效依次是移入,擦除和模糊消失)

美团外卖的刷新加载,一只袋鼠骑摩托的动画,因为是送餐服务,所以时刻都在给用户传达「快」是他们的宗旨。(有趣的是,在 App 中袋鼠的动画是受红绿灯影响的,也传递了绿灯行,红灯停的交通法则,很有意义)反观土豆则是休闲娱乐的视频,所以加载动画也会传达出很放松的情感。诸如此类的动画在 App 上还有很多,只要在需要用户等待的场景下使用符合情境的动画便会轻松的减少用户的负面情绪。

我们这个时代的人在精神的诉求上比祖辈高太多了,这就要求设计师除了满足功能需求,也要去关注人们的情感需求。人性化的设计已经成为这个时代的主流了,想用户所想,为他们提供他们想要的服务,或者说让我们想推的服务被他们所喜欢。

2.深层感情

2.2 夸张

  1. 引导用户行为

把人们对现实世界的看法嫁接到产品设计上,投其所好,就能让自己的产品更容易被大众所接受,这里说的 “好” 指的是认知习惯,是每个人对这个世界存在的一些看法,有客观存在的、也有主观的,而且这个看法也会随着时间的变化而变化。

深层情感包括亲情、友情、爱情等社会化情感。许多品牌在介绍产品的时候喜欢说“XX家族”,其实就是一种亲情的体现,比如,知乎家族的新成员“知一声”就是这样介绍自己的:

通过夸张现实的手法,往往可以让设计达到事倍功半的效果。经过夸张手法处理的卡通表现的更现实。

人的记忆分为短期记忆和长期记忆,短期记忆也称工作记忆,为完成任务而临时存储的信息,一般保留几分之一秒到几秒。而我们在使用手机时通常都是工作记忆。所以在设计中感情化设计可以帮助我们引导用户减轻用户的记忆负担。

5.1 约定俗成的

“知乎家族的新成员,  略懂产品和技术,了解知乎产品功能,不定期地将知乎的功能或产品的优化升级告知大家,欢迎大家关注和私信我。”

例如在迪斯尼的《白雪公主的小矮人》中,小矮人是非常不写实的:他们的脸和身体都很大,他们的动作大而夸张。相比之下,只有白雪公主的比例是逼真的。相比于矮人,她更像一个真实的人。所以白雪公主这个角色,却因为更接近于现实,所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。矮人反而看起来更逼真。这种夸张的方式更加的突出了动画本身。这样的原理说明,无论是物理特征,动作特征,或四肢特征,可以通过强化某些方面,让其更显著。

案例结合:界面中标签的切换功能,在同一模块中选择不同的页签他们的选中状态的样式是相同的。如下图所示:

有一些认知习惯,是这个社会自然而然形成的,红橙色系的颜色能够给人带来食欲,因为生活中的食物大多都是这个色系的,人们就形成了固有的认知。

现在许多品牌开始组 CP 了,比如前文提到的“海尔&故宫”,以及文章开头提到的“杜蕾斯和他的朋友们”,这都是展现品牌友情的方式,通过这种品牌间互动,可以赋予品牌更立体的情感,在品牌拟人化的进程中又进一步。

通过这种方式,观众可以更好的去理解这些特征和动作。例如,每个小矮人和白雪公主都有一个特征,往往是和他们的名字(迟钝,脾气暴躁,打喷嚏)遥相呼应的。这些特征非常强烈,即使没有这个名字作为一个额外的线索,人们也能通过每个矮人的身体特征,动作和行为等夸张行为来记住某个角色。

奥门新萄京娱乐场 37

奥门新萄京娱乐场 38

灵魂拟人

奥门新萄京娱乐场 39

不要增加用户的记忆负担,避免同个操作在不同模式下有不同的效果。

当我们在实际工作中运用拟人形法则的时候,要千万注意这一点,不要盲目去做跟大众认知相悖的设计,而是要去做跟大众认知相符的。

对于人类来说,独立思考的能力就是灵魂的体现,对于企业来说,企业的愿景就是灵魂,反映在文案中,灵魂就是企业对于生活,对于人生的思考。

(白雪公主因为更接近于现实,所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。每个小矮人都有一个特征,往往是和他们的名字(迟钝,脾气暴躁,打喷嚏)遥相呼应的,而白雪公主则特征不明显。图片来自:Disney.com )

四、情感化设计的风险

奥门新萄京娱乐场 40

日本文具老品牌 Shachihata 为自家 50 周年生日所打造的纪念广告《不合格的 50 岁》很好地诠释了,如何为产品塑造灵魂。

所以,夸张的表现手法可以突出某些受到忽视的细节。在卡通中,动画师可以通过夸大某个细节来引起更多的注意力。可能这些细节原本很难背察觉。

我们要知道情感化设计是为满足用户的情感,有些情感化设计,是需要结合产品的定位,文化区域所决定的,事物是存在两面性的,有的情感化设计会得到用户的喜爱和兴趣,有的则会给用户带来负面情绪。

而把大众固有的认知习惯和产品相结合的一个最常用、最快捷的方式就是使用动物形象,自然界中绝大多数动物在人们的心里都有固有的印象,加上动物大多和我们人一样,有手有脚,在延展的时候更好延展。

奥门新萄京娱乐场,日本获奖创意广告《50岁的不合格》

和卡通一样,UI界面必须让用户理解,并在必要时突出一些细节。采用夸张的方式,使UI界面中的某些对象可以更容易理解,更加现实,从而使UI界面更吸引人。

  1. 产品定位不同

比如印象笔记的大象,印象笔记作为一款多功能笔记类应用,对人们来说最重要的就是存储功能,所有记录的内容都不会丢失。而正好大象在人们的眼里属于记忆力绝佳,永远不会忘记事情的动物,与云笔记想要传达出的理念完美契合。

印章是 Shachihata 公司的拳头产品,广告很巧妙地将印章拟人化,人生的“成功”和“失败”也用印章中的“合格”与“不合格”来表现,通过讲述一位叫“伊藤”的普通职员从初入职场到 50 岁的人生经历,强化了“印章”背后的寓意。相信看过这则广告后再用 Shachihata 公司的印章,感觉会大不一样吧。

奥门新萄京娱乐场 41

不同的产品定位需要更换不同的情感化设计,例如上面说到的,美团为了体现速度则用袋鼠骑摩托的动画,而土豆主要是休闲视频,所以动画效果用的则是品牌人物在吃爆米花。两者调换后效果就不会有那么好的效果了。

奥门新萄京娱乐场 42

奥门新萄京娱乐场 43

奥门新萄京娱乐场 44

  1. 时效性

再比如美团外卖的袋鼠,袋鼠在哺乳动物里是跑的最快的,而美团想向用户传递“美团外卖,送啥都快” 的品牌理念,那么袋鼠就是最好不过的方式了。

宜家的企业愿景是“为大多数人创造更加美好的日常生活”,他的产品文案完美地实现了这个愿望,看完宜家的产品文案,你会深深感受到:宜家的每件家具都是有灵魂的。

(在图片社区项目中,我们对通知使用了动效。因为通知入口属于细节,在没有通知时,只保留一个icon(上图),不吸引用户注意。当有新消息来时(下图),用动效来吸引用户注意。)

情感化设计是有时效性的,不同阶段所用的设计也会有所区别,例如我们经常看到过节时期,都会把宣传界面做成符合节日的插画,图标等,本文中举的很多例子在目前的版本已经不再使用。如下图所示:

奥门新萄京娱乐场 45

奥门新萄京娱乐场 46

2.2.1夸张方法一:给用户足够的预期

奥门新萄京娱乐场 47

5.2 现实世界有的

宜家抽屉文案

在动作发生之前,最好给给观众一些提示。当动好,而不必对所发生的动作所惊讶。

左侧是饿了么的常规首页,右侧是世界杯时期的界面设计,页面的 Banner 以及金刚区图标改版后都围绕世界杯主题设计,迎合当时的氛围。我想,喜欢世界杯的用户也会选择有世界杯界面的外卖订餐吧。但世界杯的时段一过还需要恢复为常规界面,这便是时效性。

当找不到约定俗成的习惯与自己的产品结合的较好的时候,我们也可以从现实世界中找灵感,模拟现实世界的场景,让用户对自己的界面有一种天然的熟悉感。

奥门新萄京娱乐场 48

#FormatImgID_9#

五、小结

引导性界面

宜家高脚杯文案

( Tumblr中,当鼠标移动到某一功能时,icon会跳动一下,提醒用户点击之后会有变化)

情感化设计的重要性:提升用户体验,提升下载率,保证留存率,减少卸载率。

模拟现实世界超市、图书馆、机场等的指示牌。在现实世界我们到达一个陌生的地方首先会去看的就是指示信息,每一层有什么,要去的地方在哪里。

小结

像类似预期一样的的夸张技巧,它们可以让用户更容易理解界面。他们不断的为用户解释或者暗示界面之间的继承关系。如果没有这样的线索,用户会非常难以理解这些界面。

什么是情感化设计:情感化设计是旨在抓住用户注意力、诱发情绪反应,以提高执行特定行为的可能性的设计。

奥门新萄京娱乐场 49

拟人化营销的好处非常明显:1.让产品形象更生动,帮助用户了解产品;2.促进品牌和消费者的沟通,提高品牌忠  诚度。

2.3 增强现实(Reinforcement)

情感化设计三要素:本能水平的设计、行为水平的设计、反思水平的设计。

而在UI界面中也是一样,用户第一次进入,对于页面功能的放置不是很清楚,这就需要一些提示信息,特别是你的交互比较特殊,用户没有习惯的时候。

品牌拟人化的实质是把品牌视作人,包括外部特征相似的有限拟人化到注入人的感知、情感乃至灵魂的完整拟人化。所以,拟人化营销可以从以下 4 个维度着手:外部特征(昵称、外形、动作)、感知(用户需求,社会热点)、情感(浅层情感、深层情感)、灵魂。

所有的动画技术都会增强某个现实。有些会非常极端-就像在某些动画中,角色高速移动,变成了一道光线,快速的穿过屏幕。实际上这是非常隐蔽的手法。观众不会感知到这些效果很夸张。他们只是感觉超现实。这些夸张的效果已经被精心处理,所以观众不会被这些夸张效果所困惑。本节就是探讨,通过增强现实技术,用来弥补卡通与观众之间的关系,亦或者UI与使用者之间的关系。

情感化设计的作用:减少用户负面情绪,引导用户行为。

奥门新萄京娱乐场 50


2.3.1 增强现实方法一:缓进缓出

情感化设计风险:产品定位不同,情感化设计需要根据不同的产品定位设计,否则就会适得其反;时效性,节日活动的设计不可以常久使用,否则体现不出设计的特殊性和融合性。

界面与用户互动,即时给予反馈

PS:琛姐是大学新媒体教师。每周三,分享一个“写完了可以直接放进书里”的新媒体思考。

如前文描述,当卡通人物移动时,是非常拟物化的。 然而,这种移动并不是简单的在纸上画一些等距的角色。动画师在绘制动作时经常使用缓进缓出效果:角色缓慢的走出屏幕,接着一个快速的动作,最后的收尾动作很缓慢。这种方式有助于让角色在移动中看起来更有物理质量。此外,缓进缓出效果出现在某一个快速动作之前,有助于观看时更加舒适。如果没有它,动画中的移动会感觉很假,类似缓进缓出这种细节效果可以极大的影响一个动画的质量。

欢迎关注作者的微信公众号:「海盐社」

在现实世界里,我们和别人交谈的时候都希望是一问一答式的,更好的是我问一句别人能把我想知道的都告诉我。而在 app 中,我们也需要营造这样一种氛围,在用户进行一个操作的时候,即时给予反馈,比如支付订单的时候,即时告诉他支付的结果,成功或者失败;在他做下一步操作的时候,提前设想他可能要做的事情,比如客服中心页面,会把一些用户常问的问题诺列出来。

PPS:我已委托“维权骑士”为我的文章进行维权行动。如需转载,请联系琛姐进行授权,抄袭必纠。

奥门新萄京娱乐场 51

奥门新萄京娱乐场 52

奥门新萄京娱乐场 53

(使用缓进缓出的效果后,界面感觉更加舒适。图片来自:)

图片素材作者:saikiran

在他做下一步操作的时候,提前设想他可能要做的事情,比如客服中心页面,会把一些用户常问的问题诺列出来。

2.3.2 增强现实方法二:弧形运动

奥门新萄京娱乐场 54

另一个原理也是经常运行在人的潜意识中,那就是弧形运动。相比于直线运动,对象沿在弧形运动时,他们是非直接式运动。类似于卡通中的角色。圆弧路径的运动给人一种更吸引人,更活泼的感觉,而直线运动则比较简单。

当然不是所有的互动都要是一本正经的,适当的时候来点不一样的回馈会有意外惊喜,比如当我们给自己发的内容点赞的时候,会显示一个坏笑的表情。

奥门新萄京娱乐场 55

奥门新萄京娱乐场 56

(Mac OS X中,最小化窗口使用了弧线,显得更加活泼)

空白页插画、走心文案

2.3.3 增强现实方法三:跟随运动

人是群居物种,内心都是害怕孤独,渴望有人关爱的,所以我们可以为产品里那些平淡无奇的地方配上一点人文关怀,比如走心的文案、可爱的插画,减轻用户的烦躁心里,让用户能够感受到亲切。而这些细节能够成为产品与用户之间情感传递的桥梁,不仅能够增加用户对产品的好感度,还可以让产品更加深入人心。

增强现实的最后一个方法是跟随运动。 在现实世界中,当主物体发成运动时,与其关联的物体会做出跟随运动。 动画师们将这种观察使用在动画中,当动画中的主体物停止后,其他部分细节依然可以运动。包括了身体,衣服,和一些局部的动作处理,让其动效变的更加极致。

奥门新萄京娱乐场 57

#FormatImgID_12#

六、举例实操

(iOS中,移动app位置是典型的跟随运动效果,当App插入一个新位置时,其他app位置跟着位移)

写到最后我们来举一个例子,来具体说明一下实际工作中可以怎么运用拟人形法则。

构建一个假象是一件非常脆弱的事。 一些动画的细节对最后的效果影响非常大。虽然这些动画效果如果不在卡通中使用,其实并不会破坏整体的世界观。但是加入这些效果会让动画更生动,更逼真。 最终可以让故事更容易被说服,人们也更容易理解,也更容易让用户参与其中。

如下图,当你想要用户知道对图1的区域进行操作的时候,会出现2、3、4的功能,那么怎么样能够让用户清楚明白的知道这一点呢?

3.为什么使用动画

奥门新萄京娱乐场 58

为什么要在UI中使用动画?动画有2个特点可以解释其在UI设计中的价值。

首先我们可以从我们日常生活中找这种例子,比如降国旗、卷纸、抽屉等等,都能让人知道这一区域是可操作的,操作后会出现新的内容,所以我们就可以将这一认知结合到界面中。

首先,由于卡通是艺术性的,他们有超越现实的能力。这个能力可以更有效的传达信息。UI界面同样也需要明确,清晰,简洁的沟通。

比如:

奥门新萄京娱乐场 59

  1. 在页面放置一个小的拉绳(降国旗);
  2. 将图1区域图形的边缘做成卷纸的形式;

其次,卡通创造了一个虚拟的世界,它非常容易让观众沉浸其中。通过此方法,UI也能变的引人入胜。通过动画,充分吸引用户来到它们的世界。然后让他们的注意力可以完全投入到工作中去。 让用户不要觉得他们在操作一个界面,而让他们更直接的触达任务。

……

4.使用UI动效的注意点

将现实中用户熟悉的场景转移嫁接到产品中,这样的交互方式在第一眼就知道怎么操作,而微信理财通用的就是第一个方法,降国旗,用户看到这个小标志,不用任何引导他都知道下方会有内容。

在UI界面中使用动效是有益的。但是UI并不是卡通。它们之间最重要的一个区别是:卡通是一种被动介质,而用户界面是互动式的。界面中的动效应该设计成不让用户感知到的状态(足够快,足够引人入胜,足够干净利落。使用户无意识的认识到这一点)用户可能希望在前一个动画结束之前就进行下一个操作。在这些情况下,应该给予用户最直接的控制。但是界面设计的原则仍应该利用动画技术来支持。

奥门新萄京娱乐场 60

卡通和UI的另一个区别是他们的使用目标:卡通纯粹是享受和娱乐,而用户界面是用来完成工作的。由于工作的严谨性,需要排除漫画中的娱乐元素。卡通往往古怪且愚蠢,如果这种古怪足以让用户理解用户界面的功能,那这种古怪则可以保留。例如,动画可以用在第一次打开软件时,给用户一个惊喜。通过预期暗示用户操作,通过这个动作给用户一些惊喜是可取的。

总结

UI是用来完成任务的工具,动画应该尽可能的快,同时也保持其清晰度。例如把动画当作一个时尚元素使用时,动画必须要快,通过快来减少用户执行和理解的时间。

运用拟人形的方法能够快速引起用户的注意,建立积极正面的互动。拟人形不仅仅指的是模拟人的外形、动作、语言,还可以模拟人的情感,人对现实世界的感受,在遇到产品交互难题的时候,可以从生活中找例子,然后把它合理嫁接到产品设计上。

5.总结

作者:橙子的橙子 公众号:海盐社

在UI中使用动效有以下几个优点:

本文由 @橙子的橙子 原创发布于人人都是产品经理。未经许可,禁止转载。

-由于动画让用户更容易理解界面之间的关系,所以减轻了很多认知负担。

题图来自 Pexels ,基于 CC0 协议返回搜狐,查看更多

-通过消除屏幕上的跳变,让界面不让用户吃惊并费解,从而让体验更加愉快。

责任编辑:

-将物理世界的运动用在动画中,缩短了用户和界面之间的鸿沟,让用户更专注于任务而不是理解界面。

动画展示效果远远超过了静态展示,甚至比静态展示更直接的阐释了界面。动画并不一定是缓慢的,或者会分散用户注意力的东西。通过悉心调整,动画可以让界面可理解,有魅力的。同时使用起来的体验是愉快的。

参考资料:

Animation: From Cartoons to the User Interface. Published in UIST93: User Interface Software and Technology, Atlanta, GA, November 3-5, 1993. pp. 45-55.

A New Mobile UX Design Material. By Rachel Hinman.

Transitional Interfaces. By Pasquale DSilva.

Animation Principles in UI Design: Understanding Easing. By Suresh V. Selvaraj

Youtube Video: Designing with animation. By Pasquale DSilva.

Animation & Interfaces Design. By Danny Ruchtie.

Animation: The Illusion of Life. By Disney.

本文由国际新闻发布,转载请注明来源:奥门新萄京娱乐场能够设计员解读UI分界面动作效