《工作经验： B 端产品组件设计细节及经验分享.docx》由会员分享，可在线阅读，更多相关《工作经验： B 端产品组件设计细节及经验分享.docx（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、工作经验：B端产品组件设计细节及经 验提供本文源于读者和粉丝的相关提问，以及我前段时间在做Ant Design设计与运 营工作中的经验沉淀和总结，希望对你有帮助。一、主要操作按钮应该放在哪边有细心的用户发现,AntDesign按钮组的里按钮的排列顺序似乎并没有什么规 范可言。主操作button在官方给出的应用案例中，一会儿放在次要button的左边，一会儿又放在次要button的右边，如下列图：-S3! /二步员I I当副页禺员面：门户员员面：门户员导出致盛 数据明细产品名8；区块域洞湾眼务访问趋势主button放在次button的右边URLPOSTv内容内容内容内容内容内容内容内容内容0+添
2、加URL 9000.00复制删除家电夏日促销这是一段对活动的描述，内容从刚才填写的表单中摘取主button放在次button的左边其实AntD的按钮摆放是有规律的。主按钮设计规律依据的是费兹定律”： 任意一点移动到目标中心位置所需要的时间，与目标距离正相关，与目标大小负相关。你可以简单的理解为：目标越大,距离越短，越容易被点击到。所以按钮等可点击区域在合理的范围之内越大越容易点击，反之，可点击区域越 小，越不容易操作。因此，屏幕的边和角很适合放置像菜单栏和按钮这样的主元素，因为不管你移动 了多远，鼠标最终会停在屏幕的边缘，并更容易定位到按钮或菜单的上面。Ant Design的主按钮布局上就应用
3、了这条原那么，在特定的场景中将主按钮布局 在边缘的位置，而并不是以左右来做位置上的规范。二.抽屉和弹窗的区别是什么在做页面的过程中，你是不是也会有这样的疑问：抽屉和弹窗基本上是一样的功能，在设计过程中应该如何区分和使用它们？可以肯定的是弹窗和抽屉的功能基本上一致，我们从两个角度来区分二者：1 .从内容承载量进行判断这是很简单基础的判断逻辑，内容较多的时候用抽屉，内容较少的时候用弹窗。但是这种方式无法清晰的化分边界，同时会对用户预期造成一定的困扰。比方，如果规定多于5项的表单都用抽屉，少于5项的表单都用弹窗。由于用户在击发弹窗或抽屉时对于要填写的表单数量没有预期，所以很有可能会 存在在同一个页面
4、中。点击相同类型的功能时，一会儿弹出来的是弹窗，一会儿弹出来的又是抽屉。当弹窗或抽屉的表单中包含二级弹窗或抽屉时，也是同样的问题。其主要原因是 用户无法对将要填写的内容做出预判。2 .从触发方式进行判断这是从用户操作行为的角度对二者进行区分。当反应内容由系统触发（对于用户 来说属于被动接受），推荐使用弹当反应内容由用户触发（对于用户来说属于主动唤起），那么推荐使用抽屉。这个判断标准会使二者的边界更清晰，对于用户来说也更容易形成稳定的预期。三、浏览记录的标签页该如何使用有用户问我，他在另一款产品中看到了浏览记录标签页（见下列图），而AntDesign里面却没有，所以想了解一下关于标签页的具体使用
5、场景：。Admin ProO Dashboard人主控台监控页工作台假设系筑管理寰单页面y曲列表页面 VQ搜索页面V画详情页面VO结果页面V= QDashboard 主控台访问销售额订单月12,00025,848日同比12.5%， 周同比5% 总访问280万68万用户分析商品订单1,680转化率票据访问fit访问量超为15.000我认为这种标签页的作用，相当于操作和浏览历史，可以快速定位到曾经浏览或 使用过的功能页面，它的使用场景具备以下特点： 产品功能模块较多，且大局部情况下各个功能模块之间没有强烈的逻辑关系，较为 独立； 用户需要在产品中同时进行几个功能的操作； 产品单一功能模块的内容较为复杂，并在一个页面中需要用户进行较多的操作。如果功能模块之间逻辑关系较为紧密，我们通常推荐使用“面包屑”组件：Home Application Center Application List An ApplicationHome / Application Center / Application List / An Application面包屑同样可以显示用户的操作路径，以及当前页面在系统层级结构中的位置,并能引导用户向前返o面包屑的使用场景为： 当系统拥有超过两级以上的层级结构； 当需要告知用户你在哪里”时，并引导用户向上返回。因此设计师可以根据产品的功能特点需要，来进行优化和调整。