现在说一下内容区域,分几块来说说,首先想说表格页面的设计。一个后台产品,特别是后台管理系统,肯定是有大量的数据的,那么数据我们通常用表格的形式来呈现。通过筛选,我们可以找到想要的数据。肯定有人会说这么弱逼的表格也能写文字出来,是啊,就算是弱逼的表格要做好也不容易,更何况不弱逼。
1.表格类型
对数据进行操作就依据表格数据的类型来进行判断了,因为表格有两种类型,一种是纯记录型表格,就只能查看,一种是设置型表格,可以进行增删改查和业务处理的相关操作。
2.表格组成部分
3.如何设置/选择表格元素
关于表头的选择,我们需要站在用户的角度上思考,去辨别哪些是用户觉得重要的、关心的元素,以简洁文字作为表头,进行展示。在做好之后,跟用户进行确认,基本上也是八九不离十的,这个就是所谓的以用户为中心吧(说这句话特没底气,原理就是这样的,哈哈)。
4.表格的基本布局
5.视觉优化
可以参看xmind上面的内容,我只是对于以下的几点有感触
5-1分割线处理
如果我们正确的使用好分割线,就可以实现表格行与列的强调。邮箱产品就是强调行的表格设计的典范,像Gmail、Yahoo Mail、126邮箱,这些表格没有纵向的线条,用横线构架出行的视觉,数据信息均匀分布,更强调每一行内的信息连续性,不强调行与行的数据对比情况.
5-2对齐规则
虽然也有居中对齐和右对齐等方式,但现在最常用的还是左对齐,比较符合阅读从左到右的习惯,而且单元格的对齐理应保持一致,不能文本左对齐,而数字是居中对齐,这样表格给人的整体感觉很混乱。
5-3空白格的处理
空白单元格会造成用户的困惑,可用短横线代替
5-4不使用斑马线
之前我们系统的表格就是使用的斑马线,其实从视觉上反而容易让人花眼,至少我是这么觉得。鼠标悬停在某一行时,可以有一个背景色进行区分,其他的就真的多余了。
6.筛选设计
现在来谈谈表格外部元素的一些设计了,其中关键字搜索和条件筛选是比较常用的。
6-1关键字搜索
肯定是模糊匹配哈,否则加大用户的记忆成本。并且建议告知用户搜索的内容,比如订单ID、商品名称等等,不会让用户摸不着头脑。可以实时搜索,也可以点击触发搜索结果。这里我想说的是在这个项目中,我们的表格上面都是筛选,然后有一个按钮叫做搜索,每次用户输入关键字或者是选择了条件,点击搜索,才能出现搜索结果。后来觉得点击按钮在某种场景下没有直接敲回车方便,比如在只输入了关键字之后,用户还要把手从键盘上挪开,再去点鼠标,一次还好,次次都这样,你说你会不会被骂。
6-2条件筛选
通过tab来切换表格,以表格的状态为单位的比较常见,不宜太多。下拉选择在选项数量上没有那么受制约,通常默认情况下都是全部。
结束语:目前就感受了这么多,后面如果有更多的经验以及看到相关的干货会陆续更新,奉上完整的脑图