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

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

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

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

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

（圖225）

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

（圖226）

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

（圖227）

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

（圖228）

（圖229）

（圖230）

間距（Gutters）: 指每個(gè)小單元和列之間的空白區(qū)域。當(dāng)小單元合并成列時(shí)，也會(huì)將間距一起合并到列中，但并不包括最左側(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)頁(yè)中的任意元素，在彈出的關(guān)聯(lián)菜單中選擇【審查元素】，然后通過(guò)【盒子模型】分析元素的內(nèi)邊距、外邊距，見圖231。

（圖231）

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

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

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

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

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

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

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

（圖232）

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

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

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

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

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

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

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

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

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

（圖233）

（圖234）

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

● 顯示全局輔助線：切換項(xiàng)目中全局輔助線的可見性。

● 顯示頁(yè)面輔助線：切換項(xiàng)目中頁(yè)面輔助線的可見性。

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

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

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

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

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

●頁(yè)面輔助線顏色：改變頁(yè)面輔助線顏色。

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

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

對(duì)象對(duì)齊設(shè)置

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

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

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

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

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

（圖235）

（圖236）