翻译自:Functional Animation In UX
Design

译者纪:本片文中包含大量的动态页面(原网站是录像链接,本网站上传录像无法排序,故人工转为动图),加载较迟缓,请各位多点耐心,么么哒


一个好的交互设计师可以很容易的诠释设计之中的操纵背后的逻辑。这包含着消息架构,页面内容的层次结构,流程和所做的讲演。

肯定,动效将会使用到线框图原型中,这多少个时候,再去对设计做决定或者是解释,将会变的难有的。例如有些如此的说辞:太狂拽酷炫了……太潮了……太鸡冻了……这将是计划性失去其力度的天地(Reasons
such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly
the areas where a design starts to lose its
strength.)在我们的宏图中,动效理应占到更多的比例。我们应当去定义动效,并且讲演他们的目的——像大家演讲一个设计中其他的因素一样。

怎么是效率动效?

功效动效是神秘的动效,是我们松手在用户界面设计中的流程的一片段

不像是迪斯尼出的动效(动画)或者是电脑游戏中的动效,我们这边讲的功能动效拥有一个彰着的、有逻辑性目标。那些目标为是大家想要传递的计划意见服务的。功效动效是大家UX(交互设计)工具库中的又一个工具。

在一个健全的社会风气里,大家相应能够表明功用动效与显著设定逻辑的目标。假诺一个动效在大家的规划之中遵守我们设定的逻辑目的,那么它就是一个立竿见影的功力动效,它存在在大家的宏图中便是合理合法的。可是,如果它不与逻辑目的切合,那么它或许就是剩下的,需要再度慎重考虑那多少个动效存在的意思。

在过去的一年左右的年华里,做过各个各个的系列,我采访并整理了一多样九个逻辑目的。明天帮我表达功用动效。我一度发现到,通过查看一个被很好定义的动效,我可以很容易的把它们放入到这么些系列点一个如故更多的组。

也足以如此考虑:当一个动效不相符一个效率性的目标,那么这些动效多存在可能会让用户觉得困惑或者愤怒。下面是本人眼前征集的这一雨后春笋的动效。我期待您会在您的筹划中对你拥有帮助。

1、导向

导向会注解结构。在这组中,收集的是局部扮演导航角色的动效,它是网页信息结构的呈现。这种动效是想要吸引用户对导向的令人瞩目,扶助用户知道页面布局刚果发生的变化:什么导致了这些转变,下次想要使用的时候怎么再一次打开。

一个鳌头独占的例证是:一个按钮,可以切换隐藏内容(如个人资料等)。当您点击它是,会冒出一个隐蔽的面板,当你合下面板,它裁减回操作按钮。

第一次接触的时候,用户可能对当时要爆发的事情(做了动作之后的回馈)猜的不那么准。隐藏面板尺寸不断变大的载入动效可以协理用户更好的明亮暴发了如何,而不是觉得温馨离开了页面或者内容突然熄灭了。这样用户就暴发一种轻松的掌控感。收回面的的动效能够扶助用户关联打开对应面板的按钮或者图标,这样他们就会了解下五次从哪个地方打开这几个面板。

逻辑目标:避免突然间的变动,让用户知道自己在哪。

比如:下列六个动图:

2、相同的地点,新的效果

一个众所周知的易用性准则:保持规划和站点内容的一致性。一个颇具一致性的站点平日是可预见性的,由此,也是能够学学的。此规则也适用于按钮的操作。

在某些情形下,大家必须要设计一个在一定标准下效果发生一定变化的按钮。我们这么做经常是因为空间受限,如手机等。由此,用户已CEO解一个按钮的效力情状下,他还得学学另一个新效率。

“保存”和“编辑”按钮是意义转化按钮的最广泛的事例。不过这多少个又是最简便易行的,因为这两项操作是排斥的,他们有所同等的情况(context)。在其他的状态中,当五个效用之间不持有强烈的关联,可用性的挑衅就突显出来了。功能动效这一个时候就能表达很好的坚守。

逻辑目的:强调动作按钮的效应转移。

譬如:下列六个动图:

3、放大裁减

其三组的推广收缩看起来和率先组的导向有些相似。在这么些动效里面,用户在列表里挑选一个条款,然后就成为了这些条款的始末或细节(取代了列表视图),并且可以回来以前的条文列表。

俺们日常在图像库、卡片和条文采取中看看如此的动效。用户挑选了一个条款,条目立即响应用户的精选,在屏幕上显得相应的底细内容。

此间的孤苦是必须让用户继续感到掌控感,并且还在原来的流水线中。效能动效在这时往往是必需的。

在讨论那一个组中的效用动效时,我留意到一种共同的情势,当下边条件被准确无误的实践时,会增强动效的遵循:

1、初叶状态时条目标列表。

2、每个序列被指定一个单独的视觉提醒,例如一个主色调、一个符号、一个加粗标题或者是预览图像。

3、当用户做出了一个摘取,一个新的页面出现,所采纳的条条框框的视觉指示的要素被非凡出来。例如,整个页面的颜料可能连续了在此之前所选条目标主色调;或者,往日页面的号子被扩大并且定位到页面的题目;或一个条文的名字会变的更大,出现在页面的题目。

4、一个较肯定的关门动作按钮出现在新的页面,如“撤废”,“关闭”,“再次来到”或“x”。

逻辑目的:把条目与详情页关联。

比如说:下列五个动图:

4、视觉提醒

视觉唤起能够帮助用户更好的敞亮怎么去操作产品的界面。尤其是计划带有特殊对象或者纯粹的导航情势时,显得愈加关键。

这种效果动效是很容易被发现的。当我们开辟了一个页面,突然触发一个高速的五遍性动效,来演示咋样操作产品中的效能。

逻辑目标:能够显示独特功用依然隐藏的轩然大波。

5、突出

这种动效可以招引用户在内容太多的环境下的注意力。

设计师日常是避免嘈杂的布局和太多的始末的,当内容太多时,屏幕中的各类颜色和情节均准备引发用户的专注。

一个解决的主意就是从界面上去掉些内容,可是这些方法在有的时候并不是那么给力。试图想转手一个音信网站的负责人想要移除一些音讯和图纸。

另一个角度想转手。动效是可以自可是然的拿到页面上的视觉主旨的。无论是公事内容如故不变的图形,都是不可以与动效比拟的。我们得以应用效益动效的这一优点。记住,通过充裕动效获取最高视觉大旨是对嘈杂界面的一个缓坡。

在底下动效的例证当中,大家得以见到,在喧嚣的网页中把一个物品进入到购物车是不显明的。所以,这时候就需要动效。

逻辑目标:抓住用户注意力,超过嘈杂的界面。

譬如说下面一个动图。

未完待续

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图