微交互是APP设计师能力进阶的加分项,必学知识

在UI/UX设计中,微交互(Microinteraction)是其中的重要关注点之一,同时,微交互绝对是让app受人欢迎的重要设计要素之一,它能增进使用者的参与度、功能与愉悦感。虽然设计与开发微交互会增加许多时间,但却能让你的产品成为使用者生活的一部分。

所以,作为一名优秀的APP产品经理和APP设计师,必学微交互方面的知识点和案例鉴赏。

 

之前25学堂分享了微交互方面的知识点:

1、卡片化设计和微交互是2017年UI设计当中最重要的趋势

2、超酷的APP微交互案例欣赏:按钮的旋转分裂特效

3、2016年APP设计师必学的知识点:APP微交互

4、APP UI/UX设计趋势关键词:轻量化设计和微交互

 

如果你是一名微交互设计的初学者,可以通过阅读书籍和25学堂上的干货来提升自己的交互思维。

 

一,微交互入门书籍推荐:

微交互方面最权威的深度解析书籍,可能是 Dan Saffer写的《Microinteractions》。

很好的一本微交互入门书!用户体验设计师必须要读呀。

他深入浅出的讲解了微交互的理念、框架、工作机制、包含的种类、分别得特点以及在用户体验中扮演的角色。在此向用户体验相关从业人士强烈推荐这本书,作者在书里阐释了对“以用户为中心的设计”很棒的理解。

微交互的入门书籍

 

豆瓣和亚马逊上都有卖:https://book.douban.com/subject/21336456/

 

另外一本书籍也值得推荐:《Mobile Design Trends 2015 & 2016》

在《Mobile Design Trends 2015 & 2016》这篇文章中提到,影响使用者的行为(生心理)就是设计微交互的原因,这些短暂与数位接触的时刻,可让使用者产生心理愉悦等感受。综上所述,微交互就是让使用者感受到你想传达的东西,或借此让使用者有接触到其他人与物体的感受。

免费电子书书籍地址:http://studio.uxpin.com/ebooks/mobile-ui-ux-design-trends-2015-2016/,

免费电子书网盘地址:http://pan.baidu.com/s/1skgsAZj

 

 

二、微交互的精髓

总的来说,微交互是指在一个特定的情况下用户的交互随着产品完成特定的一个动作或者行为。

举个例子,当你按下喜欢这个按钮时,你可以看到你做的这个喜欢动作可以被计算到。(该号码已更改,按钮改变颜色或变得不活跃,该副本上的按钮通知你,你已经做了行动,该按钮或其他互动元素的副本通知,你是在那些谁喜欢,等)这就是微交互的情况.当你在适当的文字栏目上写上搜索要求和发送到服务器,这就是一个案例。

在社交网络中,在你关注和取消关注一个人时就发生了微交互,在大多数情况下我们所做的设计中,不愿意去想那些简单的步骤。

按钮、开关、滑块等控件的动效欣赏 (1)

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

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

0

 

 

三、微交互的最常见的使用情景

微交互的一个特点是它可以被放置在很多的场景下,辅助不同的动作行为。总体来说,微交互的使用场景包括:

1、按钮的动画效果

各式各样的按钮是最受欢迎的交互要素。更多的按钮被用户视为唤醒屏幕或者使用网络功能的要素,甚至对于低水平的计算机的用户来说,因为虚拟按钮实际上是模仿着普通物理按钮的交互,所以,按钮是影响用户体验本质的因素之一。

微交互按钮动效

按钮可以让用户感觉容易或者烦恼和困惑,而在很多情况下,按钮是最常用的微交互和导航的重要因素触发。因此,他们被用户严重的关注,从设计师的决定,不仅颜色,形状,特殊效果,纹理和布局,但也要考虑必要性,适宜性和合适的动画效果。

select

菜单动画设计

扩展阅读:APP设计的那些知识点:如何设计好按钮Button来自Dribbble的9个APP图标交互动效设计,脑洞大开

 

 

2、APP当中的下拉刷新动画

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

一方面,它同时提供了两个互动的步骤,

一个是互动的应用程序显示,

另一个是用户已经达到了内容滚动的上限使之让屏幕的应用程序发生交互。

另一方面,在图形用户界面设计阶段,在微交互过程中激活的元素,可以打开令人难以置信的广阔的空间,这不仅是提供信息,而且还让人感觉到时尚,美观和有趣。

此外,这种类型的界面动画可以有效地使用特定的品牌元素,提高品牌知名度,使品牌的标志或吉祥物更令人难忘和可识别。

 

APP下拉刷新动画

下拉刷新中的动效设计

 

3、过程状态加载动画

这一类也是APP设计师发挥创意的好地方,

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

糯米APP加载

微交互加载

 

以上这些就是25学堂继续跟大家分享的关于微交互的知识点和相关的动效展示。包含一些微交互书籍的推荐等。

以用户体验的角度来设计,色彩学更显得重要,追求配色的和谐,适时的运用对比的观念等。如果你的app以绿色为基调,可适时的在微交互的过程中带入,让用户产生与原app的连接感。

记住,微交互一定是让你的设计能力、你的APP作品增添色彩的一项。也可以说是你的进阶加分项。

当然,对于设计有效合理的微交互这个问题,APP设计师不得不在设计、心理学、编程等方面有涉及,还需对语言学、科学和人类活动的其他领域的有所关注和了解。

目标受众和测试的思想和观念会促使  微交互 更高可用性的深入分析能力。

 

每天更新,
全站高品质素材免费下载!