12 条动效设计的原理(下)

推荐阅读:AE动效插件:Motion2(附有下载链接)

12 条动效设计的原理(上) - 简书

原理7:覆盖(Overlay)

覆盖通过允许用户能让本来有限的空间被更好的利用起来。利用扁平化设计来阐述两个相互独立的元素的位置关系。


示例中,前景物体向右滑动以显示其他背景物体的位置。我们用图层进行设计,图层的概念深入内部。作为设计师,我们需要非常熟悉我们正在设计的所有对象(包括隐藏片段)。然而,作为用户,这些不可见的部分是定义和实践,隐藏在视觉和认知上。


原理8:生成(Cloning)

当元素被生成时,表达元素与元素之间的连续性。这种动画能够非常清晰地表达因某个操作而产生的一个或数个事件发生以及它们之间的关系。

在以上三个示例中,在用户注意力集中在这些对象的时间内,从现有元素对象创建新对象。 引导注意力,然后通过创建一个克隆的新对象来引导 - 具有传达清晰明确的事件:该行为“x”具有“y”的结果创建新的子对象。


原理9:蒙层(Obscuration)

与覆盖原理中的用户体验类似,蒙层既是静态现象,也是时间现象。不完全盖住,简单的不透明度渐变往往不会达到这个结果。通常利用模糊或者变暗保留可视性。

上面示例中,模糊看起来像透明对象或叠加层,也是一种涉及多个属性的时间交互。各种常见的技术涉及模糊效果和整体对象透明度的减少。用户意识到她正在操作的另一个非主要上下文 - 还有另一个世界,就像它在主要对象层次结构“后面”一样。遮挡使设计师能够补偿用户体验中的单一统一视野或“客观视图”。


原理10:视差(Parallax)

作为运动原理中的UX的“视差”描述了以不同速率运动,构成不同的视差效果。

视差允许用户专注于主要操作和内容,同时保持设计完整性。在视差效果表现空间中个元素的位置及层级关系,引导用户去关注应该应该关注的地方。

这对用户的影响是为了明确界定交互的持续时间,对象关系。前景对象或“更快”移动的对象对用户来说显得“更接近”。同样,移动“较慢”的背景对象或对象被视为“更远”。

设计人员可以使用时间本身来创建这些关系,告诉用户界面中的哪些对象具有更高的优先级。因此,将背景或非互动元素进一步推回是有道理的。

不仅用户感知的界面超出一个层次,其在视觉设计决定的,但现在这个层次可以利用用是自觉意识到在设计之前的用户体验内容。


原理11:多维化(Dimensionality)

用户体验的关键是连续性和位置。将界扁平化的界面元素多维化,表达空间中个元素的位置及层级关系。维度提供了一种强大的方法来克服用户体验的平坦性和非逻辑性。人类非常擅长利用空间框架在现实世界和数字体验中进行导航。维度以三种方式呈现 - 折纸维度,浮动维度和对象维度。

浮动维度为界面对象提供了空间起源和离开,使得交互模型更加直观和高度叙述。  对象维度导致具有真实深度和形式的维度对象。


这里,多个2D层被安排在3D空间中以形成真实的三维物体。它们的维度在实时和非实时过渡显示。对象维度的用途是用户基于不可见的空间位置开发对象实用程序的敏锐意识。


原理12:镜头平移与缩放(Dolly & Zoom)

镜头平移:被拍摄物保持静止而镜头移动或镜头保持静止而被摄物体进行远离或接近镜头的前后移动。

镜头缩放:镜头与被摄物体在位置上保持静止而被摄物自身进行缩放。

在某些情况下,无法判断对象是否正在缩放,是否在3D空间中朝向相机移动,或者如果相机正朝3D空间中的对象移动(请参见下面的参考资料)。以下三个例子说明了可能的情况。

前两张图像是放大的,而最后的图像是放大的。

在UX中,空间运动可以引用观看者视角的变化,或者当对象改变位置时视角保持静止。还可以结合维度原则,从而产生更多空间体验,更深入,并向用户传达当前视图“前”或“后”的其他区域或内容。并且满足运动原则中用户体验的要求:它们通过运动支持可用性。

原文

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容