设计规范

标志与品牌

• 简洁至16像素网站图标仍可识别——过小尺寸下复杂度会消失
• 单色呈现仍具辨识度——渐变是增强效果而非必需依赖
• 需测试深色与浅色背景——标志应具备双版本适配方案
• 品牌色不超过3-5种——包含主色、辅色、强调色及中性色
• 一致性塑造识别度——每个触点都在强化或稀释品牌形象

视觉层级

• 尺寸与粗细引导视线——最重要元素应最突出
• 每屏设置单一焦点——竞争性元素会造成用户困惑
• 留白实现分组、分隔与提升——绝非空白区域
• 对齐创造隐形秩序——网格系统赋予设计意图感
• 对比用以强调，相似用于归类——需刻意打破规律

字体排印

• 字体不超过两种——标题与正文字体已足够
• 网页正文字体不小于16像素——过小将影响阅读
• 行高1.4-1.6倍，行长45-75字符——可读性基础准则
• 字体搭配要有对比感——衬线体配无衬线体，避免两种相似字体混用

色彩

• 60-30-10法则：主色、辅色、强调色——有效避免视觉混乱
• 暖色前进、冷色后退——善用色彩营造层次与重点
• 文本对比度需达4.5:1——可访问性设计不可或缺
• 用色盲模拟器测试——8%的男性存在色觉缺陷

版式

• 以8像素为基准网格间距——轻松实现统一性
• 三分法则提升视觉趣味——偏离中心更具动感
• 留白是主动设计——拥挤版式显得廉价
• 移动端优先再逐步扩展——限制条件激发创造力
• 触控区域至少44像素——手指操作需要容错空间

图标与插画

• 图标组保持统一笔触——粗细混杂会破坏整体感
• 理想图标无需标签自明——含义模糊时需配文字说明
• 简约插画缩放性更佳——微小尺寸会丢失细节
• 风格需契合品牌个性——活泼感与商务感截然不同

用户体验原则

• 不要增加用户的思考负担——清晰明了胜过巧妙设计
• 为每个操作提供反馈——用户需要确认
• 预防错误胜于显示错误信息——禁用无效操作
• 优先设计空状态、错误和加载界面——它们构成了大部分用户体验
• 五名用户就能发现80%的可用性问题——尽早并频繁测试

设计系统

• 组件化，而非页面化——可复用的组件库
• 使用颜色、间距、字体的设计令牌——一次修改，全局更新
• 按功能命名：如“主要操作按钮”而非“蓝色按钮”
• 记录使用场景，而不仅仅是外观

演示与交付

• 在上下文中展示作品——设备中的模型、卡片上的标志
• 解释原因，而不仅仅是内容——讲述决策背后的故事
• 涵盖所有状态：悬停、激活、禁用、错误、加载——开发人员会询问
• 使用相对单位进行标注——响应式设计需要灵活性
• 审查构建结果——实现才是设计的最终呈现