设计指南是一个文档，它列出了公司中为了使设计和开发团队保持一致而做出的所有选择和惯例。例如，连接到设计指南，可以更快地开发给定的原型，而不会出现并发症。
下面是我们在指南中用以前的 UX 潜在顾客定义内容的示例
基本单位为 8x8 像素的正方形。要创建边距和填充，基本单位将按 2 缩放。
基于IBM碳设计系统的网格概念
网格通过将两者相乘或除以两个来构建，使用弹性网格的百分比和固定网格的缩放基本单位。虽然2x是推荐的方法，但除以三分之一也是可能的。
基于IBM碳设计系统的网格概念
间距基于上下文。在缩放中使用较小的增量来微调组件内的元素（如标签和输入字段），而对页面上的元素（例如，在两个部分之间或标题、标题和内容之间的间距）使用较大的增量。
定义断点允许设计人员和开发人员统一设计，即使屏幕大小不同。随着移动设备的普及和多样性，作为设计师，我们需要适应各种屏幕尺寸。这是每个 Web 和应用程序设计人员目前面临的一个挑战。
通常，调色板分为几组：
灰色色调
状态（成功，警告...）
注意：
谨慎使用颜色
根据 WCAG 验证颜色的对比度
不仅使用状态颜色作为指示器
排版的三个主要元素是字体样式、外观和结构。它的作用比外表大得多。它是在您的网站上创建可视层次结构的一种方式。它还有助于平衡网页页面上的图形。您需要确保它清晰且易于理解。
当您为网站选择字体大小、类型大小、行距和读者年龄时，需要考虑三件事。年龄越大，眼睛越差，这并不奇怪。因此，对于很多受众来说，较小的字体将更难阅读。
句子大小写，除非由客户内部品牌指南定义：
- 只有第一个字母大写，其余的小写
- 常见用途：标题、表标题、按钮、窗体字段标签
- 避免所有大写字母，但有某些标题/标题例外
例子：
EN："索赔日期"而不是"索赔日期"
Fr："西尼斯特日期" 而不是 "西尼斯特日期"
-
区域标准开创了先例
-
在模棱两可的情况下，请使用下面的样式指南
-
欧盟标准
-
美国/国际标准
-
按国家/地区显示日期格式
-
按钮文本应是显式的
-
该按钮应具有默认、悬停、活动、焦点、选定状态和禁用状态
-
每页/屏幕一个主要操作，其余操作是辅助操作
-
我们按此确切顺序使用"确定/取消"，以及主/辅助
-
模态对齐右侧底部的多个按钮
-
在适用时将按钮与内容对齐
-
避免一次执行多个主要操作。可以有多个辅助操作，视觉强调较弱。
-
用户应始终通过 UI 中的显式更改或视觉确认来获取有关其操作的反馈。
-
按钮上的标签应是显式的，并告知用户按下按钮后将会发生什么，例如"应用"，"保存"，"发送"而不是"确定"。
-
按钮应具有多个阶段，以指示它们何时被禁用、悬停、按下。
-
输入字段顶部的标签;在内联标签和输入字段的情况下，右对齐标签与输入字段。
-
标签应始终存在（不应放置在输入内）。
-
根据内容大小相应地调整输入字段的宽度/高度，以提供更好的视觉提示（例如，邮政编码的较短字段、文本区域的更高字段）。
-
输入字段应具有活动/聚焦、禁用和错误的状态指示器。
-
错误消息应与字段位于相同的邻近度。
-
如果可能，我们应始终渴望这样做， 在输入字段中添加提示以提高可用性 （例如拆分电话号码和自动添加日期分隔符...）
-
文本值向左对齐
-
数值对齐右对齐
-
标题与内容对齐
-
没有中心对齐，除非按钮和图标
遵循标准和模式。用户将大部分时间花在其他网站上。这意味着用户更喜欢您的网站的工作方式与他们已经知道的所有其他网站相同。
一般人只能将 7 个（正负 2） 项保留在工作记忆中。
避免 ：
- 选择太多
- 需要太多的思考
- 缺乏清晰度。
人眼倾向于将设计中的类似元素视为完整的图片、形状或组，即使这些元素是分开的。
如果它看起来像一个按钮或链接用户希望能够点击它。元素在整个应用程序中应具有视觉一致性。
拥有设计指南将有助于您和您的团队在界面中保持一致和结构化。
我的建议是，在原则上不要太复杂，不能遵循。选择最重要的一个，并教你的团队跟随他们。
