Skip to main content

Action Placement 操作布局

对于各种操作按钮和元素的摆放位置和顺序的规划和设计,考虑的是用户在特定的场景下进行何种操作,从而将操作按钮和元素放在最合适的位置,提高用户的操作效率和用户体验。


作用

  • 一是如何组织各种操作元素,使其看起来井然有序、简洁明了。
  • 二是如何将这些操作元素摆放在最合适的位置,以提高用户的使用效率。

结构

  1. 框架级工具栏:包含营销整个框架或环境的操作。
  2. 页面级工具栏:包含影响整个页面相关的操作。页面级别的工具栏是可选的,如果没有可用的操作,则可以不用显示。如果使用页面级工具栏,要保证即使页面滚动的时候也要保持位置可见。 分为:页面头部工具栏和页面底部工具栏。
  3. 内容级工具栏:包含影响屏幕内部分内容区域的操作,特别是在表格和图表中。

页面头部工具栏

头部工具栏一般包含用于页面上全局操作。比如保存和删除。

页面底部工具栏

底部工具栏一般包含与用户任务工作流相关的操作。这些操作代表过程中的步骤。

内容级工具栏

内容级工具栏包含影响屏幕内部分内容区域的操作,特别是在表格和图表中。

表格工具栏

使用表格工具栏进行本地操作,例如:

  • 向表格中添加新项目
  • 编辑或删除表格中的选定项目
  • 将表格切换到编辑模式
  • 控制表格的显示设置,例如过滤或排序

图表工具栏

使用图表工具栏进行本地操作,例如:

  • 切换图表视图
  • 在图表和表格视图之间或在不同图表类型之间切换
  • 图例切换、个性化菜单和全屏模式等标准操作
  • 特定场景的业务操作

表单工具栏

如果操作影响表单中的单个字段,请将操作放在该字段旁边。

强调

当操作较为重要时候可以使用主要按钮并放置在标题下方。

弱化

简单

数据添加

需要新增列表信息时,可通过列表下的按钮直接新增列表进行编辑操作。

表格行工具栏

如果一个操作只影响表格的一行或一个字段,则将操作放在表格行中。

这些操作包括:

  • 导航到项目的详情页面
  • 编辑项目
  • 删除项目

以上所有操作都显示为文字,并位于表格的右侧。

更多设计查看

自定义工具栏

如果您想添加自定义的操作,请遵循以下原则:

  • 如果存在大量表格操作,则仅在表行中放置一个操作。
  • 每行只提供一个动作(最重要的)。
  • 将操作放置在它所影响的数据附近。

以下内容待完善

操作类型

页面级工具栏

类型说明例子样式
基本最重要的动作;
需要在页面中突出显示;
需要进行下一步工作流程。
编辑
保存
提交
语义化替代主要操作;
通常成组出现,有推荐操作和慎用操作;
同意/拒绝
次要不是主要操作之外的通用操作类型;
弱化

内容级工具栏

类型说明例子样式
基本最重要的动作。
次要
弱化

动作分组

类型说明例子样式
工作流程与用户的任务工作流相关(例如编辑表单)。
业务触发与正在查看对象的相关任务。
管理内容影响内容中显示的信息。
管理布局更改整个页面的显示方式。
通用通用框架的一部分,而不是特工作流的一部分。