用途:该技能用于建立清晰的视觉层级,确保用户先看到最重要内容,并能高效扫读界面。
主要能力:围绕大小、字重、颜色与对比、间距、位置、密度六类工具组织层级。大小上,较大元素先吸引注意,建议至少使用1.5倍差异以形成清晰区分;字重上,粗体、较粗描边和填充图标比轻量变体承载更多视觉重量;颜色与对比上,高对比吸引注意,可在CTA、状态和强调中策略性使用颜色;间距上,元素周围留白越多,感知重要性越高;位置上,左对齐语言的左上区域最先被看到,首屏内容重要,并可考虑F型与Z型扫读模式;密度上,孤立元素更突出,分组元素会被作为一个整体扫读。
层级划分:主级为页面标题、主CTA,最先被看到;次级为区块标题、关键内容;三级为辅助文本、元数据,按需阅读;四级为细字、时间戳,存在但不突出。
常见模式:首屏区采用大字号加图片加单一CTA;卡片布局按图片、标题、描述、操作排序;表单按标签、输入框、帮助文本、错误提示排序;导航按当前状态、可用、禁用排序。
最佳实践:眯眼测试,模糊视线后层级仍应清晰;每个视图只有一个主操作;不要争夺注意力,应选定最重要的内容;用层级讲述页面故事;让真实用户执行真实任务进行测试。
使用方式:资料未提供具体安装命令、调用方式或配置步骤,暂未提供。
适用场景:界面设计、页面布局、卡片、表单、导航与CTA设计中的视觉优先级安排。
限制:资料未说明收费、价格、平台支持范围、效果保证或具体实施步骤,暂未提供。