3．網格和輔助線

網格系統介紹

通過現實中與部分學員的接觸和讀者的反饋，昆明網站建設筆者發現很多朋友對網格系統（Grid System）和輔助線并沒有清晰的認識，尤其是網格系統（此處特指前端設計中所使用的Grid System，如http://960.gs和響應式網頁設計中使用的http://unsemantic.com 等，在Axure中輔助線扮演網格系統的角色）。在國內互聯網中很多人稱其為【柵格】，此處我們不討論稱呼問題。事實上，無論你習慣怎樣稱呼它，Grid System在設計過程中都起著至關重要的作用。下面，在開始介紹Axure RP8中的網格和輔助線之前，筆者覺得有必要對其專有術語進行適當講解，以便廣大讀者能夠更近一步熟悉它。

首先要介紹一下關于網格系統的術語，用來描述網格系統中各種組件的詞匯看上去很簡單，但它們卻是非常不具體的。例如“列”（Column）的概念，看上去足夠簡單，但是在一個基于8列網格的頁面中，你可能會創建一個只需要2列的文本內容，這種情況下，Column所呈現的意義是不精確的。甚至一些基于網格設計的工藝類書籍也并不總是贊同這些術語，比如regions，在網格系統中指垂直分割的區域；fields，在網格系統中指水平分割的區域。正如你所見，這兩個英文單詞都可以譯為【區域】，這些術語看上去特別容易讓人（包括外國人）感覺混亂或重復，其實它們代表著不同的意思，下面來看一下網格系統中需要用到的幾個術語詞匯。

單元（Unit）：網格系統中的每一個垂直區塊，也就是垂直分割頁面最小的單元（小單元）。如圖225所示，960像素寬度，12個單元。

（圖225）

列（Columns）: 一組列是一個大的單元，在工作區域中組合在一起來幫助我們組織規劃不同的呈現方式。比如大多數文本列都需要至少2個大的單元，以960像素寬，12個小單元為例，可以將其分為2列，每列6個小單元；或者3列，每列4個小單元，等等。如圖226所示，12個小單元分為8列，每列2個小單元。

（圖226）

垂直分割區域（Regions）：垂直分割區域與列類似，將頁面垂直分為幾個部分。比如一個12單元、4列的網格系統，可以垂直分割為3個區域，左側的區域占2列，剩余2個區域各占一列，如圖227所示。

（圖227）

水平分割區域（Fields）:將頁面水平分割為不同區域（水平分割區域是用高度來計量的，幫助我們以Y坐標為基準來組織規劃內容的呈現方式），見圖228。水平分割區域可以使用多種方式來計算，不過，使用黃金比例進行分割是最高效的方法。關于黃金分割和斐波那契數列在互聯網產品設計中的應用，讀者們可通過網絡搜索，有很多資料可供參考，如老版本的Twitter網頁，見圖229。新版的Twitter LOGO的設計案例，見圖230。參考資料：http://designshack. net/articles/graphics/twitters-new-logo-the-geometry-and-evolution-of-our-favorite-bird/

（圖228）

（圖229）

（圖230）

間距（Gutters）: 指每個小單元和列之間的空白區域。當小單元合并成列時，也會將間距一起合并到列中，但并不包括最左側和最右側的空白區域（也就是左邊距和右邊距，padding-left＆padding-right）。

外邊距和內邊距（Margin＆amp; Padding）: 外邊距是指單元和列以外的空間；內邊距是指單元和列最左、最右、最上、最下的空間，如圖227最左側和最右側的空白區域。如果想進一步了解Margin＆amp; Padding 可搜索【盒子模型】，或者使用Chrome、Safari等瀏覽器，右鍵單擊網頁中的任意元素，在彈出的關聯菜單中選擇【審查元素】，然后通過【盒子模型】分析元素的內邊距、外邊距，見圖231。

（圖231）

元素（Elements）：指頁面中的某個組件，比如一個按鈕、一張圖像、一段文本等。

模塊（Modules）：指由一組元素組成的內容或功能，比如會員注冊模塊，就是由標簽、文本輸入框、按鈕等元素組成。

至此，網格系統中的術語詞匯就介紹完畢了，昆明網站制作建議各位讀者空閑之余能夠學習一些HTML+CSS+JavaScript的基礎知識，這樣能幫助你深刻理解網頁是由什么構成的，它們的工作原理是怎樣的。事實上，即便是對完全不懂編碼的讀者來說不會花費很多時間和精力，因為學習這些基礎知識并不等于擁有使用HTML、CSS和JavaScript去編寫產品或原型的能力，那需要長時間刻苦的學習和工作中的實戰經驗積累。進一步說，學習前端知識可以幫助你理解你所看到的網頁背后是什么，有了這些知識作為基礎，你可以更加順暢地與真正的開發人員溝通。

Axure中的網格和輔助線

在Axure中輔助線對保持布局與部件對齊有非常大的幫助。你可以為單獨的頁面創建輔助線（局部輔助線），也可以給所有頁面創建全局輔助線。

添加局部輔助線：添加輔助線到當前頁面，用鼠標單擊設計區域上方和左側的標尺，然后拖動鼠標把從水平或垂直輔助線拖拽到設計區域。

添加全局輔助線：給所有頁面添加輔助線，按住Ctrl/Command，然后鼠標單擊標尺并拖拽輔助線到設計區域，這樣所有頁面都被添加了輔助線，見圖232。

（圖232）

使用預置設置創建輔助線：可以通過Axure 內置的預設添加輔助線，點擊菜單欄【布局＞網格和輔助線＞創建輔助線】，或者右鍵單擊設計區域，選擇【網格和輔助線＞創建輔助線】。這里有多種預置可供選擇；或者自定義你的布局，還可以選擇添加全局輔助線或當前頁面輔助線，見圖233。

網格設置：右鍵單擊設計區域，在彈出的關聯菜單中選擇【網格和輔助線＞網格設置】。

● 顯示網格：切換網格的顯示狀態。

● 對齊網格：切換部件與網格對齊。

● 間距：定義網格的交叉點之間的距離。

● 樣式：改變網格交叉線的風格樣式。

● 線：將網格樣式設置為線。

● 交叉點：將網格樣式設置為點。

● 顏色：改變網格的顏色，見圖234。

（圖233）

（圖234）

輔助線設置（Guide Settings）

● 顯示全局輔助線：切換項目中全局輔助線的可見性。

● 顯示頁面輔助線：切換項目中頁面輔助線的可見性。

● 顯示自適應視圖輔助線：切換顯示自適應視圖輔助線可見性。

● 顯示打印輔助線：切換顯示打印輔助線可見性。

● 對齊輔助線：切換部件對齊到輔助線狀態。

● 鎖定輔助線：切換設計區域中輔助線的鎖定狀態。

● 全局輔助線顏色：改變全局輔助線顏色。

●頁面輔助線顏色：改變頁面輔助線顏色。

● 自適應提示顏色：自適應輔助線顏色。

● 打印提示顏色：打印輔助線顏色。

對象對齊設置

● 對齊對象：切換部件是否與其他部件邊緣對齊。

● 對齊邊緣：切換部件之間對齊的像素大小。

● 垂直：設置部件垂直對齊的像素。

● 水平：設置部件水平對齊的像素。

● 對齊輔助線顏色：設置當部件對齊時輔助線的顏色，見圖236。

（圖235）

（圖236）