頁面樣式:(三)網(wǎng)格和輔助線

  • 2022-04-01 16:03:52
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

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

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

通過現(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)頁設(shè)計(jì)中使用的http://unsemantic.com 等,在Axure中輔助線扮演網(wǎng)格系統(tǒng)的角色)。在國(guó)內(nèi)互聯(lián)網(wǎng)中很多人稱其為【柵格】,此處我們不討論稱呼問題。事實(shí)上,無論你習(xí)慣怎樣稱呼它,Grid System在設(shè)計(jì)過程中都起著至關(guān)重要的作用。下面,在開始介紹Axure RP8中的網(wǎng)格和輔助線之前,筆者覺得有必要對(duì)其專有術(shù)語進(jìn)行適當(dāng)講解,以便廣大讀者能夠更近一步熟悉它。

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

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

1.jpg

(圖225)

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

2.jpg

(圖226)

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

1.jpg

(圖227)

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

1.jpg

(圖228)

2.jpg

(圖229)

1.jpg

(圖230)

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

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

1.jpg

(圖231)

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

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

至此,網(wǎng)格系統(tǒng)中的術(shù)語詞匯就介紹完畢了,昆明網(wǎng)站制作建議各位讀者空閑之余能夠?qū)W習(xí)一些HTML+CSS+JavaScript的基礎(chǔ)知識(shí),這樣能幫助你深刻理解網(wǎng)頁是由什么構(gòu)成的,它們的工作原理是怎樣的。事實(shí)上,即便是對(duì)完全不懂編碼的讀者來說不會(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)一步說,學(xué)習(xí)前端知識(shí)可以幫助你理解你所看到的網(wǎng)頁背后是什么,有了這些知識(shí)作為基礎(chǔ),你可以更加順暢地與真正的開發(fā)人員溝通。

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

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

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

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

1.jpg

(圖232)

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

1.jpg

(圖233)

2.jpg

(圖234)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.jpg

(圖235)

2.jpg

(圖236)


當(dāng)前文章標(biāo)題:頁面樣式:(三)網(wǎng)格和輔助線

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3401.html

上一篇:頁面樣式:(二)頁面樣式編輯器

下一篇:Axure——交互基礎(chǔ)

網(wǎng)站建設(shè)、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專線:15368242187(微信同號(hào))