我们不需要怎样的动效设计

时常在思考我们在追求漂亮的动效,追求真实的弹性和运动状态时,我们不需要怎样的动效设计。从对现实世界材质的模仿(拟物化)到对现实世界规则的模仿(如Material Design,以下称MD)我们究竟是否有很大程度的进步,在MD刚刚发布的时候作为设计师的我们十分激动,直到现在都还有很多设计师十分推崇MD一套的设计规范,这样的做法在带来便利的同时可能会让我们忽略设计的初衷,还有作为一个设计师对产品的理解,最终可能给用户带来一个中庸的体验。

从动效设计上看:

设计所包含的方方面面在 MengTo 的《Design + Code》上有很好的归纳,我时常发现,经过一段时间的设计之后很容易在设计的过程中有所迷失,原因在于我们很容易专注于细节,保持阅读的习惯并试图用相对宏观的视角去看设计是不错的做法。动效设计让页面元素能够很自如的被操控而不仅仅是静态呈现时,我们会直觉的想到让其去模拟现实世界的规则,现实世界的运动规则因其载体不同其实有很多选择,在设计和模仿的同时还应该考虑更多。

IBM在前不久发布了IBM Design: Machine in animation, 试图将机械运动的风格赋予给动效设计。

IBM Machine in animation

IBM因为其在100年以来就生产着专业的打字机,打字机可以作为一种符号来代表IBM,它的视觉呈现和运动轨迹都可以代表打字机的可靠和高效。运用在IBM自家的应用上时,真正的高级用户可能会真实的感觉其与IBM企业所想要传达符合的某种信号。机械运动相对于我们在动效设计中所常用的弹性动画有其独特的特点,页面元素坚硬有序而活动自如这一感觉通过设计师所定制的曲线而呈现。

Stop Gratuitous UI Animation

回想90年代时网页设计的过度设计风格,大量的阴影、斜角、高光、不考虑留白的使用,这是一个设计师在面对新媒介和庆祝掌控像素后的失控,而这也是自然能够理解的结果。Stop Gratuitous UI Animation,现在的动效设计也是如此,它受新技术如CSS、JS的进步和硬件的更新换代影响。不必要的动效设计可能有以下几个特点:

1、过多的对现实世界的模拟。这样的模拟很可能不会让你的应用塑造出类IBM的视觉语言,而只会带来不必要的认知负担。另一方面,像素世界有许多与物理世界不一样的地方,如Loading,这样的处理才是更应该关注的。这个例子的列表就是对现实世界中某种机械装置的模拟,无论是运动曲线还是紧度都调的不错,可是它依旧是一个不好的例子。仔细来看,正因为它的列表在模拟机械装置所以每个卡片在拖动时必须固定像素定位,用户无法做出按住-上下滑动预览;滑动停止在任意位置浏览的手势。

过多对现实世界的模拟

2、在大的页面切换做过多动效。越是用户经常操作、变化越大的页面越不应做过多的动效处理,动效设计不应该只是对一个动效时间上的操纵,如不应该大于1s或者不应该大于0.5s,这和7±2原则一样十分具有玄学意味,这和网页设计早期发展时Loading时间一样,人心理的焦躁程度也会改变,谈论一个动效的具体时间没有太大意义,而更应该关注它在什么地方做了一件什么事,如果是Tab切换,笔者的意见是动效设计要尽量克制,一方面用户的操作频率十分高,如果要考虑到页面元素级的切换,程序无法对用户正在看当前Tab上下滚动的位置做出相应的动效定制化处理,这也涉及到另一个Tab的页面元素进场。另一方面过多的操作与动效时间相乘,将是一个很大的负担。

在大的页面切换做过多动效

3、手势操作与系统全局操作冲突。因为手势可以更方便的被运用,最近更新的许多应用普遍采用手势操作,而不幸的是这样的方便带来了更大程度的误触,这也是动效设计和交互设计分割的后果,一般来说,从手机边缘的上滑和下滑都已经被系统手势占用,不能让原本应该带来便捷的手势给用户带来更多麻烦。下图就是一个和iOS唤出控制中心手势冲突的例子。

手势操作与系统全局操作冲突

从版式设计上看:

每个设计师特别是交互动效设计师在刚刚接触动效的时候都很想创造一套动效的交互规则,能够掌握到每个运动的先后次序和精确到毫秒级的设计,会让设计师很有快感。动效设计是基于页面层级和页面元素,在交互与视觉设计上的改进,是当交互和视觉在解决问题不够高效时做的补充。MD和IBM的设计都很优秀,但当由动效或形式掌控过多的时候,可能会造成难以预料的低效率,这也不难理解为什么有人会说:the Floating Action Button (FAB)is bad UX design.

遵循平台规则会给应用加分这没错,这在iOS7发布的时候尤为适用,但当平台规范想要掌控你太多时就要多考虑一下了。单就FAB来说,从版式上来讲,上文作者就总结出这些问题:

1、它打破了沉浸式体验。试想我在一个图片浏览类应用中FAB充当的角色是重要的“搜索”,这样的使用自然没错,但它因为其浮起的样式不可避免的将用户拉出沉浸式体验。

2、它挡住了真正的内容。早年Scott Hurff已经提出过我们的可及区域与视觉遮挡,FAB的出现更是让原本应该显示内容的区域更大程度的牺牲。

3、它重要可能但它并不常用。由我们熟知的2/8原则,用户在20%的动作上花去80%的时间,作者以Google 邮件为例,FAB在这里充当的角色是撰写邮件这一动作,从直觉上来说它十分重要,而用户实则在手机上大部分时间是阅读邮件,FAB使用的频率并不那么高,相反它牺牲了更多的内容显示空间。在大屏幕内的使用时,因为FAB是相对精确的点击操作,它也会给用户带来更多的操作成本。

反观最基础的动效设计和它的原则方法。它应该可以

1、强化页面呈现的引导。通过动效可以更有加有次序规律的呈现页面层级,

2、解释交互动作的变化。通过动效来有效反馈用户操作,声明状态变化和暗示

3、并通过良好的设计来取悦用户。互联网产品的功能性设计可能会在未来越来越弱,就像有很多论调说the Web is dead一样,不仅仅是占有率上的,更多人为其创造版式化规则和工具,同样造成了功能性可以被多验过的满足。而取悦用户的设计如文化产品一样具备更长久的生命力。

原则上,动效设计做小不做大,即尽量做小的交互动态而不做大得页面切换动效,经常操作的页面切换动效会让人觉得设计太过,Ben Johnson认为一个App动效应该由三部分组成,即1个单元的欢迎动画,6个单元的告知性动画,1-2个令人愉悦的小细节。太过花哨的动效很可能会让它像FAB一样受人诟病,反馈符合用户的心理预期,而不单纯的追求每个动效时间上的控制,同样是动效设计师所应该注意的。

我们需要怎样的动效设计

现在看来,我们不需要怎样的动效设计?它应该是以特定的应用需求为导向的,它不需要模拟纸张也不需要模拟墨水,模拟机械或者其他什么东西。在动效设计上我们希望有一个解决问题的态度,亦或是如IBM一样传递自己的品牌文化,就如FAB一样,很多时候我们不需要它出现来阻碍我们浏览内容。 同时,产品、交互设计、视觉设计、动效设计的过分区分会让动效设计变得缺乏创意,相信交互设计师在接到需求之后,脑子中不可能不出现带有视觉风格的产品愿景,而现在的职位分割让设计师变得十分危险。

我们不需要规定过多的动效设计,也不需要为一个既定界面设计动效,这种内在能力应该如用户研究能力一样深化在每一个关心用户和体验的从业者中,从源头上思考动效,必要的时候做出相应交互与视觉上的调整,不沉迷于软件,将一个应用当成电影或者游戏整体来做,这其中的动效设计可能才是我们想要的。

它无关乎是用形变还是弹性动画,这种技法很难在没有上下文和语境的情况下来确定,就像3D电影的摄影师只能在CG未完成时,让演员在绿布上表演,这让摄影师的拍摄困难重重。只有从源头上重塑信息结构,用某种 "motion UI thinking" 的思考方法,或许才是提升一个应用品质的好的办法。

最后,交互动效设计师应该多看看游戏,他们已经走得很靠前,而且默默无闻。

Written by Scalegong

infoier.com | 设计乘数

参考:

IBM design: Machine in animation:

Material Design: Why the Floating Action Button is bad UX design

Make the right FAB

“1+6+2”公式:App动画及动态效果之基本原则

Stop Gratuitous UI animation

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容