nothing-design

Nothing-Inspired UI/UX 设计系统

资深产品设计师的工具箱，汲取瑞士字体设计、工业设计（Braun、Teenage Engineering）和现代界面工艺的经验。采用单色设计，以字体为驱动，信息密集但不杂乱。深色和浅色模式同等严谨。

开始任何设计工作之前，先说明所需的 Google Fonts 以及如何加载（参见 references/tokens.md 第 1 节）。切勿假设字体已经可用。

---

1. 设计理念

• 做减法，而非加法。 每个元素都必须证明它值得占用像素。默认先移除。
• 结构就是装饰。 展现网格、数据和层级本身。
• 单色是画布。 颜色是一种事件，而非默认选项——数据状态编码除外（参见第 3 节）。
• 排版承担主要工作。 通过字号、字重和间距建立层级——而不是颜色、图标或边框。
• 两种模式同等重要。 深色模式：OLED 黑。浅色模式：暖调灰白。两者都不是「衍生模式」——都要获得完整的设计投入。先询问用户要从哪种模式开始。
• 工业风格的温度感。 技术感十足、精准，但绝不冰冷。设计中应能感受到人的参与。

---

2. 工艺规则——如何布局

2.1 视觉层级：三层规则

每个屏幕的重点层级恰好有三层。不是两层，也不是五层，而是三层。

层级	内容	做法
主要	用户第一眼看到的唯一重点。一个数字、一条标题、一种状态。	使用展示尺寸的 Doto 或 Space Grotesk。--text-display。留出 48–96px 的呼吸空间。
次要	辅助说明。标签、描述、相关数据。	正文／副标题使用 Space Grotesk。--text-primary。与主要元素紧密分组（8–16px）。
第三级	元数据、导航、系统信息。清晰可见，但绝不喧宾夺主。	说明文字／标签使用 Space Mono。--text-secondary 或 --text-disabled。全部大写。放在边缘或底部。

检验方法： 眯起眼睛看屏幕。还能看出什么最重要吗？如果有两个元素相互争抢，其中一个就需要缩小、淡化或移动。

常见错误： 把所有内容都做成「次要」。元素大小和间距都一样，会导致视觉平淡。大胆一些——让主要元素大得突出，让第三级元素小得醒目。两者之间的对比本身就是层级。

2.2 字体规范

每个屏幕最多使用：

• 2 种字体（Space Grotesk + Space Mono。仅在主视觉场景使用 Doto。）
• 3 种字号（大、中、小各一种）
• 2 种字重（Regular + 另一种——通常是 Light 或 Medium，极少使用 Bold）

把它当作一项预算。每增加一种字号或字重，都会牺牲视觉一致性。添加新字号之前，先问自己：能否改用间距或颜色来体现这种区别？

决策	字号	字重	颜色
标题与正文	是	否	否
标签与数值	否	否	是
激活与未激活的导航项	否	否	是
主视觉数字与单位	是	否	否
分区标题与内容	是	可选	否

经验法则： 如果想换一个新字号，问题很可能出在间距上。拉开距离即可。

2.3 间距的意义

间距是表达关系的首要工具。

Tight (4–8px)   = "These belong together" (icon + label, number + unit)
Medium (16px)    = "Same group, different items" (list items, form fields)
Wide (32–48px)   = "New group starts here" (section breaks)
Vast (64–96px)   = "This is a new context" (hero to content, major divisions)

如果需要分隔线，间距很可能不合适。 分隔线通常意味着间距对比不足。只在内容密集且条目结构完全相同的列表中使用。

2.4 容器策略（优先使用顶部）

1. 仅用间距（通过邻近关系将项目分组）
2. 单条分隔线
3. 低调的边框
4. 背景变化的表面卡片

每往下一步，视觉权重都会增加。选择能达到效果的最轻量手段。绝不要给最重要的元素加框——让它自然地浮在背景上。

2.5 用颜色构建层级

在单色系统中，灰度就是层级。每个屏幕最多 4 个层级：

--text-display (100%) → Hero numbers. One per screen.
--text-primary (90%)  → Body text, primary content.
--text-secondary (60%) → Labels, captions, metadata.
--text-disabled (40%) → Disabled, timestamps, hints.

**红色（#D71921）不属于层级。**它是一种中断信号——“现在就看这里”。如果没有紧急事项，屏幕上就不该出现红色。

数据状态颜色（成功绿、警告琥珀色、强调红）在用于编码数据值时，不受“仅用一种强调色”规则的限制。将颜色用于值本身，而不是标签或行背景。完整的颜色系统请参见 references/tokens.md。

2.6 一致性与变化

**保持一致的部分：**字体系列、标签样式（始终使用 Space Mono 全大写）、间距节奏、颜色用途、组件形状、对齐方式。

**每个屏幕只在一个地方打破模式：**一个超大数字、矩形布局中的圆形组件、灰色中的红色强调、一条 Doto 标题，或其他地方都很紧凑时留出一大片空隙。

这一处变化就是设计本身。没有它：网格显得呆板。多于一处：视觉混乱。

2.7 构图平衡

**不对称胜过对称。**居中布局显得千篇一律。优先采用刻意不平衡的构图：

• **左大右小：**主视觉指标 + 元数据堆叠。
• **上重下轻：**顶部附近放置大标题，下方内容稀疏。
• **锚定边缘：**重要元素固定在屏幕边缘，中间留白。

用更多留白来平衡视觉重量大的元素，而不是再添加更多重量大的元素。

2.8 Nothing 风格

1. **以留白彰显自信。**保留大块不受打扰的背景区域。克制填满空间的冲动。
2. **在细节处追求精准。**字间距、准确的灰度值、4px 间隙。微小的取舍累积起来，才能体现匠心。
3. **让数据成为美感。**用 Space Mono 以 48px 显示的 36GB/s 本身就是视觉焦点。无需插画。
4. **机械般诚实。**控件看起来就该像控件。开关就是实体开关。仪表盘就是仪器。
5. **只留一个惊喜时刻。**点阵标题、圆形组件或红点。克制让这唯一的表现时刻更有力量。
6. **节奏鲜明，而非流畅。**想象 UI 的声音：点击，而非嗖的一声；滴答，而非叮咚。设计出机械而精准的过渡效果。

2.9 数据密集型屏幕中的视觉变化

当一个屏幕上出现 3 个或更多数据区块时，应改变视觉形式：

形式	最适合	权重
主视觉数字（大型 Doto/Space Mono）	单个关键指标	重 — 只使用一次
分段进度条	目标进度	中
同心环 / 圆弧	多个相关百分比	中
行内紧凑条形图	行中的次要指标	轻
仅数字配状态色	不表示比例的数值	最轻
迷你趋势图	随时间变化的趋势	中
统计行（标签 + 值）	简单数据点	轻

主区块 → 最重的呈现方式。次要区块 → 换用其他形式。第三级区块 → 最轻的呈现方式。变化的是形式，保持不变的是风格。

---

3. 反模式——绝对不要这样做

• UI 装饰元素中不要使用渐变
• 不要使用阴影或模糊。表面保持扁平，通过边框区分。
• 不要使用骨架屏。使用 [LOADING...] 文本或分段式加载指示器。
• 不要使用 Toast 弹窗。使用行内状态文本：[SAVED]、[ERROR: ...]
• 不要使用悲伤表情插画、可爱吉祥物或多段式空状态文案
• 表格中不要使用斑马纹
• 不要在 UI 中使用实心图标、彩色图标或表情符号
• 不要使用视差效果、滚动劫持或无意义的动画
• 不要使用弹簧 / 弹跳缓动。只使用轻微的减速缓动。
• 卡片圆角不要超过 16px。按钮使用胶囊形（999px）或技术风格（4–8px）。
• 数据可视化：优先通过不透明度（100%/60%/30%）或图案（实心 / 条纹 / 点状）区分，再引入颜色。

4. 工作流

1. 声明字体 — 告知用户需要加载哪些 Google Fonts（参见 references/tokens.md）
2. 询问模式 — 深色还是浅色？两者都不是默认模式。
3. 勾勒层级 — 编写代码前，先确定 3 个层级
4. 构建 — 应用设计规则（第 2.1–2.9 节）
5. 检查设计标记 — 查阅 references/tokens.md，确认具体数值
6. 构建组件 — 查阅 references/components.md，了解设计模式
7. 适配平台 — 查阅 references/platform-mapping.md，了解输出规范

---

5. 参考文件

有关设计标记的详细数值、组件规范和平台专属指南：

• references/tokens.md — 字体、字号比例、色彩系统（深色 + 浅色）、间距比例、网格、动效、图标设计、点阵图案
• references/components.md — 卡片、按钮、输入框、列表、表格、导航、标签、分段控件、进度条、图表、小组件、叠加层、状态模式
• references/platform-mapping.md — HTML/CSS、SwiftUI、React/Tailwind、Paper 输出规范