列表
原文链接
列表时连续的竖直的图文排列。
| 平台 | 状态 |
|---|---|
| iOS | 完成 |
| Android | 计划中 |
| Flutter | 完成 |
| Web | 完成 |
使用
列表是一个连续的图文混排组合。由基本的信息和辅助动作组成。
设计原则12
逻辑列表应该按照固定的时间，用户偏好等
逻辑进行排列，以便于用户能够直观的浏览。
骨架
列表应该是最易于浏览全貌的展现形式。包含列表整体和组成整体的细分条目。
- 列表
- 行
- 单行组成内容
内容类型
具体的内容的展现，依据场景需求，有不同的表现形式。
列表的条目有3种类型：
- 可视化支持
- 纯文本
- 元信息
编辑类型列表应该包含3部分内容：
- 可视化支持
- 基本文字
- 列表编辑
一个列表应该是容易浏览的，单个的信息应该固定且对齐排列。单个条目的位置对齐，能够使整体更易浏览。
- 列表样例
- 行中的内容
- 一致性的图元素
- 对齐的文字利于浏览
图标、分割线和间距
列表是由分割线、图形化、间隔组织起来的。
建议
靠近边缘的小样图标可以明显的提高整体的表现。
注意
把图像放在中间位置将会混淆主要信息和辅助信息，为整体的理解带来不便。
建议
当条目的内容较多的时候，要放置分割线。比如这里的文字内容有3行，分割线是单位文字的范围。
注意
慎重用留白表示条目之间的界限。
主要的动作应该占据大部分空间。
容易区分的信息放在左边，区分程度较小的部分放在右边。
列表标题
- 子标题。列表标题应该是和头像或者图标左对齐的。
- 嵌入式的子标题。如果一个浮动的按钮已经和头像或图标对齐了，这时候标题要和文字内容对齐。
行为
动画
点击一个条目应该展开到全屏幕。
手势
左滑启动删除动作。
拖动对列表进行重排。
扩展
手机由3行内容转变为平板的2行展示展示。
转变
大屏设备中，普通的列表可以用图像列表来表示。
类型
单行列表
纯文字展示
双行列表
在一个双行列表里面，每个条目包含两行文字内容。
包含图标和元信息。
文字、缩略图和元信息。
三行列表
缩略图和元信息。
文字数量不同可以区分不同的条目。
列表控制
列表控制可以表现不同的信息和动作。
多选框
多选框可以是主要或者次级动作。
展开和折叠
通过折叠展开来显示隐藏竖直的列表。
点击展开箭头。
展开后。
切换
颜色
Basil的列表包括4种元素：背景颜色、图标、题目文字和主要文字。
| 元素 | 范围 | 值 |
|---|---|---|
| 主体 | surface | #FFFBE6 |
| 条目文字、图标 | primary | #356859 |
| 大量文字 | on surface | #29302E |
排版
条目和主要文字的排版
| 元素 | 范围 | 属性 | 值 |
|---|---|---|---|
| 条目文字 | 副标题 | 字体、字型、大小、类型 | Lekton、粗体、16、题目 |
| 主要文字 | 标题 | 字体、字型、大小、类型 | Letkon、标准、12、句型 |
Crane
排版
| 元素 | 范围 | 属性 | 值 |
|---|---|---|---|
| 副标题 | 副标题 | 字体、字型、大小、类型 | Raleway、中号、16、题目 |
| 标题 | 标题 | 字体、字型、大小、类型 | Raleway、semibold、12、题目 |
卡片
单行
双行
三行
折叠&展开
