提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
总结移动端反馈信息的呈现方式,以便提升工作效率。
反馈信息在我们的生活中随处可见,当我们开车行驶在马路上时如果没有系安全带,你的车就会发出“滴滴滴”的警报声来提示你没系安全带;当我们按下汽车启动器时,汽车会通过微微的颤动及转速表的指针、发动机的嗡名声等,来反馈车子已启动完毕;还有就是在我们过马路时的路边指示牌、红路灯,坐地铁时的报站提示等都属于反馈信息。
我们可以分两种方式去理解它,一种是经过人为的操作后通过视觉、听觉、触觉等把信息传达给我们,如启动汽车;第二种是物体本身给人直观的信息传达,如路标、红绿灯等。
试想如果在我们的生活中没有了这些信息的提示,将会多么的不便利呢?那么在做移动交互设计的时候反馈信息同样对用户很重要,下面从5个方向对提示信息做了总结,以便对我们日后的工作有所帮助。
一、弹框内的反馈信息
弹框是移动设备最为常见的反馈信息载体之一,弹框我们可以分为两类:模态弹框和非模态弹框。
1、模态弹框:
一种会打断用户的操作行为,强制用户操作,否则不能进行其他操作的弹框。模态弹窗在移动端又有三种表现形式,分别是:对话框/警示框(Dialog/Alter)、操作列表(Actionsheet)、浮出层(Popover/Popup)三种形式。
(1)对话框/警示框(Dialog/Alter)
对话框一般用于用户进行一项很重要或者有风险的操作,一般会有一段提示信息和两个按钮供用户操作。大多都显示在界面中间且对底部内容进行遮挡。
(2)操作列表(Actionsheet)
操作列表可以理解成一个面板上提供完成一项任务的多个选项。有单独文字选项样式的,还有可以放置图标的选型样式。优势在于可选择的操作要比对话框多,而且一般从页面底部弹出,对页面上部分的遮挡没有那么多。根据应用场景我们把操作列表又划分为两种模式:列表模式和宫格模式。
列表模式通常选项较少时使用,选项过多时,不建议在列表模式下滚动,因为在滚动过程中很容易误点了其中一项而造成误触发。
宫格模式适用于选项非常多的情况,并且能以图标的形式展示。选项过多时建议将相关选项进行分组处理,这样更利于用户操作。如果当某一列图标过多时可以通过此列向左滑动的方式来展示更多的图标,一般是通过屏幕的边缘漏出半个图标,来暗示用户后面还有图标。
(3)浮出层(Popover/Popup)
浮出层是用户点击某个区域或空间后,浮出的半透明临时视图。一般出现在点击部位的附近,更具有指向性和提示性。常见的例如点击微信和支付宝右上角的“小加号”弹出的浮层。
2、非模态弹框:
非模态弹框相比于模态弹框就友好了许多,她不会打断用户的操作流程,轻量化的一种信息提示载体。在移动端可以分为Toast(HUD)和Snackbar两种。
(1)Toast(HUD)
一种简易的信息提示框,一般出现在屏幕的最上方,用来反馈用户状态。因为显示时间短,所以不宜展示过多内容。
Toast为安卓平台的叫法,HUD是iOS平台的叫法,两者的区别:HUD只出现在屏幕的中央,Toast则在底部;HUD可以包含icon,Toast只能纯文字;HUD一般是毛玻璃透明,Toast一般是灰黑或者黑色半透明;HUD中内容可以变化(如调节音量时),Toast中内容不可变化。
由于现在两个平台的差异性没有那么大了,很多在iOS上实现的效果,安卓也都能实现,所以在很多APP在开发过程中也不再单独为某一个平台而去设计不同效果,一般就只是一稿适配双平台。
(2)Snackbar
Snackbar可以理解为Toast的升级版,是针对操作的轻量级反馈机制,通常出现在屏幕的下方,以浮动弹出框的形式存在。
与Toast相同,短暂出现后会消失,但是不同的是Snackbar具有轻交互性,可以在屏幕上滑动消失。 而且Snackbar也提供一个操作,常用的就是撤销操作,对一些会有不好后果的操作提供撤销功能。(如网易邮箱删除邮件)
二、角标反馈
角标提示是我们最常见的一种反馈形式,通过红点角标的形式引导用户点击,从而达到要给用户传达信息的目的。最为常见的就是红点和带数字的红点两种形式。
一般红点的应用有以下几种情况:新功能的增加想让用户知道并使用、新消息的通知、活动运营消息通知、业务需要等而使用红点提示用户。
而带数字的红点可以理解为红点的加强版,优势在于能够清晰的获取消息的数量,劣势在于如果消息数量过多会对用户造成心理压力,从而产生不适,严重的会直接卸载程序都是有可能的。
微信公众号在早期运营的时候还在用数字红点做提示,在当时起到了让公众号的内容看起来很丰富的价值。但是随着公众号的用户逐渐增加,内容明显过载后微信便将数字红点改成了单纯的红点提示,具体的数字而是展示在消息内。从而降低了用户的心里负担,又提升了产品体验。
三、Loading动画反馈
Loading动画是用在加载等待时的一种动画反馈手法,目的在于降低用户的等待感和焦虑感,提升用户体验。常见的加载动画有以下几种;
1、标题栏Loading
这种加载方式在微信中最为常见,由于消息列表和朋友圈的数据是存在本地的,所以页面的内容不会为空(除非清除缓存后)。这个时候的加载无需获取用户的视觉焦点,所以只需要在标题栏显示正在加载即可。
2、白屏Loading
这种加载方式一般页面内容比较单一,需要一次性加载完成后显示,所以需要白屏加载方式。由于在加载完成前是看不见任何东西的,所以通常我们所看的加载动画都是放到这个地方,而且是界面的中间位置,从而吸引用户视觉焦点,通过有意思的小动画来减少用户的等待及不知所措。但是需要注意的是一旦长时间加载未果后一定要提示用户是什么原因造成加载失败,不然用户会想“我裤子都脱了,就给我看这”。
3、预设图加载
这种方式一般是界面框架固定时,只需要加载框架中的内容是采用。而它的优点在于采用了分布加载的方式,先加载框架,再加载内容,为保证框架内不为空而采用预设图作为填充来展示给用户,一般都会采用logo图作为预设图,在减少用户等待感的同时还能起到品牌效应。
4、下拉刷新加载
这种加载方式也是我最喜欢的一种加载方式,不但能看到本地缓存的内容,还能通过用户手动下拉而获取新的内容,在下拉过程中配合加载动效的展示,从一定程度上满足了我的强迫症,感觉总有新鲜事物来到您身边。
5、加载进度条
这种加载方式其实和第3个白屏Loading加载原理一样,只不过是加载动画采用的是进度条的一种表现形式而已,多用于浏览器或者一些H5页面。
以上是常见的在加载过程中为了减少用户等待感而使用的几种表现方式,通过总结之后发现加载原理不过只有两种:
1、通过整体加载页面内容后,一次显示给用户;
2、通过分布加载,先加载一部分内容,再加载剩余部分内容。
不管有几种加载反馈的变现形式,都离不开这两种加载原理。只有明白了加载原理,才能采用相应的加载方式配合加载动效设计来提升用户体验。
也并不是每个加载的地方都需要我们通过加载动效来减少用户的等待感,还可以从代码的优化上,提升与服务器的交互效率;还可以通过预加载的方式,提前加载好缓存到本地,等用户需要的时候直接调取;还可以采用异步处理加载方式,在不影响数据加载的同时仍能执行其他程序。
四、音效、震动反馈
通过声音或震动,能够充分引起用户的注意,让场景具象化,一般在重要的通知或具有娱乐性的操作时加入。不过需要谨慎使用,否则引起用户的反感。在常用的APP中新消息的通知会伴有声音和震动;在游戏中的音效和震动是要重要于普通APP的,在游戏中加入音效和震动会给用户一种沉浸式体验,让用户身临其境。
五、动效反馈
动效反馈通俗一点讲就是在用户进行操作时页面的转场、界面元素的动效表现。此类动效基本上每个APP中都存在,效果最好不要太生硬,能够在无形之中给用户带来愉悦感和舒适感。
此类动效反馈最能直观的传达信息给用户,并且不会让用户注意到的方式进行响应。
此图片来源于网络,如有不适联系我删除!
通过总结,我们归纳了反馈的5种表现形式。弹框、角标、Loading、音效震动、动效等。
反馈的目的就是要通过某种手段结合载体把信息传达给用户。要想不断的提升APP的体验,就需要我们深入的去了解产品结合业务目的采用合理的方式为产品提供解决方案,从而达到体验升级。
点赞的人都很帅!
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册