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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

标题在左,操作在右

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

搜索有较强操作性

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

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

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

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

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

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

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

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

智能组件探索:这个工具栏会自动布局~
我们从最复杂的场景出发,以线性的简单规则向下兼容,制定出一套动态的布局规则。

智能组件探索:这个工具栏会自动布局~
单行模式

智能组件探索:这个工具栏会自动布局~
双行模式

智能组件探索:这个工具栏会自动布局~
双行模式

是否真的可以落地?

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

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

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

  • 其中第二行的案例标题区域展示的是一段说明文案,可视为 20% 的自定义情况处理。
  • 倒数第二行的案例中,默认把操作放在工具栏左侧,这是与按钮规范不符的情况,暂时先不处理。

结语

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

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

原文:https://zhuanlan.zhihu.com/p/188693322

文章标签:

0 条评论 16 次阅读

  1. 既来之,则言之。

发表评论

Top