我对列表的定义:对一定数量的相似数据组的处理,使用一定的格式或样式,呈现出来,称之为列表。
列表是APP设计核心部分,下面我就讨论各种列表模式。
新闻列表
右侧是新闻类应用最常见的列表,包括一张图片、新闻标题和评论数量,有的时候还会有点赞数量。
这种模式非常流行,原因之一是当前手机的屏幕尺寸,一个屏幕显示7到8组数据,超过这个数字选择就会变得困难。另一个重要原因,它形成了垂直的轴,人眼对轴的阅读是非常好的。
再想想新闻类应用的特点。更多的户外使用,不断更新的大量内容。新闻类应用对图片的清晰度要求不高,更小的图片可以减少用户流量的消耗,更快的加载速度。清晰的文字标题,字体可以做的很大,方便阅读,在换行的基础上可以容纳很长的标题。
图片列表1
经典的图片列表,也有书籍称做陈列馆。处理图片最常见的模式。
一屏至少能够显示6张图,不会超过8张图,符合交互原则。
在这个尺寸下,图片清晰度保持的很好。使用缓加载可以减轻加载速度的问题。
与上一个列表不同,视线扫描不是直线型的,而是折线型的。实际上用户的视线更多是随机扫视,因此这种模式的缺点:用户扫视的过程可能会忽略一些图片。
右侧的长短式设计,花瓣就是这种设计。非常好的适应了不同尺寸图片,特别是长度很长的图片。缺点是对于横版的图片不友好,会看不清。最常见于用户上传,不需要强制统一上传尺寸。
图片列表2
图片列表还有很多变化,提供更多信息,有利于用户做出选择。或者加上按钮,成为一个小的操作面板。
左侧的模式常见于音乐软件,在图片里面加上文字或数字,可能是作者名称,也可能是收听数量。这么布局的好处是,提供更多信息的基础上,不会打破原有的正方形图片,空间结构依然保持紧凑。不足之处是文字很容易被忽略,所以显示重要文字不建议使用这种模式。
右侧和安卓的卡片式设计结合在一起,每一组信息的整体感更强,个人比较推崇这种设计。根据封闭性原理,卡片内的内容很容易被人脑整合在一起。视觉焦点不再仅限于图片,文字也成了重要的点。另外,整体结构有了节奏的变化,界面显得更加有活力。
用户列表
用户列表根据功能的不同,应用属性的区别,会有不同的布局。出现的地方包括:关注列表、粉丝列表、评论用户、点赞用户、好友列表、发现有趣的人、用户排名等等。包括的组件有:用户头像、用户昵称、用户性别、用户粉丝、用户介绍、用户等级、用户状态、关注按钮等等。忽然发现还挺多的(= =||)。
左侧是传统的布局方式,可以很好的增加或减少组件内容,不管是性别、粉丝、等级、状态都可以按需增加,关注按钮一般放在右侧,这种布局灵活性好,扩展性强,可读性好。
右侧是比较少见的布局,一般用于随机排列,在推荐用户、发现用户比较常见。优点在于选择性好、显示的数量多、界面更简洁、亲和力好。但是扩展性不好,一般不超过两个组件、最多三个。无法放置关注按钮,因为结构过于松散。
三列布局
随着app设计深入,更多的布局方式被开发出来,其中就有三列布局,并且呈现越来越流行的趋势。
三列布局常见于内容型app,例如网易云音乐。
在内容很丰富的界面,我们需要用到它,常见的使用方法不是铺满整个界面,而是两行两行的出现。大面积使用,会造成界面拥挤,难以选择的局面,两行即时6个,小于7个即可。
另外,不建议增加其他按钮在列表里,更多的操作都放在二级页面完成。
目前来说,三列布局的变式还很少,属于比较稳定的布局,扩展性不强。
单列布局
APP“开眼”是一款短视频推荐应用,它在首页使用了左侧的单列布局,效果还不错。
左侧的单列布局最为常见,总体给人一级一级的感觉,可以放下很宽的图片,再在图片上放置很大的文字,有很强的视觉冲击力。这种模式,图片需要经过简单处理,否则文字容易看不清。图片文件比较大,加载比较缓慢,一般用于Wifi条件下。还要说一点,一个屏幕最多显示四五个,对于急性子用户就不适合了,这种模式适合放置在那种用户可以静下心来使用的应用里。
右侧布局很少见,但我确实在项目中遇到过这种布局,在填色类型应用里,所有竞品在画册界面都是使用这种布局。这是一个画册详情页,每一个列表内容是一个填色模板。
一页只能显示2到3个,这是一种近乎不合理的布局。这么做的理由,用户在选择模板时需要做出重量级选择,模板本身比较复杂,轻轻扫一眼的设计无法帮助用户做出选择,再有就是营造一种画廊的安静感。
需要考虑的因素还有很多,包括视觉,交互等,还是需要结合实际情况和最终效果。