2019-3-20 用心設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
不管是做設計（感性）還是設計規范（理性），都是仁者見仁智者見智的，都很主觀。我是想闡述出自己的想法供大家參考，文章中的數值也不是固定標準，還是希望大家根據不同的項目需求，去解決不同的實際問題。
目錄
1.下拉菜單
1.1 了解側邊導航欄
1.2 繪制矩形框
1.3 文本行高
1.4 層級劃分
1.5 確定距離
2.分頁
2.1 了解分頁
2.2 繪制普通分頁
2.3 繪制首末分頁
2.4 繪制跳轉分頁
3.步驟條
3.1 了解步驟條
3.2 繪制步驟條
1.1 了解側邊導航欄
側邊導航欄就是固定在側邊或從側邊劃出的導航欄，一般應用在企業網站的觸發型導航欄上，或后臺頁面/系統的左側功能性導航欄上。側邊導航欄的方向是根據業務需求來做調整的，方向在那邊就往哪邊對齊。我們先了解一下側邊導航欄的樣式。
設計師的對設計的理解和審美決定了周圍要留多少的空白。
1.2 繪制矩形框
矩形框的高度可以隨著屏幕高度的變化而變化，所以不需要考慮。那只定義矩形框的寬度就行了，寬度分別是：小（240px）、中（280px）、大（280px）。當我們決定采用哪種尺寸后，就要定義矩形框與內容之間的距離了。下圖所示的例子是以中等尺寸來做參考的。
1.3 文本行高
當我們繪制好矩形框，就要往里填內容了。文本行高上一章已經講過了，就不多說了。文字的行高是由鼠標狀態（Hover）的高度來確定的，Hover的高度有多高，文字的行高就有多高。但要注意的是，側邊導航欄的文本左右多留一下白，不能使導航欄看上去太緊湊，給人感覺太壓抑，就會顯得不是很美觀了。
1.4 層級劃分
因為側邊導航欄中有樹形結構，一個主級別可以分散為多個子級別，所以就需要劃分一下層級。劃分層級的方法也有很多，可以改變字號、改變顏色、改變字形、改變距離，那我用的方法是改變距離。采用哪種方法還是要看具體需求，像那種需要想突出層級且對比強烈的需求，可以采用改變字號和改變字形（加粗）。下圖中顏色越深層級越高，另外要注意的是，大類也有層次，越往上層級越高。
1.5 確定距離
當我們把矩形框繪制好，文本也填進去后，就要確定每一個層級的距離了，我們要做出1>2>3的感覺出來，細微調整每個層級的間距，使它們的差異突顯出來。確定距離指的是每個層級左側的距離，這就像樓梯一樣，在上層的樓梯往往優先級是最高的。層級1（收藏夾）與層級2（藝術類）之間多留了4px的空白，目的是為了突顯主級別與子級別之間的差異，稍微強化了一下主級別。
來看一下最終效果吧。
2.1 了解分頁
側邊導航的講完后來講講分頁，分頁有三種樣式：普通分頁、首末分頁、跳轉分頁，名字是隨便起的，能理解什么意思就行了，來讓我們了解一下它的樣式。
2.2 繪制普通分頁
接下來我們學著畫一下它。我把所有的分頁分為三種尺寸（大中小），分別是32px（小）、36（中）、40（大），每一個小按鈕的曲率分別是4px（小）、6px（中）、8px（大）。每個小按鈕之間的間隔我用的是4px，也可以用8px，4px雖然更容易誤觸，但視覺效果要比8px好很多。
當然了以上數值也不是絕對的。尺寸、曲率和間隔都是需要根據項目需求與設計師自身審美來決定的。
2.3 繪制首末分頁
首末分頁就是在普通分頁的基礎上加兩個按鈕，分別是“跳轉到首頁”和“跳轉到末頁”。只要注意把“數字按鈕（分頁）”與跳轉首末頁按鈕”按優先級分隔就可以了，要把控好這首末按鈕與數字按鈕之間的距離，距離過短容易誤觸，距離過長會破壞整體性。
2.4 繪制跳轉分頁
跳轉分頁是在首末分頁的基礎上加上“總頁數”與“跳轉至指定頁數”這兩個功能。跳轉分頁前端顯示總頁數，后端顯示跳轉至指定頁數。所有按鈕模塊的間隔都成倍遞減，這樣不同分頁的功能，區分就會更明顯一些，而且它們之間也有隱性的關聯。
將分頁組件與其他組件組合起來看一下最終效果。圖片壓縮效果不是很好，要與實際效果（原始比例）差很多。
3.1 了解步驟條
步驟條相對比較簡單，這里穿插一下講了吧。步驟條的樣式比較多，但他們的繪制方法都大同小異，我只單拿出一個來講，就不一一的進行講解了。
3.2 繪制步驟條
步驟條其實不難繪制的，注意對象和元素之間的距離就可以了。留的距離也要講究一些，要勻稱不能出現左面留太多而右面留太少的情況，具有關聯性的部分距離差異不能太大。另外就要考慮視覺平衡性的問題，不能一味的采用水平或垂直居中。只要熟練把控好距離，知道什么需求下留多少的白，那繪制不同樣式的步驟條，也會顯得游刃有余，做出的東西也更自然舒服體驗也更好。
做設計要精益求精，把每一個像素點都要考慮到并合理運用它們。
藍設計( www.lapeinture.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計