设计出色的动效

本文译自:Good to great UI animation tips

——

这篇文章希望通过7个GIF图例来证明动效设计并不复杂,只需在关键之处增加一点点变化,就能让效果大大提升一个境界。

通过这些范例,你会发现状态连续性、元素关联性,以及用户注意力控制的重要性。

在做动效设计中,我参考的设计规范有:Material MotionIBM’s Animation PrinciplesThe UX in Motion Manifesto

我使用的工具是早期版本 InVision Studio ,你可以从 Dropbox 下载源文件

滑动切换页签


左图内容区域渐变切换;右图内容区域与页签下横杠一起滑动

· 优秀的动效会用渐变切换页面元素

· 出色的动效会在切换时保持状态的持续性

设计页签或多级菜单时,可以尝试将界面元素的位置和其打开的方式关联起来。这样动效可以涉及的,除了可见性之外,还增加了位置。这样一来,滑动手势也可以有了。

将卡片元素关联起来


左图新开的页面从下滑出;右图新开的页面由上一级卡片原地展开来

· 优秀的动效会利用滑动打开新页面

· 出色的动效会将不同状态的相同元素关联起来

在设计状态切换的动效时,可以看看两者之间是否有相同元素,如果有的话可以把它们关联起来。在 InVision Studio 创建 Motion transition 时,两个屏幕之间的重复元素会自动关联起来,这个功能让原型动效变得简单多了。

如果想知道哪些动效可以使用,建议你去看《十二条动效体验原则》(Z Yuhan:刚好我有翻译过)。上图我给的范例中,用到了遮罩、过渡、父子关系和缓动原则。

瀑布流效果


左图的卡片通过滑动和渐变出现;右图的基本动效是一样的,但是每张卡片的延时时间不同

· 优秀的动效通过控制所有元素的位置和可见度的变化来展示载入过程

· 出色的动效会错开不同元素和分组的出现时间

在统一的缓动和速度的前提下,通过延时设置来实现瀑布效果,这样能够保证一致性的视觉感受。不用为每一个小部件都设置延时,保证恰当的分组颗粒度能够让动效更加高效快速。Google 建议瀑布流效果的元素出现间隔不超过 20ms 。更多范例:choreography principle in Material Motion 。

元素间的作用力


左图的卡片在页面顶层浮出;右图的卡片撑大时将周围元素推开

· 优秀的动效控制元素本身的变化

· 出色的动效关注元素对周围环境的影响

体现元素之间的作用力,即让它们相互吸引或排斥。如果想了解更多,可以去 Material DesignAware motion 。

让菜单“生长”出来

左图的菜单从下至上浮出;右图的菜单从按钮上“生长”出来

· 优秀的动效让元素从触发的方向出现

· 出色的动效让元素从母体“生长”出来

利用按钮展示状态

左图利用按钮外的文本展示状态;右图利用按钮框本身展示状态

· 优秀的动效将提示放在按钮附近

· 出色的动效使用按钮本身展示状态变化

尝试利用按钮展示状态的变化,例如用按钮文字展示提示;或用按钮框来展示进程。无论哪种方式,目的都是充分利用用户的注意力(Z Yuhan:了解更多可以去看《谷歌 Material Design 从这些方面打破了我思维局限》的“不是视线追踪元素,而是元素追踪视线”)。

严肃对待注意力这个东西


左图利用颜色和位置来让元素脱颖而出;右图利用微动画来吸引用户注意力

· 优秀的设计用颜色、尺寸和位置来突出重要元素

· 出色的设计用动效吸引用户注意,从而避免打破既定框架

当用户需要进行某些重要操作时,尝试用动效吸引他们的注意力。根据重要性来判断需要多强的动效(如尺寸、颜色和速度)。但是确保只用在重要操作上——因为用的越多效果越弱……同时用户也会更加厌烦。

总结

我希望以上的这些范例能够给你的动效设计提供决策帮助。在像是 InVision Studio 这类新型动效原型工具的帮助下,创意交互这一领域会很快火起来,千万不要忘记了对动效的关注。

我们在做设计时,不要忘记用动效来解释状态变化、适当吸引用户注意、阐释元素关联,以及为产品增加一点乐趣和个性。以上的这些设计原则足以将我们的动效从快速有效地优秀升级到出色。

让我们愉快地进行动效创作吧!

——

原作者:哟嘿,小伙伴们,我是 Pablo StanleyCarbon Health 的设计师兼联合创始人。我在创作一个幽默漫画故事叫做 The Design Team ,同时也在 Twitter 发布一些设计相关的内容。你还可以去我的 YouTube 频道 Sketch Together 看看,那儿有超多的设计教程。感谢你的阅读(西班牙语)。

——

转载请注明来源和译者

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

推荐阅读更多精彩内容