前言

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