组件|工作经验｜B 端产品组件设计细节及经验分享（二）

编辑导语：B端产品项目是十分常见的设计内容，而对产品设计的规范和设计拆解，对项目的设计效率提升有很大的价值和意义。本篇文章中，作者分享了自己在做 Ant Design 设计与运营工作中的经验沉淀和总结，感兴趣的小伙伴不妨来看看。

本文源于读者和粉丝的相关提问，以及我前段时间在做 Ant Design 设计与运营工作中的经验沉淀和总结，希望对你有帮助。
一、主要操作按钮应该放在哪边有细心的用户发现，AntDesign按钮组的里按钮的排列顺序似乎并没有什么规范可言。
主操作 button 在官方给出的应用案例中，一会儿放在次要 button 的左边，一会儿又放在次要 button的右边，如下图：

△ 主button 放在次button的右边

△ 主button 放在次button的左边
其实 AntD 的按钮摆放是有规律的。主按钮设计规律依据的是“费兹定律”：任意一点移动到目标中心位置所需要的时间，与目标距离正相关，与目标大小负相关。
你可以简单的理解为：目标越大、距离越短，越容易被点击到。
【组件|工作经验｜B 端产品组件设计细节及经验分享（二）】所以按钮等可点击区域在合理的范围之内越大越容易点击，反之，可点击区域越小，越不容易操作。
因此，屏幕的边和角很适合放置像菜单栏和按钮这样的主元素，因为不管你移动了多远，鼠标最终会停在屏幕的边缘，并更容易定位到按钮或菜单的上面。
Ant Design 的主按钮布局上就应用了这条原则，在特定的场景中将主按钮布局在边缘的位置，而并不是以左右来做位置上的规范。
二、抽屉和弹窗的区别是什么在做页面的过程中，你是不是也会有这样的疑问：抽屉和弹窗基本上是一样的功能，在设计过程中应该如何区分和使用它们？
可以肯定的是弹窗和抽屉的功能基本上一致，我们从两个角度来区分二者：
1. 从内容承载量进行判断这是很简单基础的判断逻辑，内容较多的时候用抽屉，内容较少的时候用弹窗。
但是这种方式无法清晰的化分边界，同时会对用户预期造成一定的困扰。
比如，如果规定多于5项的表单都用抽屉，少于5 项的表单都用弹窗。
由于用户在击发弹窗或抽屉时对于要填写的表单数量没有预期，所以很有可能会存在在同一个页面中。
点击相同类型的功能时，一会儿弹出来的是弹窗，一会儿弹出来的又是抽屉。

当弹窗或抽屉的表单中包含二级弹窗或抽屉时，也是同样的问题。其主要原因是用户无法对将要填写的内容做出预判。
2. 从触发方式进行判断这是从用户操作行为的角度对二者进行区分。当反馈内容由系统触发（对于用户来说属于被动接受），推荐使用弹窗；
当反馈内容由用户触发（对于用户来说属于主动唤起），则推荐使用抽屉。
这个判断标准会使二者的边界更清晰，对于用户来说也更容易形成稳定的预期。
三、浏览记录的标签页该如何使用有用户问我，他在另一款产品中看到了浏览记录标签页（见下图），而 Ant Design 里面却没有，所以想了解一下关于标签页的具体使用场景：

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

组件|工作经验｜B 端产品组件设计细节及经验分享（二）

推荐阅读

经典福克斯多久换防冻液？

腊肠豌豆粒的做法腊肠豌豆粒怎么做

火锅丸子热量

夸美女的句子

新国标电动车能解限速吗

手机有dc调光吗手机dc调光有什么用

关于肮脏的句子

移动的和彩云是什么移动的和彩云是什么业务扣10元/月

五编发财树怎么养

琼c是哪里的车牌

爱奇艺怎么看登陆了几个设备

游戏送一血是什么意思啊,说完就怒送一血

教你在抖音中头进入相框拍摄的简单教程。

考研大纲，高考的考试说明和考试大纲有什么区别

华硕笔记本k42j，华硕笔记本k42j bios如何设置为U盘启动?

连中三元是哪三元连中三元是什么意思