01 功能说明
一份视觉构图参考,通过多种相互强化的线索在不同内容层级之间分配注意力。
Visual Hierarchy 关注界面吸引注意力的先后顺序。它结合大小、字重、对比、留白、位置和密度,而不是只依赖一个超大标题或一个醒目的按钮。来源将信息分为主要、次要、第三级和背景信息。
它是用于新设计的构图指南,不能替代对现有界面的测试。常见的浏览模式和建议的大小差异只是经验法则。实际层次应结合任务和受众进行检查,包括阅读方向与来源中从左到右示例不同的布局。
预期交付物
选择主要操作或信息,并确定接下来应被浏览或按需阅读的内容。
协调运用大小、间距、对比和分组的变化,而不是让每个元素都显得突出。
通过眯眼测试和真实任务观察,查看注意力是否沿预期顺序移动。
02 适用场景
需要真实内容并在渲染后审阅;不附带视觉评分工具。
03 关键决策
通过隔离可以强化某个元素,而无需增加另一种颜色或更粗的字体。
相关项目可被视为一个整体,而被孤立的项目则作为例外吸引注意。
04 示例任务
下面的示例简报尚未经过测试。使用前请先查看该技能的设置。
请使用仓库中记录的安装方式,并保留所引用的配套文件。此条目描述的是一种聚焦的设计方法,而不是可执行的应用程序。
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/visual-hierarchy/SKILL.md需要真实内容并在渲染后审阅;不附带视觉评分工具。
运行该技能前,请根据实际情况调整本简报中的范围、来源材料和约束。
使用 visual-hierarchy 为一个审阅界面构图,界面包含文档标题、未解决的反馈、版本元数据和一个批准操作。定义四个优先级层次,并说明所用的大小、间距和对比线索。仅保留一个主要操作,并考虑移动端的阅读顺序。对照以下可观察的标准检查实际输出。
OpenDesign 为编码智能体提供本地设计工作区。此列表并不表示该技能已内置,也不表示其外部工具、凭据和软件依赖已包含在内。
05 来源与许可证
本页描述的是下方链接的固定来源版本。上游的行为和要求可能会发生变化。
9a6930cf84a8一份视觉构图参考,通过多种相互强化的线索在不同内容层级之间分配注意力。
由 OpenDesign 根据所链接的来源撰写的原创摘要。仓库星标数是带有日期的热度信号,并非技能使用量或质量评分。
06 开始前的问题
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/visual-hierarchy/SKILL.md