茄总 开发文档

文档 / UI 设计原则

打开 Markdown

UI 设计原则

用户 2026-10-14 提供的设计指南原文,是应用设计质量的唯一原则来源。阶段 01 将其写入开发文档站与 Agent 的 get_docs,不得改写原则本身;示例与反例可以追加。

总纲

界面是对真实事物的表达。 界面上的每一个差异,都应对应一个真实的差异; 每一个对用户重要的真实差异,都应在界面上体现出来。

以下四条原则,是总纲在四个维度上的展开。 它们适用于每一个尺度:整个应用、一个页面、一个区域、一个组件。 遇到任何具体问题,都用它们来推导,而不是套用固定做法。


一、形式对应结构(空间)

元素之间的视觉关系,必须如实反映它们的逻辑关系。

越相关的越靠近;同类的看起来相同;同一层级的共享对齐;越重要的越突出。 差异要么为零,要么明显可感知:本该相同的就完全相同,本该不同的就一眼可辨。

二、显著度对应重要性(注意力)

用户的注意力有限,界面对注意力的分配必须与事物的重要性一致。

每个范围只服务一个目的,只有一个焦点;承担了多个目的,就拆开。 越重要、越高频的离用户越近、越显著;越次要、越低频的越远、越隐蔽。 越复杂的任务占据越独立、越完整的空间;越轻的任务越就地完成。

三、呈现对应状态(时间)

界面必须始终如实反映系统的状态和用户所处的位置。

任何时刻,用户都能回答:我在哪?我能做什么?刚才发生了什么?怎么回去? 界面的变化必须连续,不能让用户失去当前的位置和上下文。 不可挽回的后果,在发生前让用户知道,或在发生后允许撤回。

四、表达对应用户的认知(经验)

界面必须用用户已经掌握的方式来表达。

遵循平台和领域里已经形成的约定:用户在别处见过的东西,在这里也应该长那样、在那个位置、那样工作。 用用户的语言,而不是系统内部的语言。 除非有明确收益,否则不发明新的交互方式。


自查

在每个尺度上问四个问题:

  1. 看起来的关系,和实际的关系一致吗?
  2. 注意力的分配,和重要性一致吗?
  3. 用户此刻是否清楚自己在哪、能做什么、发生了什么、怎么回去?
  4. 一个用过同类产品的人,能不能不经学习就看懂、会用?