聊聊APP里的列表

我对列表的定义：对一定数量的相似数据组的处理，使用一定的格式或样式，呈现出来，称之为列表。
列表是APP设计核心部分，下面我就讨论各种列表模式。

新闻列表

右侧是新闻类应用最常见的列表，包括一张图片、新闻标题和评论数量，有的时候还会有点赞数量。
这种模式非常流行，原因之一是当前手机的屏幕尺寸，一个屏幕显示7到8组数据，超过这个数字选择就会变得困难。另一个重要原因，它形成了垂直的轴，人眼对轴的阅读是非常好的。
再想想新闻类应用的特点。更多的户外使用，不断更新的大量内容。新闻类应用对图片的清晰度要求不高，更小的图片可以减少用户流量的消耗，更快的加载速度。清晰的文字标题，字体可以做的很大，方便阅读，在换行的基础上可以容纳很长的标题。

列表1.png

图片列表1

经典的图片列表，也有书籍称做陈列馆。处理图片最常见的模式。
一屏至少能够显示6张图，不会超过8张图，符合交互原则。
在这个尺寸下，图片清晰度保持的很好。使用缓加载可以减轻加载速度的问题。
与上一个列表不同，视线扫描不是直线型的，而是折线型的。实际上用户的视线更多是随机扫视，因此这种模式的缺点：用户扫视的过程可能会忽略一些图片。

右侧的长短式设计，花瓣就是这种设计。非常好的适应了不同尺寸图片，特别是长度很长的图片。缺点是对于横版的图片不友好，会看不清。最常见于用户上传，不需要强制统一上传尺寸。

图片列表1.png

图片列表2

图片列表还有很多变化，提供更多信息，有利于用户做出选择。或者加上按钮，成为一个小的操作面板。
左侧的模式常见于音乐软件，在图片里面加上文字或数字，可能是作者名称，也可能是收听数量。这么布局的好处是，提供更多信息的基础上，不会打破原有的正方形图片，空间结构依然保持紧凑。不足之处是文字很容易被忽略，所以显示重要文字不建议使用这种模式。

右侧和安卓的卡片式设计结合在一起，每一组信息的整体感更强，个人比较推崇这种设计。根据封闭性原理，卡片内的内容很容易被人脑整合在一起。视觉焦点不再仅限于图片，文字也成了重要的点。另外，整体结构有了节奏的变化，界面显得更加有活力。

图片列表2.png

用户列表

用户列表根据功能的不同，应用属性的区别，会有不同的布局。出现的地方包括：关注列表、粉丝列表、评论用户、点赞用户、好友列表、发现有趣的人、用户排名等等。包括的组件有：用户头像、用户昵称、用户性别、用户粉丝、用户介绍、用户等级、用户状态、关注按钮等等。忽然发现还挺多的（＝ ＝||）。
左侧是传统的布局方式，可以很好的增加或减少组件内容，不管是性别、粉丝、等级、状态都可以按需增加，关注按钮一般放在右侧，这种布局灵活性好，扩展性强，可读性好。

右侧是比较少见的布局，一般用于随机排列，在推荐用户、发现用户比较常见。优点在于选择性好、显示的数量多、界面更简洁、亲和力好。但是扩展性不好，一般不超过两个组件、最多三个。无法放置关注按钮，因为结构过于松散。

用户列表.png

三列布局

随着app设计深入，更多的布局方式被开发出来，其中就有三列布局，并且呈现越来越流行的趋势。
三列布局常见于内容型app，例如网易云音乐。
在内容很丰富的界面，我们需要用到它，常见的使用方法不是铺满整个界面，而是两行两行的出现。大面积使用，会造成界面拥挤，难以选择的局面，两行即时6个，小于7个即可。
另外，不建议增加其他按钮在列表里，更多的操作都放在二级页面完成。
目前来说，三列布局的变式还很少，属于比较稳定的布局，扩展性不强。

三列.png

单列布局

APP“开眼”是一款短视频推荐应用，它在首页使用了左侧的单列布局，效果还不错。
左侧的单列布局最为常见，总体给人一级一级的感觉，可以放下很宽的图片，再在图片上放置很大的文字，有很强的视觉冲击力。这种模式，图片需要经过简单处理，否则文字容易看不清。图片文件比较大，加载比较缓慢，一般用于Wifi条件下。还要说一点，一个屏幕最多显示四五个，对于急性子用户就不适合了，这种模式适合放置在那种用户可以静下心来使用的应用里。

右侧布局很少见，但我确实在项目中遇到过这种布局，在填色类型应用里，所有竞品在画册界面都是使用这种布局。这是一个画册详情页，每一个列表内容是一个填色模板。
一页只能显示2到3个，这是一种近乎不合理的布局。这么做的理由，用户在选择模板时需要做出重量级选择，模板本身比较复杂，轻轻扫一眼的设计无法帮助用户做出选择，再有就是营造一种画廊的安静感。
需要考虑的因素还有很多，包括视觉，交互等，还是需要结合实际情况和最终效果。

单列.png