2021-1-20 前端达人
作者：蓝蓝
表格，是一种最常见的信息组织整理手段，常用于信息收集、展示、数据分析、归纳整理。
UI软件设计中最常用、最基本的是表格的设计，有些软件中80%都是表格类页面，可以说，设计开发的是否易用，很影响口碑和用户的使用感受。基础的东西一定要做好，就像我们吃的主食一样，虽然都是米和面，但是各地出产各种品种口味都不相同，要根据食客的喜好选择、烹饪。今天就聊一聊最基础的表格设计、变化和常见问题。
一、基础的表格设计美化
基础的表格可变化的地方很少，可以根据当前软件开发选择的框架控件（ext/vue/jequery不同框架会有一些不一样）做色彩和风格的变化，如：加表格不同粗细的线、斑马格，中间无竖线种种的设计，有的表格需要标题很突出，有的内文突出，这就和内容焦点相关了。
为了操作直观便捷，在操作区放一些图标“删除、编辑、审核”，配合文字来使用，有的把操作类的图标放在最左边，有的放在最右侧，按行业用户习惯而定。
可以用固定表头（标题位置不变），允许用户排序，单元格内有很长的文字，设定最大字节，多内容用……替代避免转行，有小数点的数字右对齐，每列的大小可调整，这些也是设计开发中可以做好的细节部分。
二、特别宽的表格怎么设计？
有的表格的宽度，达到了屏幕的两屏和三屏，出现宽宽的横向滚动条，又有长长的竖向滚动条，但工作的人又必须看，可烦人了！很多软件都因为这个原因被吐槽。下面就介绍三种方法解决这个问题：
方法一
如果表格的标题是可以定制的，允许省略的，可以从业务角度取舍去掉无关紧要的，不常用的内容，把这部分放在点开的详细页内容中即可。这就像一个房间的断舍离：挑选、丢弃、分类、收纳，思考哪些物品是不要的，哪些是必不可少的？哪些是可有可无的？依次排序放在顺手的位置，ui设计的道理也是相通的。
方法二
如果表格里面的内容是确定的，不可省略的，比如银行的报表就是这么长，这么多，那我们就可以从设计的角度来优化，做一个加高版的表格。
表格为什么一组信息只能一行呢？完全可以一组三行四行，在组中进行重点信息，非重点信息以及符号化的直观转变。用大小、对比、浓淡、色彩、间隔这些平面设计的基本原则，让一个普通的“山里娃”土土的表格变成一个“青春靓丽、人见人爱”自带明星气质的表格。
方法三
大表格里面嵌套小表格，利用交互设计，巧安排空间。当用户光标移至感兴趣的那行的时候，关于它更多的内容，在下方滑动撑开出现或者右边浮动出现。这个方式虽然比较土，但也确实管用。早年在看某一招聘网站的时候，每一个人的简历只要点名字就可以看到一组关键信息，便于迅速筛选，而另外一个招聘网站，就没有这个功能，每个人都要打开之后才能看见整体信息，我后来就不怎么看那个网站了。多一步操作，对典型用户就多了许多的工作量，网站和软件的使用口碑，用户粘度就是这样在为用户考虑中一点一点积累起来的。
上图：大表格里面嵌套小表格
方法不会只有这三种，其他的方法要根据当时的业务，用户使用的习惯、重点，因地制宜的去设计了。软件中的表格节省了许多程序工程师的工作量，如果做大的改动或许是巨大的工作量，如果要做变动，一定要在开始的时候就要让ui设计纳入开发体系，一生二，二生三，在前期第一批实施时越注重细节，后期就会越轻松，甚至省去几倍甚至几十倍的时间挨个页面的去纠偏、修改。
一个系统总是需要业务担当，颜值担当的核心部分，重要的页面要额外的对待、花更多的精力和时间。如果千篇一律，也就不能显示出软件产品的独到之处了。
第三 与表格配合的部分设计
第一种 “搜索查询”和“过滤”部分的设计
大多数表格的前面都有搜索过滤功能，如果搜索条件相当多，可以精选一部分主要的排成一行，其他的隐藏，点箭头再出现。整个搜索区域也可以有隐藏／显示的按钮，来给下面的表格更多的空间。
过滤条件区域可以定义好“条件名称”一致宽度，一般在八个字左右，避免有的字节多，有的字节少，行数多了，参差不齐，区块和区块之间也要定义好统一的间距，这样整体页面就显得整齐划一、条理清晰。
上图：搜索和卡片式信息的组合
第二种 表格操作部分的设计
对表格的操作“导入，导出、批量导出”有的时候这类操作有10—20个，有的时候才几个，多的时候很占地方，可以用隐藏的方法，over到表格上再出现，以节省空间。
也可以分组把同类的操作聚合在一起，把常用的放在目之所及，不常用的点后下浮出现，以节省空间，
还可以光标跟随表格的某一行，点选自动浮出一群小跟班，各种操作按钮。即节省空间，操作移动路径又很短。只是不支持批量操作。
第三种 表格和卡片式设计、统计图的整合切换
表格是可以转换成卡片式设计的，用一个卡片代替一行的展现信息，改变一种阅读的方式。
有的也可以转换图统计图表：曲线图，柱状图让用户直观的去解读，而不必一直看枯燥的数字。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务