干货 | 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）重要的反馈提示，用户一定要知晓。
看似常见、容易的输入表单，设计原则与技巧绝不仅限于本文所聊到的这些。要想提高表单使用者的体验，尚需自己多学习，多总结，多实践应用。
欢迎小伙伴加我的私人微信yw5201a1交流。
更多干货可关注微信公众号：chanpinliu880
帮你成长
我之前也创立过产品经理学习交流群，那个时候由于人数少，大家讨论也蛮积极的，但是微信群讨论的一大弊端就是无法将谈论的知识提炼出来，干货内容渐渐被口水话淹没，所以我建立了一个知识星球（原小密圈），在这里我会分享自己的思考感悟，你有问题可以随时像我发起提问，同时别人提的问题你也能看到，更重要的是你不论什么时候看这个回答它都在！
同时大大老师以后所有的live，小密圈的同学都可以免费学习。
为了更好的服务知识星球的小伙伴，大大老师将会在知识星球发表一些干货文章和音频供大家学习，当然这些内容公众号是没有的。
知识星球规则：
1、费用：为了保证社群的质量和活跃度，需要先付款99元，签到后会返还。
2、返还费用：连续签到3天返还30元，连续签到5天返还50元，连续签到7天返还70元。
下图是返还凭证：
2、签到形式：可以是你的产品感悟，也可以是你学习中遇到的问题，也可以是你回答别人问题。（把你的感悟记录下来，把你遇到的问题提出来，帮助解决别人遇到的问题，这个过程就是成长，切记不要潜水，好歹你也是付费进来的）。
3、奖励：每周抽取最活跃的用户，（提出的问题+发表的产品感悟+回答别人问题）总数最多，即有可能获得现金红包、PRD文档、面试简历模板、原型文件等不同奖励形式。
奖励凭证：
邀请5个小伙伴加入，则本人加入的费用免除，并同时获赠68元现金奖励，当让为了保证群质量，邀请的小伙伴需要付费加入。
4、广告：社群内禁止发广告，否则即使付费，也要被T出去，如果想发广告，加入上课群，并红包走起，想加入上课群，加微信yw5201a1，拉你入群。
之前付费进入产品经理学习群的小伙伴，可以加微信（yw5201a1），免费拉你入群。
长按下方二维码加入我们吧！
送福利：截至下周一评论区点赞数最多的前5名，可以找我（加微信yw5201a1）领一份私密课干货视频，视频内容任选哦！
往期精彩文章
点击“阅读原文”
即可进行报名。