01
先排重要程度
先确定用户最需要看见的信息，再用大小、字重、颜色与位置表达优先级。所有内容都突出，就等于没有重点。
查看正反案例
正向案例
订单页突出异常状态和下一步行动，把流水编号作为辅助信息。
反向案例
流水编号占据最大标题，处理异常的按钮却与备注文字混在一起。
动手练习
列出页面最重要的三项信息，检查视觉顺序是否一致。
Refactoring UI
Practical interface design
改善层级、排版与间距。
已学 0 / 6 个主题
6 个主题学习内容
02
用间距表达结构
间距应解释哪些元素属于同一组。先处理组内与组间的关系，再决定是否需要边框、底色或其他装饰。
查看正反案例
正向案例
标签与输入框距离较近，两个表单分组之间留出更明显的间隔。
反向案例
所有元素使用相同间距，字段、说明和新分组难以区分。
动手练习
仅修改间距重排一个表单，不增删任何文字。
03
建立可复用的文字层级
使用少量稳定的文字角色，例如标题、正文、标签与辅助信息。不同角色应有清楚差异，相同角色应保持一致。
查看正反案例
正向案例
列表中所有标题、状态和说明使用统一的字号与字重。
反向案例
每张卡片随意调整字体大小，长标题与短标题呈现不同权重。
动手练习
把一个页面的文字归为四类，统一每类的样式。
04
用颜色传达意义
色彩可以表达状态与行动层级，但不应单独承担信息传达。为成功、警告和错误补充文字或其他可识别线索。
查看正反案例
正向案例
错误字段同时显示文字说明和位置提示，修正后清楚更新状态。
反向案例
仅把输入框边缘变红，没有告诉用户哪里错、如何修正。
动手练习
关闭颜色或使用灰度查看页面，检查状态是否仍能理解。
05
减少无效的视觉重量
边框、阴影与背景都能分组，但同时叠加过多会产生噪音。先尝试简化，保留真正有助理解的视觉层次。
查看正反案例
正向案例
用组间留白区分信息，只对可交互卡片保留轻微边框。
反向案例
每个小字段都有阴影与粗边框，整页元素都像最重要的操作。
动手练习
逐项去掉装饰，记录哪一项移除后才会损害理解。
06
认真处理内容边界
真实内容包含长标题、空列表、错误和不同数量的数据。用这些边界状态检查布局，比只看理想样例更可靠。
查看正反案例
正向案例
长名称可换行，空结果解释原因并提供清除筛选的入口。
反向案例
只用短名称设计卡片，上线后长名称遮住了操作按钮。
动手练习
用最长名称、零条结果和大量结果各检查一次页面。
把阅读变成一次实践
从一个小任务开始
截取一个信息密集的后台页面，保留全部内容，只调整文字层级和间距。请别人说出首先看到的三项信息，检查是否符合任务优先级。
关联文章接着读什么
UX 中的五个视觉设计原则
理清比例、层级与对比。
电商表单设计的六项实践
改善字段、标签与表单布局。