#第一篇

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

· Question 1 ·
**

中性色色值为什么要使用透明度？

有细心的用户发现，在 Ant Design 的设计规范里，中性色色值可以按照透明度来设置，见下图中性色色值表（百分数代表不透明度）：

平时大家似乎更喜欢使用 #333333、#666666 这种色值，那使用透明色有什么优势呢？

我们知道，中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑白色背景以及有色背景的差异，同时结合 WCAG 2.0 标准。

现在 Ant Design 的色板中，透明色模式和实色模式都是有的。透明度模式可以做到背景色兼容。

如下图示例，我们以颜色 gray-6 为例，这个颜色在实色模式的色值是 #BFBFBF，透明色模式的色值是 000000-25%。两者在白色背景上的颜色完全相同，但是在灰色或其他颜色的背景上，却有明显差别：

因此在透明色模式下，以中性色为主的前景色，会与背景色有一个更明显的色彩对比，对背景的兼容性也会更好，保证内容的可读性。

Ant Design 提供了透明色和实色两种颜色模式供用户选择，也会使组件更具通用性。

· Question 2 ·

组件和设计师之间的关系是？

当下很多常见的、优秀的组件库，都为设计和开发的工作提供了便利。

那么使用组件库可以替代设计师么？组件和设计师之间的关系又是什么呢？我个人观点如下：

1. 组件是「效率」工具

组件是工具，用来为设计师和开发提升工作效率。所有组件库的初衷都不是要替代设计师，而是要提高整个团队的工作效率。使用组件可以从两个方面提效：

（1）工作内容上：可以将不必要的、重复性劳动的时间节省出来
（2）工作流程上：便于设计师与前端开发做交接和协作，节省沟通成本

2. 组件是「质量」保障

使用组件做设计稿，可以在一定程度上保证工作质量。组件规范了前端和设计师的工作方法，建立相对底层的系统，设定了设计和开发的质量底线。

基于组件规范设计和开发的产品更容易具备：

（1）一致性：具备相对一致的表现样式，设计风格和交互体验上均可保持统
（2）可用性：对于用户操作，可以保证最基本的可理解性和可操作性
（3）审美性：符合基本审美标准，虽不会很亮眼，但也不会很难看

3. 设计师要「沉淀」业务组件

设计师可以尝试沉淀有针对性的业务组件。很多业务领域有其独特性，比如金融类组件和政务类的产品页面列表内容就有很大区别。单一的元素组件在应用的过程中可以被再次组合和沉淀。

举个例子，我之前在做业务需求设计时，相比于 AntD，其实更常用的是 TechUI —— 它是建立在 AntD 基础上的、由我们蚂蚁的设计师通过对业务需求的提炼、组合和封装，做成的一套属于蚂蚁自己的【业务组件】。

再总结下二者的区别：

- Ant Design：是所有人的，是通用的，是单一的原子级别的（比如一个输入框）组件。

- TechUI：是蚂蚁自己的，是私有的，是组合的区块级别的（比如一整个表单）组件，更具备蚂蚁集团自己的业务属性。

针对你公司不同业务类型，沉淀出不同种类的区块级别的组件，这类组件使用起来也会更加得心应手、加倍提效。这也是 B 端设计师可以去学习和精进的一点。

4. 设计师要「洞察」业务诉求

使用组件可以让设计师把节约出来的时间和精力放到更多有价值的工作上去。作为 Ant Design 的设计师之一，坦白的说，即使你的设计稿全部使用了 Ant Design 的组件搭建，最终的页面效果也仍不完善，在用户体验上始终可以更进一步。

设计师应该更多去关注对用户需求和业务逻辑的深入挖掘，不仅仅是在界面细节的表现手法上下功夫，还要学会站在全局，用系统性思维看待每一个项目，为整个产品的系统流程做优化，做更全面的产品体验升级。

#第二篇

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

· Question 1 ·

主要操作按钮应该放在哪边？

有细心的用户发现，Ant Design 按钮组的里按钮的排列顺序似乎并没有什么规范可言，主操作 button 在官方给出的应用案例中，一会儿放在次要 button 的左边，一会儿又放在次要 button 的右边，如下图：

△ 主 button 放在次 button 的右边

△ 主 button 放在次 button 的左边

其实 AntD 的按钮摆放是有规律的。主按钮设计规律依据的是“希克定律”：任意一点移动到目标中心位置所需要的时间，与目标距离正相关，与目标大小负相关。
你可以简单的理解为：目标越大、距离越短，越容易被点击到。所以按钮等可点击区域在合理的范围之内越大越容易点击，反之，可点击区域越小，越不容易操作。因此，屏幕的边和角很适合放置像菜单栏和按钮这样的主元素，因为不管你移动了多远，鼠标最终会停在屏幕的边缘，并更容易定位到按钮或菜单的上面。

Ant Design 的主按钮布局上就应用了这条原则，在特定的场景中将主按钮布局在边缘的位置，而并不是以左右来做位置上的规范。

· Question 2 ·

抽屉和弹窗的区别是什么？

在做页面的过程中，你是不是也会有这样的疑问：抽屉和弹窗基本上是一样的功能，在设计过程中应该如何区分和使用它们？

可以肯定的是弹窗和抽屉的功能基本上一致，我们从两个角度来区分二者：

1. 从内容承载量进行判断

这是很简单基础的判断逻辑，内容较多的时候用抽屉，内容较少的时候用弹窗。但是这种方式无法清晰的化分边界，同时会对用户预期造成一定的困扰。

比如，如果规定多于 5 项的表单都用抽屉，少于 5 项的表单都用弹窗，由于用户在击发弹窗或抽屉时对于要填写的表单数量没有预期，所以很有可能会存在在同一个页面中，点击相同类型的功能时，一会儿弹出来的是弹窗，一会儿弹出来的又是抽屉。

当弹窗或抽屉的表单中包含二级弹窗或抽屉时，也是同样的问题。其主要原因是用户无法对将要填写的内容做出预判。

2. 从触发方式进行判断

这是从用户操作行为的角度对二者进行区分。当反馈内容由系统触发（对于用户来说属于被动接受），推荐使用弹窗；当反馈内容由用户触发（对于用户来说属于主动唤起），则推荐使用抽屉。这个判断标准会使二者的边界更清晰，对于用户来说也更容易形成稳定的预期。

· Question 3 ·

浏览记录的标签页该如何使用？

有用户问我，他在另一款产品中看到了浏览记录标签页（见下图），而 Ant Design 里面却没有，所以想了解一下关于标签页的具体使用场景：

我认为这种标签页的作用，相当于操作和浏览历史，可以快速定位到曾经浏览或使用过的功能页面，它的使用场景具备以下特点：

• 产品功能模块较多，且大部分情况下各个功能模块之间没有强烈的逻辑关系，较为独立；
  - 用户需要在产品中同时进行几个功能的操作；
  - 产品单一功能模块的内容较为复杂，并在一个页面中需要用户进行较多的操作。

如果功能模块之间逻辑关系较为紧密，我们通常推荐使用“面包屑”组件：

面包屑同样可以显示用户的操作路径，以及当前页面在系统层级结构中的位置，并能引导用户向前返回。面包屑的使用场景为：

• 当系统拥有超过两级以上的层级结构；
  - 当需要告知用户“你在哪里”时，并引导用户向上返回。

因此设计师可以根据产品的功能特点需要，来进行优化和调整。

#第三篇

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

· Question 1 ·

Tab 和锚点 Tab 有什么区别？

有同学想知道 Tab 和锚点 Tab 在使用的过程中有什么样的区别，这里给大家详细说说：

1. 功能上的区别

普通 Tab
1. 当页面信息较多，Tab 可以使用户的浏览和查找更高效；
2. Tab 可以用于区分信息类型，将大块内容进行收纳，使页面更加整洁。

锚点 Tab
1. 锚点 Tab 用于承载较多信息的页面中，用户需要顺畅、沉浸浏览所有信息且浏览过程中能感知阅读内容的结构和顺序；
2. 用户可以使用它来快速定位和跳转。

2. 呈现形式上的区别

普通 Tab
1. 通常情况下会一直存在，不会因为页面的宽度尺寸发生变化而消失；
2. 其呈现内容的层级和颗粒度根据 Tab 来确定。比如：页面级的 Tab 只能定位到页面层级的内容，表单 Tab 只能定位到表单层级的内容，下方给出两个案例：

1. 可以有多种层级，作出嵌套关系，且设计样式和结构更加多样化，如下图所示：

锚点 Tab
1. 锚点 Tab 在页面宽度尺寸缩小到一定值时，可能会根据情况被隐藏，见下图：

1. 理论上，锚点 Tab 可以锚定在页面范围的任何元素上，点击后直接定位到该元素，见下图：

1. 通常锚点 Tab 只有一个层级，且样式和结构比较单一。

以上就是二者的区别，大家可以根据需求自行使用。

、

· Question 2 ·

栅格布局该如何使用？

栅格布局，是一种响应式布局方式，应用此方式设计开发的页面可适应不同的屏幕尺寸和方向，确保内容呈现的可读性。

AntD 采用的就是 24 栅格体系，对页面的内容区域进行 24 栅格的划分设置，如下图所示：

响应式栅格布局由列（column）、间距（gutter）和边距（margin）这三个基本元素构成：

• 列（column）：列的宽度被称为列宽，使用百分比来定义，不是固定值，以便可以灵活地适应任何屏幕大小。网格中显示的列的数量由屏幕的一些断点确定，达到断点时，列数就会发生变化。

• 间距（gutter）：也被称为槽，间距可以被设定为定值，在每个断点范围内的个数是固定的，达到断点时，间距数量就会发生变化。

• 边距（margin）：指内容和屏幕左右边缘之间的空间。边距宽度在每个断点范围内的值是固定的，达到断点时，宽度就可以发生变化。边距的宽度通常是间距的倍数。

AntD 为页面中的间距（gutter）设定了定值，当 PC 端浏览器或屏幕尺寸在一定的范围内发生变化时，列（column）的宽度会随之扩大或缩小，数量也会发生变化；间距（gutter）的宽度值固定不变，以此实现卡片的宽度变化。

在左右布局的设计方案中，常见的做法是将左边的导航栏固定（设为定制），对右边的工作区域进行动态缩放

当没有左侧导航栏时，通常的布局做法是对两边的边距（margin）定义最小值，当界面的宽度缩小，边距（margin）达到最小值之后，再对中间的主内容区域进行动态缩放：

在应用栅格布局时要注意以下几点：

1. 尽量保持偶数思维：所有的数值尽量使用偶数。
2. 内容边缘不能出现在间距（gutter）上：内容的范围要从列（column）开始到列（column）结束，即在列宽内，内容边缘不能出现在间距上。但有时如果我们把内容都按照列宽排布，视觉效果可能会不太好，最佳的处理方式是将整个元素放在一个不可见的，更大的容器内，再将容器排布在列上。见下图：

3. 只要父级元素对齐栅格，子级元素不必完全对齐：有时设计内容一半是图片，一半是文字，图片和文字没有完全落在一列上，其实也是没有问题的，因为只要父级容器对齐列宽即可，见下图：

原文链接：https://mp.weixin.qq.com/s/yuLnDMbJJeVxWs3nS1GVIQ
转载时间：2021.11.20

海盐社
以精炼设计干货为宗旨，每天早上9点为您分享组件分析、设计理论、效率提升、职场经验等知识，助力设计师共同成长。
613篇原创内容
公众号

弹窗Footer的取消与Header的关闭有什么不同？

文章开始便对你进行了灵魂的拷问，这是某天在咱们群内所讨论的话题，他们之间究竟存在哪些差异？又有哪些利弊？
首先在功能层面上，取消与关闭都是我们退出模态层，回到原页面当中的入口，只是在页面当中会存在一些小逻辑：
点击Header的关闭：
是用户不需要进行思考或者看了Header的标题过后，就很明确就是要关闭这个弹窗。比如突然弹出一个广告，不小心点到某一个按钮，这些都是用户一开始就没打算进行任何操作，因此可以快速选择顶部的关闭

点击Footer的取消
：是用户先进行过弹窗内容的阅读，发现内容可能过于复杂、可能和我的预期不符，所以想要放弃这个弹窗，这时候点击取消是他视觉浏览当中最直接的方式

有部分读者会说能不能去掉 Header 的关闭，只保留底部的取消？

其实这类型的问题，答案肯定是不能的，因为弹窗又不会只在一个地方出现，比如 对话框、通知提醒框 你必须得都做统一，如果去掉，会影响到其他组件的正常使用，这就叫一致性，不能因为你一个组件的任性，坏了其他组件
感谢咱们4群的小伙伴的讨论，手动@一下~ 这应该是今年最短的文章了，哈哈哈~

最后还是留个思考题：弹窗Footer的取消与Header的关闭，哪一个层级更高呢？
原文链接：https://mp.weixin.qq.com/s/1PwAwPHS9uxZbTDtScwC5Q