【UXRen原创】五花八门的列表样式藏着的设计秘密!

0217

作者:YYY

 

虽然现在的手机屏虽然越来越大,但依然是有限,所以信息的展示方式尤其重要。今天我们从设计目标、使用人群和使用场景来对比一下手机应用列表信息内容“更多”的呈现方式。

一、无限滚动加载式

0217a

 

其优点是,用户通过简单的上滑的手势就可以浏览更多内容,且不需要精准操作,带来沉浸的浏览体验,让用户停留时间更长。

 

这种方式适合于快速浏览,不适合深入阅读,且采用这种方式的对象的下方不再有其它类型的信息。因此我们可以发现,展示的内容要么是纯图片,要么是图片+少量文字,要么就是短视频(除非用户点击播放,呈现形式依然是图片+标题)。既然不是深度阅读,那么用户当前最主要的需求就是快速看到更多的内容,因此页面简洁,易于操作是比较重要的。

 

二、折叠展开式

0217b

 

搜狗搜索的结果列表页把不同页的结果按照独立的卡片分开,默认展开第一页的卡片,后面紧跟着第二页的卡片,不过是收起的,需要用户点击,把隐藏起来的内容展示出来展开卡片,同时出现第三页的卡片,以此类推。

 

采用这种模式最主要的原因我分析有两个:

 

1、在搜索结果的模块下,还有“相关搜索”和页脚等信息在搜索结果卡片下方展示,因此无限加载搜素结果的方式不适用。

 

2、与在其它app里随便逛逛的场景不同,搜索结果由前到后一般相关度递减,越靠后的结果默认为对用户价值越低,因此需要设定一个关卡,系统认为价值低的信息,除非是用户刻意需要看,不需要非常方便的展示给用户。反而提供“相关搜索”,尽可能减低用户找到自己想要的结果的成本。

 

三、轮播式

0217c

 

以电商类产品为例,进入首页的用户分为两类:

 

1、有明确购买意图的

 

2、随便逛逛的。

 

有明确购买意图的可以通过搜索或分类去找商品。因此,停留在首页的大多数用户都是没有特定目标的,这就是banner 的目标用户。

 

在有多个banner的情况下,如果在首页直接铺开,那么用户进来第一眼就全是推广图,就信息展示来说,量就少了很多,就用户操作来说,需要看到下面的内容需要多一步下滑操作,而如果前面几张图吸引不了用户,用户很可能就直接退出了。banner在首屏上虽最为吸引用户眼球,但除非能保证推广内容非常符合用户心意,不然宁可牺牲后几页banner 的曝光率(与平铺出来相比),在顶部轮播切换。

 

四、半屏展开式

0217d

 

 

这种形式多见于视频详情页里,用户在这个页面最主要的就是看视频,因此页面的视频区域吸顶,不随页面滑走,这样浏览其它信息的区域就只有差不多2/3屏了。而在这有限的区域里,需要展示的信息有:视频简介、视频选集、视频推荐、评论。

 

由于每一类信息数量都有可能很多,所以肯定不能直接在页面里铺开,不然后面的信息用户就会看不到。但是如果需要用户进入新的页面查看更多的信息,也是不合适。如果这是一篇文章的详情页,那么页面只要打开,文章的全部内容自然也就呈现了,用户从上往下浏览到页面底部时,可以认为用户对文章内容已经有了了解,在看其它相关信息的时候有页面的跳转至少不会影响本次阅读。

 

但是视频就不一样了,首先是有广告,其次视频的内容时需要用户在当前页停留较长的时间才可以看完,再就是视频加载的成本也比加载文字成本高,遇到信号不好的时候需要等,以上这些情况都会导致用户查看页面提供的其它信息打发时间,如果让用户轻易跳到了新页面,想必用户也是会抓狂的。因此大多采用的方式是,点击“查看更多”从页面底部滑出新的层,覆盖除视频外的其它区域,用户可以在这个层里面查看该模块所有的内容。

 

五、“换一换”式

0217e

 

 

爱奇艺首页上采用了“换一批”的形式,用户在当前模块里就能看到更多内容,当然,这种方式可能会将某些本来会进入二级页面的用户留在了首页,具体以哪个优先考虑,还需要结合设计目标来看。

 

不过这里的细节上还需优化:点击“换一换”的时候,模块高度会随着标题长短变动,而用户在此处进行多次切换的时候,手指点击的位置往往是固定的,而点击对象位置却不固定,会增加用户操作的成本。

 

以上是我个人的看法,欢迎大家拍砖。
 
文章来源:ME网易移动设计
顶部图片来源:https://picjumbo.com/another-hand-with-an-iphone-5s/

==========================================================================================

不知不觉UXRen社区官网已经两岁了, 在这里小编要感谢那么一如既往支持本站的油茶人。

UXRen.cn欢迎油茶人投稿,提供有价值的资讯、线索、点子及建议。

邮箱:contact@13tech.com.cn

注明:本站内容及数据部分来自互联网及公开渠道,如有侵权请及时联系我们。

=========================================================

版权声明:UXRen社区发布文章均来自UXRen会员原创、成员投稿、活动笔记、翻译组原创或者授权文章,部分文章为转载内容,都会明确标注作者和来源,其版权归作者所有,若涉及版权问题,请添加qq:497027206(小编Tracy),感谢支持。

订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论