【精品报告】常用中后台交互设计控件使用场景与规范总结

常用中后台交互设计控件使用场景与规范总结
最近刚完成平台安畅云 2.0 的改版设计，平台模块很多，经常存在很多类似的页面和组件，若不制定统一的规范和控件，则会导致很多重复的工作，大大降低产品的设计效率；
同时，平台的一致性也得不到保障。

所以，我们视觉、交互、前端的小伙伴们针对我们踩过的坑，大家认真总结和提炼出一个
符合公司定位的设计规范，统一公司项目的前端 UI 设计，规避不必要的设计差异和实现
成本，实现设计和前端资源的效率最大化。

此设计规范主要分享了中后台常用设计组件的定义、组成、使用场景及注意事项。

字体
概述
字体是界面设计中最基本的构成元素之一，用户通过文字来理解内容和完成任务，合适的
字体将大大提升用户的阅读体验及工作效率。

在安畅云项目的字体使用中，为了使页面的
视觉层次更加清晰，我们从以下三方面来使平台的字体符合易阅读和美观的要求。

合理的使用不同的字重、字号和颜色来强调界面中需要突出的信息；
尽量使用单种字体，使用多种字体会让界面看起来零散和杂乱无章；
遵循 WCAG 2.0 标准（标准详情见 https:///Translations/WCAG20-
zh/#visual-audio-contrast），字体在使用时与背景颜色的对比值满足无障碍阅读的最
低标准。

字体使用建议
中文字体优先级：PingFang SC、Hiragino Sans GB 、Microsoft YaHei（平台使用字体）英文字体优先级：Helvetica Neue、Helvetica、Arial（平台使用字体）
字号使用建议
行高使用建议
行高也是影响用户阅读体验的重要因素之一，我们查阅资料得知西文的基本行高通常是字号的 1.2em 左右，而中文因为字符复杂，所以中文行高需要更大。

现在公认1.5em 至1.8em 之间会有一个比较好的视觉阅读效果。

安畅云项目行高计算公式：行高值=字号 x 1.5，例如：12 号字体的行高为 18px，14 号字体的行高为 21px。

按钮＆链接文字
使用按钮 or 链接文字 or 图标？
当按钮标签过长（超过6个中文字），导致视觉出现问题时，建议改用链接文字。

当按钮嵌在文本中时，应该用链接文字；
当命令是次要时，应该用链接文字。

当命令是很常规的操作（如删除、编辑等），且图标语义非常容易理解时，可以使用图标作为操作按钮。

按钮类型及状态
按钮类型主要有：主按钮、次级按钮、幽灵按钮和线框按钮。

按钮状态主要有：正常、悬浮、点击、加载中和禁用。

按钮中的文本标签应该足够简洁和易懂，并且通常是一个动词。

如果点击按钮后不会立即响应，应当切换为加载状态；加载状态下不能点击。

使用场景
1、主按钮
当需要突出或需要强调时使用它；通常情况下同一模块只允许有一个主要按钮。

2、次级按钮
当已存在主要按钮后还需要再突出时使用它；次级按钮权重比主要按钮低、比幽灵按钮高。

3、幽灵按钮
幽灵按钮几乎适用所有场景，是所有按钮中最基础的按钮。

4、线框按钮
权重性较低，主要用于添加附件等场景。

5、多按钮组合
当某条数据同时存在多个操作时，建议使用主按钮样式折叠显示，如下图：
输入框
定义与组成
定义：用于显示、输入或编辑文本、数值操作所使用的控件。

组成：一般由标签、必填项符号（根据业务需求而定）、输入框和状态反馈组成。

3种常见形式（状态反馈放在输入框下面还是后面，视排版空间而定；一般情况下，弹窗中表单输入框错误状态反馈放下面，新页面表单输入框错误状态反馈放后面）
输入框状态
输入框类型及使用场景
1、单文本框（当输入的字符长度超过文本框固定的宽度时，须保证最后输入的字符显示出来）
（1）普通文本输入框
例如，昵称、名称等填写。

用户按照规则要求输入即可，输入错误时出现错误状态反馈提示；输入正确给出正确状态反馈提示。

（2）密码输入框
为了安全性起见，用户输入密码时，默认隐藏处理（同时提供“显示密码”和“密码加强计”功能）。

同时需遵循密码的规则要求，状态反馈提示同普通文本输入框。

（3）数字输入框
建议给出输入框的同时，可以让用户对数字进行微调的功能。

对于类似固定电话填写，建议将区号与主体号码分开填写，中间用“—”隔开。

2、多文本框
当用户需要输入或编辑长字符串时，请使用多行输入框。

例如，备注、描述以及意见建议等的填写。

使文本控件的高度足够大，以便容纳典型的输入。

不要让文本输入控件在用户键入时增加高度；如果输入内容超过控件高度时，建议在框内出现滚动条。

对话框＆气泡确认框＆气泡提示＆通知
对话框（消息对话框）
1、定义
用来临时显示与用户当前正在执行的操作相关信息的控件，通常与黑色背景遮罩搭配使用。

2、组成
一般由标题（可有可无依照具体场景而使用）、内容、操作按钮以及“×” 组成。

3、使用场景
（1）操作后发生某些严重错误或者警告用户接下来操作可能出现的风险时使用。

（2）操作不可进行时；某些操作无法让用户进行时，应弹出警告消息对话框。

（3）操作不可逆时；例如删除命令，执行后再也不能复原，就应该在执行前使用对话框
进行再次确定。

对话框（任务对话框）
1、定义
用来临时显示与用户当前正在执行的操作相关信息的控件，通常与黑色背景遮罩搭配使用。

2、组成
一般由标题、内容、操作按钮以及“×” 组成。

3、使用场景
操作任务多或复杂时；当用户进行较复杂的任务时，应使用对话框嵌套控件，突出操作内容。

例如表单。

气泡确认框
1、定义
用来临时显示与用户当前正在执行的操作相关信息的控件。

通常在操作对象附近直接显示，不出现黑色背景遮罩。

2、组成
一般由内容、操作按钮以及“×”（大部分情况下没有，在气泡确认框外部点击即可关闭该确认框）组成。

3、使用场景
频繁使用的破坏性操作。

气泡提示
1、定义
用于对对象简短描述或补充说明的控件。

当用户将鼠标悬停在对象上时会自动显示，当鼠标移开对象时提示就会消失。

2、组成
一般由解释说明信息组成。

3、使用场景
轻量级的信息反馈。

例如，对某个对象简短描述或补充说明。

对象通常是链接文字或者是问号、感叹号图标。