03表格 《移动应用UI设计模式（第2版）》交互设计读书笔记

个人理解

作者的"表格", 可以理解为列表式的布局. 在社交/电商等等几乎所有应用都非常常见。最常见莫过"无表头表格", 微信聊天列表便属于此：细浅不出血分隔线分割, 没有表头标注头像/昵称/时间/信息因为不需要, 没有垂直分割线因为要降低视觉噪音, 头像可以视为视觉指示器.

作者强调的“精准对齐”， 要用好重复、对齐的设计原则。

☝基本表格（ Basic Table）

可用细浅分隔线或斑马纹 

趋势: 省略垂直线

☝无表头表格（Headerless Table）

非常适合: 项目集合/搜索结果 

较宽的行显示多个变量 没有标签 

行标识符: 图标/更深的字体 

注意: 去除视觉噪音 ; 精准对齐 ; 不重要的细节小字体浅色字体.

不要猜测最重要的信息是什么,要征询客户的意见,然后通过测试确定该项设计

☝固定列表格（Fixed Column）

表头列固定,用户左右滑动屏幕浏览.可通过阴影标识首行

☝ 概览加数据型表格（Overview plus Data）

特点:表格内容的摘要显示在第一行数据的上方。

摘要一般即交互式图表。如果图表过大，应该采用逐级深入模式。

☝ 行分组表格（Grouped Rows）

注意：视觉上区分开行分组行。一般较窄，字体较浅。eg：滴答清单的“打卡”

☝ 带视觉指示的表格（Tables with Visual Indicators）

避免使用不必要的图标，使用可被快速识别的视觉指示。

☝可编辑表格（Editabled Tables）

eg: office. wps. numbers

明确选中的单元格/行，区分状态

针对不同的单元格配备不同的控件：输入框、数字输入、选择器、下拉菜单、颜色选择、日期选择

不用在每项编辑后提供确认反馈。