实习期间碰到一个项目,是关于应用设置项的梳理工作。项目背景是应用版本升级,信息架构做了整改,所以相应的设置项也要进行重新的整合删改。总所周知的,应用设置页就是一堆列表项,所以在设计之前我先去了解了一下列表项的形式都有哪些,各自都是怎么用的,做完之后现在才想起来可以整理一下这部分内容。其中部分已经整理发表出来复选框和开关的选择,剩下的就将在本文呈现出来。需要说明的是,本文展现的是列表项,而不仅仅是设置页的列表项。
列表样式一般长得如上图,其中Primary Actionbar主要包含三类信息:图标、标题和描述。其中图标和描述都是可选的,标题是一定需要的。至于Secondary Action才是区分不同形式的列表项最主要的部分。Secondary Action可以为空,为空的时候就是以下的第一种情况。
直接点击列表项
当Secondary Action为空的时候,此时的列表项代表“点击触发”的状态,此时Primary Action要使用“表示动作的文案”,而不能使用“表示说明的文案”。举个栗子:“立刻更新病毒库”就是一种“表示动作的文案”,而“更新设置”就是一种“表示说明的文案”。
进入二级页面列表项
当Secondary Action不为空的时候,此时就会有不同的情形。第一种最常见的是代表“进入二级页面”的图标,一般是一个“向右的角”,这个角代表着点击会有后续的页面。需要说明的是,安卓原生没有这种设计规范,但是iOS一般都会符合这种规范,我只是觉得这种规范有利于与第一种情况做区分,遵守这种规范会更好。
复合列表项
第一种列表项和第二种列表项有时候会进行结合,比如在“通话记录列表”页面,用户会有一种需求是点击进入详情页,查看通话记录,另一种需求是点击拨打电话。这两种结合起来的时候就会形成符合列表项。复合列表项的Secondary Action是一个按钮,按钮代表一种操作,点击按钮即进行按钮代表的操作,点击其他部分即进行其他部分。
可下拉列表项
可下拉列表代表的是一种选择操作,选项的数量大于二,通过下拉列表可以查看更多选项,从中进行选择。
相比较于点击进入二级页面选择的设定,可下拉列表项可以有效减少操作步骤。
可编辑文字列表项
在可编辑文字的列表项中,Secondary Action显示的是文字,点击会弹出文字编辑弹窗或者进入新页面编辑。
可展开列表项
当页面内容很多的时候,列表项也可以考虑做成可折叠/展开的形式,默认展示大类信息,点击可以展开更多详情。
开关列表项
开关列表项表示一种“状态切换”,当只有单个列表项、多个不同的列表项或者联动列表项时,选用开关列表更加适合。详情请见:复选框和开关的选择。
复选列表项
当有多个相似的表示“状态切换”的列表项时,可以考虑增加二级标题,然后使用复选列表项。
单选列表项
复选列表是说多个列表项可以同时选中,单选列表项只能在多个列表项中选择一个。需要注意的是,复选框是一个正方形,单选框是一个圆形。
可滑动列表项
也有一些列表,滑动列表之后会展开一些操作项。不过这种设定在安卓比较少见,一是因为安卓的上Tab导航也是滑动操作,于这种可滑动列表项有冲突。二是可见性确实很差。
【1】列表 - Material Design 中文版 - 极客学院Wiki http://wiki.jikexueyuan.com/project/material-design/components/lists.html
【2】菜单 - Material Design 中文版 - 极客学院Wiki http://wiki.jikexueyuan.com/project/material-design/components/menus.html
【3】列表控制 - Material Design 中文版 - 极客学院Wiki http://wiki.jikexueyuan.com/project/material-design/components/list-controls.html