“我是非科班出身的设计爱好者，一直想学习平面设计的基本理论并将其应用于UI设计之中。很巧地看到了这本糅合网格和网页的书，于是立马就读了起来。现在，在这儿分享一下读书笔记。”

专业术语

单元 —— 即网格的基本构成，一个单元就是页面上最小的纵向分割区域（也就是说，单元是以宽度计），栏以之为基础。

栏 —— 栏就是成组的单元。单元组合在一起，为内容的表达提供合适的空间。

区域 —— 区域就是相似栏的组合，形成页面各部分。

段 —— 段就是页面上的水平分割区域（也就是说，段是以高度计），帮助设计师在Y轴上精细地定位元素。段可以以多种方式划分，但使用黄金分割是最有效的方式之一。

分行网格 —— 由相同的基本行根据行距或文字的行间间隔，在页面上从顶至底地重复排列而成。横向与纵向众所周知，这两个概念很容易搞混（从不同的角度看，一个单元既可以说成是横向的，也可以说是纵向的），因此本书不说横向网格和纵向网格，而说分栏网格（页面的分割区域以宽度计）和分行网格（页面的分割区域以高度计）。

缝 —— 缝就是单元和栏之间的间隔空间。当单元合并成栏，单元之间的缝就被合并了，但是最左边单元的左侧空间和最右边单元的右侧空间却仍然存在。外边距和内填距外边距就是单元或栏的外围空间。而内填距则是单元或栏的内部空间。外边距一般是用来创建缝的，而内填距是用来在栏的文字区域内创建小而可见的插图。

元素 —— 就是版面的所有组成元件。比如标题、文本区域、图片或者按钮。模块模块就是成组的元素。元素组合在一起，形成独立的内容或功能模块。比如注册表，是由数个元素——标签、表格、按钮等——组成的模块。

网格在网页设计的作用

• 在信息高度集中的网页上，网格为信息的展示增添秩序、连续性和和谐性。

• 在静态或者动态的网页上，网格可向读者预示出信息的所在，更有助于信息的交流。
• 网格可在保持与原先展示内容总体一致的前提
• 为了发挥网格的力量，那些倾向于创造秩序的网络设计师希望对放置在计算机屏幕上的对象施加一种明确的影响和管理。这是网格与生俱来的职责。
• 网格促使一个网站上的各个设计方式彼此协作而不会相互削弱。

用网格设计网页的几个要点

• 在网络上，运用网格的设计方法要依赖于用户所选用的合适浏览技术才能发挥其最好的设计效果。

• 网络上的版式从根本上来说是不稳定的，至少暂时是这样。用户的电脑配置不同，网页的视觉效果区别会很大。若配置不佳，可能会影响网格所能产生的预想效果。
• 网络浏览器并没有标准的尺寸，既因为用户的显示器尺寸有很大差别，也因为用户可能在浏览器原始大小的基础上缩小或放大浏览器窗口。结果，印刷纸页具有固定而统一的尺寸，网上的网格就缺乏这种难能可贵的特性。
• 用户的输入、参数选择和设置——这些都可以主动或被动设置——可以彻底改变网页网格设计的条件。
• 虽然在网页上对设计元素进行精确的布置是可能的，但随着像素的增加，网格却受到限制，因为像素本身根据设备的不同，其尺寸也会发生改变。
• 网页设计要注意网站的交互性

网页设计中的用户体验

必须围绕着客户不仅要消费服务，还要使用服务的事实来为他们创造体验。因此不仅要考虑网格在形式上的尺度，也要考虑其与行为相关的尺度，网格不是一种向用户强加秩序或剥夺其控制权的工具，而是一种向用户传达秩序的工具，这样才能为用户创造出独特的体验。

网格设计流程

• 网格以解决问题为首要任务，美观在其次。

• 许多设计师完全沉浸于网格的形式美，对功能或内容只是生拼硬凑，不考虑其舒适度或合理性。但最成功的网格却是以解决明确的问题为根本目的。不管是交流性的问题，组织性的问题，还是操作性的问题，网格通过完美地解决这些问题展现其魅力。网格是用户体验的组成部分。

• 网格越简单，就越有效。

• 设计出优秀网格的一个关键因素是精确度，但有效性也同样重要。用来计算网格的组成单元以及栏所使用的方法应该相当明确，并足够简单，方便我们进行心算，也能快速向别人解说。使用的网格系统和解释的内容越简单，用户从中获得的利益就越多。

步骤

以下就是设计网格的主要步骤。1. 进行调查，明确要求2. 画线框图3. 设计预备 ◦基本草图 ◦建立单元、栏、基线以及进行计算 ◦页面草图4. 正式设计5. 制作（编写代码）

** 关键是不能死记硬背这些步骤，而是要理解贯穿其中的设计原则。**

关于设计步骤会在下一篇 应用篇详细解释