视图控制栏
定义
视图控制栏是用户与数据进行交互的载体,当用户操作视图工具栏时,可对视图可视区间缩放、平移、对数据进行检索、过滤等。
何时使用
以下两种情况,建议设计时开启视图控制栏。
- 数据绘制区域超过屏幕可视区域,为方便用户能以全局视角观察数据,建议开启视图控制栏。例:地图上的视图控制栏;
- 用户需要频繁与视图上的数据进行交互,比如放大、缩小视图空间,快速定位检索数据点等。例:公安通过关系网核查犯罪嫌疑人;
构成元素
以下每组元素都为选配项
- 搜索;
- 画布控制按钮组:+、—、百分比、Mini Map 迷你视图(可选配);
- 自定义组:可定制视图工具栏按钮,比如全屏、定位当前位置等操作。
常见类型
出现位置
- z-index 层级:层级高于画布,但低于视图中的 Tooltip 提示信息组件;
- 水平边距:距两边边距均为 8 的倍数;
- 位置:视布局需要,八个方向均可配置。
交互说明
搜索
- 键盘操作:输入后,enter 执行搜索操作,按键盘 esc 可退出搜索框,搜索恢复 normal 态。
画布控制按纽组
- 点击“+”,0 以上默认增幅 25%,100% 以上默认增幅 50%,建议最大值 200%;
- 点击”—“,100%~200% 之间,默认降幅 50%,100% 以下默认降幅 25%,建议早小值 25%;
- 百分比字体:Roboto Condensed;
- 键盘操作:按 esc 可退出已激活的下拉框。
Minimap
- 键盘操作:按 esc 可退出已显示的 Minimap。
设计建议
按钮分组显示
建议视图控制栏按钮按照格式塔原理分组显示。
遵循用户阅读习惯
画布初始位置,建议符合从左至右,从上至下的阅读习惯,而不是一刀切显示视图的正中间。比如:
- 思维导图建议贴左,垂直居中;
- 关系图将起始节点居中显示;
- DAG 流程图建议贴上,水平居中;
效率优先
建议视图增快捷操作,提升使用效率
- 放大 +:Ctrl/⌘ + +
- 缩小 -:Ctrl/⌘ + —
- 100% 1:1 等比例显示:Ctrl/⌘ + 0
- 适应画布显示:Ctrl/⌘ + 1
全场景考虑
- 建议补充移动端样式及交互;
- 补充 Dark Mode 模式。