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