作为一名后端开发工程师，没有资格评说UI规范。不过看管了后端侧管理类的系统，没吃过猪肉，也见过猪跑了。这里就抛砖引玉了。欢迎多多交流指教。

📖 整体排版

这是用户的第一印象。一定要把握好，不然用户在看到第一眼，就不会再第二次打开了。现在市面上这种后端系统很多，可以多多参考看看有些的后端管理系统页面。注意诸如行间距呀，一列布局、两列布局、三列布局呀。也要考虑用户可能使用的浏览器尺寸。在开发时，就可用浏览器不同尺寸先试试视效如何。

avue-cli

🌌适配手机、平板、pc 的后台开源免费模板。

ruoyi

🚀完全响应式布局（支持电脑、平板、手机等所有主流设备）

- name: avue-cli
  desc: 🌌适配手机、平板、pc 的后台开源免费模板。
  bgColor: '#F0DFB1'
  textColor: '#242A38'
  link: https://gitee.com/smallweigit/avue
- name: ruoyi
  desc: 🚀完全响应式布局（支持电脑、平板、手机等所有主流设备）
  link: https://gitee.com/y_project/RuoYi-Vue
  bgColor: '#DFEEE7'
  textColor: '#2A3344'

🎨 用户体验

用户体验其实一个大范围，这里我主要是想表达开发细节。就是开发人员自己代入用户使用的场景。比如，进入页面时，有个欢迎页。数据需要时间渲染时，增加人性化的loading，没有数据或404时，呈现一些人性化，诸如诗词、俏皮话来一句。让用户也能提点兴趣。不是无数据或者请重试这种干巴巴的表述。

情感化设计

让人情绪有所触动

使用动效

好玩儿又可爱的404页面

图形化

用小图标所寻找的内容并不在此。

提供选择

为他们留下了足够的选择

- img: /dev/20/1.png
  link: https://www.digitaling.com/articles/17156.html
  name: 情感化设计
  desc: 让人情绪有所触动 

- img: /dev/20/3.gif
  link: https://www.digitaling.com/articles/17156.html
  name: 使用动效
  desc: 好玩儿又可爱的404页面

- img: /dev/20/2.png
  link: https://www.digitaling.com/articles/17156.html
  name: 图形化
  desc: 用小图标所寻找的内容并不在此。

- img: /dev/20/4.jpg
  link: https://www.digitaling.com/articles/17156.html
  name: 提供选择
  desc: 为他们留下了足够的选择

🍰 组件

现在后端系统的前端页面基本都是single-page页面，基本都是使用element-ui、xxx-admin这些，所以在定义弹出框、或者抽屉栏的时候，可以统一长宽，弹出方式呀。是否允许ESC退出呀统一好。否则各个模块，不同的人开发可能导致不同的操作逻辑。比如：pop-up在新增这种相对比较重要的表单，用户输入完，不小心点了下其他地方消失了。如果还是身份证，电话号，外加验证码这种。可以想象用户的表情吧😠😡👿👊。

提示

使用pop-up drawer组件时，先在本地提前封装一套，可以使用参数传递的方式使用。避免临时参数调整，全局检索的窘境。

📝 文字统一

整个系统的话语描述统一：比如统一创建成功、编辑成功。而不是一会新建成功，一会创建成功、一会新增成功。

提示

可以统一将这些话术提前定义成const，使用的时候，直接引用即可，避免之后修改麻烦以及全局不统一的尴尬局面。