B端后台表格设计怎样提升用户操作效率?

用户头像
杭州/UI设计师/71天前/502浏览
B端后台表格设计怎样提升用户操作效率?
文章采用案例为个人原创商业作品,请勿侵权
做B端数字化后台这么久,表格是出现频次最高的组件。不少新人设计师把重心放在样式美化上,却忽略表格本质:方便用户快速检索、筛选、批量操作。整理几个项目里验证的经验分享给大家:
1.列宽不要统一均分
根据内容长短自适应分配宽度。比如编号、状态列窄一些,单位、备注栏预留充足空间,避免文字大量折行和省略。
B端后台表格设计怎样提升用户操作效率?(图ZMTU4MjYwMDA=) - 教程 - 站酷设计师如是B端设计研习原创素材 - 站酷ZCOOL
收藏
2.区分普通文本列和操作列
操作按钮不要堆砌过多,优先保留高频功能;次要操作收纳到更多下拉里,表格界面不会拥挤杂乱。政企系统尤其忌讳界面按钮密密麻麻。
B端后台表格设计怎样提升用户操作效率?(图ZMTU4MjYwMDQ=) - 教程 - 站酷设计师如是B端设计研习原创素材 - 站酷ZCOOL
收藏
3.重视状态标识规范
启用、停用、待审核、异常这类状态,统一配色体系,全项目保持一致。不要想到一个颜色就用一个,用户看多了容易混淆。
B端后台表格设计怎样提升用户操作效率?(图ZMTU4MjYwMDg=) - 教程 - 站酷设计师如是B端设计研习原创素材 - 站酷ZCOOL
收藏
4.合理搭配分页
数据量大的表格,一定要加分页组件,不要一下子加载所有,从而减少页面加载时长。
B端后台表格设计怎样提升用户操作效率?(图ZMTU4MjYwMjQ=) - 教程 - 站酷设计师如是B端设计研习原创素材 - 站酷ZCOOL
收藏
5.谨慎使用行内编辑
内网政企系统硬件参差不齐,行内编辑容易出现卡顿。大量修改需求,优先弹出编辑侧边栏或者弹窗。也可根据账号权限增减弹窗内可编辑的项。
B端后台表格设计怎样提升用户操作效率?(图ZMTU4MjYwMjg=) - 教程 - 站酷设计师如是B端设计研习原创素材 - 站酷ZCOOL
收藏
6.文字左对齐、数据右对齐
切忌全部统一左对齐。大量财务、数据后台,数字右对齐方便用户读数,B端数字化项目一定注意这点。
B端后台表格设计怎样提升用户操作效率?(图ZMTU4MjYwMzI=) - 教程 - 站酷设计师如是B端设计研习原创素材 - 站酷ZCOOL
收藏
7.待处理 / 未完成优先置顶
默认列表视图中未完成行放最上方,并配合排序按钮,当用户手动自定义排序(按创建时间 / 更新时间)时不能强制置顶,遵循用户选择。
B端后台表格设计怎样提升用户操作效率?(图ZMTU4MjYwNDQ=) - 教程 - 站酷设计师如是B端设计研习原创素材 - 站酷ZCOOL
收藏
8.操作功能中的文字按钮
表格中的“编辑、导出、修改、详情、删除”等文字按钮,删除按钮用醒目的红色区分,并且增加弹窗二次确认,其余按钮使用主题色。
B端后台表格设计怎样提升用户操作效率?(图ZMTU4MjYwNDg=) - 教程 - 站酷设计师如是B端设计研习原创素材 - 站酷ZCOOL
收藏
如果你有收获,请帮忙点个赞啊,文中若有表述不妥之处,欢迎大家指正交流,谢谢啦!
5
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】30个图标
钱包ui模板
3D渐变流体抽象矢量UI背景图
UI通用设计素材1
新能源APP应用UIKit
智能家居中心 简约 UI设计组件库
【新年UI图标】会员icon
【新年UI图标】体育icon
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】钱包icon
拟物风质感写实UI卡片合集源文件
【新年UI图标】礼物/活动icon
【新年UI图标】秒杀icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
新拟态风格 UI设计组件库
高级表盘系列UI源文件
我的钱包-UI界面设计-app
UI界面 组件
【新年UI图标】汽车icon
3D卡通UI界面图标可爱插画免扣素
手表表盘UI系列
【新年UI图标】旅行icon
盲盒APP UI设计
高级感金属拟物 UI设计组件库
你可能喜欢
相关收藏夹
大家都在看
登录注册
微信小程序设计与开发
站酷设计服务
¥200起