页面重点先排阅读顺序的Skill

通过尺寸、颜色、间距和位置建立视觉层级,引导用户视线顺序。

visual-hierarchy 是规划界面阅读顺序的 Skill。它用尺寸、字重、对比、留白和位置区分主要内容、次要信息与补充说明。

先决定用户此刻最需要看懂什么、做什么,再分配视觉重量。所有按钮都亮、每段都加粗,反而没有明确重点;相关内容应能被看成一组。

原文的比例与扫描模式是设计参考,不是每页都适用的规则。布局方向、设备、内容和任务会改变阅读路径,错误提示也不能因属于辅助层级就被压得看不见。适合构思新页面;本文未设计或测试界面,模糊眯眼检查可以看大轮廓,仍需真实任务验证是否找得到操作与重要信息。

分类:设计创作

来源仓库:owl-listener/designer-skills

适合用来做什么

  • 通过调整大小和颜色建立视觉层次结构。
  • 分析现有界面的视觉层次结构并提供改进建议。

安装 visual-hierarchy

npx skills add https://www.iskills.cc/skills/owl-listener/designer-skills/visual-hierarchy/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 visual-hierarchy 的用途与原始说明

浏览全部 Skill 指南