设计规范

设计师需知的设计规范总结，包括设计风格、好的规范的标准、规范优先级、框架布局、组件、场景和控件等。

设计规范

• 设计风格
  • 色彩规范
    • 颜色是设计中最重要的元素，颜色的运用与搭配决定设计的品质感。在 UI 设计中，颜色的使用规范主要在于：品牌主色、文本颜色、界面颜色（背景色、线框色）等。
  • 字体
    • 不同的字体气质不一样，并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。
  • 图标
    • 在 UI 界面中，具有标识性质的图形就是图标。
      • 应用图标：各种应用程序的识别标志，在应用商店里下载的一些应用程序的标志。
      • 功能图标：规范中最好标明图标格式与使用方式。比如 Web 设计，图片可以使用 iconfont 管理，可生成代码交付给前端开发；如果是原生 APP，那么需要标注图标导出格式与尺寸。
  • 图片尺寸
    • 图片作为界面设计的重要组成部分，需要标明尺寸规范，分为不同用途的种类。
• 好的规范的标准
  • 一个好的规范应该是高效的、简单易懂的。具体执行时，我们应该确保分类合理、规范本身保持一致、布局排版易读，来提升设计师查阅的效率；确保定义清晰、描述准确、场景完备，来帮助设计师理解和使用。但值得注意的是，设计规范并不是「圣经」，不要因为规范而限制了自己的思维，当发现规范有问题的时候，要及时去修正，而不是做了一次之后，一直沿用，永不修改。
• 规范优先级
  • 基础规范
    • 设计尺寸
    • 栅格系统
    • 色彩规范
    • 字体
    • 图标
    • 图片尺寸
    • 系统导航
  • 临时规范
    • 图标风格
    • 弹窗样式
    • 默认图
  • 复杂规范
    • 目录规范
    • 版式统一
    • 组件控件
• 框架布局
  • 设计尺寸
    • 设计尺寸，是指进行设计时，选择的画板尺寸。例如是 750*1334，还是 375*667，每个公司设计的基准都不一样，所以设计尺寸并没有规定只能用某一个尺寸，我们在设计时，使用的 1 倍图为基准进行设计的，基准尺寸为 375*667。
  • 栅格系统
    • 栅格系统，是运用固定的格子设计版面布局，在 UI 设计和前端开发中被广泛应用的一套体系。在设计尺寸中提到栅格系统，是因为现在的设计基本都是一稿适配多端，而栅格系统能很好的解决这个问题。
  • 布局
    • 基本布局
    • 卡片布局
    • 导航
    • 列表
• 组件
  • 表格
  • 对话框
  • 提示条
  • 气泡提示
  • 日期选择器
  • 多级选择器
  • 标签输入框
  • 组合框
  • 上传
• 场景
  • 分步骤页面
  • 帮助指引页
  • 空白页
    • 空状态页面：显示对应的页面空状态的图标，增加相应的引导按钮。
    • 无网络状态：在没有连接到网络时的提示页面。
    • 404&505页面：发生未知错误时的页面。
• 控件
  • 按钮
    • 状态
      • 正常
      • 点击
      • 悬停
      • 加载
      • 禁用
      • 需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值。如果是图标按钮的话，除了上述参数值以外，还需要标注 icon 和按钮文本之间的间距，icon 图标的大小。
  • 输入框
    • 用于单行信息录入文字上下居中显示，支持键盘录入和剪切板输入文本，对特定格式的文本进行处理：密码隐藏显示、身份证、卡号分段显示，标注宽高。
  • 下拉列表
  • 下拉菜单
  • 切换按钮
  • 单选框
    • 未选择
    • 已选中
    • 未选悬停
    • 已选失效
    • 未选失效
  • 复选框
    • 未选择
    • 已选中
    • 未选悬停
    • 已选失效
    • 未选失效
  • 选项卡
    • 用于让用户在不同的视图中进行切换。标签数量，一般是 2-5 个；其中，标签中的文案需要精简，一般是 2-4 个字。每个标签所占的宽度可适当调整。
  • 搜索框
  • 分页
  • 开关
  • 滑块
    • 滑动开关有两个互斥的选项（例如开/关、是/否、启动/禁止），它是用来打开或者关闭选项的控件。选择其中一个选项会立即执行操作
  • 步进器
  • 进度条
    • 用于向用户展示步骤的步数以及当前所处的进程。
  • 角标
    • 用于聚合型的消息提示，一般出现在通知图标或头像的右上角，通过醒目的视觉形式吸引用户眼球。