卡片Card
Tile
WebCard
iOS—
AndroidCard
把一组相关信息包成一块，常常整块都能点。
一般怎么表现
- 里面通常有标题、一两行说明、一点元信息。
- 整块可点时，悬停和选中都要有变化。
- 多张卡片并排时，大小和结构保持一致，方便扫读。
- 卡片靠细边框或留白分出来，不靠重阴影。
怎么用好
- 一张卡片只讲一件事。
- 整块可点就别再塞第二个主按钮。
常见误用
- 卡片里再嵌套卡片。层层框起来，重点反而丢了。
第 5 章 · 内容Content
承载信息本身的容器。
列表List
列表项 List item单元格 Cell（iOS 开发者叫法）行 Row
WebList
iOSCell (developer term) · List
AndroidList
一行一个对象的竖排清单。
一般怎么表现
- 左边放图标或头像，中间是标题和副标题。
- 右边放次要信息，或者一个“›”表示可以点进去。
- 行与行之间用细线隔开。
- 整行可点，当前行高亮。
怎么用好
- 每行信息结构一致，眼睛才能快速往下扫。
- 标题放最重要的那个字段，副标题放补充。
常见误用
- 每行塞五六个字段。字段多的时候请换成表格。
表格Table / Data grid
数据表 Data tableData grid（可直接编辑）
WebTable
iOS—
Android—
行和列对齐的数据，适合比较和查找。
一般怎么表现
- 文字左对齐，数字右对齐，这样小数点和位数才对得上。
- 表头可以点击排序，并用箭头标出当前排序。
- 行可以勾选，选中的行有底色。
- 手机上要么横向滚动，要么每行改成卡片。
怎么用好
- 数字列用等宽数字（tabular-nums）。
- 表头用名词，单位写在表头里，而不是每个格子里。
常见误用
- 居中对齐数字，或者把宽度平分给所有列。
折叠面板Accordion
手风琴CollapseDisclosure（Apple 叫法）Expander
WebAccordion · Collapse
iOSDisclosure group
Android—
点标题展开或收起一段内容。
一般怎么表现
- 标题行带一个箭头，展开时箭头转向。
- 可以允许多项同时展开，也可以限制成同一时间只开一项（手风琴式）。
- 整行标题都能点。
- 适合常见问题和高级设置。
怎么用好
- 标题要能独立说明内容，不展开也知道里面是什么。
- 重要内容不要藏在里面。
常见误用
- 把整页正文都折叠起来，用户得一个个点开才能读完。