設計語言 - 側邊導航欄/分頁
上幾篇文章中有些內容與這章相符，重複的內容也就不多講了。不理解的朋友們建議先閱讀前幾篇文章。
設計語言-按鈕： https://www.zcool.com.cn/article/ZODc0MTA4.html
設計語言-按鈕2（實操）： https://www.zcool.com.cn/article/ZODgwNzUy.html
設計語言-下拉選單/導航選單： https://www.zcool.com.cn/article/ZODg1MzA4.html
不管是做設計（感性）還是設計規範（理性），都是仁者見仁智者見智的，都很主觀。我是想闡述出自己的想法供大家參考，文章中的數值也不是固定標準，還是希望大家根據不同的專案需求，去解決不同的實際問題。
目錄
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 繪製步驟條
步驟條其實不難繪製的，注意物件和元素之間的距離就可以了。留的距離也要講究一些，要勻稱不能出現左面留太多而右面留太少的情況，具有關聯性的部分距離差異不能太大。另外就要考慮視覺平衡性的問題，不能一味的採用水平或垂直居中。只要熟練把控好距離，知道什麼需求下留多少的白，那繪製不同樣式的步驟條，也會顯得遊刃有餘，做出的東西也更自然舒服體驗也更好。
做設計要精益求精，把每一個畫素點都要考慮到併合理運用它們。
謝謝閱讀
感謝支援
行業內大多數的從事培訓和偽教育的都在不斷的刷水文，搞標題黨、蹭熱度、販賣焦慮，撈錢。我希望大家不要被他們傳遞的垃圾資訊所影響。他們是利用“奶頭樂效應”和“專家效應”讓小白深陷其中，但身為小白也要有自己的獨立思維，要有分辨是非的能力，要不斷的提高自己的認知才能看得更高望得更遠。
謝謝大家的支援~