lailai's Design Style Guide

Summary

lailai 的设计风格以统一、简约、现代为准则，适用于数字界面、图形和印刷品。指南按规范强度规定视觉识别、信息层级、布局、排版、色彩、形状、图像、组件、状态、动效和数据可视化的要求，并列出无障碍、跨尺寸适配及成品验收标准。相同职责的元素保持一致；视觉效果须服务内容和操作，具体尺寸与参数按载体确定并在实际输出中验证。

参考资料

• Human Interface Guidelines - Apple、Layout - Apple、Typography - Apple、Color - Apple、Materials - Apple、Motion - Apple。
• Material Design 3 - Google、Adapt layouts - Android Developers。
• Design tokens - Fluent 2、Motion - Fluent 2。
• 2x Grid - IBM Carbon。
• Web Content Accessibility Guidelines 2.2 - W3C。

通用

• 本指南适用于数字界面、图形、文档和印刷品。仅适用于特定载体的规则会注明适用范围。
• 本指南的规范强度分为 4 个等级：
  • 应（Must）：强制执行。
  • 通常（Should）：推荐执行。
  • 避免（Should Not）：不推荐使用。
  • 不应（Must Not）：禁止使用。
• 设计应保持 统一、简约、现代。同一职责应使用一致的视觉和行为规则；次要效果不应破坏整体一致性。
• 信息的可理解性、操作的可完成性和无障碍要求应优先于装饰效果。删减元素时，应保留必要的说明、反馈和操作路径。
• 视觉决策应适应内容、媒介和平台习惯。跨媒介可共用视觉语言，不应直接套用另一媒介的尺寸、交互或材质。
• 同一作品或产品系列应统一使用已确定的字体、色彩角色、间距、形状和图像处理规则。新增样式应先检查现有规则是否可复用。
• 数字界面应以设计变量维护颜色、字阶、间距、圆角和动效。变量应按用途命名，避免重复录入近似值。
• 规则的例外应有内容或功能依据。采用例外后，应检查一致性、可读性和无障碍结果。
• 文字的空格、标点和用词应遵循 lailai's Text Format Guide。

视觉识别

• 标识、名称、主色和图形语言应形成稳定的识别关系。同一标识在不同载体中应保持关键轮廓、比例和视觉重心。
• 标识应提供适用于浅底、深底、小尺寸和单色输出的版本。各版本应保留相同的识别特征。
• 已有彩色标识应保留其原有色彩关系；不应为了匹配界面强调色而强制重绘。
• 识别元素与内容应有明确的主次关系。标识通常不应重复占据正文、导航和装饰图的视觉中心。
• 装饰图形应采用有限的形状、笔触和色彩规则。不同风格的素材并置时，应统一尺寸比例、边缘处理和视觉重量。
• 不应仅靠发光、复杂纹理或背景特效维持标识的可辨认性。

信息层级

• 设计前应确定内容的阅读顺序和操作优先级，再分配位置、尺寸、字重、对比度与留白。
• 同一版面或视区通常只设置一个主要视觉起点。并列信息确为同级时，应保持相近的视觉强度。
• 相关内容应通过距离和对齐分组；不同类别应有稳定的分隔方式。避免同时叠加背景、边框、阴影和大间距表达同一层级。
• 标题、正文、辅助说明、元信息和操作应有可辨认的层级。层级不应只依赖字号或颜色中的单一变化。
• 次要内容应易于找到，但通常不应占用主要内容的阅读位置。
• 导航名称和操作标签应直接说明目的。相同名称应对应相同的去向或行为。
• 信息量增加时，通常应先调整分组、排序和呈现层次。避免仅通过缩小文字或压缩间距容纳内容。

布局与间距

网格与对齐

• 布局应建立明确的列、边距和对齐基准。标题、正文、控件和图表应沿可解释的边线或基线排列。
• 同一层级的模块应使用一致的外边距、内边距和元素间距。间距应形成少量可复用的等级，避免出现无依据的近似值。
• 数字界面的间距通常按基础单位建立比例关系；印刷品应按成品尺寸和观看距离确定间距。不应将屏幕像素值直接换算为印刷尺寸。
• 组内间距通常应小于组间间距。留白应帮助识别关系，不应形成与内容量无关的大面积空区。
• 连续内容通常应使用开放版式；边界清晰、可独立操作的信息单元可以使用卡片。避免将每一段内容都装入卡片。
• 并列模块应检查实际边缘、内边距和视觉重心。必要的光学校正应保持可重复，不应以任意偏移掩盖结构问题。

尺寸适配

• 布局应随可用空间调整列数、顺序和辅助信息的位置，不应仅按比例缩小整体画面。
• 主要内容和主要操作应在不同尺寸下保持可见、可达且顺序稳定。
• 文字放大、语言长度变化和屏幕旋转后，内容不应重叠、被遮挡或无声截断。
• 网页在常见窄屏及放大条件下不应产生非必要的双向滚动。确需二维浏览的内容应限制在自身区域，并提供可理解的操作方式。
• 固定宽度和高度不应阻止内容增长。省略号通常只用于可通过其他方式读取全文的辅助信息。

字体与排版

• 正文通常使用清晰、稳定且覆盖目标语言的系统字体。自定义字体应在可读性、字符覆盖和加载失败时有合适的后备方案。
• 字体体系应规定标题、正文、注释、数字和代码的角色。每种角色应同时明确字号、字重、行高和适用范围。
• 标题与正文应通过有限的字阶建立层级。避免混用多套无关联的字体、过细字重或仅靠极端字号制造对比。
• 长文的行宽、行高和段距应共同调校。行宽不应使回读困难；行高和段距不应造成段落关系模糊。
• 中英文与数字混排时，应检查基线、字重、标点位置和换行。成组数值通常使用等宽数字以便比较。
• 界面文字应说明操作、状态和结果。按钮通常使用明确的动作词；错误信息应说明问题及可采取的下一步。
• 重要标题、说明和错误信息不应仅以省略号隐藏。标题应避免孤字成行，通常通过调整文案或容器宽度处理。
• 字体放大后应保持内容层级和功能完整，不应固定文字区域的高度导致裁切。

色彩与主题

• 色彩体系应区分中性色、强调色、品牌色和状态色。背景、表面、文字、链接、边框及状态应按用途定义颜色角色。
• 大面积表面通常使用柔和中性色；强调色应用于链接、主要操作和选中状态。数字界面的主强调色通常采用蓝色。
• 同一颜色角色应保持相同语义。成功、警告和错误不应与普通强调色混用。
• 强调色的数量和使用面积应受控。避免在相邻区域并用多个同等强度的高饱和色。
• 颜色不应是传达状态、类别或变化方向的唯一方式；还应提供文字、形状、位置或数值线索。
• 数字界面应分别定义浅色和深色主题，通常跟随系统设置。两套主题应逐一校准层级与对比度，不应仅反转颜色值。
• 渐变通常不用于页面背景和普通卡片装饰。用于连续数据、材质或交互反馈时，应检查其语义和文字对比度。
• 半透明与模糊材质通常只用于确有前后层级的控件或导航表面。内容阅读面通常应保持稳定；复杂背景下应提供足够不透明的替代效果。

形状与层次

• 圆角、边框、分隔线和阴影应分别承担明确的层级职责。同类元素应使用一致的形状规则。
• 嵌套元素的圆角应反映内外关系；同级元素不应使用无依据的多套圆角数值。
• 优先通过间距、背景明度和细边线区分区域。阴影通常保留给确实高于内容层的元素。
• 不应为每个卡片或容器叠加同等强度的边框、阴影和背景效果。
• 悬浮层应与内容层有稳定的空间关系。透明或模糊效果不应降低文字、图标和边界的可辨认性。

图像与图标

• 图像应具有说明、记录、识别或情绪表达的明确职责。避免添加与内容无关的装饰图。
• 照片与作品图应保持原始比例；裁切应保留关键主体，不应拉伸或以填满容器为由裁去必要信息。
• 同组图像应统一比例、留白和图像处理方式。不同来源的图像应检查色调和视觉重量是否协调。
• 界面图标应统一线宽、细节密度、光学尺寸和视觉重量。已有图标体系应优先复用。
• 含义不明确或后果重要的图标应配文字标签。仅靠图标表达操作时，应验证其在目标受众中的可理解性。
• 标识、插画和界面图标可以采用不同画法，但同一组控件不应混用彼此冲突的图标风格。
• 图像内的重要文字通常应改为独立文本；必须嵌入图像时，应在实际显示尺寸下检查清晰度与对比度。
• 重要图像应提供合适的文字替代信息；纯装饰图应避免造成重复朗读。

组件与控件

• 相同任务应使用相同类型的控件。链接用于前往目标，按钮用于执行操作，状态标签用于显示状态；外观应与行为一致。
• 组件应复用已定义的字阶、色彩角色、间距和形状。新增组件应与现有组件保持一致的交互约定。
• 同类组件应规定默认、悬停、按下、焦点、选中、禁用和错误状态。仅适用于特定输入方式的状态应提供替代反馈。
• 主要操作与次要操作应有清楚的视觉区分。危险操作应通过文案和必要的确认或撤销机制降低误操作风险。
• 控件标签应紧邻其作用对象。表单字段应有持续可见的名称；占位文字不应替代字段名称。
• 可点击区域应与视觉反馈范围一致。避免让不可交互的装饰元素看起来像控件。
• 悬停通常只改变边线、背景、文字或小图标。避免整张卡片因悬停而位移或上浮。

状态与反馈

• 操作触发后应及时显示反馈。进行中的操作应明确状态，不应让用户依靠重复点击判断是否生效。
• 加载、空结果、成功、失败和禁用状态应分别设计，不应共用含义模糊的占位样式。
• 加载状态通常应保留布局结构，减少内容到达时的跳动。长时间任务应说明进度或可等待的原因。
• 空结果应说明当前没有内容，并在适用时提供下一步操作；不应与加载失败呈现为同一状态。
• 错误反馈应指出发生的问题和恢复方式。可重试的失败应提供重试入口；不可逆操作应提供适当的预防措施。
• 状态变化不应只通过颜色、声音或动效表达；重要结果应以可读文字或可被辅助技术识别的方式提供。

动效

• 动效应说明状态变化、元素关系或直接操作的结果。避免无明确功能的持续循环和重复入场动画。
• 同类过渡应使用一致的速度和运动方式。展开与收起、进入与退出应保持可理解的空间对应关系。
• 直接操作的对象应及时跟随输入；过渡应可中断，不应阻止用户继续操作。
• 高频操作的反馈应短且稳定。大面积位移、缩放、视差和弹跳通常应避免。
• 动效不应成为理解内容或完成操作的唯一途径。动画结束后的状态应保持清楚可见。
• 数字界面应尊重减少动态效果设置，以静态变化或低运动量反馈替代大幅运动。
• 动画性能应在目标设备上检查。出现明显掉帧时，应简化效果或减少参与运动的元素。

数据可视化

• 图表应明确表达比较、趋势、分布、构成或空间关系。仅展示单个数值时，通常不必使用图表。
• 图表应标明指标名称、单位、时间范围及必要的数据来源或更新时间。
• 同一组图表应统一颜色语义、轴线、刻度和交互方式。不同量纲不应被表现为可直接比较。
• 坐标轴截断、累计、归一化和缺失值处理应明确标注，不应通过图形比例误导读者。
• 变化方向、变化幅度和价值判断应分别表达；数值增加不应默认标为正面结果。
• 图表应提供可读标签和必要的文本说明。颜色之外还应使用数值、形状或直接标注区分类别。
• 交互式图表的重要信息不应只在悬停时出现。加载、空数据和错误状态应有独立呈现。

无障碍

• 数字界面应支持键盘操作、可见焦点和合理的阅读顺序。弹层应可进入、可关闭，并在关闭后返回合适的焦点位置。
• 文字和控件应允许放大，布局应随之调整。信息不应因缩放、换行或横竖屏切换而丢失。
• Web 内容应以 WCAG 2.2 AA 级为基本检验目标。普通文字对比度应至少为 4.5:1；大文字应至少为 3:1；必要的图形信息和控件边界应至少为 3:1。例外应按标准原文判断。
• Web 操作目标应至少为 24 × 24 CSS 像素，或符合 WCAG 2.2 规定的例外。触屏高频操作通常应提供更宽裕的触碰区域。
• 语义结构、控件名称和图像替代文本应与视觉表达一致。地图、图表及拖拽操作应有可理解的替代路径。
• 颜色、声音、运动和位置不应分别成为重要信息的唯一表达方式。
• 当系统提供高对比度、减少动态效果或减少透明度设置时，界面应保持内容和功能完整。
• 印刷品应按预期观看距离检查字号与明暗。还应检查纸张反光和色彩还原，不应仅依据屏幕预览判断可读性。

输出与验收

• 交付前应确认成品载体、尺寸、分辨率、观看距离和输出方式。设计稿应使用与成品一致的比例。
• 屏幕作品应检查常见显示尺寸、像素密度、浅色与深色主题，以及缩略图中的识别效果。
• 印刷品应核对成品尺寸、出血、裁切、安全区、色彩模式和导出规格。重要文字与标识不应贴近裁切边界。
• 标识和关键图形应分别检查彩色、单色、浅底、深底及小尺寸版本。不得以放大设计稿的效果代替成品检查。
• 应在真实渲染或打样中检查对齐、换行、裁切、清晰度、色彩与交互状态。对齐和尺寸问题应以实际测量确认。
• 数字界面应覆盖目标尺寸、文字放大、键盘操作、主题变化、加载与错误状态；印刷品应检查实体样张或等比例样张。
• 验收时应核对内容正确性、视觉一致性、可读性、可操作性及无障碍结果。未验证的载体或状态不应视为已完成。