【2016.2.19】UI动画中的微交互详解{译}

在UI/UX设计中,微交互(Microinteraction)是其中的重要关注点之一。这些微交互也许能够最好的证明:注意细节可以给(用户)很好的效果。大多数UI/UX相关的书籍或者文章都在试图说明一个基本信息:当设计过程已经结束时,你应该最终得到的不仅仅是美观,而且首先得到的是好用和有用。

在之前的Tubik的工作组的一些文章和实例研究中,我们也支持一个观点:UI/UX designers do not create just a piece of art: they make a product that solves the problem of the target audience, preferably in fast and easy way(UI/UX设计师不是再是仅仅设计一个艺术品:他们做的产品最好能够通过快速,简洁的方式来解决目标群体).这是经过深思熟虑得出的来自微交互是能够给设计成功的产品提供关键特征:易用,实用,可用。


微交互的精髓

总的来说,微交互是指在一个特定的情况下用户的交互随着产品完成特定的一个动作或者行为.举个例子,当你按下喜欢这个按钮时,你可以看到你做的这个喜欢动作可以被计算到。(该号码已更改,按钮改变颜色或变得不活跃,该副本上的按钮通知你,你已经做了行动,该按钮或其他互动元素的副本通知,你是在那些谁喜欢,等)这就是微交互的情况.当你在适当的文字栏目上写上搜索要求和发送到服务器,这就是一个案例。在社交网络中,在你关注和取消关注一个人时就发生了微交互,在大多数情况下我们所做的设计中,不愿意去想那些简单的步骤。

因此,很容易理解到用户体验主要是:接受理解微交互。这些神奇的种子,如果得到适当的照顾,可以成长为伟大的可用性,效率和普及的产品。

在大多数情况下,微交互不由自主的固定了用户的行为,在用户使用的时候,设计师需要非常注意,让用户使用起来更加的自然,简洁,快捷。在微交互设计中界面动画就是很多方法中的一种使用和提高的方式.

今天我和乐意通过用户界面的动画效果来提供更多的细节想法和一些例子.


微交互的动画效果

按钮的动画效果

显然,各式各样的按钮是最受欢迎的交互要素。更多的按钮被用户视为唤醒屏幕或者使用网络功能的要素,甚至对于低水平的计算机的用户来说,因为虚拟按钮实际上是模仿着普通物理按钮的交互,所以,按钮是影响用户体验本质的因素之一。按钮可以让用户感觉容易或者烦恼和困惑,而在很多情况下,按钮是最常用的微交互和导航的重要因素触发。因此,他们被用户严重的关注,从设计师的决定,不仅颜色,形状,特殊效果,纹理和布局,但也要考虑必要性,适宜性和合适的动画效果.




下拉刷新动画

这种动画现在在用户界面中是最为流行,对于移动端产品,用户在第一次上手使用时经常提及到这个动画.

一方面,它同时提供了两个互动的步骤,一个是互动的应用程序显示,另一个是用户已经达到了内容滚动的上限使之让屏幕的应用程序发生交互。

另一方面,在图形用户界面设计阶段,在微交互过程中激活的元素,可以打开令人难以置信的广阔的空间,这不仅是提供信息,而且还让人感觉到时尚,美观和有趣。此外,这种类型的界面动画可以有效地使用特定的品牌元素,提高品牌知名度,使品牌的标志或吉祥物更令人难忘和可识别。



过程状态动画

有些种类的微交互立即发生,有的当然需要一些时间来完成。不管怎样,为了积极的体验,用户需要了解他们每一步都会发生什么。因此,加载过程和类似等待,应该向用户展示,他们也是能够让设计师展现创造力的巨大空间。

正如在过去的情况,一些标准的解决方案可以使用,以及有趣的细节和影响或品牌的元素可以在这里推广。在这种情况下,设计人员应该分析核心目标的观众来决定什么样的动画可以放在这里,如果它需要一种加载栏或圆形或任何其他数据,如数字所示的百分比或任何解释。


还有一点要提的是,使用任何类型的数码互动产品,哪些用户真正需要的是通过从系统快速反馈沟通。即使用户必须等待,他/她应该清楚地了解软件情况。它是对上述特征的所有类型的动画的基础。动画的最重要的和最初的目的是为了澄清,缓解和加快相互作用的过程中,只有在此之后,以美化和创建所谓的“哇 - 效应”。解决方案的动画应该可用性,而不是纯粹的装饰和娱乐的基础上完成。

所以,以及在以前的帖子上的动画,我们在用动画作为微交互时。经常呼吁的一个常识,动画应该支持的用户,帮助他们,可以增加在应用中让他真正与可用性相结合,而不是烦人或过度占用屏幕。

关于微交互动画的思考

它不应该过度占用页面或屏幕太多这样会造成长期等待和恼人的加载过程.

在不同的设备和目标用户下应该思考可以使用它们的条件.

在屏幕或网页上它不应该出现在最重要的功能或内容中造成干扰.

在应用程序或网站中,它应该符合一般的文体观念,以提供特殊的对产品的感觉.

对于设计有效的微交互这个问题,设计师不得不在设计,心理学,编程,有时语言学,科学和人类活动的其他领域的十字路口不知如何行动。目标受众和测试的思想和观念使微交互通常开门更高可用性的深入分析。在接口使用得当可以成为有效加快高效通过微步的互动,使一般更自然,当它需要在同一时间创造愉快而时尚的视觉设计的方法之一动画。

来源:Tubik Studio

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

推荐阅读更多精彩内容