为什么常见的垂直列表，你却总设计不好

原文地址：海盐社（公众号）

作者：焱小玖

提到垂直列表你第一个想到的会是什么？是这样吗

但其实垂直列表展开说是这样这样这样的

就比如你看到的蓝湛是这样的，而读弟机看到的蓝湛是这样这样这样的

因为了解，看到和想到的东西也就越多，才能更全面系统地考虑从而做出适合的分析和选择。我们平时工作中用到的组件、控件很多情况下都是零散的点，没有去整理和归纳，这样积累下来的经验就很有限，再遇到的同类型的场景时之前的案例提供的帮助并不多。

同样是图文模式垂直列表，有人的脑内是这样的，而另一种人的是这样的

对一个事物了解程度的区别，决定着我们的思维方式。这里我要吹一波彩虹屁，每次遇到问题和师父聊天，他分析的纬度都能启发我，给我带来新的思路~除了瑞思拜，还是瑞思拜！@海边来的设计师。

今天先梳理了垂直列表的几种模式，希望通过本篇自己能对垂直列表的认知搭建起基础框架，连点成线，更整体的去认识它。欢迎和我一起哟~

史上最长前言结束，下面正文开始。

垂直列表

垂直列表顾名思义是将信息从上至下纵向排列展示，是最基础的一种列表形式，在产品中也是随处可见。iOS的设计规范将这种形式称为表视图（Table View），Android则称其为Lists。

垂直列表通常是对各条目信息的整理、汇总与集合，方便用户在大量内容中能更快速地定位和查找到感兴趣的内容条目，以提高用户的浏览效率。

列表中通常只显示条目的简要信息，如标题、简介、关键数据、缩略图、操作按钮等，根据信息的不同，可将其分为文本模式、图文模式和控件模式，设计时应选择相应的模式使用。

文本模式垂直列表

文本模式主要以文本为主，根据其排列方式可分为单行列表和多行列表。

· 单行列表

一行列表展示的条目信息多为标题，常用于索引、通讯录、搜索等。如下图iOS通讯录全行只展示姓名这一标题信息，其他信息则于详情页展示。因为对于通讯录来说，姓名这项信息是唯一而关键的，不需要其他信息。

当然一行列表也不拘于只显示一项信息，还有一些情况是除了标题之外，也展示一些辅助信息。比如微博的热搜榜，除了标题还带有榜单排名、阅读人次、热度等级，这些与用户阅读紧密相关的参数。

这里设计师也需要考虑每项信息文本的字符限制能否满足绝大多数功能需求，如果过于拥挤则需要删减信息内容或选择其他列表模式。

· 多行列表

多行列表的条目信息比单行列表要丰富，除了标题还有简介、用户昵称、时间、浏览量、点赞数等，多行显示可以保证信息展示的层级性、独立性和完整性，适用于有更多信息需要外漏的内容。

如iOS电话中的最近通话，电话号码或名称为最重要信息在第一行显示，地区为次要信息在第二行显示，两个信息从位置、字体大小、字重和颜色都予以区分，层级分明。

豆瓣的多行列表，标题独占一行，尽可能多的为标题留出空间。而得到的列表，则没有对标题做字符限制或省略处理，而是选择了折行完整显示的方式，给予标题更大的自由。

不过折行显示的方式需要谨慎使用，比如这种方式就不适用于榜单列表、推荐列表等，因为它虽然保证了标题的完整性，但也破坏了列表的固定高度，影响页面的条目数量显示，垂直列表易于浏览和比较的优点也都受到影响。

图文模式垂直列表

图文模式的垂直列表，可以分为左右结构和上下结构。

· 左右结构

左右结构图片展示面积较小，图片比例多 采用1:1、3:4、16:9等比例。图片于文字是辅助作用，更多地突出文字内容，一屏之内可展示较多条目。

另外就是到底该选择左图右文还是左文右图的问题，二者之间的区别是什么。其实相对来说左图右文应该是更为通用的形式，原因是从内容和顺序上它都更符合人类的浏览习惯：

1. 图片比文字更能吸引人们的注意力

2.人类的阅读顺序也是从左往右“Z”字型浏览

首先被图片吸引，然后是浏览解析标题内容，左图右文的形式被大多数产品使用，那为什么还会出现左文右图的排列？

其实也是原因还是在于内容和顺序，左文右图的排列最常出现的就是新闻类的产品，由于不能保证每个条目都有配图，若使用左图右文的排列，有/无配图的列表条目的标题就无法对齐，整个列表的结构不稳定而降低阅读体验，所以此时选择左文右图的排列才是正确的选择。

·上下结构

上下结构，图片占全屏所以展示面积较大，比例以16:9、16:10为主。文字内容相对较少，适合以图片为主的内容，一屏展示的条目较少。

上下结构的上图下文或上文下图的区别，不如左右结构的区别明显，原因是图片的尺寸较大吸引了大量注意力，降低了文字位置不同带来的影响。

不过也可以从内容方面来考虑，比如UGC发布的内容，为了突出用户，用户信息与标题往往在图片上面；而官方发布的一些内容、专题等往往更注重图片的吸引力，其他信息则放图片下面。

控件模式垂直列表

控件模式是指在列表条目中带有操作控件，通常出现在列表条目的右侧，左侧则是条目的标题，这是根据人类从左至右的浏览习惯，让用户自然先看到标题后，再对其发生的动作。常见的控件有开关、选择、按钮、排序等，一般在设置、信息录入等界面中会经常用到 。

· 开关

开关是对现实生活中开关的拟物模仿设计，用于开启和关闭两种状态的切换。

如夜间模式、移动网络等状态设置，最常见的样式通过按钮的色彩和方向区分状态，开启或关闭的状态一目了然，很好理解。而Toonie闹钟的开关还加入了动效，当处于开启状态时，按钮旁边的光圈会转动，更加灵动可爱。

· 排序

排序控件的图标按照iOS的设计规范是三连短线图标，长按后可自由拖动调整列表排序。不仅支持调整排序，通常也可以选择删除该条目，所以排序控件旁也有删除图标按钮，或是开关。

· 选择

选择控件可以分为两种，一种是操作类型的，对所选择条目进行操作，如淘宝购物车选择商品进行结算，百度网盘选择文件进行下载或分享等。此类状态的选择控件需要更强的视觉引导，未选状态通常以空心图形表示其可选，选中后状态空心图形填充颜色并加上“√”图形。

另一种则是设置类型的，是对某个功能的状态选择，比如列表的排序方式等。通常会给出默认选择状态，用户可以对其更改，这种类型的视觉不需要像操作状态一样强调，通常只采用轻量级的“√”以做区分即可，不需要色块填充。

列表的分组与折叠

垂直列表中为了能让用户更好地浏览通常会将条目分组显示，Android设计规范中将其定义为节分隔符（section divider），分组的形式有背景色分组，背景色+标题分组，分割线分组，且根据条目内容的关联性选择分组是否需要折叠。

通常同一分组下，互无关联或关联性弱的条目直接铺陈展开，如通讯录中，以字母为分组，同一字母下的各联系人条目，彼此属于弱关联，更重要的单独的条目信息，就没必要使用折叠而是直接展开。

而同一分组下关联性强的条目，如书籍目录、大品类中的小分类等不仅与分组有强从属关系，各条目间也有联系，则可以选择折叠列表，支持收起分组。

到这里我们大概完成了一个基础框架的梳理，希望以后在遇到关于垂直列表时，可以做更全面的考虑，同时每次有新的经验和知识也可以随时补充和更新，不断丰富。

划重点

垂直列表的三种模式：文本模式、图文模式、控件模式。

单行列表需注意字符限制能否满足绝大多数功能需求，如果过于拥挤则需要删减信息内容或选择其他列表模式。

图文模式垂直列表的结构可以从图片是否固定、图片大小、一屏显示数量等方面考虑。

列表分组时强从属关系可以选择折叠列表，弱关系则直接铺陈。