design

设计 — 反平庸 UI/UX

你有品味。千篇一律的 AI 设计是我们的敌人——紫色渐变、图库照片主视觉、到处都是圆角、毫无理由的玻璃拟态。打造看起来像出自人类设计师之手的界面。

反平庸检查清单

发布任何设计之前，请确认以下现象均不存在：

AI 平庸设计信号	改进方法
紫色／蓝色渐变背景	使用品牌色，或有目的地采用中性色调
带有“欢迎使用 [产品]”的通用主视觉	以用户的首个操作或关键指标为主
到处都是带投影的圆角卡片	选择一种层级系统，并保持一致
通用插画风格（Humaaans、unDraw）	使用真实截图、数据，或者什么都不用
玻璃拟态／极光效果	只有品牌确实需要时才使用——否则就停用
47 种不同字号	每页最多 4 种字号。使用字体比例，或者干脆不用。
五颜六色的强调色	1 种主色、1 种辅色、1 种危险色。就这样。
每个功能都配装饰性图标	图标应帮助理解，而不是填补空白
到处都是“由 AI 驱动”徽章	用户不在乎它如何运作，只在乎它是否好用

设计原则

1. 清晰胜过装饰。 每个元素都要配得上它占用的像素。如果它对用户没有帮助，就删掉。
2. 层级至关重要。 每个屏幕只设一个主要操作。让视线首先落在一个重点上。
3. 在需要的地方提高信息密度。 仪表板应当信息密集；引导流程应当留有呼吸空间。要分清两者。
4. 一致性胜过新奇感。 重用设计模式。界面中的意外感就是 Bug。
5. 针对真实数据进行设计。 名称长度有 3-40 个字符。表格有 200 行。空状态也真实存在。

颜色

Background:   neutral-50 or white (light) / neutral-900+ (dark)
Surface:      neutral-100 / neutral-800
Border:       neutral-200 / neutral-700
Text primary: neutral-900 / neutral-50
Text secondary: neutral-500 / neutral-400
Primary:      ONE saturated color from your brand
Destructive:  red-600
Success:      green-600
Warning:      amber-500

规则：

• 绝不要只用颜色来传达信息——应添加图标或文字，确保无障碍
• 测试对比度：文本至少达到 4.5:1（WCAG AA）
• 深色模式不是“把所有颜色反转”——它应是一套独立、经过审慎设计的调色板

排版

角色	字号	字重
页面标题	24-30px	600-700
区块标题	18-20px	600
正文	14-16px	400
说明文字／辅助文本	12-13px	400

• UI 使用一种字体（Inter、system-ui 或品牌字体）
• 只有营销页面才使用第二种字体，也可以完全不用
• 行高：正文为 1.5，标题为 1.2

布局

• 内容最大宽度： 应用为 1280px，文本密集页面为 720px
• 间距比例： 以 4px 为基数（4、8、12、16、24、32、48、64）
• 网格： 仪表板使用 12 列网格，表单使用单列布局
• 移动优先： 先设计受限版，再逐步扩展

组件模式

每个组件都需要：

1. 默认状态——常规外观
2. 悬停／聚焦状态——交互反馈
3. 加载状态——骨架屏或旋转指示器
4. 空状态——有帮助的消息和操作
5. 错误状态——说明出了什么问题以及如何修复
6. 禁用状态——视觉上弱化，光标显示为不可用

导航

• 少于 5 个项目时使用顶部导航
• 有 5 个或更多项目，或层级较深时使用侧边栏
• 绝不要同时使用两者（选一种）

表单

• 标签放在输入框上方（不要把占位符放在输入框内充当标签）
• 在失去焦点时进行行内校验，不要在每次按键时校验
• 错误消息放在字段旁边，不要放在 Toast 提示中
• 主要操作放在右侧（移动端则使用全宽按钮）

评审检查清单

评审任何 UI 时：

1. 眯眼测试——视线模糊时，你还能分辨出重点吗？
2. 5 秒测试——新用户能在 5 秒内找到主要操作吗？
3. 真实数据测试——长名称、空状态、500 个项目都能正常显示吗？
4. 无障碍检查——能通过键盘导航吗？有屏幕阅读器标签吗？对比度够吗？
5. 平庸度检查——它看起来像通用 AI 模板图库里的作品吗？如果是，就重新设计。