如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

 

不管是做設(shè)計（感性）還是設(shè)計規(guī)范（理性），都是仁者見仁智者見智的，都很主觀。我是想闡述出自己的想法供大家參考，文章中的數(shù)值也不是固定標準，還是希望大家根據(jù)不同的項目需求，去解決不同的實際問題。

目錄

1.下拉菜單

   1.1 了解側(cè)邊導(dǎo)航欄

   1.2 繪制矩形框 

   1.3 文本行高

   1.4 層級劃分

   1.5 確定距離

2.分頁

   2.1 了解分頁

   2.2 繪制普通分頁

   2.3 繪制首末分頁

   2.4 繪制跳轉(zhuǎn)分頁

3.步驟條

   3.1 了解步驟條

   3.2 繪制步驟條

1.1 了解側(cè)邊導(dǎo)航欄

側(cè)邊導(dǎo)航欄就是固定在側(cè)邊或從側(cè)邊劃出的導(dǎo)航欄，一般應(yīng)用在企業(yè)網(wǎng)站的觸發(fā)型導(dǎo)航欄上，或后臺頁面/系統(tǒng)的左側(cè)功能性導(dǎo)航欄上。側(cè)邊導(dǎo)航欄的方向是根據(jù)業(yè)務(wù)需求來做調(diào)整的，方向在那邊就往哪邊對齊。我們先了解一下側(cè)邊導(dǎo)航欄的樣式。

設(shè)計師的對設(shè)計的理解和審美決定了周圍要留多少的空白。

1.2 繪制矩形框

矩形框的高度可以隨著屏幕高度的變化而變化，所以不需要考慮。那只定義矩形框的寬度就行了，寬度分別是：小（240px）、中（280px）、大（280px）。當我們決定采用哪種尺寸后，就要定義矩形框與內(nèi)容之間的距離了。下圖所示的例子是以中等尺寸來做參考的。

1.3 文本行高

當我們繪制好矩形框，就要往里填內(nèi)容了。文本行高上一章已經(jīng)講過了，就不多說了。文字的行高是由鼠標狀態(tài)（Hover）的高度來確定的，Hover的高度有多高，文字的行高就有多高。但要注意的是，側(cè)邊導(dǎo)航欄的文本左右多留一下白，不能使導(dǎo)航欄看上去太緊湊，給人感覺太壓抑，就會顯得不是很美觀了。

1.4 層級劃分

因為側(cè)邊導(dǎo)航欄中有樹形結(jié)構(gòu)，一個主級別可以分散為多個子級別，所以就需要劃分一下層級。劃分層級的方法也有很多，可以改變字號、改變顏色、改變字形、改變距離，那我用的方法是改變距離。采用哪種方法還是要看具體需求，像那種需要想突出層級且對比強烈的需求，可以采用改變字號和改變字形（加粗）。下圖中顏色越深層級越高，另外要注意的是，大類也有層次，越往上層級越高。

1.5 確定距離

當我們把矩形框繪制好，文本也填進去后，就要確定每一個層級的距離了，我們要做出1>2>3的感覺出來，細微調(diào)整每個層級的間距，使它們的差異突顯出來。確定距離指的是每個層級左側(cè)的距離，這就像樓梯一樣，在上層的樓梯往往優(yōu)先級是最高的。層級1（收藏夾）與層級2（藝術(shù)類）之間多留了4px的空白，目的是為了突顯主級別與子級別之間的差異，稍微強化了一下主級別。

來看一下最終效果吧。

2.1 了解分頁

側(cè)邊導(dǎo)航的講完后來講講分頁，分頁有三種樣式：普通分頁、首末分頁、跳轉(zhuǎn)分頁，名字是隨便起的，能理解什么意思就行了，來讓我們了解一下它的樣式。

2.2 繪制普通分頁

接下來我們學(xué)著畫一下它。我把所有的分頁分為三種尺寸（大中小），分別是32px（?。?、36（中）、40（大），每一個小按鈕的曲率分別是4px（?。?、6px（中）、8px（大）。每個小按鈕之間的間隔我用的是4px，也可以用8px，4px雖然更容易誤觸，但視覺效果要比8px好很多。

當然了以上數(shù)值也不是絕對的。尺寸、曲率和間隔都是需要根據(jù)項目需求與設(shè)計師自身審美來決定的。

2.3 繪制首末分頁

首末分頁就是在普通分頁的基礎(chǔ)上加兩個按鈕，分別是“跳轉(zhuǎn)到首頁”和“跳轉(zhuǎn)到末頁”。只要注意把“數(shù)字按鈕（分頁）”與跳轉(zhuǎn)首末頁按鈕”按優(yōu)先級分隔就可以了，要把控好這首末按鈕與數(shù)字按鈕之間的距離，距離過短容易誤觸，距離過長會破壞整體性。

2.4 繪制跳轉(zhuǎn)分頁

跳轉(zhuǎn)分頁是在首末分頁的基礎(chǔ)上加上“總頁數(shù)”與“跳轉(zhuǎn)至指定頁數(shù)”這兩個功能。跳轉(zhuǎn)分頁前端顯示總頁數(shù)，后端顯示跳轉(zhuǎn)至指定頁數(shù)。所有按鈕模塊的間隔都成倍遞減，這樣不同分頁的功能，區(qū)分就會更明顯一些，而且它們之間也有隱性的關(guān)聯(lián)。

將分頁組件與其他組件組合起來看一下最終效果。圖片壓縮效果不是很好，要與實際效果（原始比例）差很多。

3.1 了解步驟條

步驟條相對比較簡單，這里穿插一下講了吧。步驟條的樣式比較多，但他們的繪制方法都大同小異，我只單拿出一個來講，就不一一的進行講解了。

3.2 繪制步驟條

步驟條其實不難繪制的，注意對象和元素之間的距離就可以了。留的距離也要講究一些，要勻稱不能出現(xiàn)左面留太多而右面留太少的情況，具有關(guān)聯(lián)性的部分距離差異不能太大。另外就要考慮視覺平衡性的問題，不能一味的采用水平或垂直居中。只要熟練把控好距離，知道什么需求下留多少的白，那繪制不同樣式的步驟條，也會顯得游刃有余，做出的東西也更自然舒服體驗也更好。

做設(shè)計要精益求精，把每一個像素點都要考慮到并合理運用它們。

藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計