网页表格设计样式 第1篇
表头对数据性质的归类。表头按惯例要对数据的简况做出反映，如被调查者的性别、年龄、学历、收入、家庭成员组成、政治背景、经济状况等。
表头的字段名称应当符合人们的思维习惯，保证用户理解。如果有需要解释，则在字段名称旁边加说明小图标(小问号)。
表头在这里也能指列行标签，是对所属行或列数据的描述。除了容纳行/列标签之外，表头也可以进行排序、搜索、筛选等。
网页表格设计样式 第2篇
信息内容的有效传达是表格设计的本质，就表格本身而言应该是隐型的，应该让用户注意力聚焦在核心内容上。
所以，边框的颜色应非常淡，不能妨碍快速浏览。
二、表格的设计技巧
表格是为可读性而生的，一个结构清晰的布局能大大提升用户对信息的接收速度和理解程度。
因此，设计易读、易扫视、易比较、易操作的表格结构是表格设计的首要目标。
下面我将以公司财务中台的表格改版为例，逐步说明表格中每个结构的设计。
这是改版前后样式对比图：
1. 筛选区设计
筛选区可以看作表格的导航，由搜索和筛选这两部分组成。
一般搜索和筛选会同时出现，但是两者一般很少同时使用来对数据进行定位——搜索更多的是对单一或者包含某个字段的的数据来进行定位；筛选则是用来查询一类数据。
根据MECE分析法，筛选区可以有以下的表现形式：
网页表格设计样式 第3篇
由于数据报表，往往需要满足各种不同的角色在不同场景下的需求，因而在表格数据显示上。
一般采取宁多勿少的原则，即尽可能提供详细的数据，由此会数据指标过多，难以在表内完整展示，导致需要水平拉伸，降低了表格的可读性。
针对上面这个问题上，可将所有的指标名称罗列在表格上方，并提供多选操作，在默认情况下仅展示最常用、最重要的几个指标（如下图）。
这样能让用户在表格上方看到所有指标名称，避免了原来需要水平拖拽而导致指标浏览不全的情况。其次，用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。
B端后台通常会对应不同的角色及不同的需求，可让用户根据自己的需求来定义表格的展示列及列的顺序。同时系统应记住用户上一次自定义列的设置。
控制行
控制行高：较小的行高让用户无需滚动页面就能查看到更多的数据，但可扫描性的效果易导致视觉迷失，这就是为什么许多成功的数据表设计包含了控制行高(显示密度)的功能。
树形表行也可以结构化分为不同的类别，前面提到了层级表/树形表，可以嵌套子表格，展开和折叠。
可操作按钮一般位于各级行标题左侧，具有独特的视觉效果并具有扩展或折叠的功能。单击表中的类别标题会在类别的展开或折叠状态之间切换。展开与折叠也将极大的影响行内容显示。
分页
分页可以将表内容信息划分成独立的页面来显示。
网页表格设计样式 第4篇
拖放似乎很简单，就是抓住某个元素把它放到另一个地方而已。
可是事实上，拖放过程涉及到了大量细节，在拖放期间，需要处理许多特定的状态。用户在拖动模块时，页面整体布局基本保持不变。
因为移动的不是模块，而是插入条。插入条指明了放置模块时的目标位置。常用于数据量较小，有拖曳排序需求的场景。又可以运用在多个表一起的情况。
穿梭表格就是多表格拖拽的情况。比如左侧的表格内容可拖拽至右侧列表框，同时支持表内上下拖拽更换位置顺序，也可直接选中对象在两栏中按钮移动，完成拖拽行为。
那如何让用户知道可拖拽呢？增加意向符号；改变光标样式；增加被拖拽对象临时性底色，突出显示。
如何让用户知道怎么拖拽到哪里？被拖入区域应增加插入位置符号，可以明确指出放置模块的目标位置，减少用户困惑，也可以对放置操作发生后的页面外观提前给出预览。
同时设计时考虑上下左右两个方向的拖拽运动分别可以触发什么结果，超出表格范围拖拽对象消失。
被拖动对象应呈现为轻微透明的样式？应该显示为完全不透明？或者改为使用缩略图表示？我认为这三种方法都可以。
透明效果也会让更多表格内容对用户可见，有助于用户预览最终放置后的结果。从而方便用户查看页面，也会表明该模块处于一种特殊模式中。透明可以表明相应被拖拽对象尚未定位，或者说正处于过渡状态。
表头排序：排序又分为降序和升序，比如，事件相关的表格，默认时间降序排列；风险相关的表格，默认安全降序排序。
表头排序可以辅助用户快速挖掘出需要关注的信息，发现数据信息之间的关系，一般可按数字大小、文字拼音顺序、字母顺序等其它数据特征进行排序。
如果表格中不是所有数据都能排序时，则需要标识出可排序操作的列，一般采用三角箭头做为标识，实时反馈当前操作状态。
控制表内容控制列
网页表格设计样式 第5篇
对于数据集较大的B端系统来说，往往筛选条件比较多，都将其展示出来会导致空间占比过大，影响了用户对表格信息的获取。
下面以我公司的财务中台为例，讲讲如何优化筛选区，希望对大家有所启示。
① 版本中筛选区样式：
筛选条件全部展开，目的是让用户对信息进行快速的查询、过滤，以快速准确完成目标任务。
但业务复杂，数据集过多少，筛选条件也相应增加（空间占比大），看起来非常冗余，不利于快速定位目标。
为了平衡扫描、查询、过滤、分析等这些操作，复杂业务的表格区筛选需要进行一定的优化处理，这样才能满足满足业务需求同时，又符合用户心智模型。
方案A：整齐划一。
整合筛选项，采用表头筛选+标签筛选的样式，缩减筛选区的页面空间占比。
讨论结果：虽然这个方案使筛选区的空间占比缩小，整体页面也看似整洁不少。但表头筛选在复杂的业务系统中存在几个弊端：
方案B：强调主次关系。
采用展开式的标签筛选样式，对不常用的筛选项做隐藏处理。
但因业务场景的复杂度，高频筛选功能还是很多，没有解决本质的问题，如下图：
方案C：分状态展示（逐渐呈现）。
在方案B的基础上进行了优化。
提炼与流程相关的状态，按步骤显示，每一步只显示当前需要关注的内容，如图：
状态的提炼过程
整理每个单据的状态，理清关系：
结合业务流程可以很明显的注意到，单据只有通过了审核才能收款，只有收款才能进行核销。状态是一种递进关系（审核 收款 核销）。
结合财务人员的工作流，提炼出单据的以下几种状态，之前存在到问题（表格中单行数据的操作不一致），也得到了完美的解决。如图：
2. 功能区按钮设计
网页表格设计样式 第6篇
建议在复杂系统设计中使用圆角矩形的按钮样式。
理由如下：
a. 人眼处理圆角更容易（认知负荷说）：
b. 使相似的内容更容易被区别：
举个例子，如下图所示，即便间距相同，B排的圆角矩形辨识度还是明显比A 排的矩形高。
这是为什么呢？
首先，第一眼看过去的时候，A 排的矩形整体是连在一起的，中间找不到断点；而B 排矩形，因为有圆角的关系，所以断点很明显。
其次，两种矩形的视觉聚焦：
综上所示，圆角矩形是非常有效率的容器，在复杂场景业务中（存在很多种功能型按钮），按钮采用圆角矩形样式最提效。
这里要注意，圆角不是越大越好。
在相同面积中，按钮的可操作区域随着圆角的增大而递减，因此在同等尺寸下的按钮中，小圆角的按钮明显比大圆角的按钮更容易操作。
同时在实际业务中，按钮常常被当作原子与下拉框联动组成下拉菜单控件；如若使用半圆按钮则无疑增加了下拉框的设计难度并且匹配起来也会略显突兀。
网页表格设计样式 第7篇
对于数据批量操作的场景，建议将操作放到表格上方，与复选框操作配合使用。
批处理操作模式允许用户对一行或多行对象执行操作，并在选中复选框后激活表上方操作按钮，如删除、批准、拒绝、复制之类的操作，这将节省用户时间，避免重复对多行进行相同操作。
表格上方的所有筛选或搜索按钮可能会因操作按钮出现过多而暂时隐藏，如果空间限制导致操作按钮排列不下，则使用“更多操作”按钮。
网页表格设计样式 第8篇
来看看之前的页面：
这样处理的不足点：
对此，在这个版本中，我们对其做了相应的优化——运用侧视图（快速视图）的方式来呈现信息；一旦选择一个单据，它就会从侧面弹出的。
这个方案，它可以保持上下文，易于使用，即使是在垂直滚动视图中显示大量字段的情况下也效果良好。同时信息呈现的地方是固定的，利于检索，查找。
网页表格设计样式 第9篇
在财务中台系统中，常常由于权限的不同或者单据状态不同这两种原因，使得每行的数据拥有不同的操作项，如下图所示：
存在的问题：
针对这个问题所出的解决方案，如下：
方案A：下拉框样式。
讨论结果：下拉框中可能存在不同操作，同样避免不了误操作这个问题。
方案B：错位显示。
讨论结果：首先，这样的设计浪费大量的屏幕空间；其次，浪费开发工作量！因为在列表中实现一系列权限判断和操作，在详情界面中往往还需要再开发一次相同的权限判断和操作；再次，不同单据可能存在操作顺序不一样，上下移动鼠标会存在不同操作，用户代价非常高。
方案C：以不变应万变。
回归『一个界面一个用户任务』的原则，列表中的单行数据只保留“查看”或“管理”操作，所有其它的单独操作都去往该单据的详情界面完成。
讨论结果：从开发的角度上看，此方案界面高度解耦，功能迭代方便，节约开发工作量；从认知成本上看，列表界面操作高度一致性，利于养成用户习惯；从操作效率上看，在详情页用户会明显确认目标单据，几乎不会误操作； 同时此方案节约了大量屏幕空间，更有利于用户对信息的获取；