【GDS设计系统规范】一、主界面布局规范

---

摘要

文章介绍以下内容：

1. 主界面组成
2. 主界面布局特点
3. 主界面布局定制

一、主界面组成

1.1 主界面分区

序号	界面分区	说明
1	顶部通栏	放置标题、项目文档级别操作与其他辅助信息入口。
2	功能命令	按一定逻辑分组，放置软件及插件的主要功能命令。
3	资源管理	放置当前项目中的主要资源内容，如视图、明细表、图纸、模块、构件等。
4	动态面板	放置编辑命令或预设参数，可根据激活命令工作流或所选对象动态显示相关功能或功能组。 分区内可以容纳单个或多个动态面板（垂直堆叠）。
5	属性面板	放置所选对象的属性参数表单，为对象参数显示与编辑区域。
6	画布视图	创建绘制三维模型与二维图元的画布区域。
7	底部通栏	放置提示及非高频操作控制命令。

1.2 主界面模块

①”顶部通栏“分区

序号	界面模块	说明
1.1	LOGO	应用程序图标放置在“顶部通栏”最左侧。
1.2	标题	应用程序当前打开项目名称放置在“顶部通栏”左侧，左对齐。
1.3	快捷命令	应用程序文档操作（例如：共享、同步、撤消）、设置、或其他高频访问的操作放置在“顶部通栏”的中部。 这是一个清晰可见且随时易于访问的操作的突出位置。
1.4	用户信息/帮助菜单	应用程序的帮助选项（例如，反馈、帮助、插件下载）位于标题栏的右侧。

②”功能命令“分区

序号	界面模块	说明
2.1	控件栏	”控件栏“是功能命令的一级分组。 可切换应用程序中的插件或”工具栏分类页签“，切换后“工具栏分类页签”中将显示所选插件命令。
2.2	工具栏分类页签	”工具栏分类页签“是功能命令的二级分组，通过页签形式将工具栏中命令按一定逻辑分组。 将同一类型操作命令，同一业务操作命令放置在一个页签中，有助于用户快速查找定位命令。 页签的方式也提供了更大的命令容纳空间。
2.3	工具栏	”工具栏“是功能命令图标的实际放置空间。 可通过竖直分割条进一步分组为更小的功能集，将功能命令继续拆分为三级分组。

③”资源管理“分区

序号	界面模块	说明
3.1	资源管理分类页签	一般放置项目文档内项目资源相关的内容。如：项目视图、构件库、模板库等。
3.2	资源管理内容面板	分类页签所包含内容的容器。

④”动态面板“分区

序号	界面模块	说明
4.1	通用工具	一种动态面板，其内放置了所有对象适用的通用编辑或工具操作命令。
4.2	其他动态面板	其他类型的动态面板。 可根据激活命令工作流或所选对象动态显示相关功能组的动态面板，可以容纳单个或多个。

⑤”属性面板“分区

序号	界面模块	说明
5.1	类型操作	标识、修改当前所选对象的类型，并可新增类型。
5.2	属性参数	标识、修改当前所选对象的参数。

⑥”画布视图“分区

序号	界面模块	说明
6.1	视图页签	显示当前已打开的所有视图，可切换”工作画布“。
6.2	工作画布	进行查看、绘制、建模等创建操作的区域。

⑦”底部通栏“分区

序号	界面模块	说明
7.1	显隐控制栏	放置对象在”工作画布“中显隐状态控制命令。
7.2	状态栏	为所选对象正在执行或即将执行的操作提示文字帮助信息。
7.3	视图控制栏	放置”工作画布“视图显示或控制切换命令。

1.3 分区布局逻辑

界面布局适配软件操作行为。

根据分区的停留时长和动线，以画布为核心，按照”高频就近，低频就远“的原则，为“功能命令”、“资源管理”、“动态面板”、“属性面板”等分区提供了合理的放置空间。

在三维建模创建过程中，用户停留时间最长的区域为“画布视图”。分区围绕“画布视图”展开，与其关联的分区紧密围绕在其周围。

新手用户在模型创建编辑过程中，高频的在“功能命令”、“画布视图”、“动态面板”、“属性面板”分区之间跳转。

专家用户在模型创建编辑过程中，“功能命令”分区的点击常以键盘快捷键代替，更加提高“画布视口”停留时间的占比，高频的在“画布视口”、“动态面板”、“属性面板”分区之间跳转。

“动态面板”与“属性面板”承载对象编辑及参数调整功能，为避免用户来回在不同区域查找修改，将两者放置在同一区域，无论专家用户还是新手用户，都能降低创建编辑的负担。

与创建编辑工作流相关度低的操作放置在“顶部通栏”与“底部通栏”中。

二、主界面布局特点

2.1 操作流动线

符合创建编辑行为的工作流动线，为用户提效。

界面分区或界面模块布局所形成的操作工作流遵循以下原则：

• 操作动线应尽可能短；
• 操作动线应线性顺畅，并尽可能无折返；
• 操作动线应符合“从左至右，从上至下”的操作习惯。

最主要的工作流动线包括以下三种。

2.1.1 以“功能命令”分区为起点的工作流

创建对象工作流常以“功能命令”分区为起点。

注：创建对象是指在画布视图中创建一个三维模型物体。以下图为例：可以简单的理解为在画布视图中新建了一个正方体对象。

1. “功能命令”分区中启动功能命令；
2. “动态面板”进行相关设置；
3. “属性面板”进行相关设置；
4. ”画布视图“中绘制。

2.1.2 以“画布视图”分区为起点的工作流

编辑对象工作流常以“画布视图”分区为起点。

注：编辑对象是指对视图画布中已有三维模型物体进行位移、属性参数等编辑。以下图为例：可以简单的理解为编辑正方体长宽高、显示样式、位移等。

1. “画布视图”分区中选择对象；
2. “动态面板”进行编辑操作；
3. 或“属性面板”进行参数调整。

2.1.3 以“资源管理”分区为起点的工作流

“资源管理”分区中承载内容相对复杂，一般默认展示项目中所有视图、明细表、图纸树状图的页签，其功能类似于项目文件中的导航。

建议放置在左侧，界面从最左侧至最右侧为：视图级别（“资源管理”） → 对象级别 （“画布视图”）→ 参数级别（“属性面板”）。符合从左至右，依次递进深入的使用习惯。

通过“资源管理”分区切换视图”工作画布“并新建对象

1. “资源管理”分区打开画布视图；
2. “功能命令”分区中启动功能命令；
3. “动态面板”进行编辑操作；
4. 或“属性面板”进行参数调整；
5. ”画布视图“中绘制。

通过“资源管理”分区切换视图”工作画布“并编辑对象

1. “资源管理”分区打开画布视图；
2. ”画布视图“中选择对象。
3. “动态面板”进行编辑操作；
4. 或“属性面板”进行参数调整。

从“资源管理”分区创建对象

1. “资源管理”分区激活创建对象命令；
2. ”画布视图“中绘制；
3. “属性面板”进行参数调整。

2.2 画布空间

“画布视口”是用户高频查看和编辑的空间，更大的画布操作空间可提升用户操作效率和愉悦度。

2.2.1 扩张画布空间

画布竖向空间

“功能命令”分区的工具栏中提供多种显示方式，可以通过以下方式扩充画布空间：

• 隐藏工具栏命令文字描述。
• 将工具栏命令图标切换至小图标。
• 隐藏分组标题。

画布竖直空间可增加30px。

画布横向空间

需要专注于画布中操作或展示查看设计成果时，可以折叠画布左右的分区。

左侧停靠面板中的“资源管理”分区中集成视图、类型显影/锁定、构件库等非高频操作。折叠收起后，画布水平空间可增加200px左右。

右侧的“动态面板”、“属性面板”区域同样支持折叠收起操作。

2.2.2 多画布显示

在创建编辑工作流程中，用户在一个视图中创建或修改，期望同步在另一个视图中更清晰查看结果。

视图平铺和分屏显示能够很好解决这一需求。

视图平铺

将”工作画布“按照一定的规则平铺在”画布视图“分区内。

分屏显示

利用分屏能力可以将”工作画布“在独立的对话框中显示，双屏时，可拖拽到另一个独立显示器上。

2.3 分组

功能强大的软件往往包含大量的功能命令按钮，按某种规则分组能提供更多收纳空间。匹配业务流程放置后，可以更好的帮助用户理解业务的工作流。分组数量需和软件命令的数量和业务复杂程度匹配，并非越多越好。

2.3.1 ”功能命令“的分组

一级分组

在“工具栏”左侧，“控件栏”提供了不同专业层级、或插件层级功能集切换的能力。将未使用的插件或者其他专业功能通过分组隐藏，以减少操作过程中无关干扰。

二级分组

在“工具栏”上方，将命令按不同的功能命令目标放置到对应“工具栏分类页签”之下，提供了专业下功能模块层级的分组能力，“工具栏分类页签”可匹配不同业务场景的命令。

以数维建筑软件举例，“工具栏分类页签”分为建筑设计、注释表达、计算分析、通用协同，分别完成不同的目标。

不使用一级分组时，插件命令也可以直接放置于插件的“工具栏分类页签”下。

三级分组

在“工具栏分类页签”之下，可以将功能命令继续分成更小的命令分组，使用竖向分隔线分隔开，提供了功能命令层级分组，有助于用户快速查找功能命令。

分组中命令属于同一类别，或者完成类似功能目的。分组排序可匹配当前功能集中的业务流程先后顺序或功能命令使用频率。以数维建筑软件举例，建筑设计页签下，“基础构件”功能命令分为一组；“房间区域”创建分为一组。

通过下拉菜单继续分组

若功能较多，三级分组依然无法承载，可在下拉菜单中放置更多命令项。

下拉菜单中还可支持继续分组：

• 通过水平分隔线完成分组。
• 通过二级下拉菜单完成分组。

2.3.2 ”资源管理“的分组

一级分组

左侧“资源管理”分区中，将内容按不同的类别放置到对应的页签之下，以达到同样目的。

以数维建筑软件举例，分为四组“项目管理”、“显示过滤”、“构件库”、“符号库”，其中“项目管理”包含了所有项目视图，为高频操作，所以默认放置前最前。

二级分组

二级与二级以上的通过”资源管理“内容面板内的树状图节点承载。

2.4 逐级展开

与可能执行的操作相比，用户正在执行或即将执行的操作具有更高的相关度。

采用逐级式展开的方式，减少、隐藏或删除不太可能的内容和命令。

可以根据启动命令或者选择对象进一步在”动态面板“分区提供相关的命令组合。

2.4.1 根据激活命令提供其相关动态面板

2.4.2 根据选择对象提供其相关动态面板

2.5 专项环境

专项环境提供更高专注度。

进入专项环境后隔离所有无关命令，只显示与当前操作相关命令；并且可以弱化专项环境以外的对象显示，让专项环境中内容更易聚焦、更易操作。

面式构件的草图编辑，模块创建编辑均使用了专项环境。专项环境适用于这类相对独立且较为复杂的操作任务。

2.6 深/浅界面模式

2.6.1 深色界面模式

深色界面模式下，在黑色或深色背景上看到白色或浅色文本。背景为深色、前景为浅色。

弱光办公环境下，深色界面不会像浅色界面一样刺眼，浏览体验更舒适。

设计软件绘图中常使用高亮颜色区分各种图层和对象元素，对于高饱和且偏亮的颜色，在黑色背景下对比度更强，画布中高亮颜色更容易被感知。

并且，深色界面可以减少显示器的电池消耗量。

2.6.2 浅色界面模式

浅色界面模式下，在白色或浅色背景上看到黑色或深色文本。背景为浅色、前景为深色。

相比深色界面模式，浅色界面模式在画布内容呈现上不存在颜色的反相，更接近打印结果和导出结果的呈现效果。

对于有大量文字，浅色模式下的白底黑字阅读性更好。

软件界面和画布配色应保持一致的深浅界面模式，以获得一致的视觉体验。

三、主界面布局定制

了解界面分区模块特点，并结合应用程序的场景和需求，确定界面内容的优先级，定制界面布局使用户能高效地处理内容。

3.1 布局示例一

场景：软件功能命令较少，业务深度不深，但对工作画布区域的大空间有需求。

布局方式：可以将”功能命令“分区的命令图标默认设置为小图标，并隐藏命令名称，将提供更大的工作画布的默认尺寸。

3.2 布局示例二

场景：软件项目内涉及到的资源内容较少，且使用过程中基本不需要对”资源管理“分区中内容进行操作。

布局方式：可以将”资源管理“区域放置在右侧或直接隐藏，”动态面板“和”属性面板“区域放置在左侧。

3.3 布局方式三

场景：软件期望以windows熟悉的布局方式排列功能命令。

布局方式：“顶部通栏“与”功能命令“分区命令图标可以左对齐方式排列。

四、主界面案例截图

4.1 数维建筑

4.2 数维结构

4.3 数维机电

4.4 BIMMAKE

五、附录

5.1 PPT讲演版本

5.2 插图源文件

GDC/GNUF界面规范 – Figma

https://mastergo.com/goto/uLP92dNA?page_id=0:17773&file=105311157533415