常用中后台交互设计控件使用场景与规范总结

honghu2

经常使用中后台交互设计控件利用场景与规范总结

近来刚完成平台安畅云 2.0 的改版设计，平台模块不少，常常存在不少雷同的页面和组件，若不制订同一的规范和控件，则会致使不少反复的事情，大大低落产物的设计效力；同时，平台的一致性也得不到保障。

以是，咱们视觉、交互、前真个小火伴们针对咱们踩过的坑，大师当真总结和提炼出一个合适公司定位的设计规范，同一公司项目标前端 UI 设计，规避不需要的设计差别和实现本钱，实现设计和前端资本的效力最大化。

此设计规范重要分享了中后台经常使用设计组件的界说、构成、利用场景及注重事项。
字体概述
字体是界面设计中最根基的组成元素之一，用户经由过程文字来理解内容和完成使命，符合的字体将大大晋升用户的浏览体验及事情效力。在安畅云项目标字体利用中，为了使页面的视觉条理加倍清楚，咱们从如下三方面来使平台的字体合适易浏览和雅观的请求。
公道的利用分歧的字重、字号和色彩来夸大界面中必要凸起的信息；尽可能利用单种字体，利用多种字领会让界面看起来零星和横七竖八；遵守 WCAG 2.0 尺度（尺度详情见 ），字体在使历时与布景色彩的比拟值知足无停滞浏览的最低尺度。字体利用建议中文字体优先级：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其中文字），致使视觉呈现问题时，建议改用链接文字。当按钮嵌在文本中时，应当用链接文字；当号令是次要时，应当用链接文字。当号令是很通例的操作（如删除、编纂等），且图口号义很是轻易理解时，可使用图标作为操作按钮。按钮类型及状况按钮类型重要有：主按钮、次级按钮、鬼魂按钮和线框按钮。按钮状况重要有：正常、悬浮、点击、加载中和禁用。按钮中的文本标签应当足够简便和易懂，而且凡是是一个动词。若是点击按钮后不会当即相应，理当切换为加载状况；加载状况下不克不及点击。

利用场景
一、主按钮

当必要凸起或必要夸大时利用它；凡是环境下统一模块只容许有一个重要按钮。

二、次级按钮

当已存在重要按钮后还必要再凸起时利用它；次级按钮权重比重要按钮低、比鬼魂按钮高。

三、鬼魂按钮

鬼魂按钮几近合用所有场景，是所有按钮中最根本的按钮。

四、线框按钮

权重性较低，重要用于添加附件等场景。

五、多按钮组合

当某条数据同时存在多个操作时，建议利用主按钮样式折叠显示，以下图：


输入框界说与构成界说：用于显示、输入或编纂文本、数值操作所利用的控件。构成：一般由标签、必填项符号（按照营业需求而定）、输入框和状况反馈构成。
3种常见情势（状况反馈放在输入框下面仍是后面，视排版空间而定；一般环境下，弹窗中表单输入框毛病状况反馈放下面，新页面表单输入框毛病状况反馈放后面）


输入框状况

输入框类型及利用场景
一、单文本框（当输入的字符长度跨越文本框固定的宽度时，须包管最后输入的字符显示出来）

（1）平凡文本输入框

比方，昵称、名称等填写。用户依照法则请求输麻豆入便可，输入毛病时呈现毛病状况反馈提醒；输入准确给出准确状况反馈提醒。

（2）暗码输入框

为了平安性起见，用户输入暗码时，默许暗藏处置（同时供给“显示暗码”和“暗码增强计”功效）。同时需遵守暗码的法则请求，状况反馈提醒同平凡文本输入框。



（3）数字输入框

建议给出输入框的同时，可让用户对数字举行微调的功效。对付雷同固定德律风填写，建议将区号与主体号码分隔填写，中心用“—”离隔。



二、多文本框
当用户必要输入或编纂长字符串时，请利用多行输入框。比方，备注、描写和定见建议等的填写。使文本控件的高度足够大，以便容纳典范的输入。不要让文本输入控件在用户键入时增长高度；若是输入内容跨越控件高度时，建议在框内呈现转动条。

对话框＆气泡确认框＆气泡提醒＆通知对话框（动静对话框）
一、界说

用到临时显示与用户当前正在履行的操作相干信息的控件，凡是与玄色布景遮罩搭配利用。

二、构成

一般由题目（无关紧要按照详细场景而利用）、内容、操作按钮和 “×” 构成。

三、利用场景

（1）操作后产生某些紧张毛病或告诫用户接下来操作可能呈现的危害时利用。

（2）操作不成举行时；某些操作没法让用户举行时，应弹出告诫动静对话框。

（3）操作不成逆时；比方删除号令，履行后再也不克不及回复复兴，就应当在履行前利用对话框举行再次肯定。


对话框（使命对话框）
一、界说

用到临时显示与用户当前正在履行的操作相干信息的控件，凡是与玄色布景遮罩搭配利用。

二、构成

一般由题目、内容、操作按钮和 “×” 构成。

三、利用场景

操作使命多或繁杂时；当用户举行较繁杂的使命时，应利用对话框嵌套控件，凸起操作内容。比方表单。


气泡确认框
一、界说

用到临时显示与用户当前正在履行的操作相干信息的控件。凡是在操尴尬刁难象四周直接显示，不呈现玄色布景遮罩。

二、构成

一般由内容、操作按钮和 “×”（大部门环境下没有，在气泡确认框外部点击便可封闭该确认框） 构成。

三、利用场景

频仍利用的粉碎性操作。


气泡提醒
一、界说

用于对工具简短描写或弥补阐明的控件。当用户将鼠标悬停在工具上时会主动显示，当鼠标移开工具时提醒就会消散。

二、构成

一般由诠释阐明信息构成。

三、利用场景

轻量级的信息反馈。比方，对某个工具简短描写或弥补阐明。工具凡是是 链接文字或是问号、感慨号图标。


通知
一、界说

全局展现通知提示信息。凡是在体系右上角显示。

二、构成

一般由通知提示信息构成。

三、利用场景

（1）用户的操作反馈提醒。比方操作失败、乐成、体系正在履行某操作等。

（2）体系自动推送的动静。


单选控件界说
只能在一组相干但相互排挤的选项当选择，且只能选择一个有用项的控件（包含通用单选控件和自界说单选控件）。
示例
（1）通用单选控件



（2）自界说单选控件（此处仅罗列一种样式，其他样式视详细场景而定）


单选控件5种状况

单选控件利用场景及注重事项
（1）被选项数目 ≤ 4时，一般利用单选控件；选项数目大于4个时建议利用下拉控件。（终极利用单选仍是下拉控件，按照页面空间巨细而定）

（2）当有举荐选项或是用户经常使用选项时，建议默许选中。（若默许项对用户选择发生滋扰，则不要默许）

（3）若用于对峙相反的选项且只有两个选项时，比方赞成、分歧意，这两个选项应当整合为一个复选控件而不是利用单选控件。以下图：



（4）单选控件建议以逻辑次序分列选项，如从当选到的可能性从高到低、从小到大、操作难以度从简略到繁杂、危害水平从低到高档。
复选控件界说
在两个相对峙选项之间举行选择或是能选择多个有用项的控件（包含通用复选控件和自界说复选控件）。
示例
（1）通用复选控件



（2）自界说复选控件（此处仅罗列一种样式，其他样式视详细场景而定）


复选控件5种状况

复选控件利用场景及注重事项
（1）当有举荐选项或是用户经常使用选项时，建议默许选中。（若默许项对用户选择发生滋扰，则不要默许）

（2）若用于对峙相反的选项且只有两个选项时，比方赞成、分歧意，这两个选项应当整合为一个复选控件而不是利用单选控件。以下图



（3）复选框标签文本是对选中时的状况描写，未选状况的寄义必需与选中状况明白相反。
下拉菜单界说
当页面上元素或操作较多时，用以收纳这些元素或操作的控件。
示例
（1）下拉菜单—下拉框：



（2）下拉菜单—下拉浮层：


下拉框状况


下拉框利用场景及注重事项：

（1）当页面上的元素或操作较多时，用此控件收纳元素或操作。点击或移入触点，会呈现一个下拉菜单。可在列表中举行选择，并履行响应的号令。

（2）当下拉选项中包括鼓动勉励用户的可选项或大部门用户经常使用选项时，则可斟酌供给默许项。

（3）当下拉选项很是多时，需鄙人拉框中参加搜刮功效，便利用户选择。



（4）当下拉框中标具名符跨越最大宽度时，过剩的字符用“…”显示，鼠标移入此选项时，用气泡提醒全数显示。
下拉浮层状况


下拉浮层利用场景及注重事项：

（1）当页面上的元素或操作较多时且视觉条理弱于下拉框时，用此控件收纳元素或操作。凡是鼠标移入触点，会呈现一个下拉浮层。可在列表中举行选择，并履行响应的号令。

（2）在浮层开展时，三角形图标顺时针翻转且同时酿成赤色；浮层收起时，三角形图标逆时针翻转且同时由赤色变成默许色彩。
翻页控件界说
一组供给翻页功效的按钮。
示例
（1）比力完备的版本（详细情势需按照营业需求而定）



（2）简化版


翻页控件状况（以例1做阐明）

翻页控件利用场景及注重事项
当加载或衬着所稀有据将耗费不少时候时，建议利用翻页将数据分为几部门加载。
时候拾取器界说
为用户供给时候选择或日期选择的控件。
示例（其他情势按照本身需求而定）
（1）选择时候



（2）选择日期


时候拾取器利用场景及注重事项
当用户必要输入一个时候，可以点击尺度输入框，弹出时候面板举行选择。
数目控件界说
用于数目选择的控件。
示例
（1）微调数目控件



（2）下拉数目控件


数目控件利用场景及注重事项
（1）当在持樱桃交友续且较短区间，通常是 10 之内取值时利用微调数目控件。

（2）微调数目控件也支撑数字直接输入，默许数目为1，当数值为1时，削减按钮禁用。

（3）当非持续、取值范畴较大的场景时利用下拉数目控件。下拉数目控件不支撑数字直接输入，体系按营业需求法则默许一些数值供用户选择。

（4）为了页面连结一致，若阁下有其他下拉控件时可斟酌把微调数目控件如下拉控件方法利用。
Tab选项卡界说
在页面内切换内容的功效控件。
Tab选项卡状况

Tab选项卡利用场景及注重事项
各选项卡内容模块之间是互相自力的，依照模块内容首要性和用户利用 频率畴前日后分列。
滑动条界说
展现当前值和可选范畴的滑动输入器。
滑动条类型

滑动条利用场景及注重事项
持续数值型滑动条一般数值以较小变量变革，建议在厥后面增长自界说数值输入框，便利用户切确输入。
加载控件界说
用于反馈必要2秒以上才能完成的体系过程的控件。
常见类型

加载控件利用场景及注重事项
（1）模块或正文初始内容加载、表单提交按钮提交后的加载、滚屏加载、加载更多等用通用加载控件。

（2）官网中产物展现图初始化加载时利用图片加载控件。

（3）上传大文件 / 加载必要较久时候的文件，利用显示进度的加载控件。

（4）官网专题页鼓吹时，必要共同主题的加载利用自界说加载控件。

临时先总结这么多，不足的地方请大师多多指教。同时，但愿能和大师一块儿交换，一块儿前进。

作者：潘达，小我公家号：潘达设计小站，接待勾结

本文由 @潘达 原创公布于人人都是产物司理。未经允许，制止转载