界面设计模式第四章，页面元素布局、格式塔。

4 组织页面：页面元素的布局

页面布局：利用视觉层次结构、视觉流和注意焦点、分组和对齐等设计方法，通过对页面元素的合理排布，传达页面的含义、顺序和交互发生点

4.1 页面布局基础知识

(1) 视觉层次：重要程度区分

好的视觉层次应突出页面元素的层级（信息结构），应给出：

各页面元素的相对重要性
页面元素间的关系

方法：

层次：标题或简短文字使用适当字体、字号、颜色或添加背景来突出，正文、链接、交互式工具酌情弱化
密度：密集的、颜色较重的区块对比强烈
背景：互补色作为背景色对比强烈
位置大小：页面中央的中等或大型文字区域会吸引注意，边角小文字弱化视觉效果
节奏：列表、网格、留白、缩进等可以制造视觉节奏吸引眼球，突出重要的小片元素
图片：图片可以搭配视觉层次使用，注意“广告过滤”现象
关系：相关元素在位置上放在一起（格式塔原则），在视觉上类似并与特别元素区分；相似元素块使用可互换的重复列表；缩进的小字可作为修饰和补充说明；包含关系可使用方框、背景色、手风琴模式、缩进等方式表现

格式塔原则：

相邻性：位置相邻的元素相关联 - 对界面的元素和空间进行分组
相似性：大小、形状、颜色、方向等外观相似的元素相关联
连续性：用户希望看到连续的元素，会将按规律对齐的元素自动补偿为连续的线条和曲线 - 对齐排列
封闭性：用户希望看到简单封闭区域，会将矩形、留白、分组对齐的区域自动补偿为封闭区域 - 对齐分组留白

这里类似《给大家看的设计书》中的对齐、对比、亲密、重复四大法则。

(2) 视觉流：用户浏览顺序

视觉流应合理引导用户在视觉焦点外的视线，影响因素有：

用户阅读习惯：从上到下，从左到右
页面上的焦点个数，利用焦点引导用户浏览的顺序

方法：

使用暗示线路（曲线或直线）串联页面元素
当需要用户阅读时，行动号召（交互视觉指示器）可以放在视觉流内，不需要阅读时可放在视觉流外
设计表单需要沿连续路径放置，并将结束按钮放在路径最后
注意不要打断连续路径中断用户视觉流

(3) 动态显示

使用设计方法实现页面在计算机上的动态显示，使小屏幕空间展示更多内容

显示大元素：滚动条
内容分块：模态Tab、手风琴、可收起面板、可移动面板
步骤引导：响应式允许、响应式展开

4.2 页面布局设计模式

（1）～（3）规划整个页面布局的视觉层次
（4）～（8）解决页面上大块内容的规置
（9）～（10）处理小静态元素的空间关系
（11）～（13）处理内容的动态布局

(1) 视觉框架

项目前期考虑，页面的基本布局、网格、颜色、格式方案等整体框架
何时使用：网站有多个页面，需要统一
为何使用：用户习惯统一的布局方式，如在同一位置放置标题、辅助元素，减少学习成本，同时突出变化内容，增加品牌特征
如何使用：所有页面在某些特征上保持一致：

背景、文本、视觉指示器的颜色
标题、副标题、普通正文、标注文字的字体格式和风格
字体风格和语法
网格、边距和间隔
导航和按钮风格、图形风格（如圆角）等
首页和主窗口的布局可能略微不同，达到区分和突出的效果

(2) 中央舞台

最重要的部分放在页面最大栏目中，其余内容放在周围的小面板上
何时使用：页面主要为用户显示或编辑连续信息，其他功能都次要
为何使用：快速引导用户视线在任务/信息起始点上，锁定用户注意力
如何使用：

中央舞台元素始终占据首屏的大部分空间，宽高至少为2倍的边距，注意舞台展示大小和内容起始点
使用和周围元素对比的颜色
大标题引导视线焦点
考虑用户对网站或产品的期望，将用户最想看的展现在中心舞台而不是让用户找
考虑用户习惯用法（如工具条一般在文字编辑器上面，导航条一般在网页左边）

(3) 对等网络

每组内容元素都有相似的网格、矩阵或样式，且视觉重量相仿
何时使用：页面有很多内容元素，具有相同的风格和层级，如新闻、文章、产品等
为何使用：相同的网格可以告诉用户内容的层次结构相同，同时使页面干净、有序
如何使用：

将合适的信息（图形、图片、标题、子标题、注释等）放到相对窄小的空间内，进行合理排版和修饰
设计网格时考虑页面宽度，注意布局的节奏
当用户交互时可以选择样式或颜色的变化，但不要改变元素的位置、大小或内容结构的变化
可以使用缩略图网格或小图片加文字的列表模式
保证每组元素风格一致且不单调

扩展阅读：15个诀窍让表格设计不再可怕

(4) 带标题区域

将页面内容分为多个带标题的栏目，在视觉上区分
何时使用：页面中有大量需要分组的内容，让用户易于理解
为何使用：带标题的栏目让页面信息架构更明显，便于引导用户视线
如何使用：

对网页的内容进行合理分块，赋予简洁明了的标题
标题可以使用加粗、特殊字体、加大字号、对比色、反白、缩进等方式突出视觉效果
使用合理留白分栏，利用对齐、方框和留白让页面结构化
为不同栏目设置不同背景色
避免复杂效果造成视觉噪声
可使用模态tab、手风琴、可收起面板模式隐藏部分内容
谨慎使用杂项等意义不明的标题

(5) 模态Tab（卡片堆）

把页面内容按不同模块组织成小Tab，当单击某个Tab时能看到该Tab模块下的内容，如word顶部菜单的选项卡
何时使用：页面中有大量内容无法显示在同一页面中，内容可以划分为有限个模块，模块内容相对固定且用户每次只需要看到一个模块
为何使用：Tab可以隐藏分组内容，保持页面整洁且符合用户使用习惯
如何使用：

组织好信息架构，对内容进行合理分组，组别个数小于10个（最好4-5个），并简短命名
选中的Tab用视觉指示区分
模态Tab倾向于为用户提供轻量级的页面浏览方式，一般在同一页面，需要和导航型的Tab区分
尽量不要让Tab标签中的标题出现分行，可以利用省略号缩短标签长度，或使用带箭头按钮滚动Tab

(6) 手风琴

把内容分模块按顺序排列到面板中，面板可以关闭、打开且相互之间不干扰
何时使用：页面展示内容类型多样且无法同时展示；用户一次只需查看一个模块；模块宽度差不多；模块间彼此类似或相关；常用于桌面应用的工具箱
为何使用：可以隐藏分组内容，保持页面整洁且符合用户使用习惯，用户可以打开或关闭模块保留最适合的工作区界面
如何使用：

竖向排列模块，采用有意义的排列顺序
为每个模块选取简短、描述性强的标题，放在横条上
可以使用变换方向的三角形图标提示打开/关闭操作
一般允许同时打开多个模块
保持各个模块的打开/关闭状态
如果一个模块中的元素需要分级，可以在模块内采用tab等其他结构性模式，避免层级混乱

(7) 可收起面板

把次要内容和可选内容放到用户能打开/收起的面板
何时使用：页面上需要提供注释、修改、说明等信息（不一定所有用户都需要，信息层级低，不需要默认展开）；用户可能同时查看不同信息；信息彼此关联不大，无法分组
为何使用：隐藏无关紧要的内容，让页面变简洁，同类方式还有模态tab、手风琴、可移动面板、带标题区域等
如何使用：

把支持性模块放到单独面板，让用户可以打开/关闭这些面板
在按钮或链接上注明模块名字，用”更多“或箭头图标示意可打开
关闭面板时收起占用空间用来显示其他内容
打开/关闭时添加动效，平滑过渡
当多个模块需要隐藏时，可以考虑用模态tab/手风琴模式
大部分用户选择打开可收起面板时，该面板考虑默认打开

(8) 可移动面板

把页面内容放到可拖拽和关闭的区块里，用户可以自定义布局。
何时使用：对于网站或应用的主要页面，页面内容包括文本、列表、按钮、图片、表单控件等多种元素，用户需要同时查看多个模块，且对不同用户查看模块的需求不同
为何使用：可以让用户自定义工作区，让用户形成空间记忆提高工作效率
如何使用：

为每个模块提供名称、标题栏、默认尺寸和默认设置
为用户提供拖拽的方式，拖拽时可以自动吸附到预先定义的布局网格（虚线框）中，方便优雅对齐
为用户提供打开/关闭的方式，通常在模块选择列表中打开
可以通过设置编辑器或额外按钮或控件对单个模块进行定制
可加入第三方提供的新内容和服务
保持上一次用户自定义的工作布局，可以在某一位置提供“恢复默认设置”，方便重置给用户安全感

(9) 右/左对齐

设计两栏的表单或表格时，让左边的标签右对齐、右边的控件左对齐
何时使用：用于从左到右阅读的两栏结构，其中标签文本的长短不一，统一左对齐影响用户查看
为何使用：符合格式塔连续性，可以让用户主动把标签和界面元素控件关联起来，左对齐的控件和右对齐的标签组成良好的双重边界，支持良好的视觉流
如何使用：

标签和控件相邻，标签右对齐，控件左对齐，形成双重边界
当标签过长时考虑分行
确保控件精确左对齐
对于不同的控件，可以适当拉伸让其在视觉上两端对齐

(10) 对角线平衡

使用不对称布局，通过把视觉重量放在左上角和右下角的对角位置使页面平衡
何时使用：当页面含有头部标题和动作按钮，且不需要滚动屏幕时使用
为何使用：视觉上突出重要元素，让页面保持平衡更美观，引导用户视线从左上角到右下角
如何使用：

把标题、tab等需要视觉突出的元素放在页面左上角，动作按钮放在右下角，其他内容插在中间
需要对主要界面元素的尺寸大小、位置和权重进行视觉补偿

(11) 响应式展开

先显示一部分用户界面，通过用户交互触发更多界面，引导用户完成操作步骤
何时使用：多分支任务，需要根据用户选择的任务显示不同内容，简化界面让用户放松
为何使用：利用计算机显示延展性引导用户交互行为，使用户更快建立正确的心智模型，工作流不容易被打断，所有界面在同一页面使用户更容易修改上一步操作
如何使用：

开始只显示第一个步骤需要的控件和文字，根据用户操作后响应显示下一步元素
允许用户回退
将所有元素放在一个界面，以免切换页面

(12) 响应式允许

开始时界面上大部分元素不能操作，随着用户交互改变元素控件的可操作属性（将不可用变为可用）
何时使用：多分支任务，在保持页面稳定不需动态重组界面同时，引导用户逐步操作
为何使用：利用计算机显示延展性引导用户交互行为，使用户更快建立正确的心智模型，通过禁止某些控件避免用户错误操作
如何使用：

第一步骤相关控件可操作，后续根据用户交互改变其他控件的可操作属性
没有明显的任务顺序
将禁止的元素放到控制其可操作属性的元素附近，让用户理解它们的关系，遵循从上到下、从左到右的视觉流
保证只禁止不应使用的元素，避免让界面友好增加不必要的限制（可用性测试）
当要禁止的控件集合过多时，需要放在一起最小化且靠近控制其可操作性的元素（空间邻近）

(13) 流体布局

页面元素大小和位置随窗口大小改变，让页面一直保持填满状态
何时使用：除了“封闭式”UI，如信息亭、手持设备、全屏游戏等固定屏幕大小的页面，当窗口、对话框或页面内容需要放大或缩小查看时使用，如网页、高度信息化控件（表格、树、图形编辑器等）
为何使用：让用户拥有布局上的控制权，让界面更灵活地适应窗口大小变化
如何使用：

窗口变大时，文本框、表格、图形或中央舞台编辑器变大同时，保持边界紧凑，如文本框随水平拉伸变长
较小尺寸下需要滚动的控件随窗口拉宽而变宽
窗口变大时，网页中保持导航和路标固定出现在上边和左边，背景图片填充新空间
窗口缩小时，多行文本的右边边界折行
当窗口对内容来说过小时，在周围添加滚动条，或删除某些元素
保证文本宽度易于阅读，避免过宽，最佳文本宽度：每行平均10～12个英文单词