3．網(wǎng)格和輔助線

網(wǎng)格系統(tǒng)介紹

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

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

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

（圖225）

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

（圖226）

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

（圖227）

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

（圖228）

（圖229）

（圖230）

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

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

（圖231）

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

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

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

Axure中的網(wǎng)格和輔助線

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

添加局部輔助線：添加輔助線到當(dāng)前頁面，用鼠標(biāo)單擊設(shè)計區(qū)域上方和左側(cè)的標(biāo)尺，然后拖動鼠標(biāo)把從水平或垂直輔助線拖拽到設(shè)計區(qū)域。

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

（圖232）

使用預(yù)置設(shè)置創(chuàng)建輔助線：可以通過Axure 內(nèi)置的預(yù)設(shè)添加輔助線，點擊菜單欄【布局＞網(wǎng)格和輔助線＞創(chuàng)建輔助線】，或者右鍵單擊設(shè)計區(qū)域，選擇【網(wǎng)格和輔助線＞創(chuàng)建輔助線】。這里有多種預(yù)置可供選擇；或者自定義你的布局，還可以選擇添加全局輔助線或當(dāng)前頁面輔助線，見圖233。

網(wǎng)格設(shè)置：右鍵單擊設(shè)計區(qū)域，在彈出的關(guān)聯(lián)菜單中選擇【網(wǎng)格和輔助線＞網(wǎng)格設(shè)置】。

● 顯示網(wǎng)格：切換網(wǎng)格的顯示狀態(tài)。

● 對齊網(wǎng)格：切換部件與網(wǎng)格對齊。

● 間距：定義網(wǎng)格的交叉點之間的距離。

● 樣式：改變網(wǎng)格交叉線的風(fēng)格樣式。

● 線：將網(wǎng)格樣式設(shè)置為線。

● 交叉點：將網(wǎng)格樣式設(shè)置為點。

● 顏色：改變網(wǎng)格的顏色，見圖234。

（圖233）

（圖234）

輔助線設(shè)置（Guide Settings）

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

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

● 顯示自適應(yīng)視圖輔助線：切換顯示自適應(yīng)視圖輔助線可見性。

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

● 對齊輔助線：切換部件對齊到輔助線狀態(tài)。

● 鎖定輔助線：切換設(shè)計區(qū)域中輔助線的鎖定狀態(tài)。

● 全局輔助線顏色：改變?nèi)州o助線顏色。

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

● 自適應(yīng)提示顏色：自適應(yīng)輔助線顏色。

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

對象對齊設(shè)置

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

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

● 垂直：設(shè)置部件垂直對齊的像素。

● 水平：設(shè)置部件水平對齊的像素。

● 對齊輔助線顏色：設(shè)置當(dāng)部件對齊時輔助線的顏色，見圖236。

（圖235）

（圖236）