UI中的动效原则

越来越多的设计师意识到动效设计在用户体验中的重要性。动效不再仅仅是让使用我们产品的人感到愉快的一种方式,而是一种让体验变得轻松而有趣的功能性工具。我们大多数人都听说过古老的(并且仍然如此)说法:“优秀的设计就是讲故事”。那么运动可以帮助我们以更少的时间和更清晰的方式来讲述这个故事。


https://dribbble.com/Visual-CHEN


用户界面中的动效使我们能够:

1. 直接焦点;

2. 建立对象之间的层次和空间关系;

3. 建立品牌个性;

用户界面中的动效仍然是一个非常新的领域。几乎没有任何资源可以传授页面转换的最佳实践或显示加载屏幕的常用模式几乎没有资源。我们可以通过研究传统动画原理并学习如何将其应用于抽象形状和图案(如我们在数字界面中看到的图案)来开发可用的动画库。

“Motion不再仅仅是让使用我们产品的人感到满意的方式,而是一种让体验变得轻松而有趣的功能性工具。”

动画技术最常被引用的资源之一是迪士尼的动画原则,由Frank Thomas和Ollie Johnston在20世纪80年代引入。这些原则的目的是为了创造角色动画中自然运动的幻觉。尽管运动设计人员很好地理解了这些原理,但通过用户界面的视角来看待它们,可以让我们在以前没有的原则上添加一个方面:功能。使用它们作为指导,我们可以提供反馈并提供清晰的信息,以便与我们的用户进行更有效的沟通。

相关:用Pixar的22个故事讲述规则改进用户体验

通过更深入地了解这些原则,我们可以获取关于如何在功能上使用每种方法的宝贵信息,为我们的用户创造更好的体验:

立面体

立面体是指将形状看作是立体物体,因此受物理学的自然规律支配。使用实体绘图的概念对于开发面板或信息之间的空间关系至关重要。所有物体都保持一定的重量和体积,并受到重力,摩擦和惯性等因素的影响,所以任何移动的结果都应该反映出这一点。当物体遵守自然法则时,它们属于哪里,它们往往对用户来说更直观,而普通感觉更好。

随着面板的交互,阴影,图层和速度根据物理定律而变化。


物体移动的方向告诉物体的类型。通常只有机械物体以完美的直线移动,而具有更多有机质量的物体则以弧形移动。无论您希望您的产品以技术性,愚蠢性还是优雅的姿态被接受,改变弧形动作都可以使其对品牌的特征产生真实感。

直线运动使这个应用程序保持干净和专业,同时增加柔软的松弛使运动感觉更自然。


分段

分段就是为即将发生的事情设定场景。良好的运动设计引导人们注意重要的内容。当他们通过屏幕过渡时,分段动画将重点放在下一个应该解决的问题上,或者引起人们对可能发起的潜在互动的关注。这有助于建立层次结构并阐明用户的操作流程。

只在用户开始输入评论后出现的提交按钮才会为他们接下来应采取的操作设定舞台。


夸张

夸大其实就是:让事情变得更加戏剧化,以唤起对某事的注意或说出一个观点。这可以表现在摇动的通知铃中,或者响应于交互错误。夸张引导焦点,并明确指出用户应该注意。

夸大可以强调确认和错误状态。


次要动画

当涉及到转换时,如果它太快或突然移动,很容易让用户感到困惑; 辅助动画确保不会发生。它重申了主要行动,以便用户可以确定发生了什么。这是一种轻微的,有时不肯定。

屏幕向上移动,我的收藏类别的主要运动被选中并移动到顶部。


吸引

如果你的动画让用户放大了他们的眼睛,转动他们嘴唇的角落,或者发出一声轻笑,你已经做出了吸引人的互动。这给交互带来了更难忘的体验,并为品牌塑造品格。吸引力将产品提示到一个新的水平,它不仅解决了问题,而且还解决了情绪问题,让人们回来使用你的产品,而不是另一种能够帮助他们实现相同目标的产品。

吸引力使互动更有趣


了解这些原则会让你事半功倍

学习这些原则会让你在UI动画的门户中占据一席之地,但有时甚至当你遵循所有的规则时,你的动画仍然显得不可靠。作为动作设计师学习最重要的经验教训之一是开发品味的重要性 - 即在你的大脑中能够告诉你何时感觉正确。密切关注事物如何在现实世界中移动可以显着改善您对运动的注意力。当潮汐流入时它看起来像什么?你周围的物体如何对自己的运动做出反应?开始接受日常生活中的动作,它会以令人惊讶的方式转化为您的数字作品。

   “每一个动作都应该是有意的,并以某种方式使用户体验受益。”


结论

这些动画原理是永久的,因为有充分的理由 - 在设计用户界面时可以牢记它们可以极大地提高产品的功能。如果使用得当,动画甚至可以对整个产品和品牌的成功产生积极影响。在为产品设计动画时,请始终记住动作的功能 - 每个动作都应该是有意的,并以某种方式为用户体验带来好处。利用物理学的自然规律来指导物体如何相互移动和互动。

最后,保持乐趣!有意义的设计不应该是无聊的。 设计一个愉快的体验,你的用户会不断地回来。

原文链接

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

推荐阅读更多精彩内容