? 设计语言 - 侧边导航栏/分页 - 蓝蓝设计_UI设计公司

追求卓越一諾千金

藍藍設計,2011年成立,主創清華團隊,專注軟件和互聯網ui設計開發。擅長企業信息化管理、監控、大數據軟件UIUE咨詢和設計開發服務。立足UI,好好學習,天天進步!


設計語言 - 側邊導航欄/分頁

2019-3-20 用心設計 cs界面設計文章及欣賞


如果您想訂閱本博客內容,每天自動發到您的郵箱中,

 

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



目錄


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 了解側邊導航欄


側邊導航欄就是固定在側邊或從側邊劃出的導航欄,一般應用在企業網站的觸發型導航欄上,或后臺頁面/系統的左側功能性導航欄上。側邊導航欄的方向是根據業務需求來做調整的,方向在那邊就往哪邊對齊。我們先了解一下側邊導航欄的樣式。

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



1.2 繪制矩形框


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

undefined



1.3 文本行高


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

undefined



1.4 層級劃分


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

undefined



1.5 確定距離


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

undefined

來看一下最終效果吧。



2.1 了解分頁


側邊導航的講完后來講講分頁,分頁有三種樣式:普通分頁、首末分頁、跳轉分頁,名字是隨便起的,能理解什么意思就行了,來讓我們了解一下它的樣式。

undefined



2.2 繪制普通分頁


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

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



2.3 繪制首末分頁


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

undefined



2.4 繪制跳轉分頁


跳轉分頁是在首末分頁的基礎上加上“總頁數”與“跳轉至指定頁數”這兩個功能。跳轉分頁前端顯示總頁數,后端顯示跳轉至指定頁數。所有按鈕模塊的間隔都成倍遞減,這樣不同分頁的功能,區分就會更明顯一些,而且它們之間也有隱性的關聯。

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



3.1 了解步驟條


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

undefined



3.2 繪制步驟條


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

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

藍設計www.thriveonsite.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

標簽: 分頁 設計語言 側邊欄 « 比五彩斑斕黑更難的,是客戶讓你簡約藏著細節 | 設計心法 談談事理學-認識論»


藍藍 http://www.thriveonsite.com

訂閱Rss
2019年调查网赚 2019国外网赚 香港开奖结果2019+开奖记录表 正规网赚平台 2019哪些网赚是真的 安徽快3 马云支付宝网赚是真的吗 网赚大巴 疯狂斗牛 上海11选5走势图