工作经验｜ B 端产品组件设计细节及经验分享（八）
Hi，我是元尧。长按下图二维码加我微信，带你进设计师交流群，与上万名小伙伴一起交流成长！
「添加好友请备注：设计交流」
Table 中的父子级和弹窗的区别
很多同学会有这样的疑问：Table 中使用嵌套关系的父子表格，与使用弹窗有什么区别？在使用时分别有哪些优劣？
其实 Table 的嵌套父子级和弹窗都可以用来展示 Table 中的相关信息。除了弹窗，还有抽屉也具备此功能。这三个组件的特点如下：
1. 嵌套关系的父子表格
嵌套关系的父子表格是指通常更强调内容之间的关联性，其特点如下：
1. 父行和子行具备联动关系，当父行被选中，该行下的子行就会被全选；当某一个子行被选中，则该子行所在的父行也会被选中。如下图选中子行后的 Table 效果：
2. 子行的内容篇幅相对较少，通常来说以 1-3 行左右为佳，展开不会影响其他行的阅读体验。
3. 子行的内容是针对父行的一整行内容进行描述和内容补充，并非是针对单一的列的某一项内容，如下图：
2. 弹窗
从 Table 中的某一项唤起的弹窗，对于信息呈现有如下特点：
1. 需要呈现的内容篇幅相对较少。
2. 通常是针对 Table 中的某一列的单独项进行内容补充和描述。
3. 通常来说是由系统触发（对于用户来说属于被动接受）。
3. 抽屉
从 Table 中的某一项 / 某一行唤起的抽屉，对于信息呈现有如下特点：
组件系统中的色板推演方式
很多同学想了解组件系统中的色板的计算和推演方式。其实色板是由设计师和开发统一协作完成的，设计师提供理论基础，开发完成算法推演。
以 Ant Design 为例，从 3.0 版本就使用 HSB 的计算逻辑来搭建调色板。先来科普下 HSB 色彩模式的概念：
- H（Hue）：色相/色调，颜色的相貌，取值在 0-360 度之间（黑色与白色无色相） ；
- S（Saturation）：饱和度/纯度，颜色的浓郁程度。取值在 0-100 之间，值越高颜色越鲜艳浓烈；
- B（Brightness）：明度/亮度，颜色的明暗程度。取值在 0-100 之间，值越高色彩越亮、越可见。
由于 S 和 B 之间的数值都是在 0-100 之间，因此你可以认为两者有一定的对应关系。通过一定的规律（你可以根据一些数列的逻辑来自定义规律）改变 HSB 的色值，就可以制作出一个颜色的衍生色板。
举个简单的例子，如果想把一个颜色加深，那就可以在保持 H（色相）不变的基础上，给 S（饱和度）依次增加一个数值，给 B（明度）依次减少一个数值，你就可以得到一个简单的色阶。下图是 Arco Design 调色板中两个颜色，从这些颜色的 HSB 值中可以看出一些数值规律：
但是单凭数值推算，还是很难控制颜色的质量，所以开发会在算法中增加一些“缓冲剂”，比如根据颜色的冷暖属性来判断增加的数值大小。这就增加了计算的难度。另外，设计师也需要依靠色彩关系对推算得到的颜色进行肉眼矫正。
因此如果你是设计师，可以将有限的时间精力用在色彩原理研究上，而不需要对代码计算有深入理解，与开发做好分工和配合即可（当然，感兴趣且有代码基础者除外 😊）。
- 没有给出颜色的应用建议，无法判断色彩是否符合 WCAG 的设计标准；
- 除了 12 个主色以外，暂时无法选择其他颜色生成衍生色板。
优势 可以选择你想要的任何一种颜色，插件会帮你计算出来整套衍生色板，同时还会检验出不符合 WCAG 规则的主题色，直接利用系统算法帮你做优化：
看更多与组件设计的经验沉淀👇👇👇
如果你还有关于设计和工作的问题想要得到解答，或者想要加入设计交流群和我们一起进步，欢迎识别二维码，添加好友请备注：设计交流。
了解更多设计理念和设计方法