最近在工作中刚好在做关于列表的设计，虽然看上去简单，实际还是有些限制和规范在的，这里专门整理出来，方便以后查阅。列表项按照可操作性可分为两种：可点击的和不可点击的，我们常用的列表大多都是可点击的。从列表本身的结构来讲，我简单的称为单项列表和复合列表。单项列表，即是一个列表只执行一个相关操作；复合列表，即一个列表中既有主要操作，又有次要操作。以下将一一说明。
一、可点击单项列表
1）动作列表
动作列表顾名思义就是表现动作的列表，它通常是由简单的动词短语组成，不需要额外的元素（比如指示符），就能表示它的可点击性。其语境中本身就具有强烈的点击引导，比如“检测版本更新”、“清除缓存”和“回复默认设置”等表示动作的文案，如下图所示
2）向右指示符列表
向右指示符列表，即是具有向右箭头符号的列表，这种列表具有明确的可点击性，也是iOS中最常见的一种列表形式，它意味着，点击列表后，会在新视图（二级页面或临时视图）中展示关于当前列表的更多信息，iOS官方比较推崇的方式是，点击后，进入一个二级新开页。但在MD中这通常表示打开一个新页面或新面板，即点击后出现的或许不是新页面，而是弹层选项。如下图1-1和1-2图示，即在两种平台上，以下的两种表现形式都是允许的，只是ios官方更偏向于第一种。正常情况下，尽量避免将向右指示符和其他次要操作控件一起放在列表右侧。
3）向下展开列表
具有向下符号的列表，在形式上和具有向右箭头的列表很相似，但它具有自己独特的使用情境，通常情况下表示垂直展开或折叠列表。比如下面的前两张图，可以是展开相关联的分类，也可以是展开和列表内容先关的上下文工具，有点不常用功能隐藏的含义；当上下文工具太多时，可以尝试调用一个新弹层的方式，比如最后一张图。虽然向下指示符在ios官方并没有相关规范（安卓有），但市场已然发展成为一种新的非标准模式。
4）下拉列表、单选和选中
“下拉列表、单选和选中”这三种形式均是表示在多个选项中选其中一个。如下图所示，下拉列表的好处是，当选项较少的情况下，不需要页面跳转，减少层级显示。单选和选中，虽均是表示被选中状态，但单选选项和其他选择属于互斥关系，选中却不一定（ios系统闹铃时间设置），也可以同时选择多个；另外一个选中和单选最明显的不同就是，选中为所点即所得，选择以后自动保存，而单选通常需要专门的“保存”按钮，点击后保存数据。
二、复合列表
复合列表的基本形式如下图所示，表示一个列表中同时含有主要操作和次要操作，次要操作通常位于列表的右侧，用按钮或控件表示，和主要操作分开并单独可点。这里的主要操作和次要操作与列表本身功能的重要性和使用频次息息相关。
先说一下，非设置项列表，即常规的应用列表中，同时具有主要动作和次要动作的列表很常见，如下图所示，他们通常是由一个主要操作和列表右侧的按钮组成，主要操作就是点击列表，进入相关列表内容的详情页，次要操作是右侧的操作按钮，比如收藏/取消收藏、关注/取消关注等，比如最后一张图，就是很常见的例子，其主要操作是点击列表，然后进入应用详情，次要操作是快捷下载应用。
另外一种形式的复合列表，是类设置项列表，该列表中常含有控件，下面是归纳了一些常用的控件元素，他们有的在列表中既可以做主要操作，也可以做次要操作，比如复选框，如下图所示
举一些在列表中使用控件的例子，如下图音乐列表中，图1的开关就是明显的次要操作，点击数字编辑时间是主要操作；图2中多选歌曲文件夹为主要操作，展开文件夹中的音乐列表为次要操作；图3中常用的功能是浏览查看，然后才会是下载或删除，这里通常需要一个入口来呼出列表的相关上下文工具，对于上下文的呼出，我们经常使用隐藏的手势操作，比如长按或左右滑动等，或者一个显性的按钮，比如“箭头”“更多”等符号来达到目的，这里就不扩展说了。包括图5列表中的主操作为直接打电话，次要操作就是进入具体的详情列表。此处设计师需要明确主要操作和次要操作的可点击区域。
这里需要注意的是，不要把展示图标和操作图标放在一起，比如图像和复选框。通常情况下，次要操作应该放在标题的右边，且要和主要操作分开单独可点击，因为越来越多的用户希望每个图标都能触发一个动作。
三、说明性列表
我将设置项中不可点击的列表，暂称为说明性列表。说明性列表通常只做客观的信息呈现，不需要有任何操作。个人认为如果在相同的设置体系中，区分设置列表的可点击性，最明显的区别就是是否具有“箭头指示符”。虽然在一些Android应用中的设置项，常能看到没有指示符就能点击的列表，但这里并不推崇。如果能在样式或者上下文语义上就能让用户明显的感知到是否可点，才是最好。如下图，图1明显是直接表示说明的列表；图2虽然在形式上和说明性列表很像，但是由于标题中显示的是“选取网络”，通过上下语义也能知道该列表可点。
网友评论