大总管默默

本文源于读者和粉丝的提问,以及我前段时间在做 Ant Design 设计与运营工作中的经验沉淀和总结,希望对你有帮助 ——

 

问题一、Table 中的父子级和弹窗的区别

很多同学会有这样的疑问:Table 中使用嵌套关系的父子表格,与使用弹窗有什么区别?在使用时分别有哪些优劣?

其实 Table 的嵌套父子级和弹窗都可以用来展示 Table 中的相关信息。除了弹窗,还有抽屉也具备此功能。这三个组件的特点如下:

 

1.嵌套关系的父子表格  

嵌套关系的父子表格是指通常更强调内容之间的关联性,其特点如下:

  1.   父行和子行具备联动关系,当父行被选中,该行下的子行就会被全选;当某一个子行被选中,则该子行所在的父行也会被选中。如下图选中子行后的 Table 效果:

图片

 

  2.   子行的内容篇幅相对较少,通常来说以 1-3 行左右为佳,展开不会影响其他行的阅读体验。

  3.   子行的内容是针对父行的一整行内容进行描述和内容补充,并非是针对单一的列的某一项内容,如下图:

图片

 

2.弹窗  

从 Table 中的某一项唤起的弹窗,对于信息呈现有如下特点:

  1.   需要呈现的内容篇幅相对较少

  2.   通常是针对 Table 中的某一列的单独项进行内容补充和描述。

  3.   通常来说是由系统触发(对于用户来说属于被动接受)。

图片

 

3.抽屉

从 Table 中的某一项 / 某一行唤起的抽屉,对于信息呈现有如下特点:

  1.   需要呈现的内容篇幅相对较多

  2.   可以针对 Table 中的某一列的单独项一整行进行内容补充。

  3.   通常来说是由用户触发(对于用户来说属于主动唤起)。

图片

 

问题二、组件系统中的色板推演方式

很多同学想了解组件系统中的色板的计算和推演方式。其实色板是由设计师和开发统一协作完成的,设计师提供理论基础,开发完成算法推演。

以 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 值中可以看出一些数值规律:

图片

 

但是单凭数值推算,还是很难控制颜色的质量,所以开发会在算法中增加一些“缓冲剂”,比如根据颜色的冷暖属性来判断增加的数值大小。这就增加了计算的难度。另外,设计师也需要依靠色彩关系对推算得到的颜色进行肉眼矫正

因此如果你是设计师,可以将有限的时间精力用在色彩原理研究上,而不需要对代码计算有深入理解,与开发做好分工和配合即可(当然,感兴趣且有代码基础者除外 😊)。

 

这里给大家推荐几个色板的应用辅助工具

1. Ant Design:Sketch 插件 Kitchen

https://kitchen.alipay.com/

  优势    在最新版的 Kitchen 色板中可以直接选择和填充颜色,支持一键将色板导入至本地文件色板或者创建本地样式

图片

  不足  

– 没有给出颜色的应用建议,无法判断色彩是否符合 WCAG 的设计标准;

– 除了 12 个主色以外,暂时无法选择其他颜色生成衍生色板。

 

2. Material Design:Figma 插件 Material Theme Builder

https://goo.gle/m3-design-kit

  优势    可以选择你想要的任何一种颜色,插件会帮你计算出来整套衍生色板,同时还会检验出不符合 WCAG 规则的主题色,直接利用系统算法帮你做优化:

图片

  不足  

– 要翻墙,并保证网络畅通;

– 无法确定具体的色彩的应用和搭配方式是否符合 WCAG 标准。

 

3. Acro Design:色彩配置工具网站 

Arco Color Palette

https://arco.design/palette/list

  优势    提供了 13 个主色,以及一个 WCAG 色彩标准检测工具,可以对色彩的应用和搭配做全方位的检测:

图片

  不足  

– 暂时没有提供插件;

– 除了 13 个主色以外,暂时无法选择其他颜色生成衍生色板。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网 » 工作经验| B 端产品组件设计细节及经验分享(八)

登录收藏
 
你可能喜欢的:
我是万万没想到,这么复杂的效果,竟然是用这么简单的工具做出来!我是万万没想到,这么复杂的效果,竟然是用这么简单的工具做出来!
B类新品场景设计B类新品场景设计
想要优化好UI作品,这14个设计细节一定要检查到位!想要优化好UI作品,这14个设计细节一定要检查到位!
B端后台产品的设计细节-设计说明指南篇B端后台产品的设计细节-设计说明指南篇
探索节日运营新思路探索节日运营新思路
探秘|QQ社交形象年度盘点设计密码探秘|QQ社交形象年度盘点设计密码
Behance 首页推荐的作品集为什么这么高级?彩云为你拆解其中7个秘密Behance 首页推荐的作品集为什么这么高级?彩云为你拆解其中7个秘密
做了近百个网页,总结的高质量设计方法做了近百个网页,总结的高质量设计方法
用设计诠释搜索热点用设计诠释搜索热点
58到家首页体验升级58到家首页体验升级