UI以及交互体验规范

前言

PC网站

公共的要求：

1. 同一个方向上，有且只能有一个滚动条，比如横向/纵向；
2. 对于表格类型的视图，需要限制表格的最低高度，但不用限制表格的最高高度，避免表格仅展示一两条数据的情况；
3. 对于使用的七牛云的图片资源，都必须使用filter过滤器来将图片展示缩略图，避免图片加载慢；比如图片链接应该是追加参数展示的：
   https://img2.zhidianlife.com/temp/cy/shop/2022/01/21/84eda732-4bc0-41c4-a48d-88fdcaabc687.jpg?imageMogr2/thumbnail/480x480!/quality/50
4. 对于公共的协议、隐私等协议的说明，均放到单独的1⃣️html文件中来维护，加快访问速度；

一、WEB后台管理系统

1.1、所有的后台操作菜单，都必须有面包屑视图功能效果如下：

上述这里的首页、订单管理均可点击

1.2、 对于有列表、详情功能的页面，列表界面，统一展示一标题即可，带色块的标题，效果如下：

而对于详情页面的标题，需要在正中间展示一标题，并在右侧提供返回至上层页面的按钮视图，效果如下：

且在详情页面中，如果内容是有分区域展示的话，那么需要提供一色块+标题，将内容给包裹起来，效果如下：

详情页面中，若有针对整个详情的操作功能，比如发货，退货等一系列整单操作的功能，需要采用一悬浮在底部的按钮容器，统一存放对应的按钮，效果如下：

1.3、针对列表型的页面，一般是上表单，下列表视图，有以下几点需要注意：

• form表单
  • 所有的form-item都必须有label说明，label的长度为100-120之间
  • form中的form-item都必须是inline格式，避免因为屏幕尺寸不够导致的布局混乱
  • 所有的查询、重置、刷新、导出按钮动作，均作为同一个form-item中来包裹
  • 所有的新增、发起等按钮动作，均另外起一行来展示
• table表格
  • 操作栏：按钮，都必须是a标签或者是button，多个操作之间以*灰色的|*分隔符来分开
  • 表格的每一行都是斑纹相间展示，提供统一的border边框，加载数据的时候，必须有对应的loading效果
  • 对于有分页的表格，每次查询20条数据
  • table列的宽度，应当按照实际情况进行展示，尽量是一行展示完整，对于特殊的需要做下处理，但一定要确保看到所有的信息，当出现不够宽度内容的时候，需要将操作栏给固定在最右边

二、WEB商城端

2.1、前提条件

• SEO支持，采用NUXT框架开发的服务端渲染框架；
• 由于需要兼容到大部分浏览器，根据之前实际项目，可采用rem响应式布局的方式；

H5网站

• 目前统一采用的有赞的vant-ui框架，后续其他的所有页面，均采用此框架；
• 统一采用rem布局，配合三方px2rem插件，完成自动转换机制；

验收协助工具

• 所有的内容都必须可视，发布测试数据时，需验证数据比较多、图片比较多、屏幕比较小的情况，可配合谷歌chrome插件：Resolution Test插件来验证界面展示问题，这个插件可以用来验证在不同屏幕尺寸下的界面效果
  附加该插件的下载地址：点我下载插件
• 对于需要切换不同角色不同账号来回测试系统，建议安装对应的软件，来多开，并长期持有维护进来，对应的下载链接地址是：饼干
• 对于需要在手机终端上看对应的效果的，可以配合使用谷歌chrome插件：mobilefirst来对应验证，对应的下载链接是：mobilefirst