让最重要的内容
拥有足够的空间。
共享对齐线，保留清楚的阅读顺序。
留白连接内容，也区分内容。
视觉层级
主要信息
先看见重点。
位置与尺度，让主次自然出现。
01
先有关系，再有布局。
相同内容，不同空间组织。
让最重要的内容
空间节奏
816243248组内紧凑，组间舒展。
02
让文字自己形成层级。
Inter + 系统中文字体
Display展示标题
清楚，也有分量。
Heading章节标题
用对比，而不是装饰。
Body正文
适当的行长与行距，让内容自然展开。
Good design gives every detail a place.
Good design gives every detail a place.
Caption辅助说明
辅助信息保持可读，轻一些，但不消失。
03
少量颜色，明确分工。
点击色卡，复制当前色值。
先用布局和排版建立重点，再用蓝色提示选择、焦点与操作。
04
每一种状态，都有回应。
试着点击、输入，或用键盘操作。
操作层级
主要、次要与不可用，不只是一种颜色的深浅。
选中状态
已开启信息在需要时出现，展开与收起保持连贯。主内容的位置和阅读顺序保持清楚。
05
变化轻一点，反馈清楚一点。
按压反馈
160 ms自然衔接
spring380 ms