自身概括的称呼单项列表和复合列表,Action才是分别不一致款式的列表项最重点的一部分

不久前在工作中刚好在做关于列表的安插,就算看上去大约,实际如故多少限制和业内在的,那里尤其整理出来,方便未来翻看。列表项依据可操作性可分为二种:可点击的和不得点击的,大家常用的列表大多都是可点击的。从列表本身的布局来讲,我大概的称之为单项列表和复合列表。单项列表,即是一个列表只举办一个休戚相关操作;复合列表,即一个列表中既有举足轻重操作,又有帮衬操作。以下将逐一表明。

实习时期碰着一个系列,是有关利用设置项的梳理工作。项目背景是应用版本升级,音讯架构做了整顿,所以相应的安装项也要开展再次的结缘删改。总所周知的,应用设置页就是一堆列表项,所以在安插此前自己先去询问了弹指间列表项的格局都有怎么着,各自都是怎么用的,做完事后现在才想起来可以整理一下那有些内容。其中一些已经收拾发布出来复选框和开关的挑三拣四,剩下的就将在本文展现出来。须求证实的是,本文呈现的是列表项,而不仅仅是安装页的列表项。

一、可点击单项列表

图片 1

1)动作列表

列表样式【1】

动作列表顾名思义就是表现动作的列表,它一般是由简单的动词短语组成,不需求格外的要素(比如提示符),就能代表它的可点击性。其语境中自己就所有分明的点击指导,比如“检测版本更新”、“清除缓存”和“回复默许设置”等代表动作的文案,如下图所示

列表样式一般长得如上图,其中Primary
Actionbar首要涵盖三类音讯:图标、标题和讲述。其中图标和讲述都是可选的,标题是顺其自然要求的。至于Secondary
Action才是分别分化款式的列表项最器重的一些。Secondary
Action可以为空,为空的时候即便以下的第一种情状。

2)向右提醒符列表

直接点击列表项

当Secondary
Action为空的时候,此时的列表项代表“点击触发”的情事,此时Primary
Action要利用“表示动作的文案”,而不可能运用“表示表达的文案”。举个栗子:“马上更新病毒库”就是一种“表示动作的文案”,而“更新设置”就是一种“表示表明的文案”。

图片 2

手机管家 6.1.0 Build 3277

向右提示符列表,即是具有向右箭头符号的列表,那种列表具有分明的可点击性,也是iOS中最普遍的一种列表格局,它意味着,点击列表后,会在新视图(二级页面或暂时视图)中体现关于当前列表的更加多信息,iOS官方相比推崇的办法是,点击后,进入一个二级新开页。但在MD中这一般表示打开一个新页面或新面板,即点击后出现的恐怕不是新页面,而是弹层选项。如下图1-1和1-2图示,即在二种平台上,以下的三种表现形式都是允许的,只是ios官方更偏向于第一种。正常处境下,尽量幸免将向右提示符和其它协理操作控件一起放在列表右边。

跻身二级页面列表项

当Secondary
Action不为空的时候,此时就会有差别的状态。第一种最广泛的是象征“进入二级页面”的图标,一般是一个“向右的角”,那个角代表着点击会有持续的页面。须求评释的是,安卓原生没有这种设计规范,不过iOS一般都会适合那种专业,我只是认为那种专业有利于与第一种状态做区分,听从那种专业会更好。

图片 3

MIUI 7

3)向下展开列表

复合列表项

率先种列表项和第三种列表项有时候会展开重组,比如在“通话记录列表”页面,用户会有一种须求是点击进入详情页,查看通话记录,另一种必要是点击拨打电话。那三种组成起来的时候就会形成符合列表项。复合列表项的Secondary
Action是一个按钮,按钮代表一种操作,点击按钮即开展按钮代表的操作,点击任何部分即举办其余一些。

图片 4

手机管家 6.1.0 Build 3277

负有向下符号的列表,在形式上和持有向右箭头的列表很相似,但它抱有自己分外的采纳情境,平日情形下表示垂直展开或折叠列表。比如上面的前两张图,能够是展开相关联的归类,也足以是拓展和列表内容先关的上下文工具,有点不常用功效隐藏的意思;当上下文工具太多时,能够尝试调用一个新弹层的点子,比如最后一张图。就算向下提醒符在ios官方并从未有关专业(安卓有),但市场决定发展成为一种新的非标准方式。

图片 5

MIUI 7

4)下拉列表、单选和当选

图片 6

再一次排系列表【3】

“下拉列表、单选和当选”那三种样式均是表示在多少个挑选中选中间一个。如下图所示,下拉列表的利益是,当选项较少的情事下,不必要页面跳转,裁减层级呈现。单选和当选,虽均是意味被选中状态,但单选选项和其它接纳属于互斥关系,选中却不必然(ios系统闹铃时间设置),也得以而且选用四个;别的一个当选和单选最显眼的例外就是,选中为所点即所得,选用之后自动保存,而单选经常须要特其余“保存”按钮,点击后保存数据。

可下拉列表项

可下拉列表代表的是一种采用操作,选项的数据超出二,通过下拉列表可以查看愈来愈多选项,从中进行分选。

图片 7

可下拉列表

相相比于点击进入二级页面选用的设定,可下拉列表项可以使得削减操作步骤。

二、复合列表

可编制文字列表项

在可编制文字的列表项中,Secondary
Action突显的是文字,点击会弹出文字编辑弹窗或者进入新页面编辑。

图片 8

手机管家 6.1.0 Build 3277

复合列表的中坚方式如下图所示,表示一个列表中并且涵盖首要操作和次要操作,次要操作寻常位于列表的左侧,用按钮或控件表示,和第一操作分开并独立可点。这里的重大操作和援救操作与列表本身效劳的重点和利用频次生死相依。

可进展列表项

当页面内容很多的时候,列表项也得以考虑做成可折叠/展开的花样,默许浮现大类新闻,点击可以展开越来越多详情。

图片 9

可举行列表【3】

先说一下,非设置项列表,即健康的施用列表中,同时持有首要性动作和协理动作的列表很常见,如下图所示,他们一般是由一个首要操作和列表左边的按钮组成,重要操作就是点击列表,进入相关列表内容的详情页,次要操作是右手的操作按钮,比如收藏/裁撤收藏、关切/撤销关怀等,比如最后一张图,就是很广阔的事例,其首要操作是点击列表,然后进入应用详情,次要操作是高效下载使用。

开关列表项

开关列表项表示一种“状态切换”,当只有单个列表项、多个不等的列表项或者联动列表项时,选择开关列表越发适合。详情请见:复选框和开关的取舍

图片 10

简书 1.9.7

除此以外一种样式的复合列表,是类设置项列表,该列表中常含有控件,下边是综合了有些常用的控件元素,他们一些在列表中既可以做紧要操作,也得以做帮衬操作,比如复选框,如下图所示

复选列表项

当有多少个一般的意味“状态切换”的列表项时,可以考虑增添二级题目,然后拔取复选列表项。

图片 11

知乎  2.4.4

举一些在列表中采纳控件的例子,如下图音乐列表中,图1的开关就是家喻户晓的附带操作,点击数字编辑时间是重中之重操作;图2中多选歌曲文件夹为重中之重操作,展开文件夹中的音乐列表为辅助操作;图3中常用的功能是浏览查看,然后才会是下载或删除,那里寻常需求一个入口来呼出列表的连锁上下文工具,对于上下文的呼出,大家平时应用隐藏的手势操作,比如长按或左右滑动等,或者一个显性的按钮,比如“箭头”“越多”等标志来达到目标,那里就不扩张说了。包含图5列表中的主操作为直接打电话,次要操作就是跻身具体的详情列表。此处设计师必要分明紧要操作和次要操作的可点击区域。

单选列表项

复选列表是说多少个列表项可以而且入选,单选列表项只好在多个列表项中精选一个。须求小心的是,复选框是一个正方形,单选框是一个圆形。

图片 12

美团 v6.3.1

此间须求注意的是,不要把显示图标和操作图标放在一块儿,比如图像和复选框。平常景况下,次要操作应该放在标题的右边,且要和关键操作分开单独可点击,因为愈多的用户愿意每个图标都能接触一个动作。

可滑动列表项

也有部分列表,滑动列表之后会进展一些操作项。可是那种设定在安卓相比较少见,一是因为安卓的上Tab导航也是滑动操作,于这种可滑动列表项有争论。二是可知性确实很差。

图片 13

可滑动列表项【3】

三、表明性列表

【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

自身将设置项中不得点击的列表,暂称为表达性列表。表达性列表日常只做客观的音讯彰显,不须要有其他操作。个人认为一旦在一如既往的设置种类中,区分设置列表的可点击性,最明确的分别就是是不是享有“箭头提醒符”。即使在有的Android应用中的设置项,常能来看没有提示符就能点击的列表,但此间并不吝惜。即便能在样式或者前后文语义上就能让用户显然的感知到是不是可点,才是最好。如下图,图1尽人皆知是直接表示表达的列表;图2即使在款式上和表明性列表很像,不过由于标题中显得的是“选拔互联网”,通过上下语义也能领略该列表可点。

相关文章