ui-principles

设计原则

此技能旨在为企业软件、SaaS 仪表板、管理界面和 Web 应用打造精准、精心设计的体验。设计理念追求 Jony Ive 级别的精准，同时融入恰到好处的个性——每个界面都精致打磨，并针对其特定场景量身设计。

设计方向（必需）

编写任何代码之前，先确定设计方向。 不要默认选择。仔细思考这款特定产品需要给人怎样的感受。

思考产品场景

• 这款产品是做什么的？ 财务工具需要与创意工具截然不同的氛围。
• 谁会使用它？ 重度用户需要信息密集。偶尔使用的用户需要引导。
• 它要满足什么情感需求？ 信任？效率？愉悦？专注？
• 怎样才能让它令人难忘？ 每款产品都有机会展现独特个性。

选择个性风格

企业级／SaaS UI 的风格范围比你想象的更广。不妨考虑以下方向：

精准与密集 — 紧凑间距、单色调、信息优先。适合长时间使用该工具的重度用户。可参考 Linear、Raycast 和终端美学。

温暖与亲和 — 宽松间距、柔和阴影、友好配色。适合希望营造人情味的产品。可参考 Notion、Coda 和协作工具。

精致与可信 — 冷色调、层次丰富、沉稳的金融气质。适合处理资金或敏感数据的产品。可参考 Stripe、Mercury 和企业级 B2B 产品。

大胆与清晰 — 高对比度、醒目的留白、自信的字体。适合希望给人现代、果断之感的产品。可参考 Vercel 和极简仪表板。

实用与功能 — 柔和的配色、实用的信息密度、清晰的层级。适合工作内容比装饰更重要的产品。可参考 GitHub 和开发者工具。

数据与分析 — 针对图表优化，兼具专业性与易用性，将数字视为一等公民。适用于分析、指标和商业智能产品。

选择一个方向，也可以融合两个方向。但务必确定一个符合产品特点的方向。

选择色彩基调

不要默认使用暖色中性色。 根据产品特点进行选择：

• 暖色基调（奶油色、暖灰色）——亲和、舒适、人性化
• 冷色基调（石板色、蓝灰色）——专业、可信、严肃
• 纯中性色（纯灰色、黑白）——极简、大胆、专业
• 带色调的基调（略带色彩倾向）——独特、难忘、具有品牌感

浅色还是深色？ 深色模式并非简单地将浅色模式反转。深色给人专业、专注、高端的感觉。浅色则显得开放、亲和、清爽。根据场景选择。

强调色 — 选择一种有意义的颜色。蓝色代表信任，绿色代表成长，橙色代表活力，紫色代表创意。不要每次都套用同一种强调色。

选择布局方式

由内容决定布局：

• 对于信息密集、需要扫描和比较内容的界面，使用密集网格
• 对于需要专注的任务，使用宽松间距
• 对于包含多个部分和众多目标位置的应用，使用侧边栏导航
• 对于部分较少的简易工具，使用顶部导航
• 对于注重上下文的列表详情模式，使用分栏面板

选择字体

字体决定整体基调。不要总是默认使用同一种：

• 系统字体 — 快速、原生、低调（适用于注重实用性的产品）
• 几何无衬线字体（Geist、Inter）— 现代、简洁、专业
• 人文主义无衬线字体（SF Pro、Satoshi）— 温暖、亲和
• 融入等宽字体风格 — 专业、面向开发者、数据密集

---

核心设计原则

无论采用何种设计方向，这些原则都适用。这是质量底线。

4px 网格

所有间距都以 4px 为基准：

• 4px - 微小间距（图标间距）
• 8px - 紧凑间距（组件内部）
• 12px - 标准间距（相关元素之间）
• 16px - 舒适间距（分区内边距）
• 24px - 宽松间距（分区之间）
• 32px - 大幅分隔

对称内边距

上、右、下、左（TLBR）的内边距必须一致。 如果顶部内边距为 16px，左侧、底部和右侧也必须为 16px。例外情况：内容本身能自然形成视觉平衡时。

/* Good */
padding: 16px;
padding: 12px 16px; /* Only when horizontal needs more room */

/* Bad */
padding: 24px 16px 12px 16px;

边框圆角保持一致

遵循 4px 网格。更尖锐的圆角显得更具科技感，更圆润的圆角显得更亲切。选择一套规则并坚持使用：

• 锐利：4px、6px、8px
• 柔和：8px、12px
• 极简：2px、4px、6px

不要混用不同规则。保持一致才能营造协调感。

深度与层级策略

让深度处理方式契合你的设计方向。 深度是一种工具，而非必需项。不同产品需要不同的处理方式：

仅使用边框（扁平）——简洁、技术感强、信息密集。适用于注重实用性、信息密度比视觉悬浮感更重要的工具。Linear、Raycast 和许多开发者工具几乎不使用阴影，只用细微边框划分区域。这并非偷懒，而是有意克制。

单层微妙阴影——轻柔地营造悬浮感，不增加复杂度。简单的 0 1px 3px rgba(0,0,0,0.08) 就足够了。适用于希望通过柔和层次感提升亲和力、又不想使用厚重多层阴影的产品。

多层阴影——丰富、高级、富有立体感。多层阴影能营造逼真的深度，适用于希望呈现厚重质感的产品。Stripe 和 Mercury 都采用了这种方式。最适合需要呈现实体物件质感的卡片。

表面颜色变化——通过背景色调建立层级，无需使用任何阴影。#fff 上的卡片置于 #f8fafc 背景中，本身就有悬浮感。阴影可以强化这种效果，但主要作用来自颜色。

选择一种方式并坚持使用。在某些卡片上使用扁平边框，在另一些卡片上使用厚重阴影，会造成视觉不一致。

/* Borders-only approach */
--border: rgba(0, 0, 0, 0.08);
--border-subtle: rgba(0, 0, 0, 0.05);
border: 0.5px solid var(--border);

/* Single shadow approach */
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

/* Layered shadow approach (when appropriate) */
--shadow-layered:
  0 0 0 0.5px rgba(0, 0, 0, 0.05),
  0 1px 2px rgba(0, 0, 0, 0.04),
  0 2px 4px rgba(0, 0, 0, 0.03),
  0 4px 8px rgba(0, 0, 0, 0.02);

设计功力体现在选择，而非复杂度。 间距和排版无可挑剔的扁平界面，比细节马虎、阴影繁复的界面更显精致。

卡片布局可以各异，表面处理应保持一致

单调重复的卡片布局是懒惰的设计。指标卡不必和计划卡一样，也不必和设置卡一样。卡片可以分别采用迷你折线图、头像堆叠、进度环或双列布局。

根据卡片的具体内容设计其内部结构，但保持表面处理一致：边框粗细、阴影深度、圆角、内边距比例和排版都应相同。协调感来自容器的视觉外观，而不是强行让每张卡片都套用同一种布局模板。

独立控件

UI 控件值得采用容器样式。日期选择器、筛选器、下拉菜单等，都应像经过精心设计、置于页面上的对象，而不是附加点击处理程序的普通文本。

不要使用原生表单元素来实现带样式的 UI。 原生 <select>、<input type="date"> 等元素会呈现无法自定义样式的操作系统原生下拉菜单和选择器。应改用自定义组件：

• 自定义选择器：触发按钮 + 定位后的下拉菜单
• 自定义日期选择器：输入框 + 日历弹出层
• 自定义复选框/单选按钮：带状态管理的样式化 div

自定义选择器触发器必须使用 display: inline-flex 和 white-space: nowrap，确保文本和箭头图标位于同一行。否则，弹性子项可能会换行。

排版层级

• 标题：字重 600，较紧的字母间距（-0.02em）
• 正文：字重 400-500，标准字距
• 标签：字重 500，大写文本使用略微增加的字距
• 字号：11px、12px、13px、14px（基准）、16px、18px、24px、32px

数据使用等宽字体

数字、ID、代码和时间戳应使用等宽字体。使用 tabular-nums 实现按列对齐。等宽字体能传达“这是数据”的感觉。

图标

使用 Phosphor Icons（@phosphor-icons/react）。图标用于说明，而非装饰——如果移除某个图标不会损失任何含义，就把它移除。

为独立图标添加微妙的背景容器，让它更醒目。

动画

• 微交互使用 150ms，较大型过渡使用 200-250ms
• 缓动：cubic-bezier(0.25, 1, 0.5, 1)
• 企业级 UI 中不使用弹簧或弹跳效果

对比层级

构建一个四级系统：前景（主要）→ 次要 → 弱化 → 极弱。始终一致地使用这四个层级。

颜色只用于表达含义

灰色构建结构。只有在传达状态、操作、错误或成功时才使用颜色。装饰性色彩只会造成干扰。

构建数据密集型界面时，请思考每一处颜色是否都有存在的价值。分数条不需要根据表现使用不同颜色——单一的弱化色就够了。等级徽章不需要使用红黄绿的交通灯配色——可以通过字体排版来体现层级。看看 GitHub 如何呈现表格和列表：几乎完全采用单色，仅在状态指示器和可操作元素上使用颜色。

---

导航上下文

屏幕需要明确的定位。悬浮在空中的数据表看起来像组件演示，而不是产品。可以考虑加入：

• 导航 — 侧边栏或顶部导航，显示你在应用中的位置
• 位置指示 — 面包屑、页面标题或当前选中的导航状态
• 用户上下文 — 谁已登录，以及当前工作区／组织

构建侧边栏时，可以考虑使用与主内容区域相同的背景。Supabase、Linear 和 Vercel 等工具依靠细微的边框来区分区域，而不是使用不同的背景颜色。这样可以减轻视觉重量，让整体感觉更加统一。

---

深色模式注意事项

深色界面有不同的需求：

用边框代替阴影 — 阴影在深色背景上不太明显。更多地依靠边框来界定区域。白色不透明度为 10-15% 的边框可能几乎看不出来，但它仍在发挥作用——不要急着让它更显眼。

调整语义颜色 — 状态颜色（成功、警告、错误）通常需要稍微降低饱和度或针对深色背景进行调整，以免显得刺眼。

结构相同，数值不同 — 层级系统（前景 → 次要 → 弱化 → 极弱）仍然适用，只是数值反转了。

---

反模式

切勿这样做

• 戏剧性的投影（box-shadow: 0 25px 50px...）
• 在小元素上使用较大的圆角（16px+）
• 没有明确理由的不对称内边距
• 在彩色背景上放置纯白卡片
• 用粗边框（2px+）作装饰
• 过大的间距（区块之间的外边距 > 48px）
• 弹簧式／弹跳动画
• 使用渐变作装饰
• 在同一个界面中使用多种强调色

始终反思

• “我是否考虑过这个产品的需求，还是只是在默认选择？”
• “这个设计方向是否符合使用场景和用户需求？”
• “这个元素是否经过精心打磨？”
• “我的纵深策略是否一致且有明确意图？”
• “所有元素是否都对齐网格？”

---

标准

每个界面都应该像是由一支会细致打磨每一个像素差异的团队设计出来的。不是删繁就简，而是 精心打造，并且针对具体场景设计。

不同的产品有不同的需求。开发者工具需要精准和高密度。协作产品需要温暖感和留白。金融产品需要可信赖感和精致感。让产品场景引导美学方向。

目标：兼具精致极简与恰当个性。质量标准不变，执行方式由场景决定。