列表 List

概述

列表将数据呈现为可以分为平铺和分组形式。使用列表以清单的形式干净，高效地显示大量或少量信息。一般来说，列表是基于文本内容的理想选择，也可以在列表中加入图标、按钮、箭头等其他元素扩展场景。

类型

文本列表

image.png

图文列表

image.png

选择列表

image.png

详情列表

image.png

用法

列表结构图

image.png

标题内容区：根据业务需要可以选择文本、图标多种样式；操作内容区：可以分为箭头、开关、备注、按钮、文本框等多种样式；

image.png

标题规则：不允许折行，最多显示一行，超过一行自动隐藏；

image.png

左侧描述信息规则：描述最多两行，两行时采用多描述和大图文格式；

image.png

右侧描述信息规则：超过一行时自动折行，最多两行；

类型细节规范

新内容标记

image.png

场景描述：适用于列表内下一页有新内容需要标记提示的场景规范描述：1.新消息提示跟详细信息的，统一在列表右侧2.有未读数目统一在列表左侧主题信息后

详情列表

image.png

场景描述：适用于呈现列表形式为主的表单详情场景规范描述：1.右侧描述文字为右对齐2.文字可折行

列表按钮

image.png

按钮：适用于停留在当前列表就能完成任务的场景，或者需要强烈推荐用户操作的场景，按钮只允许1个操作：适用于需要进入下个页面的操作，最多可以2个

选择列表

image.png

场景描述：当场景进入编辑状态后，现有列表左侧会出现复选框规范描述：列表内容右移，复选框出现，列表右侧的操作内容隐藏

安卓化

android中列表的使用和ios很相似，唯一有一点小区别需要关注下

1.Android中列表右侧是不需要显示箭头的，无论是否有下一级页面

image.png

2.Android中列表的交互形式除了单击还有长按，而ios则是单击或者左滑Android中长按列表等内容会出现列表菜单，用户可以点击列表菜单项触发任务

image.png