建站百科Website News

•   表格 

表格在整个B端产品中占比达45%以上，可见它的地位是相当重要的，我们在设计表格时需要注意一下几点：

1，表格内的文字内容：一般以左对齐为准。与左边表格边距尽量保持在10px以上 的间距。（特别注意：金额和操作的标题和内容需要右对齐）

2， 表格的列数：默认展示的列数为3-8列，如果需要展示更多列数，则需要优先固定展示重要列，其余的列的内容会以滚动条滑动而展展示出来。

3，表格列表的宽度：宽度的尺寸大小自适应，但需要根据文字的重要性显示，重要文字内容优先完整显示。

4，表头每列标题文字字数：字符不要多，最多可输入8个。如果文字太多，就需要做文字信息精简化。

5，滚动条使用场景：表格内容超过一屏，就需要显示竖向滚动条，注意：表头需要固定，但表格内容可滚动展示。

6，表格无内容：表格的某些单元格无数据内容时，需要用“—”表示。需要区别于“0”。

7, 表格标题栏和内容栏高度尺寸：标题栏高度（标准高度为56px）；内容栏（标准高度为56px，偏大的标题栏高度为80px），内容区和标题栏水平居中对齐。

8，表格内容对齐方式：

 列的对齐方式（垂直方向）

除了需要始终保持“右对齐”的：金额，最右侧操作列内容外，其他的内容可自行左对齐或右对齐。

行的对齐方式（水平方向）

当表格栏的高度尺寸小于80px 时，一般只有一排内容，内容水平需要居中对齐。

当表格栏的高度尺寸大于80px时，如果是有两排内容，所有的内容需要顶对齐；但是如果既有一排内容 又有多拍内容的话 ，内容水平则需要居中对齐。 

9，自适应规则：表格中的内容，会根据字段的长短定义所占的百分比，完成表格占比，从而达到希望实现的最佳效果。例图：

10，滚动条：滚动条分为横竖两种，当表格内容超过一屏时，就需要显示滚动条。

竖向滚动条时， 需要固定表头标题栏和页码。只需滚动表格内容部分即可。

横向滚动条时， 需要固定第一列 和 正在操作的项列。只滚动表格内容部分即可。

11，进度条状态：通常分为“加载中，成功和失败” 三种状态（例如‘上传图片’的进度条等），进度条样式自定义。例图：

12，弹窗：弹窗内容一般分为两种： 

第一种是弱弹窗。意思是仅提示用户相关内容，不需要用户做任何交互动作。类似：

（1）toast弱提示通知提示等弹窗（（一般3-5秒会自动消失：包含普通信息，成功信息，失败信息，警告信息）。 

(2) 鼠标经过的时候即可出现而不用点击的弹窗（这个弹窗通常会设计一个浮动带有阴影效果的框，不需要遮罩）。比如提示说明，显示更多信息，鼠标移过后立即消失，它不会影响下一层（当前页面内容）页面的视觉效果和操作。弱弹窗尺寸一般根据文字多少自行适配。

第二种是强弹窗。它是一个需要用户必须对这个对话框进行操作后才可以离开。例如弹出的列表，详情，表单等的确认信息弹窗、错误提示弹窗。强弹窗其实可以理解为它是一个新的页面。如图中靠下两种弹窗，通常是点击某一个按钮而触发的。这些强弹窗一般会对下面一层的页面做一些遮罩处理，例如添加上一层有透明度（例如30%，50%，或75%都可以）的黑色/白色，给下一层页面的内容做模糊滤镜等等；

例图：

我们在写弹框规范时，应了解各自项目中需使用弹框的有哪些内容，给出相关大小弹框的比例，哪些为固定尺寸，哪些为适配比例。对于通知提示给出停留多少时间后自动消失。

13：缺省页：缺省页是互联网种常见的场景，当遇到网络不好，页面中没有内容数据，或暂无资料的情况下，所导致的空白页面。大致分类系统类缺省页，信息类缺省页，空白类缺省页。遇到这些情况时，设计师可以采用一些插画&文字的组合放置本来空白的页面中提示或引导用户进行下一步操作，以缓解用户的焦虑情绪。例图：

总结：

设计师在工作过程中，一定要重视设计规范，抽时间把它整理好，这是对整个团队有效率的协作工作起到至关重要的作用。设计规范完成后，还需要与前端和测试沟通和协调好，确保他们清楚每一模块的设计规范，这样才能有效地提高工作效率和保证项目的产出质量和产品设计的一致性，尽量减小卖家版和买家版的尴尬。

——摘自公众号《设计的那些事》