设计规范

Logo 与品牌

• 足够简洁，适配 16px 的 favicon —— 复杂元素在小尺寸下会消失
• 单色下仍具辨识度 —— 渐变仅作为增强手段，而非设计依赖
• 需在深色与浅色背景上均通过测试 —— Logo 必须提供明、暗双版本
• 品牌色最多 3–5 种 —— 包含主色、辅色、强调色及中性色
• 一致性构建识别度 —— 每一次用户触点都在强化或削弱品牌形象

视觉层级

• 尺寸与字重引导用户注意力 —— 最重要的元素应最突出
• 每屏仅设一个视觉焦点 —— 多个竞争性元素会使用户困惑
• 留白用于分组、分隔与提升视觉权重 —— 它并非“空白空间”
• 对齐建立无形秩序 —— 网格让所有元素呈现明确意图
• 用对比强调重点，用相似性实现归类 —— 打破模式需有明确目的

排版

• 最多使用两种字体 —— 标题与正文各一种即已足够
• 网页正文最小字号为 16px —— 更小字号将导致不可读
• 行高建议 1.4–1.6，行长控制在 45–75 字符 —— 基础可读性准则
• 字体搭配需有足够对比 —— 如衬线体搭配无衬线体，避免风格相近的字体组合

色彩

• 遵循 60–30–10 法则：主色占 60%，辅色 30%，强调色 10% —— 防止色彩混乱
• 暖色前倾，冷色后退 —— 可用于营造纵深感与视觉强调
• 文本对比度不低于 4.5:1 —— 可访问性不是可选项
• 使用色觉缺陷模拟器进行测试 —— 约 8% 的男性存在色觉障碍

布局

• 以 8px 为基准单位进行间距设计 —— 保证一致性，同时避免过度纠结
• 运用三分法提升视觉趣味性 —— 偏离中心构图更具动态感
• 负空间是主动的设计手段 —— 拥挤的布局会显得廉价
• 移动优先，再逐级向上适配 —— 约束条件往往激发创意
• 触摸目标最小尺寸为 44px —— 手指操作精度有限

图标与插画

• 整套图标保持统一的描边粗细 —— 混合不同粗细会显得不协调
• 图标含义应无需标签即可理解 —— 模糊不清的图标必须配文说明
• 简洁风格的插画更易缩放 —— 细节在小尺寸下容易丢失
• 插画风格需契合品牌调性 —— 轻松活泼与企业严谨风格截然不同

UX 原则

• 勿让用户思考 —— 显而易见优于标新立异
• 每个操作都需提供反馈 —— 用户需要明确的动作确认
• 优先预防错误，而非提示错误 —— 对无效操作直接禁用
• 优先设计空状态、错误态与加载态 —— 这些场景构成了大部分用户体验
• 5 名用户即可发现约 80% 的可用性问题 —— 尽早并高频开展测试

设计系统

• 聚焦组件，而非页面 —— 构建可复用的组件库
• 通过设计 Token 管理颜色、间距、字体等基础变量 —— 一处修改，全局生效
• 按功能命名（如 "primary-action"），而非按外观命名（如 "blue-button"）
• 不仅说明组件“长什么样”，更要说明“何时使用”

方案呈现与交付

• 在真实上下文中展示设计 —— 如设备中的界面原型、卡片上的 Logo 应用
• 解释“为什么这么做”，而不仅是“做了什么” —— 讲清设计决策背后的故事
• 提供全部交互状态：悬停（hover）、激活（active）、禁用（disabled）、错误（error）、加载（loading）—— 开发者一定会询问
• 标注规范采用相对单位 —— 响应式设计需要灵活适配能力
• 务必审查最终实现效果 —— 实际开发落地才是设计真正的完成形态