龙猫 Studio.

「Material Design」の列表设计

Word count: 1.1kReading time: 3 min
2019/09/17 Share

列表

原文链接
列表时连续的竖直的图文排列。

平台 状态
iOS 完成
Android 计划中
Flutter 完成
Web 完成

使用

列表是一个连续的图文混排组合。由基本的信息和辅助动作组成。

设计原则12

逻辑列表应该按照固定的时间,用户偏好等
逻辑进行排列,以便于用户能够直观的浏览。

`行为`列表应该使特定的信息易于辨认,同时可以清晰的表现出来。

骨架

列表应该是最易于浏览全貌的展现形式。包含列表整体和组成整体的细分条目。

  1. 列表
  2. 单行组成内容

内容类型

具体的内容的展现,依据场景需求,有不同的表现形式。

列表的条目有3种类型:

  1. 可视化支持
  2. 纯文本
  3. 元信息

编辑类型列表应该包含3部分内容:

  1. 可视化支持
  2. 基本文字
  3. 列表编辑

一个列表应该是容易浏览的,单个的信息应该固定且对齐排列。单个条目的位置对齐,能够使整体更易浏览。

  1. 列表样例
  2. 行中的内容
  3. 一致性的图元素
  4. 对齐的文字利于浏览

图标、分割线和间距

列表是由分割线、图形化、间隔组织起来的。

建议
靠近边缘的小样图标可以明显的提高整体的表现。

注意
把图像放在中间位置将会混淆主要信息和辅助信息,为整体的理解带来不便。

建议
当条目的内容较多的时候,要放置分割线。比如这里的文字内容有3行,分割线是单位文字的范围。

注意
慎重用留白表示条目之间的界限。

主要的动作应该占据大部分空间。

容易区分的信息放在左边,区分程度较小的部分放在右边。

列表标题

  1. 子标题。列表标题应该是和头像或者图标左对齐的。
  2. 嵌入式的子标题。如果一个浮动的按钮已经和头像或图标对齐了,这时候标题要和文字内容对齐。

行为

动画

点击一个条目应该展开到全屏幕。

手势

左滑启动删除动作。

拖动对列表进行重排。

扩展

手机由3行内容转变为平板的2行展示展示。

转变

大屏设备中,普通的列表可以用图像列表来表示。

类型

单行列表

纯文字展示

带有文字和图标的单行列表。

双行列表

在一个双行列表里面,每个条目包含两行文字内容。

包含图标和元信息。

文字、缩略图和元信息。

三行列表

带有头像的三行文字。

缩略图和元信息。

文字数量不同可以区分不同的条目。

列表控制

列表控制可以表现不同的信息和动作。

多选框

多选框可以是主要或者次级动作。

展开和折叠

通过折叠展开来显示隐藏竖直的列表。

点击展开箭头。

展开后。

切换

点击切换选中状态。 ### 重排
在编辑模式中出现,拖动列表条目可以移动位置。同样重排功能也是列表的次级功能。 ## 主题 ### Basil 这个食谱应用是Material风格的应用。区域内的元素包括颜色和排版。 ![](https://sawtear-1300163775.cos.ap-beijing.myqcloud.com/2019/09/17/15685100182701.png)

Basil
颜色系统
UI颜色应用

颜色

Basil的列表包括4种元素:背景颜色、图标、题目文字和主要文字。

元素 范围
主体 surface #FFFBE6
条目文字、图标 primary #356859
大量文字 on surface #29302E

关于排版

排版

条目和主要文字的排版

元素 范围 属性
条目文字 副标题 字体、字型、大小、类型 Lekton、粗体、16、题目
主要文字 标题 字体、字型、大小、类型 Letkon、标准、12、句型

Crane


自定义的列表
crane
颜色系统
颜色应用

排版

元素 范围 属性
副标题 副标题 字体、字型、大小、类型 Raleway、中号、16、题目
标题 标题 字体、字型、大小、类型 Raleway、semibold、12、题目

卡片

单行

双行


三行

折叠&展开

菜单
卡片
图像列表

CATALOG
  1. 1. 使用
    1. 1.1. 设计原则12
  2. 2. 骨架
    1. 2.1. 内容类型
    2. 2.2. 图标、分割线和间距
    3. 2.3. 列表标题
  3. 3. 行为
    1. 3.1. 动画
    2. 3.2. 手势
    3. 3.3. 扩展
    4. 3.4. 转变
  4. 4. 类型
    1. 4.1. 单行列表
    2. 4.2. 双行列表
    3. 4.3. 三行列表
  5. 5. 列表控制
    1. 5.1. 多选框
    2. 5.2. 展开和折叠
    3. 5.3. 切换
      1. 5.3.1. 颜色
      2. 5.3.2. 排版
    4. 5.4. Crane
      1. 5.4.1. 排版
  6. 6. 卡片
    1. 6.1. 单行
    2. 6.2. 双行
    3. 6.3. 三行
    4. 6.4. 折叠&展开