讲解后台管理系统之列表设计分享
我们大家都知道，在后台管理系统中列表设计一直是重中之重，因为它承载了用户想看、重要且关键的业务信息，所以设计时要格外注意信息降噪，让用户能够快速找到想看的信息，切勿盲目摆放，这里我也收集了一些注意的点，希望日后可以拿来借鉴使用，非本人原创~
1、列数控制
5-9列最宜，如果列数太多，一是会出现横向滚动条，操作浏览体验差；二是信息太多会造成视觉和记忆负担，不便于阅读。所以优先展示重要的数据，将次要的数据隐藏，并提供详情按钮。
2、自定义列数
用户角色不同，关注的点也会不同，全部显示总会造成部分信息的冗余，提供自定义列数的功能可解决这一问题，让用户可以自定义显示属于自己的管理列表。
3、精简表头
有的管理列表表头名称命名较长，甚至远远超过了展示信息的长度，造成信息显示不均衡，也限制住了可展示信息列项的数量，所以对表头命名一定要简洁，简洁到少一字不可的程度，但也不要忘记要清晰易理解。
那万一就是简洁到少一字不可的程度，名称还是很长，怎么办？不妨设置专有名词，并做解释说明即可。
4、去掉不必要的斑马纹或分割线
有的同学可能想通过斑马纹或竖向分割线来划分信息，但是如果满屏的斑马纹或竖线，就会造成视觉疲劳，目的是清晰的划分信息，不妨通过对齐或间距对齐来实现，设计极简样式。
5、去掉不必要的装饰或颜色
有的同学可能想通过装饰或颜色来突出重点信息或操作，还是那个问题，如果满屏的颜色就会造成视觉疲劳，操作列使用习惯的蓝色字体即可，状态可以用一个小小的带颜色的原点代替即可，这样看上去就比较简洁直观，所有都突出就突出不出重点来了。
6、信息对齐方式
列表里的信息对齐方式还是要重视一下的，对不齐或无规律对齐，都会对阅读体验造成伤害，一般标题和内容是左对齐的，方便浏览；数字是右对齐的，可以快速通过长度区分数字大小（注意：数字格式要一致，比如都保留两位小数或都是整数不保留小数位）；操作是右对齐的。
7、不做无意义留白
没有数据显示的，用“-”代替，数据为0时，显示“0”；如果不显示，就会对用户造成迷惑，是没显示出来还是怎么着了，所以尽量不让用户去猜去思考。
8、收起低频操作项
对列表信息进行管理，免不了会进行各种操作，最常见的就是增删改查，如果再有其他操作，光操作一栏就会占据列表的半壁江山，设计列表的目的还是首先展示信息，然后才是对信息的反馈操作，也不是所有操作用户都会经常用到，针对低频操作可以考虑隐藏，用户点击更多时可选择即可。（当然了有的设计师可能说用图标就行，不占地方，那也是可以的，但是图标设计要有可读性，图标代表含义应清晰易懂）
好了，今天就先总结这8个点，虽然点很小，一看就明白，但确实在设计时经常忽略，希望在设计的时候，把这些点牢记于心，总会发挥作用的，哈哈哈哈哈~
讲解后台管理系统之列表设计分享相关推荐
- (全栈旅行足迹地图打卡网站 0-1)-旅行足迹后台管理系统(足迹列表)-09(WebGIS Vue-js-go-mysql)
本节主要介绍旅行足迹地图打卡项目网站的后台管理系统,因为对于前端的足迹需要对它进行增删改查,然后直接在前端代码上修改可行,但是不适用,所以我们需要建立一个后台管理系统,就能更加方便的对足迹进行增删改查 ...
- 电商后台管理系统用户列表
目录 一 代码 1 新增 Users.vue 2 修改路由 index.js 3 修改 Home.vue 4 修改全局 global.css 二 测试 三 源码参考 一 代码 1 新增 Users.v ...
- 实验室网页以及后台管理系统(1)-表格设计和建表语句
实验室网页以及后台管理系统 一 display服务 1.news id headline link_pic news_time status 0 毫秒级!深度学习超快预测能源材料掺杂效应 https: ...
- 【餐饮】智慧餐厅原型模板，餐饮APP，餐饮后台管理系统，Axure设计餐饮APP
软件版本:Axure 8.0(兼容9和10) 作品介绍: 作品包括用户端.员工端以及商户管理(后台管理) 客户端: 外卖点餐:菜品列表.菜品详情.确认订单.地址管理.修改电话.支付订单 堂食点餐:扫码 ...
- 数据后台管理系统项目数据库表设计以及项目效果展示
1.数据库表设计,共分为两部分,第一部分为商品管理表,第二部分为用户管理表 具体表关系如下: 商品系列表: 用户系列表: 2.项目效果展示 (1)登录页面 (2) 总界面 (3) 用户管理 (4)角色 ...
- React后台管理系统-商品列表搜索框listSearch组件
1.商品列表搜索框 2.搜索框页面的结构为 <div className="row search-wrap"> <div classN ...
- 电商后台管理系统订单列表模块
一 代码 1 新建 Order.vue 组件 <template><div><!-- 面包屑导航区 --><el-breadcrumb separator-c ...
- [附源码]java毕业设计基于的花店后台管理系统
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- 3YAdmin-专注通用权限控制与表单的后台管理系统模板
3YAdmin基于React+Antd构建.GitHub搜索React+Antd+Admin出来的结果没有上百也有几十个,为什么还要写这个东西呢? 一个后台管理系统的核心我认为应该是权限控制,表单以及 ...
最新文章
- 「要拼就拼运维」5分钟一台？它让我爱上工作了！
- Nat. Mach. Intell.| 机器学习显著降低药物组合筛选成本
- selection does not contain a main type错误
- 浅谈netbios及其相关内容
- 京东「卖家日志」系统的构建 | 流式计算日志系统应用实践
- Hello Python程序演练
- lcx源代码以及免杀的研究
- 在SuSE10.1上安装Oracle10g
- sql并发 锁 优化思路_并发优化–减少锁粒度
- vue_devtools的安装及资源(chrome and edge上的安装)
- 使用UUID和int自增主键的区别
- 行政管理专业考计算机研究生分数,行政管理学，考研，历年分数线是多少？
- 【scratch案例教学】Scratch弹力球小游戏 scratch编程案例教学 少儿编程教案
- 动态桌面壁纸软件：iWall for Mac
- android 测网速方案,Android_检测当前网速
- pubwin操作记录
- AI绘画小程序图片转漫画SaaS多开
- 小木虫好中的ei期刊图像处理
- 线性代数系列（四）--解方程组
- win10无法连接到这个网络_网络打印提示：Windows无法连接到打印机，请检查打印机名并重试...