做法
三个取舍
- 01先让信息好找
- 02同一含义用同一规则
- 03删去不服务任务的形式
先让信息好找
先确定读者要找什么、比较什么、判断什么或完成什么操作,再安排重点、层级和阅读顺序。页面任务没有理清,再精细的样式也只会把结构问题遮住。
每项视觉选择都要说得出作用:字号区分层级,留白把相关信息放在一起,颜色表示含义和状态,对齐方便比较。说不出作用的元素,应当重新考虑。
同一含义用同一规则
相同的信息层级、组件和状态应采用相同表达,读者不必每到一页都重新学习。只有任务真的不同,才需要新的表达。
Word、PPT、数据表格、网页和软件界面可以有不同外观,因为读法并不相同;但标题层级、颜色含义、数字口径、状态和图表规则应当一致。
装饰不能抢过内容
页面显得平、重点不清时,先看是否有重复标题、解释性口号、多余装饰或相互争抢的层级。删去这些内容,主要任务和关键信息才有空间。
删减时要保留必要的上下文、操作反馈和无障碍说明。简洁不能省去条件,也不能让读者猜测当前状态。
在信息量和留白之间取舍
信息太少,读者会失去上下文;装饰太多,重点又会被淹没。页面应当让人看清重点、关系和状态,也不能让无关形式打断阅读。
删减后如果看不出层级、分不清状态或操作没有反馈,就要把必要信息加回来。克制不是把所有页面都做成同一种空白版式。
用设计变量保留共同规则
颜色、字体、字号、间距、圆角和边框可以用设计变量(Design Tokens)记录。变量名称应说明用途,例如“正文颜色”“危险状态”“章节间距”,不能只保存一个数值。
换到另一种载体时,先保留共同含义,再按介质调整尺寸和排版。这样既能追查设计选择,也能减少设计稿、文档和代码各说各话。
先把人工规则说清,再谈自动检查
目前已经能说清设计规则和人工检查方法。可供程序读取的设计变量、组件状态约束、文档样式映射和自动检查规则仍在整理,尚未完成的部分不会写成现成能力。
每条自动检查规则都应对应一个反复出现的问题,也要保留检查结果和人工复核入口。程序可以先找出偏差,具体场景仍由人判断。
不同载体有不同读法
Word 常用于查阅长文,需要稳定的标题、页码、图表题注和重复表头;PPT 每页应围绕一个主要判断;数据表格要写清字段、单位、缺失值和比较方向。
网页要让导航和链接名称一目了然,也要适应不同屏幕;软件界面还要处理输入、确认、加载、空状态、错误和恢复。移动端先保留主要任务和关键信息。
先快速检查,再完整检查
快速检查先看重点、层级、阅读顺序、对比度和明显缺失的状态;完整检查再看组件是否一致、不同屏幕是否适配、键盘能否操作、表单有没有标签、图片有没有说明,以及不同载体的表达是否一致。
确有理由偏离设计规则,就记下原因、影响范围和以后恢复规则的条件。具体任务可以例外,但例外没有记录,共同规则会慢慢失效。
说明
适用边界
- 视觉规则要放回具体任务、内容和读者中检验,不能只凭设计者喜好。
- 尺寸和阈值会随载体、设备和内容变化,不能把一组数值套到所有场景。
- 自动检查规则仍在整理。公开页面只写已经采用的原则和检查方法。
- 无障碍不是附加装饰,而是功能质量的一部分,要和视觉检查一起完成。