干货 | web端后台设计规范和表单控件大汇总
转载至涵小仙女
连续做了几个后台系统，总结了一下web端后台设计规范和表单控件，方便以后原型绘制过程中能直接复用，留更多的时间思考业务逻辑，提高工作效率。
一、导航
导航存在三种呈现方式：水平、垂直、混合。导航的作用就是告诉我们这个系统有哪些内容，当前我们在哪，可以做哪些事情。
1.水平方式
主栏目是水平的，次栏目悬浮时展开，一般排列形式如下：
水平方式栏目长度受限，栏目数目不宜过多，拓展性不强。适用于业务简单，栏目较少，轻操作的系统。
2.垂直方式
栏目是垂直的，一般排列形式如下：
垂直方式层级拓展性强，可支持多个栏目，但减少了内容展示区宽度，易受客户端显示器影响。适用于有一定度复杂度，需要频繁切换栏目的系统。
3.混合方式
主栏目和次栏目水平与垂直结合，一般排列形式如下：
混合方式层级与栏目扩展性强，适用于量级大、模块多且复杂度较高的系统。
二、表单
表单在系统中主要负责数据采集功能，用户需要填写输入数据并且提交到数据库，通常由标签、输入项、填写提示、提交按钮等多种元素构成。
1.如何排列是最优的？
国外设计研究员mattero penzo做了眼动实验，如果将label放置在input框上面，眼睛扫描表单速度会更快。但web端水平空间大，采用垂直方式无疑会浪费水平空间，综合看的话，标签右对齐、输入区宽度统一更美观。
2.表单控件
控件通常分为输入前、输入中、输入后三种状态。
输入前需要考虑该控件是否必填、输入提示、输入值的格式要求、输入值范围、是否需要配置权限等。
输入中要考虑字数是否超限等。这里提一个问题：如果用户输入的字符超过了限制，是直接限制超过部分无法继续输入；还是能继续输入，但是给出明确的超出提示？
通常，如果需要输入的是手机号等固定位数的数字信息，可以做成超过部分无法再继续输入，这样可以防止用户出错；如果需要输入的是文字信息，那么就需要考虑到用户可能会先输入或复制多于规定的内容，然后再进行编辑到符合规定的字符数，这样就需要让用户可以输入多于规定的字符数，但是要在已输入的字符数部分给予明显的提示。
输入完成要考虑字段唯一性等校验规则。
现在以几个例子来说明，更多的表单控件可以参照ANT Design。
Input文本框
文本输入，以字符串的方式提交到数据库。
InputAutocomplete 短文本联想
文本输入，在输入过程中会联想匹配文本选项，并以字符串的方式提交到数据库。提供联想匹配文本，减少用户输入成本。
Radio单选组件
单选按钮适合选项低于5个且必须为单选的场景，该控件重要的是要给一个默认值，减少用户输入成本。
3.分模块
一个页面上如果控件过多，分模块的排版方式让用户感觉更好，不是密密麻麻一大片，有条理。用户可以在填写好一段内容后进行心理上停顿休息，减少视觉疲劳和心理压力。
4.分步骤
字段较多的表单，又有着明确的操作先后关系，可以选用分步骤，每屏仅展示该步骤下的表单输入控件，同时校验反馈也可分步进行。
三、按钮
按钮主要注意颜色区分，不同颜色一般会表示不同的含义。
四、反馈
反馈指用户做了某项操作，系统给用户一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。分及时校验、局部校验和全局校验。
较为常见的即时校验反馈，比如根据输入字符数量显示密码强度，从而时刻提示用户当前密码强度是否符合要求。
局部校验多用于分模块的表单中，每个模块完成后就来一个局部校验反馈，没有问题继续下一个模块的填写。
以下是常见的反馈交互样式。
1.输入项附近提示
在表单这一节中，即控件的完成状态，一般有控件下或后文字提示或浮窗提示。
2.toast提示
用户操作，出现toast提示 ，一般顶部居中，2-3s自动消失，是一种不打断用户操作的轻量级提示方式。通过toast中的提示语告知用户需要了解的信息，让用户的行为在使用过程中得到反馈和帮助。
toast消息提示分四种：常规、成功、警告、失败。
3.alert警示提示
当用户进行某种操作时，网站会出现对应的警告信息提示用户，始终展现，不会自动消失，也可点击关闭。
alert警示提示的消息分类一共有三种类型：成功类、警告类、失败类。可以带有删除操作也可以不带删除操作。
4.dialog对话框
用于提示用户当前操作，或是完成某个任务时需要的一些其他额外信息。
通常用于：
1）用户在进行重要操作时，需要进行二次确认，比如删除。
2）重要的反馈提示，用户一定要知晓。
看似常见、容易的输入表单，设计原则与技巧绝不仅限于本文所聊到的这些。要想提高表单使用者的体验，尚需自己多学习，多总结，多实践应用。
关注公众号：Aaron聊产品（ID：Aaron-notes）
