一、引言

写GUI程序时，常常不知道该选用何种界面布局。有时候看到别人的界面布局不错，于是想抄过来用，结果自己用了之后发现效果没有那么好。

那么问题来了，到底该选用怎样的布局，布局的选择该遵循哪些点。

---

二、布局

1. 什么是布局？

我这里的布局不是指具体的layout类（或具体的网格布局、流型布局等），而是页面的大框架布局。通俗说，就是页面分哪几个部分。

一个小例子，
有一次我去面试一家公司，面试官和我之间展开以下一番对话。
面：你以前做过哪些东西？
我：做过播放器。
面：你做的播放器是怎么样的？
我：…（心想，怎么样的？这不太好回答啊）
面试官见我卡顿了，想了想，发出“嘶”的声音，递给我一张纸，说：你画一下界面吧。
我画了个大框框，大框框里又分了几个小框框，然后介绍这个框框是干啥的，那个框框包含哪些功能。

这个例子中的“大框框”就可以看做是界面布局了。很明显，界面布局应该是给人深刻印象的，你一说起GUI程序，立马会想到界面布局。比如你问我微信界面是啥样的，我会说左边一个框框，里面是联系人记录，右边一个框框，里面是聊天具体信息。

2. 布局类型

一定要说布局分哪几种，其实很难。因为根据内容不同，实际上的布局可能是五花八门的。但是你观察一些著名的软件或者网页，你会发现它们很一致。比如，说到搜索引擎，百度也好、谷歌也好、必应也好，都是页面中间一个输入框，然后右侧一个按钮。

抛开这种特别专注于某个功能的软件，一般来讲，布局往往分为“上下布局”、“T型布局”、“综合（其他）布局”三类。

2.1. 上下布局

这样的布局你一定不陌生，

这类布局的优点在于符合用户认知，遵循用户从上而下浏览页面获取信息的习惯。

有人可能认为这是上中下布局，因为标题部分是和导航栏分离的，看起来就像是三个部分。
但实际上在上下布局中，导航栏放标题里和导航栏放标题下面，没有本质区别。
上中下布局往往是指，顶部有导航栏，下面有页面内容，在页面内容和导航栏之间还有一个板块专门用来介绍该页面。上中下布局往往用在多级页面上。一方面顶部导航方便用户跳转不同页面，另一方面顶部导航之下的介绍板块用来快速呈现该页面主要信息，而底部详细内容供用户深入了解。

很多公司的门户网站就是这样的。

在桌面端，这种布局应用也不少，

许多监测系统就是这样子，

2.2. T型布局

后台管理系统中，经常出现T型布局的身影，

MES系统中，也常见。

显然，相对于上下布局，T型布局稍微复杂一些。

2.3. 综合布局（其他布局）

还有一些内容层级比较多的网站，你乍一看，好像也是前面的布局，但实际上每个页面都有许多功能模块，会引导到其他页面。

当然，还有一些功能相对单一的软件，就是把功能平铺开来了，比如串口助手，

3. 选用布局

3.1. 单层级

选用布局，我们先要获取系统架构的关键功能：

如果只是简单几个单层级功能模块，可以使用上下布局，

如果是桌面端的系统，其实使用T型布局也不少见，

但相对而言，浏览网页时，人们更习惯从上滚到下，所以一般是上下布局。而浏览桌面端时，页面比较固定，单层级功能用T型问题也不大。

3.2. 少数多层级

如果是有多层功能的软件，那一般的上下布局就不那么好使了，

当然，你可以在导航项上增加下拉列表项，当鼠标移至1级项，会出现下拉列表，显示2级项。

如果是桌面端软件，可以采用T型布局，将侧边导航栏设计为树形图，一级菜单点击后可以展开二级菜单（后台管理系统中通常都这么做）。

3.3. 复杂多层级

如果功能层级继续增多，你可以继续增加列表项或树形图展开项，

但通常，这不是一个好的选择，
例如，有的一级项，没有子功能，有的项有很多的多级子项，这时你的多级列表看起来就很不规整。
此时就不是简单地把顶部导航栏或侧边导航栏中的项增多就能完事了的。
参考NVIDIA官网，还是在顶部加导航，但是每个一级项页面中会有许多模块，点击页面中的模块，可以跳转到子模块页面。这时，一级界面上的内容其实有点导航的意思了。（当然，它的内容得与一级导航项相关）。这种复杂情况下，与其说是页面布局设计，不如认为是考验你对功能模块的划分能力。

---

三、结尾

本文大致介绍各种常见布局以及设计依据。个人感觉写下来，更像是导航栏的设计了。
题主在UI设计方面并非专业人士，设计思想上难免存在不合理之处，但是对没有布局经验的萌新来说，应该有着一定的启发作用。理解根据功能划分来进行布局设计这种思想后（并结合常见案例进行思考），对于大部分中小系统或网页的设计应该不成问题。

UI布局设计需要多积累，多吸收，多思考为什么。