网页 表格设计 第1篇
一般指空数据或零数据的情况，空白单元格容易造成用户困惑甚至误解，用户会搞不清楚到底是没有数据，还是数值为零？
正确做法是，对于数据为零的单元格，要填上0，且小数点后位数、单位，都要与上下数据格式保持一致；对于没有数据的单元格，通常是用“－”表示。
B端后台数据类型较多，最好能为空数据做出释义，可以在“列标签”或底栏给出解释文案。
数据过多单元格的宽度根据列中字符的长短自动变化宽度，超过该列宽可以省略显示，末尾以”…”显示，鼠标悬停时出现气泡显示完整内容。
网页 表格设计 第2篇
可以通过视图切换查看更多细节，比如在“表格”和“左列表+右详情”之间切换，或者提供“只看文本，看文本和缩略图，只看缩略图”几种查看方式。
相比弹窗减少了页面层级和隔离感。单击行链接将表格转换为左侧的列表项目和右侧的其他详细信息，这让用户能够解析大型数据集，而且在涉及到多个项目时不会丢失位置。
表格数据的操作大体可分为显性与隐性，显性操作，指操作选项显示在行内，直观明了；隐性操作，当鼠标悬停时或勾选才显示操作选项，界面简洁明快，可减轻空间压力，减少干扰。
单行操作和批量操作操作项一般存在于行数据最后，为固定列，或表上方位置，两者对应多种操作场景。
网页 表格设计 第3篇
表格中字体保持一致，文字信息字体统一、数字信息字体统一即可。
数字信息字体选择——建议等宽等高字体，方便数字比较。
推荐一下几款等宽等高字体使用：微软雅黑、Arial、sans-serif。
下图左侧为苹方字体右侧为微软雅黑，右侧可以快速对比数据差异。
9. 分页规范
网页 表格设计 第4篇
拖放似乎很简单，就是抓住某个元素把它放到另一个地方而已。
可是事实上，拖放过程涉及到了大量细节，在拖放期间，需要处理许多特定的状态。用户在拖动模块时，页面整体布局基本保持不变。
因为移动的不是模块，而是插入条。插入条指明了放置模块时的目标位置。常用于数据量较小，有拖曳排序需求的场景。又可以运用在多个表一起的情况。
穿梭表格就是多表格拖拽的情况。比如左侧的表格内容可拖拽至右侧列表框，同时支持表内上下拖拽更换位置顺序，也可直接选中对象在两栏中按钮移动，完成拖拽行为。
那如何让用户知道可拖拽呢？增加意向符号；改变光标样式；增加被拖拽对象临时性底色，突出显示。
如何让用户知道怎么拖拽到哪里？被拖入区域应增加插入位置符号，可以明确指出放置模块的目标位置，减少用户困惑，也可以对放置操作发生后的页面外观提前给出预览。
同时设计时考虑上下左右两个方向的拖拽运动分别可以触发什么结果，超出表格范围拖拽对象消失。
被拖动对象应呈现为轻微透明的样式？应该显示为完全不透明？或者改为使用缩略图表示？我认为这三种方法都可以。
透明效果也会让更多表格内容对用户可见，有助于用户预览最终放置后的结果。从而方便用户查看页面，也会表明该模块处于一种特殊模式中。透明可以表明相应被拖拽对象尚未定位，或者说正处于过渡状态。
表头排序：排序又分为降序和升序，比如，事件相关的表格，默认时间降序排列；风险相关的表格，默认安全降序排序。
表头排序可以辅助用户快速挖掘出需要关注的信息，发现数据信息之间的关系，一般可按数字大小、文字拼音顺序、字母顺序等其它数据特征进行排序。
如果表格中不是所有数据都能排序时，则需要标识出可排序操作的列，一般采用三角箭头做为标识，实时反馈当前操作状态。
控制表内容控制列
网页 表格设计 第5篇
不同的分隔线适用于不同的业务表格：
分隔线要在数据允许的情况下尽量减小视觉占比，强调数据之间的对比与阅读效率。
最好不使用斑马线，对于同一类数据来说斑马线的使用是没有必要的，斑马线的视觉占比较重，虽然对数据的区分最明显，但也是最干扰视觉效率的分隔线。
可以省去分隔线，对于数据项较小的表格来说，可以尝试去掉分隔线。由于表格数据量小，表格内有合适的留白，也可以获得清晰了然的表格。
网页 表格设计 第6篇
一般表格具有的颜色尽可能少。
颜色和可读性是密切相关的，要合理的使用颜色，普通表尽量使用简单的背景色和点缀色。
背景色方面，除了行/列交替颜色(可以区隔内容，引导视线)、悬停高亮底色(便于准确辨别光标所在行)等处理方法，还可以对表头表尾进行视觉区分，但不能增加过多颜色以引起混乱。
分割线颜色尽量不要与背景色相差太大。当字体选择深灰色，背景为浅白色时，边框选择浅灰色，这样可以减少我们视觉疲劳，不会使表格看起来令人生畏。
表头的优化
表头标签应该简炼准确，以达到节省表头空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。当然对于产品而言，先能把事情说清楚，再考虑文字的简洁性。
当数据结构比较复杂的时候，使用多级表头来体现表头与数据的层次关系，如下图：
当数据有看不懂或生僻的信息时，用户期望有人告诉他为什么会这样，就需要在表头标签后加上小问号，鼠标悬停弹出说明文字的提示框。
不需要表头：如果表格数据可以自我解释，表头就可以不需要。电子邮件的表格是一个好例子，邮件主题，发送者，发送日期都区别度高不会混淆的。
当然有的情况表头是不能去掉的，例如有两个不明确的日期，这时候你就需要定义一个表头。
行的优化默认排序
所有行按逻辑排序，比如按风险由小到大，将最安全的操作放最前面；或按照信息时间排序，由新到旧，以创建时间进行排序，即最新创建的排在最前面。
网页 表格设计 第7篇
盒子模式是最为基础的前端框架，每个页面都是由无数个盒子构成。
想要知道线上页面的具体数据，可以用谷歌浏览器更多工具——开发者工具进行检查。
如下图飞书的会议室表格，Padding内边距为12px/8px，在单元格中对应左右边距12px/上下边距8px；表格行高为，正文本字号为14px；margin外边距为4px，可以看到两行文本之间的间距。用这种方法可以通过多个盒子的查找来参考线上页面的单元格规范，来进行我们自己业务产品中的单元格规范。
网页 表格设计 第8篇
由于数据报表，往往需要满足各种不同的角色在不同场景下的需求，因而在表格数据显示上。
一般采取宁多勿少的原则，即尽可能提供详细的数据，由此会数据指标过多，难以在表内完整展示，导致需要水平拉伸，降低了表格的可读性。
针对上面这个问题上，可将所有的指标名称罗列在表格上方，并提供多选操作，在默认情况下仅展示最常用、最重要的几个指标（如下图）。
这样能让用户在表格上方看到所有指标名称，避免了原来需要水平拖拽而导致指标浏览不全的情况。其次，用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。
B端后台通常会对应不同的角色及不同的需求，可让用户根据自己的需求来定义表格的展示列及列的顺序。同时系统应记住用户上一次自定义列的设置。
控制行
控制行高：较小的行高让用户无需滚动页面就能查看到更多的数据，但可扫描性的效果易导致视觉迷失，这就是为什么许多成功的数据表设计包含了控制行高(显示密度)的功能。
树形表行也可以结构化分为不同的类别，前面提到了层级表/树形表，可以嵌套子表格，展开和折叠。
可操作按钮一般位于各级行标题左侧，具有独特的视觉效果并具有扩展或折叠的功能。单击表中的类别标题会在类别的展开或折叠状态之间切换。展开与折叠也将极大的影响行内容显示。
分页
分页可以将表内容信息划分成独立的页面来显示。
网页 表格设计 第9篇
对于数据批量操作的场景，建议将操作放到表格上方，与复选框操作配合使用。
批处理操作模式允许用户对一行或多行对象执行操作，并在选中复选框后激活表上方操作按钮，如删除、批准、拒绝、复制之类的操作，这将节省用户时间，避免重复对多行进行相同操作。
表格上方的所有筛选或搜索按钮可能会因操作按钮出现过多而暂时隐藏，如果空间限制导致操作按钮排列不下，则使用“更多操作”按钮。
网页 表格设计 第10篇
需要对一些批量操作进行二次确认，一般采用模态弹窗对用户进行强打断，以确保用户不是误点。
操作完成后提示用户操作结果，无任何操作后15秒消失。
网页 表格设计 第11篇
表头筛选是一种列表内置筛选形式，类似Excel表格的操作。表头筛选和筛选区的筛选相比，只能筛选一列数据，能节约一定的空间。
虽然表头筛选能在一定程度上节约空间，但对于复杂业务的产品来说，不推荐使用，原因如下：数据信息列多，高频筛选功能可能会被遮盖，表头复杂影响用户表格阅读。