恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
智能组件探索:这个工具栏会自动布局
0.0°
2021-06-18 原创文章 经验/观点 举报 516 6 3 1

作者:桃子,蚂蚁集团设计师

先向大家介绍一下今天的主角:列表工具栏。

说到表格大家都不陌生,在企业级中后台界面中,表格是最常用的组件之一。而「列表工具栏」常与表格搭配出现,它位于表格条目的最上方,用于放置标题、操作、搜索、简易筛选等功能。出于提效考虑,目前我们的开发工程师已经将列表工具栏集成为组件,作为表格的好搭档,列表工具栏的出镜率也相当高。



列表工具栏是否可以更提效、更智能?

列表工具栏是一个典型的业务组件,根据常见业务场景将搜索等 antd 组件进一步打包。当需要工具栏时,工程师直接把列表工具栏组件拿来配置并使用,无需再用 antd 组件自己拼搭,相对可以提升开发效率。

但我们并不满足于此,我们在想:有没有更爽的使用体验?组件是否可以做到更智能?在理想的场景下:组件包含了绝大部分业务需要的元素,工程师只需要选择「我要展示哪些元素、每个元素有多少」即可,而「这些元素怎么摆」、「间距是多少」等细节问题都会根据规则自动生成。通过内置动态布局规则,把复杂度从人转交到组件。



从复杂的场景出发,覆盖 80% 需求。

根据业务案例,我们归纳出 6 类元素作为全集,用户可以根据需求选用。其中「标题」、「轻量筛选」提供了可替换的常用方案。



为简单的场景作优化设计,提供单行模式,节约纵向空间。

最开始我们只设计了「双行模式」,但是发现大部分情况下元素是很少的,会比较浪费纵向空间。因此针对不同的内容量,进行了区别设计。在满足元素排序逻辑的基础上,节约纵向空间最要紧。用户判断单行放的下时默认「单行模式」,放不下再使用「双行模式」。



你可能会好奇:上述布局中,元素排序的规则是什么?


标题在左,操作在右

  • 标题作为最重要的识别元素,默认展示在卡片的左上角。

  • 根据 按钮规范,header 中操作按钮默认放置在右侧。表格工具是操作的一种,同时又因没有边框不适合与带框元素混排,因此展示在最右侧。

搜索有较强操作性

相对按钮切换和轻量筛选,搜索需要用户点击并输入内容,相对具有较强的操作性。因此它会更贴边展示,在展示上更贴近操作。

按钮切换重要度高于轻量筛选

这两者本质上都是筛选,只是按钮切换把选项外露出来。既然选项已经外露,说明按钮切换在重要程度上高于轻量筛选,因此默认把按钮切换展示在筛选的左边。


单行、双行的区别:双行有层级区分

  • 在双行模式下,第一行的层级会高于第二行。因此为了确保搜索的全局性,需要把搜索放在第一行,不受其他筛选项的影响。

  • 在单行模式下,元素没有明显的层级关系。



内置动态布局规则,线性逻辑向下兼容。

通过上面的步骤,我们知道了组件可以包含哪些元素,也知道了根据元素数量的多少可以选择两个不同模式。但是,当某些元素(比如标题)缺失的时候,应该怎么布局?


我们从最复杂的场景出发,以线性的简单规则向下兼容,制定出一套动态的布局规则。

(单行模式) 



(双行模式)


(双行模式)



是否真的可以落地?

还是要回到业务中去,实践是检验真理的唯一标准。


上图是随机从业务中抽取的列表工具栏方案,整体看来规则是可以覆盖业务场景的。不过也有例外情况:

  • 其中第二行的案例标题区域展示的是一段说明文案,可视为 20% 的自定义情况处理。

  • 倒数第二行的案例中,默认把操作放在工具栏左侧,这是与按钮规范不符的情况,暂时先不处理。



结语

规则同时存在于设计师的头脑中和组件中,只有当两者高度 match 时,智能布局才是「智能」而不是「智障」。

好的规则不仅追求在具体场景下的最优解,也要有一个整体的逻辑,简单、好记。列表工具栏是一次勇敢的尝试,最终效果还是要接受时间的检验。大家看完如何有任何想法,欢迎一起讨论~

Powered by Froala Editor

更新:2021-06-18

收藏

6人已收藏

Ant Design

企业级产品设计体系,创造高效愉悦的工作体验

  • 59

    作品

  • 568

    粉丝

  • 1

    关注

  • 设计模式 | 宏 Macros:如何让用户快捷完成自定义操作
  • 设计模式丨历史记录:让用户的操作有迹可循
  • 设计模式 | 多级撤销 Multilevel Undo:让用
  • 设计模式 | 撤销按钮:让用户更有掌控感

    猜你喜欢

      2021-06-18 原创文章 经验/观点 举报 516 6 3 1

      智能组件探索:这个工具栏会自动布局

      0.0°

      你确定要举报智能组件探索:这个工具栏会自动布局

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年06月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      6
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录