界面设计规格（7）：界面的布局社交|专利|虚拟|装置|格力电器

编辑导语：在软件设计中，界面布局设计也是很重要的一项，不同类型的平台在界面布局上也有很大的不一样；本文是笔者的系列文章之界面布局，详细介绍了在界面设计中布局的重要性以及方法，我们一起来学习一下。

文章插图
为了满足客户的需求，软件界面的表达形式千差万别；但与网站的界面形式（电子商务、政府政务、各类网站等）相比，作为企业管理（ERP）类系统的界面形式比较低调；由于需要长时间对着屏幕操作、观看、思考，因此要设计得比较沉稳、简洁，布局的规律性强，表达形式也不需要过于炫耀、跳跃、刺激。
这里介绍几种最为常见和常用的PC端界面形式：卡片式、列表式、主细表式、树形式和页签式，以及这些界面形式对应的设计原则；这几种形式基本上可以满足大部分客户业务处理的需求，如有不同之处，本文中的设计原则也可以作为参考之用。
前面介绍了界面、控件（菜单、工具栏、按钮、字段框等）的概念，界面布局是界面设计的重要工作之一，布局就是在规定的界面范围内考虑如何布置这些控件可以获得最佳的效果（易观看、易输入、易查阅等操作）。
一、界面区域的划分在电脑屏幕上做界面的设计时，为了沟通和理解的方便，同时也是为了使设计结果符合人体工程学的基本要求，对界面的定位坐标和区域划分做出如下的约定（这个约定与技术设计和编码开发的约定是一致的），参见图1。

文章插图
图1 界面区域划分的基本原则
1）坐标原点的设定
通常会将电脑屏幕的左上角定为坐标原点（XY轴的交叉点0），因此，界面的内容扩展或是面积增大时都是由左向右、由上向下进行延伸。
2）区域的划分
【界面设计规格（7）：界面的布局】根据配置控件的使用目的不同，将界面分成两个大的区域：功能区域和作业区域。

功能区域：通常放在界面的四周，主要布置导航栏、工具栏、主菜单等。
作业区域：通常放在界面的中间部分，或是偏右下方的区域，这个区域是业务数据处理的核心区域，主要用来布置各类数据显示的窗口、字段框等。

二、功能区域的规划除去业务字段控件布置的区域以外都是功能区域，功能区域的设计要点参见图2：

文章插图
图2 功能区域的设计原则
1）导航栏区域
导航栏区域，通常可以分别在栏的左右两侧显示两类信息（不限于此），比如：

左端：显示本界面/本组件的打开路径，系统名称>子系统名称>模块名称>本组件名称。
右端：显示本组件的用户所属的部门、姓名、登录日期等信息。

2）工具栏区域（上）— 基本操作按钮区
这个区域用来布置基本操作按钮，一般放在导航栏与作业区域之间；所谓的基本操作按钮，指的是用来对本界面上属于主表区内数据进行操作的功能，对于细表区内数据的操作按钮通常布置在距离细表区的最近处（上边或是下边）。
工具栏的左右两侧是最为容易查找的位置，所以要将使用最为频繁的、重要的功能按钮布置在两侧，其余的布置在中间，布置在两侧的按钮遵循如下的原则：左端布置本界面处理开始的功能（入口）、右端布置本界面处理完成的功能（出口）。
布置参考如下：

①左端：布置打开窗口后首先要操作的按钮，比如：查询、新增等；通常基本功能区左边的第一个位置为“业务编号”，它是用于输入查询的数据“主键”；
②右端：布置本界面关闭前需要操作的按钮，比如：保存、提交、关闭等；
③中间：布置其它的通用按钮、或是个性化的功能按钮；

3）工具栏区域（下）— 它窗体调用按钮区
当界面的上端工具的按钮过多不好安排时，可以将一部分按钮安排在界面的下端，比如：主要用来调用其它组件、功能的按钮，布置的原则如下（仅供参考）：

④子窗体按钮：布置在作业区域的左下端，设置用来打开本组件附属子窗体的按钮，比如：详细计算用的窗体、上传资料用的窗体等；
⑤公用窗体按钮：布置在作业区域的右下端，设置用来调用外部组件窗体的按钮，比如：与本组件业务有相关关系的组件、企业知识库、参考模板等；

4）菜单栏区域⑥
通常设置在界面的最左侧，所谓的“菜单”就是一个树形结构体，结构的节点上是按照父子的关系布置了以下要素的名称：系统、子系统、模块和组件，通过菜单栏内可以找到系统中所有的功能，菜单的结构关系是参考下面的两个架构图设计而成的。