浮木云学习日志（11）---表格设计（一）

表格作为展现数据最为清晰、高效的形式之一，同时又具有复用度高，拓展性强优势，是最常见的信息展示形式，也是对数据进行浏览和操作最便捷的设计方式，合理的表格设计能给用户带来高效的信息获取率。

今天我就利用浮木云软件设计开发平台https://www.fumucloud.com/设计一款简洁美观的具有查询筛选功能的高级表格，感兴趣的小伙伴也去试一下吧。

1、容器选择

在之前对浮木云的了解过程中，发现容器是我们制作页面设计的基础组件，因此本次表格制作会选用弹性容器做页面的布局框架，选用查询容器做页面的查询筛选功能，同时选用之前介绍的栅格容器作为页面的统计卡片。本次我选用模板中心的电商后台管理系统的“订单管理”页面，示例图如下：

2、确定页面布局

该页面框架布局由三部分组成，分别用来放置页面标题内容、统计卡片内容和表格内容，放置统计卡片的栅格容器与放置表格内容的弹性容器设置相应的外间距，本次将放置统计卡片的栅格容器的下外间距设置为10，确保页面分布层次清晰，所有容器的背景颜色填充为“rgba(255, 255, 255, 1)”。

3、内容填充

3.1标题

标题是由一个布局容器和文字组件组成，布局容器宽度、高度分别设置为6px、20px，背景颜色设置为“rgba(104, 157, 244, 1)”，这样文字组件之前的标题标识就做好了，文字组件的文字内容填写“订单管理”，水平对齐设置为“居左”，垂直对齐设置为“居中”，在“文字样式”中设置字体大小“16”，颜色设置为“#689DF4”，这样标题内容就填写完毕。

3.2数字统计

放置数字统计内容的是栅格容器，将栅格容器上、下、左内间距设置为“20”，按照页面示例将统计卡片分栏设置为“3”，分栏间隔设置为20，分栏占比值统一设置为“5”，在每个分栏里放置弹性容器，弹性容器宽度和高度都占满插槽容器。并在每个弹性容器中放置一个图片组件和弹性容器，用来填充图片标识和文字内容，具体方法看这篇CSDN，结果示意图如下：

3.3查询容器

一个好的表格设计是离不开表格筛选功能的，利用浮木云制作表格的筛选功能需要用到查询容器，在查询容器内放置合适的筛选组件。这个页面放置组件有三种，包括输入框、下拉框和日期范围，输入框作为“订单编号”的输入查询，下拉框有两个，分别作为“订单状态”和“下单渠道”的下拉查询，日期范围组件作为“下单时间”的日期范围选择，四个组件的名称分别在【属性配置】中的“标签”分别填写对应的名字，即“订单编号”、“订单状态”、“下单时间”和“下单渠道”。在“订单状态”和“下单渠道”组件的“下拉选项”根据自己的需求设置对应的“订单状态”和“下单渠道”。

3.4高级表格

利用浮木云进行表格设计最为方便，他有一个专门的高级表格组件，将其拖拽至弹性容器内，对表格设置相应的宽度和高度，接下来就是对表格进行“基础列设置”、“表格列设置”、“操作按钮设置”和“表格数据设置”。“基础列设置”就是设置该表格是否需要‘多选框’，‘序号’和‘操作栏’。“表格列设置”就是设置表格的‘字段’，根据用户实际的字段需求添加或减少表格列。“操作按钮设置”是对表格操作栏的功能按钮进行相应的配置，可对其‘按钮名称’、‘按钮类型’、‘按钮尺寸’、‘按钮图标’和‘按钮颜色’进行选择配置。配置过后一个初步的表格设计已经出来了，效果图如下：

不得不说，用浮木云制作表格简直太方便了，我们只要清楚这个表格有哪些功能、哪些字段即可快速制作出简单的表格设计。不过，也可以看出我制作的表格和示例图的表格还是有点差别，模板的表格值有标签区分，显得更美观。下一步，我将对高级表格组件进行更加深入细致的研究了解，制作出更为美观的表格。