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

網(wǎng)格系統介紹

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

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

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

（圖225）

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

（圖226）

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

（圖227）

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

（圖228）

（圖229）

（圖230）

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

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

（圖231）

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

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

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

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

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

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

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

（圖232）

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

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

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

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

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

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

● 線(xiàn)：將網(wǎng)格樣式設置為線(xiàn)。

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

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

（圖233）

（圖234）

輔助線(xiàn)設置（Guide Settings）

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

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

● 顯示自適應視圖輔助線(xiàn)：切換顯示自適應視圖輔助線(xiàn)可見(jiàn)性。

● 顯示打印輔助線(xiàn)：切換顯示打印輔助線(xiàn)可見(jiàn)性。

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

● 鎖定輔助線(xiàn)：切換設計區域中輔助線(xiàn)的鎖定狀態(tài)。

● 全局輔助線(xiàn)顏色：改變全局輔助線(xiàn)顏色。

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

● 自適應提示顏色：自適應輔助線(xiàn)顏色。

● 打印提示顏色：打印輔助線(xiàn)顏色。

對象對齊設置

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

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

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

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

● 對齊輔助線(xiàn)顏色：設置當部件對齊時(shí)輔助線(xiàn)的顏色，見(jiàn)圖236。

（圖235）

（圖236）