柜子与抽屉-数据展示组件

前言

上一篇文章已经是讲房梁和柱子规划好了，接下来就开始放置我们常用的家具了比如：首饰盒，衣柜之类的。为了方便理解整体从颗粒度小到大的进行讲解，方便理解。

1·小首饰盒-徽标与标签

徽标

徽标的应用场景一般出现在图标或者是头像的顶部的右上角，用于显示需要显示处理的信息条数，通过醒目的视觉表现方式形式吸引用户处理。用户提前触达要处理的日常/警告/危机的任务，避免任务的遗漏。

在样式上一般是分成3类：

1. 基础样式：通常是右上数字数字小标，这里的建议描边样式，填充的样式视觉感。
2. 小红点样式：醒目程度低于基础样式。
3. 左右排列方式：主要是应用于上下空间不足时候，左右排列时候可以使用，里面有基础样式和小红点样式

徽标使用的注意点

1. 定义距离：一般定义为左侧图标的负距离，准确的说是距上与距右边的距离
2. 定义封顶值：一定要设计封顶值样式，常规的“10+” “99+” “99+”
3. 定义文字内容：常见的“NEW” “HOT”来表现信息的状态

思考题：当信息条数为0时候如何展示？是展示“0”还是不显示？

答案：当然不显示，因为显示出来并没有意义，反而会增加用户的负担

标签

大小区分为：

1. 小
2. 中
3. 大

样式区分：

1. 描边
2. 描边+不透明度
3. 填充样式

从描边到填充模式，整体上是越来越突出。

这里有一类常见的标签叫做“可删除标签”，它自身有自己的场景：

1. 用于筛选
2. 给与用户进行标签化
3. 多选选择器里面的标签

走马灯

走马灯的使用场景一般用于官方banner里面或者是内容的下方 ，一般的B端产品里面是很少体现。

常见的位置是：

1. banner的下面
2. bannner的内容里面

2·小抽屉-文字提示提示与气泡卡片

文字提示

常见的使用场景是鼠标移入时出现，移出时消失（无法承载任何操作）。主要是以专业词汇讲解。

出现的方向：围绕button的12个方向，

气泡卡片

常见的使用场景鼠标点击/移入时出现，适合文字较多的场景，可以承载相应的操作。包括：

1. 删除
2. 链接文字
3. 专业词汇讲解

气泡卡片和文字提示的差异

场景不同：

1. 气泡卡片可以承载相应的操作
2. 文字提示不能承载

承载的文字不同

1. 气泡卡片可以承载更多的文字
2. 文字提示只能承载更少的文字

3·小柜子-标签页与折叠面板

标签页

使用场景是标签页可以帮助用户在一个页面内快速切换不同地内容，提高单页是用效率。

常规样式有：

1. 基础样式
2. 卡片样式
3. 胶囊样式

折叠面板

使用场景是要更好的进行受纳内容区域，提高页面利用率。

样式：

1. 默认
2. 展开

4·大衣柜-表格

定义

在B端有大量的表格，在B端中表格工人是展现架构化最清晰，高效的表现形式。常常和按钮，搜索分页等其他界面元素一起协作，构成表格。

相当于衣柜把衣服或者其他物件收起来方便搜索和查找。

优点

结构简单，分隔与归纳清晰，使得信息之间更容易进行对比。大大的降低了了用户对于信息接受效率和理解成本，

表格针对2个场景：

1. 当大量结构化的数据需要展开时候
2. 当需要对数据排序，搜索，筛选，分页，自定义操作等

常见的样式分类有3种：

基础：现在SaaS的主要样式，没有边框以及斑马纹装饰比较简洁。

带边框的：常用与列数比较多且带有多重分组的列表

带斑马纹的：信息噪音比较强，操作时候会影响到查看

整体拆分

整体可以拆分为3个部分：查看，操作和过滤。今天主要分解的是查看的部分。

查看

目标

查看的目标主要有2个：

1. 信息降噪
2. 高效易读

构成

表格的构成有4个部分构成：表头，行，列，单元格

组成

由于单元格是由于行和列交叉组成，所以融合到了行里面去进行讲解。

表头

表头常见的样式有：

1. 带横向分割线：通常用于表头有分组的场景
2. 待斑马纹的：针对列特别多的，用户可以在高效的进行定位。缺点是视觉干扰比较强，解决方案就是降低底部的透明度即可
3. 极简风样式：没有上面2种情况就用这一种
4. 极简+斑马纹：表格hover高光即可

表头注意事项：

1. 分割线：分割线尽可能性的轻盈，不要抢视觉
2. 分组的表头：带有分组的表头可以直接带有分割线的样式
3. 颜色使用：尽可能去掉不必要的颜色额装饰，但是有特殊情况（运维产品中机器设备的状态极其关键，所以常用图标显示）
4. 带序的表头：上下三角的记法-宽度越小数字越小，宽度越大数字越大

那有什么更精炼的表达呢？

1. 尽可能的减少正确的废话
2. 比较复杂的表头，可以定义一个专有名词，鼠标hover给与解释说明
3. 针对过长的文案，可以定义属于整理，并且以文字提示进行结束

单元格

单元格由行和列交叉组成所以这里将行和列分开讲。

行的设计

高度计算：

文字高度+行高高度+上下间距（类似开发中的padding）

常规数值推荐：

1. 假设表格内数字字号为“N”
2. 文字行高就是1.5N
3. 上下间距就是1.2N

注意点：在一些场景中会遇到要去控制表格的密度（高度）通常情况下是3种程度：

1. 紧凑
2. 标准
3. 宽松

那如何去进行控制呢？

就是控制上下间距进行调整。

表头

针对里面的和操作有3个注意点：

1. 文案：表头内有时出现重复的文案，字可以截取字数考虑冗长重复的前缀情况。也可以直接展示2行
2. 操作：操作项过多时候，可以收起低频的操作
3. 空白格子：不要留空白格子，“0”可以代表数据情况需要补货，“-”下划线可以代表还没录入装状态

注意点：这里说的表头不是顶部的表头，而是行里面的字段

定义宽度

当单元格内内容长度不固定的时候，定义好内容的宽度和行数即可或者是限制文字

是否可编辑的差异

具体分为2种场景：

1. 单项可操作
2. 整行可操作

列的设计

通常定的2个值是“N1” “N2”。N1是固定的左右边距，N2是一定要设定最小值和自适应，一般会设置一个最小值。比啊开个的宽度大于页面宽度时候固定首位列，左右滑动。

横向滚动的场景一般是场景下的固定的是首列，如果遇到01列是用户工号，02列是员工姓名，则员工的姓名的识别度更高。

列数控制

列数控制在7+——2列举用户更为关注的数据，更多的详情中展示。根据用户角色的侧重点，这里的加一个自定义按钮用户自己设置，再复杂一点可以加角色模版。

对齐方式

对齐方式这里分为3个角度，行，列，操作

1. 行：一般出现在多行时候一般采用的是顶部对齐，居中对齐也是存在的，极少出现在底部对齐。针对分页器选取，选取合适的分页器可以缓解服务器的加载压力，可以给与行数的自定义，在批量导出时候可以速度更快。
2. 列：一般采用左对齐，更高效的阅读浏览顺序，因为用户大部分是从左往右去看。如果遇到长短不一的数字时候，一般采用的右对齐，方便用户进行对比，从而提高数字阅读效率提高对比效率。如遇到身份证以及员工ID的话则是左对齐，或者是数值对比的场景是右对齐。
3. 操作：一般都放在尾部，右对齐。整体看起来也会比较方正一些。

基础交互

滚动与固定

具体分为2种滚动：

1. 横向滚动：一般的方式是固定首列和操作项列
2. 纵向滚动：固定表头或者是前几行

可批量操作

可批量表格操作按钮的位置一般是在表格的左下和左上方

详情

点击

一般的场景是详情查看入口，优化的方案是名称可点击样式，这里操作的话需要扣掉一部分的热区。或者在操作里面增加详情。

展开

可以在表格里面展开，这里的展开可以是详情也可以是2级表格。也可以是弹窗的形式。但是有一些场景下弹窗是无法进行支撑，就可以用抽屉。如果实在不行的话则可以用页面承载。

总结

之前把大房间主体设置好了，刚刚又把大的家具准备好了。接下来讲讲散落的家具如何进行摆设能让我们的用户真正意义上的住下来。