雅虎设计模式库解构（1）——布局之PageGrids（页面栅格）(翻译理论)

雅虎设计模式库解构（1）——布局之Page Grids（页面栅格）

——译者：s2dongman(申悦)

无论是互联网产品，还是软件产品，都是由一个个设计模式组成的。在阅读了多方资料后，我决定向雅虎学习，按章节详细解构其成熟的设计模式。这里奉上第1章——Page Grids，从栅格布局开始，描述Yahoo设计模式中的布局模式。

LAYOUT（布局）1. Page Grids（页面栅格）标准化的栅格系统，能够提供无缝、一致的用户和品牌体验。它能够帮助设计师灵活地组织那些通用、动态的页面元素。而对于大量由小公司开发和维护的网站来说，它还能为它们排布大小不一的广告条。通过一组定义好的栅格配置项，开发人员能够重用代码，并轻松利用现有模块来开发。

这解决了什么问题？

对于一个网站来说，需要在通用页面元素、页面宽度、间距、广告条的使用和代码库之间达到一致性。

什么时候使用这个模式？

创建/管理大量网页页面时。

不同的小组和成员分别设计/开发页面时。

解决方案是什么？

成功的网页设计经常会参考那些来源于印刷设计行业的方法，例如基本栅格系统。

首先，根据广告条需求、动态元素特点等，确立一个栅格，或栅格系统。

然后，为设计师和工程师创建模板和代码：

对于设计师，在常用的应用软件——如photoshop和Illustrator中创建模板，这些模板应该包含如列宽和间隙宽度。

对于开发工程师，创建一个独立的CSS代码模板来提供页面变量信息（如列的数量）。模板应该能够反映设计师定义的细节参数，如间隙宽度等。例如：Yahoo! CSS Page Grids

为什么使用这个模式？

模板降低了设计师的准备时间，并让他们更专注于页面内容和产品特点。

页面和页面元素之间的一致性有助于在品牌和用户体检之间提供无缝连接。

通用源码还提供如下好处：

降低了页面布局中细微或主要变更的数量。

加快了开发和全局页面的更新速度

可访问性

整洁和一致的页面结构，有助于提高导航的易用性和可预测性。

使用CSS进行页面结构布局，网页内容能置于HTML文件的任何位置。但是，由于辅助技术会基于物理结构和顺序阅读网页内容，我们有必要将最重要的内容排在首位，。例如，左侧导航菜单可能会在HTML代码中被放在最底端，而主要内容则放在第一位，此时辅助技术会优先读取内容部分。但是，CSS可以将导航区域在页面上放在内容区域前。

在雅虎中使用栅格布局的例子：