用途:评估并改进界面的视觉层级,使界面能立即传达优先级,而不是让用户自行解读。当问题主要是优先级与强调时使用;若主要问题是间距随意、分组薄弱或布局节奏单调,则应改用 arrange。
主要能力:通过灰度测试判断去掉颜色后界面是否仍成立,能否在约 2 秒内识别主要、次要、三级元素;检查竞争关系(多张卡片、标题或按钮是否同样响亮,区块标题是否抢走内容焦点,辅助细节是否过强,重图标、粗标签或深色元数据是否压过其支撑的内容);检查一致性与可预测性(操作颜色与按钮处理是否含义稳定,成功、错误、帮助信息是否结构平行,图标风格、字体角色与常见布局区域是否一致);检查操作优先级(是否有一个明显主操作,次要操作是否清晰但更安静,三级操作是否可发现且不竞争);检查标签与数值(是否一律使用僵硬的标签:数值模式,标签是否应合并或弱化);检查视觉和谐、间距邻近与对齐,以及是否符合内容密度所需的扫描模式。
使用方式:先阅读 frontend-design 并遵循其 Context Gathering Protocol,复用已有上下文,只询问有实质影响的缺口;无法从代码库推断时直接向用户确认。随后参考层级清单、文本层级与可读性、设计系统对齐、空间设计与间距系统等共享参考,围绕以下杠杆制定计划:什么应为主、什么应更安静、哪些标签可移除或合并、哪些操作需要差异化处理、哪些不一致在教错模式、哪种平衡模式更清晰、哪些间距与对齐能强化分组、布局应支持何种扫描路径。
改进要点:建立单一清晰主焦点,次要与三级内容明显更安静,优先用空间、字重、对比与位置而非装饰;通过弱化来强调,先降低竞争元素的对比、柔化次要图标或文字颜色、安静侧栏与元数据;修复操作层级,使用一种主按钮样式、次要样式与链接式三级样式,破坏性强调仅保留给确认时刻;重构标签与数值,明显时移除标签、可合并时合并,默认将标签视为辅助内容,技术场景可略强;让区块标题像标签而非标题,分离语义重要性与视觉大小;保持可预测性,操作颜色、按钮样式、消息模式、图标族与布局区域保持稳定;改善和谐而非只提高音量,按需使用对称、非对称或居中强调,平衡文字与图像;用空间澄清优先级,组内间距小于组间,主元素周围留更多空间;有意识地使用邻近与对齐,相关字段靠拢、无关组拉开、大块顶部对齐、主要区块对齐稳定容器边缘;支持预期扫描模式,信息密集屏用更密的从左到右、从上到下结构,轻量 CTA 屏用更清晰的方向性构图;平衡字重与对比,图标过响先柔化对比,分隔线过淡先略加重而非直接加深。
禁止事项:不要把每个区块标题都做成大标题,不要把每个操作都设为主样式,不要只用颜色表达层级,不要在数据更重要时让标签与数据同权重,不要随意改变用户已学会的操作含义、图标逻辑或布局模式,不要只靠增加装饰来修复弱层级。
验证:灰度下是否仍清晰;2 秒内能否识别主操作与关键内容;是否有一个操作明显居首;重构后数据是否更易扫描;更安静的元素是否确实退后。
限制:资料未提供具体平台、收费、价格或效果数据;本技能依赖 frontend-design 与共享参考,需结合真实界面与代码库使用。