追求卓越一諾千金

藍藍設計-|言峰绮礼怎么死的,2011年成立-|丫鬟受罚,主創清華團隊_|闫芳事件,專注軟件和互聯網ui設計開發-_优彩彩票是不是违法的。擅長企業信息化管理--福建省组织机构代码网上服务平台、監控|镁合金密度、大數據軟件UIUE谘詢和設計開發服務-|-亿贝平台合法吗。立足UI--注册送19元的彩票软件,好好學習|__众发娱乐提现是真的吗,天天進步-|召召木木!


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

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


如果您想訂閱本博客內容|_银彩会员,每天自動發到您的郵箱中_优乐彩可靠吗, 請點這裏

 

不管是做設計(感性)還是設計規範(理性)_|_漫画大全之恋母性活,都是仁者見仁智者見智的-||038彩票网提现快吗?,都很主觀-花式撞球。我是想闡述出自己的想法供大家參考__|1元可提现的手机棋牌,文章中的數值也不是固定標準|_子龙郡,還是希望大家根據不同的項目需求|qq猪猪领养,去解決不同的實際問題_|吴彦祖电影全集国语。



目錄


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


側邊導航欄就是固定在側邊或從側邊劃出的導航欄|__2125火影世界,一般應用在企業網站的觸發型導航欄上__-歌手2017第三期排名,或後台頁麵/係統的左側功能性導航欄上__沙河市登山协会。側邊導航欄的方向是根據業務需求來做調整的__20元提现的棋牌app,方向在那邊就往哪邊對齊__亿赢彩票官方网站。我們先了解一下側邊導航欄的樣式__-qq2011最新版官方下载。

undefined設計師的對設計的理解和審美決定了周圍要留多少的空白|_2012时尚女装雪纺衫。



1.2 繪製矩形框


矩形框的高度可以隨著屏幕高度的變化而變化--ed2k苍井空,所以不需要考慮_快手封号名单300人。那隻定義矩形框的寬度就行了|_宋茜韩国综艺,寬度分別是|清酒红人面:小(240px)|索爱刷机软件、中(280px)_角马网、大(280px)||全球鹰熊猫怎么样。當我們決定采用哪種尺寸後-|3k娱乐负盈利,就要定義矩形框與內容之間的距離了_-|陈诚传。下圖所示的例子是以中等尺寸來做參考的360彩票官网杀号定胆。

undefined



1.3 文本行高


當我們繪製好矩形框-_金立v8,就要往裏填內容了|_优博彩票官网。文本行高上一章已經講過了|家门的荣光百度影音,就不多說了|||云顶娱乐怎么提现。文字的行高是由鼠標狀態(Hover)的高度來確定的_脊柱宝,Hover的高度有多高__-暴龙摩托车价格,文字的行高就有多高||_寒山寺招聘。但要注意的是新密五个人火了照片,側邊導航欄的文本左右多留一下白|-亿彩彩票平台是真的吗,不能使導航欄看上去太緊湊_|单位性质,給人感覺太壓抑-|怎么去霉运,就會顯得不是很美觀了||_248彩票有几种版本。

undefined



1.4 層級劃分


因為側邊導航欄中有樹形結構__陕西2台都市快报,一個主級別可以分散為多個子級別-爱唯侦察论坛最新网址,所以就需要劃分一下層級__著名现代诗。劃分層級的方法也有很多--_198彩票总代,可以改變字號--_龙居长安、改變顏色|__1588棋牌下载、改變字形_-2018公安部对云联惠、改變距離_||赢钱彩从哪下载,那我用的方法是改變距離_|众博彩票是正规的吗。采用哪種方法還是要看具體需求-_娃哈哈股票代码,像那種需要想突出層級且對比強烈的需求_-008彩票论坛II,可以采用改變字號和改變字形(加粗)-长春花卉批发。下圖中顏色越深層級越高|_-众彩网双色球专家频道,另外要注意的是--易点彩票网专家预测,大類也有層次-105官网彩票安卓版,越往上層級越高-|-血色玫瑰金陵女神。

undefined



1.5 確定距離


當我們把矩形框繪製好|-_洛克王国潘多许愿蛋,文本也填進去後_|_苯乙烯密度,就要確定每一個層級的距離了|_黄河电视台直播,我們要做出1>2>3的感覺出來|__金俊绵家庭背景,細微調整每個層級的間距||青岛教育局人事处,使它們的差異突顯出來-__汶川地震腐烂女尸图片。確定距離指的是每個層級左側的距離--|银河平台彩票计划,這就像樓梯一樣|-|注册送18元彩票,在上層的樓梯往往優先級是最高的|-11选五刷大小。層級1(收藏夾)與層級2(藝術類)之間多留了4px的空白||苏木精,目的是為了突顯主級別與子級別之間的差異-|-蝗虫多少钱一斤,稍微強化了一下主級別|未成年身份证号码。

undefined

來看一下最終效果吧__-钱宝网最新消息2018年。



2.1 了解分頁


側邊導航的講完後來講講分頁-||361娱乐平台用户登录,分頁有三種樣式|_约彩彩票注册不了:普通分頁-_集结密令1、首末分頁_--108彩票娱乐平台、跳轉分頁|_1分钟快三坑人的,名字是隨便起的|||恋上黑道千金的拽少爷,能理解什麼意思就行了-_|金立l7,來讓我們了解一下它的樣式-龙卷风旋风扫。

undefined



2.2 繪製普通分頁


接下來我們學著畫一下它_|-掌上彩票骗局。我把所有的分頁分為三種尺寸(大中小)-陇县地图,分別是32px(小)-刘钧个人资料、36(中)_|低塘租房、40(大)-|镀镍铜带,每一個小按鈕的曲率分別是4px(小)2017黄播直播app、6px(中)_|金庸群侠传2贺岁版攻略、8px(大)_-cad2004免费版下载。每個小按鈕之間的間隔我用的是4px|_反间谍工作的主管单位是,也可以用8px_-_快乐大本营 棒棒堂,4px雖然更容易誤觸-|钟蕙芝,但視覺效果要比8px好很多-365彩票买不了怎么回事。

undefined當然了以上數值也不是絕對的||讫。尺寸_|_2元彩票网、曲率和間隔都是需要根據項目需求與設計師自身審美來決定的_-诺基亚ace。



2.3 繪製首末分頁


首末分頁就是在普通分頁的基礎上加兩個按鈕__小学生400字日记,分別是“跳轉到首頁”和“跳轉到末頁”||赛尔号鱼龙王刷什么。隻要注意把“數字按鈕(分頁)”與跳轉首末頁按鈕”按優先級分隔就可以了_-_苏州26路公交车路线,要把控好這首末按鈕與數字按鈕之間的距離_-_易彩集团靠谱吗?,距離過短容易誤觸_-|鹰彩写真机,距離過長會破壞整體性__44800。

undefined



2.4 繪製跳轉分頁


跳轉分頁是在首末分頁的基礎上加上“總頁數”與“跳轉至指定頁數”這兩個功能_平方公里与亩的换算。跳轉分頁前端顯示總頁數|--劲舞团紫光5 0,後端顯示跳轉至指定頁數|_掌信彩软件用什么下。所有按鈕模塊的間隔都成倍遞減|_五星体育回看,這樣不同分頁的功能---萧瑟流光,區分就會更明顯一些_-3333彩票网,而且它們之間也有隱性的關聯__订造。

將分頁組件與其他組件組合起來看一下最終效果___众赢彩票pk10。圖片壓縮效果不是很好-_车四十四真实故事,要與實際效果(原始比例)差很多||wedding dress 歌词。



3.1 了解步驟條


步驟條相對比較簡單--5320软件,這裏穿插一下講了吧--2m彩票永久来资料全年。步驟條的樣式比較多_盈盈彩票网是正规的吗,但他們的繪製方法都大同小異|-|苦雨孤灯,我隻單拿出一個來講_--男人屋社区,就不一一的進行講解了|||重庆城投集团董事长。

undefined



3.2 繪製步驟條


步驟條其實不難繪製的_-智投彩票合法吗,注意對象和元素之間的距離就可以了|杜达雄2013版裸男世界博客。留的距離也要講究一些-||芭莎礼品网,要勻稱不能出現左麵留太多而右麵留太少的情況|_-柯米诺,具有關聯性的部分距離差異不能太大|云顶娱乐官网登录。另外就要考慮視覺平衡性的問題_--众发娱乐平台跑路,不能一味的采用水平或垂直居中|--105彩票是否合法。隻要熟練把控好距離_|无字神曲,知道什麼需求下留多少的白|_金大班结局,那繪製不同樣式的步驟條||_众盈彩票有人主动带你赢钱正常吗?,也會顯得遊刃有餘--_运盛彩票是哪里的网站,做出的東西也更自然舒服體驗也更好|_|106福利版彩票苹果。

做設計要精益求精360重庆老实时走势图,把每一個像素點都要考慮到並合理運用它們|-英杰交流中心。

藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-|yyy863 com,為期望卓越的國內外企業提供卓越的UI界麵設計||耳鼻喉科解放军466医院、BS界麵設計 _|_足球红牌罚下有替补吗、 cs界麵設計 -|金华烟草电子商务网、 ipad界麵設計 -智能手机、 包裝設計

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


訂閱Rss