《万言堂》-后台表格

用户头像
杭州/产品设计师/8年前/1496浏览
《万言堂》-后台表格
用户头像
冯西

嘿嘿嘿

工作不久,有幸能够单独负责一个产品从0到1的过程,从刚开始的踌躇满志到中间的焦头烂额到后期增删改查,这个过程走的并不算胜利,在过程中给各位开发的同事带去了很多麻烦,所幸最后在大家的帮助下能够让产品顺利上线,在产品2.0之间,想把一些注意的地方写下来,发表出来也是为了更好的督促自己完整整理,把暂时别人没整理过的放前面,把总结别人整理过的放后面,总的来说表格作为后台设计的重要一部分,必然也是为了提升效率为目标的。



什么情况下使用表格

需要组织和展示大量信息数据,表格结构简单,分隔归纳明确,相同页面尺寸下能显示更多条目,且具有良好的数据延伸性,不会因后期数据的新增,而改变样式或降低可读性,特别适合组织和展示大量的信息内容,且易于用户浏览和信息获取。



使用表格对于数据的好处

批量的导入导出操作,将后台中的表格常与EXCEL表格作为批量导入导出的介质,用户很方便进行数据批量化操作.下面是我整理的几个方面。




1.固定编辑区域列目录

主要应用在有操作类目的表格;表格列目录过多,导致在某些尺寸的窗口下,自动隐藏了列目录,需要左右滚动才能查看被隐藏的内容,而一般设计都将列目录放在最后一列,这时候将固定最后一列,不会因为窗口尺寸的变化导致操作类目被隐藏。




2.列表内容扩展

因为后台本身追求效率,避免浪费时间,一般情况下不会做很多页面层级关系,所以经常采用在当前页“弹出”的动作,以下是几种弹出方式。

2-1.又爱又恨的弹窗,弹窗用在处理的事项级别较高且希望用户专注度较高,会全屏压黑以此区分弹窗内容(重弹窗),如增删改查以及随之而来的数据的保存更改较多使用,弹窗在后台来说一般来说压迫感较重,所以除了较重要的事项,没必要一次次冲击使用者弱小的心灵,为了降低这种压迫感或者说提醒事项没那么重要,而没有其他更好的方式的时候,也会采用只弹窗不压黑全屏的操作(轻弹窗);




2-2.悬停展示

在设计时,就已经知道该列内容较多,自动隐藏的概率较大,为了避免让界面看起来混乱,减少查看时受到其他内容的影响,对其统一隐藏处理,鼠标悬停或点击后展示内容;




2-3.侧滑展示

侧滑这个动作很大程度上是为了代替新页面的跳转层级的升入(把原来需要从这个页面跳到另一个页面的操作转为一个侧滑动作),它可以代替新页面的作用的基础上,不让原页面刷新,避免丢失数据,也避免页面跳转浪费效率。如果你处理页面的内容较多,又不想重新打开一个页面,没准可以往侧滑上考虑一下。




2-4.展开显示

想快速获取列表中某信息的其他附属信息




3.表格的基本元素“行与列”-清晰的空间对比

表格就是由一行行和一列列构成的,行和列的疏密节奏感直接影响了,查看数据的节奏感,偏向稀疏的行目容易应用在让人阅读单项内容即左右方向数据的阅读,缺少对整个表格的数据宏观掌控,偏向数据数据较少情况;而较密的行目容易有焦躁感,不易于左右方向上的数据阅读,主要应用在数据较大,作为查看异常数据即侧重上下上下数据的对比

3-1.行之间做分割处理,增强行条目的特性,引导用户进行左右方向的阅读,减弱竖向干扰;相比之下虽然卡片式对行目录的切分最为明显,但是切裂感过强不利于整个页面元素的统一,也容易造成页面空间浪费




3-2.列之间做分割处理,增强列条目的特性,引导用户进行垂直方向的阅读,减弱横向干扰,加强数据上下的对比




3-3.悬停变色作为动态视野,能够均衡打破原先布局产生的空间视野。




4.辅助筛选排序查找信息

表格可自带筛选功能,相比搜索条件有时候操作性、时效性更快更灵活




5.聪明的为你提供下一步

隐形操作(伴随操作,多用于用户进行上下操作相互关联的情况下),当鼠标悬停时或勾选才显示操作选项,虽然增加了用户首次学习的成本,但是能够减轻大部分时刻这些操作对用户的视觉干扰,对于追求效率的后台而言极为重要;如果不隐藏则需要愚蠢的提醒用户请先进行上一步,在我实际的设计中不敢随意使用,容易招来一些质疑,能看得到才心安




6.通用性灵活性—弹性化表头

后台用户可能是不同行业的用户,明对不同行业的情况提供表头增删改查,都不会对样式产生明显变化,具有极高的适应性



7.对齐,高效的信息获取方式

表格内的信息通过对齐,会更加规范易理解,给用户视觉上的统一感,且视线流动顺畅,能够让人快速的捕捉到所要的内容。文本信息左对齐,数据信息右对齐




8.填充空白单元格

空白单元格容易让阅读者产生疑惑,设计者要对空白单元格设定替代值




9.提亮重要信息,加快阅读效率

提高重要行或列的视觉层级,帮助阅读者快速找到重要的信息内容




10.列表可编辑

如果列表中的内容大部分都是支持修改和定义的内容,把操作直接放在列表中,一定程度上提升效率,但是十分容易导致误操作,在层级跳无可跳的情况下,可以考虑使用


28
举报
|
47
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
钱包ui模板
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI应用平面图标
我的钱包-UI界面设计-app
新能源APP应用UIKit
手表表盘UI系列
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】体育icon
3D渐变流体抽象矢量UI背景图
UI界面 组件
高级感金属拟物 UI设计组件库
高级表盘系列UI源文件
森系3D渐变流体抽象矢量UI背景图
智能家居中心 简约 UI设计组件库
新拟态风格 UI设计组件库
UI通用设计素材1
UI 登录界面设计模板包
【新年UI图标】礼物/活动icon
【新年UI图标】美食icon
户外旅行飞机情侣假日出行
【新年UI图标】积分icon
科技医疗透明柜UI界面设计
【新年UI图标】钱包icon
你可能喜欢
大家都在看
登录注册