主要针对酒店行业和联邦政府进行Web开发的Ryan Boudreaux针对四大设计原则写了一系列文章，本文为第三篇《Effective design principles for web designers：Alignment》的译文，内容如下：

对齐是“Web设计者应遵循的高效设计原则”之三。

对齐

无论你是否意识到，对齐都是大部分Web设计中必不可缺少的部分；它作用于幕后，是一个隐藏设计元素。它起初可能只是一个PSD文件，也可能是设计模版中不可缺少的部分，是Web设计的主干。你的网站可能有一套布局（或网格），作为主要的框架，以支持网站的外观、体验、导航、工具栏、页眉、页脚等。

作为高效设计原则，“对齐”可以帮助我们对“元素如何在页面中布局”做出明确的决定。利用战略层上的布局，可以设计出更强大、更吸引人的作品；利用网格系统，可以为每个元素的定位提供标准的指导。没有对齐策略，我们就会随意安放元素，与其他相似元素产生很小甚至不会产生联系。没有对齐，网站的外观及体验就会变得杂乱无章。

对齐策略已远远超越了对齐、浮动属性及文本和图片的对齐方式，它还包含其他的因素，比如用户的交互、信息架构、网格及Web设计元素的组织。

关于Web设计中的对齐，你是如何做决策的？

最主要的考虑因素包括对典型用户交互方式的分析，如眼动追踪测试。针对“用户如何浏览网页”的多项研究已开展，内容包含眼睛是如何浏览页面的，从开头到结束的扫描路径是什么，用户如何决定跳转到的位置及下次点击位置等。Charles O’Connell在Usability.gov上发起的讨论（如图1）介绍了眼动追踪测试的含义。从这些研究可以看出，它的要点之一是大部分用户会沿着“F”形状的“热点图”来扫描页面内容，即从顶部开始（正如头条往往比图片更吸引眼球），仅扫描几个词后，便沿页面的左侧扫描并寻找更多有吸引力的内容，并在几秒内做出点击动作。

图1

同时还要注意信息架构（IA），包括整体概念模型、设计计划、架构及组织方式。该过程可以描绘出网站的层级结构、核心导航、标准、规范、分类标签、可用性，用页面线框图、站点设计图解、原型图来代替详细的设计模式。图2展示了一个简单网站的信息架构概念模型，它提供了开发流的起点，最终对主要元素进行对齐设置，以满足动态网站模型。

图2

利用对齐，如何创建引人注目的网站？

对齐原则带来了条理，而条理体现了协调，所有的元素平衡合理地安排在Web页面中。以有序的方式组织页面元素，从而构建成功的产品并健康的发展。

图3所示的简单布局以左侧顶部的Logo开始，页眉和导航区域位于右侧区域，并与之水平对齐；Banner图位于导航的下方。左侧栏与Logo位于一列，一直延伸到页脚的上方。主内容区与Banner图和页眉左对齐。右侧栏占据了剩余空间，与页眉/导航及Banner图的右边缘垂直对齐。页脚横跨页面的整个宽度。

图3