# 交互设计控件使用场景及规范总结
在开发过程中，经常存在很多类似的页面和组件，导致很多重复的工作，为了提高设计效率和公司产品的一致性，结合Ant Design，提炼出一个符合公司定位的设计规范，统一公司项目的前端UI设计，规避不必要的设计差异和实现成本，实现设计和前端资源的效率最大化。
# 字体
# 概述
字体是界面设计中最基本的构成元素之一，用户通过文字来理解内容和完成任务，合适的字体将大大提升用户的阅读体验及工作效率。在项目的字体使用中，为了使页面的视觉层次更加清晰，我们从以下三方面来使平台的字体符合易阅读和美观的要求：
- 合理的使用不同的字重、字号和颜色来强调界面中需要突出的信息；
- 尽量使用单种字体，使用多种字体会让界面看起来零散和杂乱无章；
- 遵循 WCAG 2.0 标准 (opens new window)，字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准。
# 字体使用建议
- 中文字体优先级：PingFang SC、Hiragino Sans GB 、Microsoft YaHei（平台使用字体）
- 英文字体优先级：Helvetica Neue、Helvetica、Arial（平台使用字体）
# 字号使用建议
- 主标题：加粗 14px
- 副标题：加粗 12px
- 正文：12px
- 辅助文字：12px
- 失效文字：12px
- 链接文字：12px
- 链接文字hover：12px
# 行高使用建议
行高也是影响用户阅读体验的重要因素之一，我们查阅资料得知西文的基本行高通常是字号的 1.2em 左右，而中文因为字符复杂，所以中文行高需要更大。现在公认1.5em 至 1.8em 之间会有一个比较好的视觉阅读效果。
行高计算公式：行高值=字号 x 1.5，例如：12 号字体的行高为 18px，14 号字体的行高为 21px。
# 按钮&链接文字
# 使用按钮 or 链接文字 or 图标
- 当按钮标签过长（超过6个中文），导致视觉出现问题时，建议改用链接文字。
- 当按钮嵌在文本中时，应该用链接文字；
- 当命令是次要时，应该用链接文字。
- 当命令是很常规的操作（如删除、编辑等），且图标语义非常容易理解时，可以使用图标作为操作按钮。
# 按钮类型及状态
- 按钮类型主要有：主按钮、次按钮、虚线按钮和危险按钮。
- 按钮状态主要有：正常、悬浮、点击、加载中和禁用。
- 按钮中的文本标签应该足够简洁和易懂，并且通常是一个动词。
- 如果点击按钮后不会立即响应，应当切换为加载状态；加载状态下不能点击。
# 使用场景
1、主按钮
当需要突出或需要强调时使用它；通常情况主按钮在同一个操作区域最多出现一次。
2、次按钮
当已存在主按钮后还需要再突出时使用它；次级按钮权重比主按钮低、比幽灵按钮高。
3、幽灵按钮
幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。
4、线框按钮
权重性较低，主要用于添加附件等场景。
5、多按钮组合
当某条数据同时存在多个操作时，建议使用主按钮样式折叠显示，如下图：
# 输入框
# 定义与组成
- 定义：用于显示、输入或编辑文本、数值操作所使用的控件。
- 组成：一般由标签、必填项符号（根据业务需求而定）、输入框和状态反馈组成。
3种常见形式（状态反馈放在输入框下面）
# 输入框状态
# 输入框类型及使用场景
# 1、单文本框（当输入的字符长度超过文本框固定的宽度时，须保证最后输入的字符显示出来）
- 普通文本输入框
例如，昵称、名称等填写。用户按照规则要求输入即可，输入错误时出现错误状态反馈提示；输入正确给出正确状态反馈提示。
- 密码输入框
为了安全性起见，用户输入密码时，默认隐藏处理，同时需遵循密码的规则要求，状态反馈提示同普通文本输入框。
- 数字输入框
建议给出输入框的同时，可以让用户对数字进行微调的功能。对于类似固定电话填写，建议将区号与主体号码分开填写，中间用“—”隔开。
# 2、多文本框
- 当用户需要输入或编辑长字符串时，请使用多行输入框。例如，备注、描述以及意见建议等的填写。
- 使文本控件的高度足够大，以便容纳典型的输入。
- 不要让文本输入控件在用户键入时增加高度；如果输入内容超过控件高度时，建议在框内出现滚动条。
# 对话框&气泡确认框&气泡提示&通知
# 对话框（信息提示对话框/确认对话框）
# 1、定义
用来临时显示与用户当前正在执行的操作相关信息的控件，通常与黑色背景遮罩搭配使用。
# 2、组成
一般由标题（可有可无依照具体场景而使用）、内容、操作按钮以及 “×” 组成。
# 3、使用场景
操作后发生某些严重错误或者警告用户接下来操作可能出现的风险时使用。
操作不可进行时；某些操作无法让用户进行时，应弹出警告消息对话框。
操作不可逆时；例如删除命令，执行后再也不能复原，就应该在执行前使用对话框进行再次确定。