移动端信息超载设计

2021-6-28    资深UI设计者

日常设计中,常常在解决一些由于信息过多,而需要对用户浏览行为进行设计的问题,在这里我们将其定义为“页面信息超载设计”。

由于移动端页面尺寸较小的特性,常常无法像PC端那样在一个页面中展现出多信息多任务,因此在面对多级的信息架构设计时,最常规且传统的做法是将某一场景/任务下的信息,通过设计页面的跳转/或增加页面的长度来实现。


从适用场景角度,可将信息超载的设计类型分为「页面展示信息超载」「页面版块信息超载」,上节我们聚焦「页面展示信息超载」进行了展开,本文将对「页面版块信息超载」进行展开。



页面版块信息超载


在设计内容版块时,当遇到内容放不下的情况,主流的对应策略之一是先在当前版块展示一部分内容,剩余内容以“查看更多”的方式来隐藏,以保证用户当前良好的阅读体验。但考虑到不同业务以及交互层面的使用,不同情况下可以有不同的交互情况。

主要可分为「场景跳转」「场景刷新」、「场景滑动」和「场景组合」。



场景跳转


作为最常见最普遍的一种场景,承载的功能是二级页面的入口,用户通过点击进入二级页面查看更多。


优势:

通用性高,可以进行版块内容的全浏览,给用户最大选择权。


劣势:

跳转到二级页面进行选择,需要整页加载,用户对后续内容没有预期易引起压力;

选择完成需要返回到上级页面,增加用户路径。


适用性:

适合内容体量较大对用户重要性又较高的版块(用户对该版块内容有查看更多需求且频次较高)


案例展示:


交互细节:

入口的设计位置和样式需根据版块的用户浏览动线来决定的。常用的入口位置有「标题右侧」「标题icon」、「版块底部」。


基于福格行为模型的运用,激发用户的跳转行为需要考虑用户的动机、能力、触发


· 标题右侧


M:

多用于横向滑动展示的模块,一定程度上契合用户浏览动线的设计,具备一定的动机,也仍具备跳转本身带来的劣势——易对用户引发没有预期的压力。

A、T:

标题的右侧导致按钮设计的空间从一开始就是被限制,易由于不显眼、面积不大而导致的触发不足、能力受阻。


按钮的设计:

只要具备一定的合理性动机,可以通过体验上的设计提升用户的触发以及能力。

具体化引导文案让用户对后续内容有所预期(如下方案例:蛋卷基金、哔哩哔哩);通过线性或者面型的容器承载文字,让它看起来更易辨识和易点击(如下方案例:网易云音乐);加入主色让它更加醒目(如下方案例:蛋卷基金)。


· 标题icon


M:

几乎适用任何场景,但动机的产生单纯依靠标题以及内容的展示

A、T:

信息传达无学习成本,节省页面空间,但点击区域小;位于顶端,对于内容超过一屏的模块,用户需要上滑返回才能点击


· 板块底部


M:

底部的位置符合用户垂直向下的视觉动线,更容易被展示内容吸引而顺理成章的接受引导进入内页;

但仍具备上述提及跳转本身的劣势。

A、T:

由于底部可设计的空间较足,查看更多除了文字链接的设计以外,还可以有更多发挥空间,层级也能得到显著,进而提高触发条件和点击能力。


按钮设计:

竖向的展示设计,势必会导致占用更多的页面空间,因此在页面模块较多的情况下,仍应该注意不必因强调“查看更多”而占用过多的页面空间。



场景刷新


目的实现当前版块更多内容的即时更换


优势:

大幅降低了新页面跳转带来的弊端,用户不需要承受多链路所带来的短期记忆和整页的加载成本,也无需返回到原有的浏览页面中。虽然内容依旧是缺少预期的,但是在用户的接受范围内,还有一种抽盲盒的惊喜。


劣势:

通用性不强,内容被局限在一个版块中,无法实现内容的全览,而且随机性很强。


适用性:

更适用于类似“猜你喜欢”、“随便看看”的推荐类版块。


案例展示:


交互细节:

以上三个例子选用的按钮位置和“查看更多”常用的位置类似,但可以看到当刷新按钮结合具体化的引导文案进行设计时,更能使用户在一定预期内得到惊喜(如上方案例:网易云音乐)



场景滑动


自ios11中加入了卡片这个崭新的容器后,卡片独立可排列的特征就解锁了横向更多的空间。用户可以通过scroll左右滑动手势获取到更多的内容。


优势:

卡片滑动方式兼容性很强,可利用更少的页面空间展示更多的内容。


劣势:

滑动展示有限,一般需要配合跳转需求出现。


适用性:

更适用于类目的快捷展示,便于用户选择更感兴趣的内容;


案例展示:


交互细节:

多用于固定容器为单位的横向排列侧滑展示更多内容,通常板块底部会有页面指示器,或露出部分来提示用户滑动。而这种横向滑动场景常体现于「卡片式」「金刚区」


· 卡片式


布局上通过展示卡片的一部分,暗示用户可以通过侧滑看到更多。设计上常和跳转场景组合使用,除此之外,也可根据业务上的需要考虑上方案例中且慢app的交互形式,页面指示器结合侧滑无限加载展示用户评论,通过用户交互成本较低的方式,即解决了用户触发动机弱而导致跳转场景转换率不高的问题,也能达成业务上的需求。


· 金刚区


随着各大主流app承载的业务范围越来越广,首页金刚区的运用已经屡见不鲜,能快速展示所有业务,便于用户快速选择需要的内容。



场景组合

为了给用户提供更多的选择,也为了能承载更多的信息,常将刷新场景、滑动场景和跳转场景结合使用。


优势:

弥补了单一交互的不足,用户可以根据自己的选择进行操作。


劣势:

不同的交互类型的集合,用户有可能会优先选择交互成本更低的操作,因此跳转场景可能会被弱化。


适用性:

模块上线初期,可以进行埋点设计,通过数据对比更能知道更贴近用户的行为。


案例展示:


交互细节:


· 场景滑动+场景跳转


结合上文中提到的劣势,如跳转场景的入口设计太深,用户的触发能力就会不足,如上述案例的淘票票,若其没有在标题右侧设计查看全部文字链接,则当用户滑动查看了大量信息仍未感兴趣后,点击更多卡片进入内页的概率也会大大降低。此类情况也经常于金刚区的组合场景出现。


· 场景刷新+场景跳转


当将两类功能都平级的设计出现,可以通过埋点数据分析出此功能区用户的真实心理行为。




总结


移动端由于界面空间有限,具有「一个界面一个任务」的特点,因此当面临产品增加功能时,不能一味在界面中进行功能的堆积排列,而应该更强调于页面场景化的设计,同时页面中的每一个细节设计都应该做到恰到好处,减少用户思考是否需要使用的精力。


本文对移动端页面展示信息超载设计进行了总结分析,但不是唯一,也没有哪一种方案是“绝对的优质体验”,最终的落地设计还需要视场景而定。下篇将对页面板块信息超载设计进行总结分析~

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档