UI DESIGN LAB
  • 首页
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录
返回知识库
Visual Foundations

扫描路径设计

页面应该支持用户按预期路径扫读,而不是让视线在多个焦点之间跳动。

scanlayoutnavigation

设计原则

视线通常沿标题、关键数据、分组和操作移动,布局应顺着这个路径组织。

原则 视线通常沿标题、关键数据、分组和操作移动,布局应顺着这个路径组织。

设计动作 为首屏建立明确入口、主体、下一步;把强焦点控制在一条主路径上,避免多处同时抢注意力。

正反例 正向示例:需要快速理解状态、风险、下一步。 反向示例:左右两侧都放置强焦点。

适用场景 需要快速理解状态、风险、下一步。 页面包含多个卡片和导航节点。

来源提示 来源提示:综合 Apple HIG、Material Design、NN/g 可用性原则和成熟设计系统中的布局/层级实践整理。

Agent 指令

为首屏建立明确入口、主体、下一步;把强焦点控制在一条主路径上,避免多处同时抢注意力。

适用场景

  • 需要快速理解状态、风险、下一步。
  • 页面包含多个卡片和导航节点。

避免做法

  • 左右两侧都放置强焦点。
  • CTA 远离其解释内容。

知识元数据

分类
Visual Foundations
质量分
82%
版本
v1
发布
2026/6/6