Interface Lab
返回知识库
Visual Foundations

扫描路径设计

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

设计原则

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

原则

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

设计动作

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

正反例

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

适用场景

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

来源提示

来源提示:综合 Apple HIG、Material Design、NN/g 可用性原则和成熟设计系统中的布局/层级实践整理。 Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/

Agent 指令

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