追求卓越一諾千金

藍藍設計-|山东移动积分商城,2011年成立|_|诺基亚5230pc套件官方下载,主創清華團隊|__1分快三彩票网址,專注軟件和互聯網ui設計開發-_35彩票网站是正规的吗。擅長企業信息化管理_|黄山电大在线、監控_-_快乐大本营胡歌2005、大數據軟件UIUE谘詢和設計開發服務-|_淘宝网开店教程。立足UI-|运盛彩票行大运赢天下,好好學習|_锡盟蒙中,天天進步-_|找一段塑料包装带!


幹貨分享-_-第一代身份证什么时候停用:如何更好地使用柵格係統

2019-5-24 泥人張 網站設計文章及欣賞


如果您想訂閱本博客內容||_潮百搭女装2013,每天自動發到您的郵箱中_-|飞天侠女, 請點這裏

柵格係統在UI設計和前端開發中是被應用的很廣泛一套體係___阿玛拉王国 锻造,但真正能掌握並很好運用的人卻不多|赢发彩票注册,一起來學習吧-|_185cc太阳彩票!


環顧身邊常見的優秀設計很多都使用了柵格係統||-很久以前烧烤店,你可能非常讚同在界麵中使用柵格係統--板东组,但卻沒有人告訴你應該如何使用它們|-|教师教学反思。


印刷中也會用到柵格|--阳明租房,但就本文而言|杭州sn,我主要想討論的是用於PC和移動設備上的柵格係統設計_火线闲聊。


Image title

紫色塊放內容


內容塊包括文本|qq空间视频地址,圖片或者是兩者的組合形式--|赢钱彩是什么东西,背景顏色實際上不能算是內容元素|美生美时,除非是作為文本或者圖片的容器_|青田封门青。


Image title


上圖中的粉色塊作為柵格中的列||_雄县地图,它們構成了內容寬度__国内西装品牌。一般來說__长沙停电信息,列寬是不會變的_||上海港湾学校学分制,隻是列數會隨著設備的不同而變化|-_致富彩合法吗,比如從PC端的12列變為平板電腦上的8列|-菲诗曼尔,然後在移動端變為4列|_149特马结果。嚴格來說__玩具熊不要冬眠,你其實可以定義任何想要的列寬__|宜丰征婚,但大多數情況下的網格列寬都設置在60-80px之間-|_美国实体娃娃。選擇合適的列寬是最重要的|_百度云福利群链接2018,因為它是內容寬度的主要決定因素--|郸城黑社会。


Image title


水槽是在列與列之間的空間_赫依伦。20px是一個常見的尺寸設置|--合肥市工商局年检,當設計塊狀或者卡片元素的網格時_-1分快三彩票网址,這種間距非常重要-|郑小爽822,比如做照片類設計的時候_殷世航一个月赚多少钱。有些係統會隨著設備寬度的增加而增加水槽的寬度||云顶娱乐打鱼可提现,但也可以保持固定|-|保健按摩师培训教材。


Image title


外邊距也稱為外水槽|-11086移动彩票登陆,是內容寬度之外的空白區域-__花千树 歌词。為了更方便的設計__云顶娱乐网址411,外邊距會隨著設備寬度的增加而增加_|_手机2011qq官方下载正式版免费。移動設備的邊距通常為20-30px_|诺基亚8800s黄金版,而在平板電腦和PC端诺基亚n85软件下载,這個間距通常會差異很大|28娱乐。


下麵會介紹一些基本的準則-||1950彩票,但要明白在實際設計中其實沒有任何硬性的規定-|全鹿大补胶囊。


1. 內容元素必須位於若幹列上

其核心思想是內容元素必須位於若幹列上-__优彩彩票是不是违法的,你可以任意分割___雄县地图,比如6x2,3x4,4x3_|-大众一元购。下麵的例子中_|安阳窝窝团购网,我展示了不同分割方式設計的信息卡片||_赢咖娱乐平台登录。

Image title

Image title

不同柵格設計展示


很棒-|_优信彩票,這看起來很簡單對吧|-6120c软件下载。有的時候_|布鲁金斯基征,你想把內容嚴格的套用在柵格布局上-|厦门红盾网,會發現可能不夠美觀||038彩票是官网平台吗,比如下麵的例子_|_掌上福彩中心app。


Image title

Image title



如果我們把內容都放在網格上|--掌信彩是骗局吗,文本內容會顯得很長_|_教师教学反思,最佳的位置是不嚴格在任何網格上-|_去霉运,這也是可以的_淮安草根网,隻要理解了整個元素實際上是一個不可見的_小型航空发动机价格,更大的容器就行__铠甲勇士刑天后传1。


Image title

Image title


這也是4x3的布局||耳科466,隻是給了它內部不可見的填充|老娘舅2013。當把這樣的設計稿給到開發時--|众乐彩票网站,他們就能很直觀的知道這一點||注册送377彩金,所以這更利於去理解如何實際地分配好內容|-_游彩网可靠吗。


2. 不要將內容元素留在水槽中


Image title

Image title


內容元素應該要在列寬以內_|_11086移动彩票co,而不能流出在水槽之外-重庆省道103,這樣會違背柵格化的目的-||天目手机维修论坛。


3. 隻要父級元素對齊柵格_|盈彩网怎么不能更新,子級可以不完全對齊列

有些時候--箱梁图片,你想要將設計和卡片分成兩部分-_许嵩违章动物mv,一半是圖片_-_诛仙推广员id,一半是文字||-蓝岛商城。你可能遇到這樣尷尬的情況-|千朋,圖片沒有完全落在一列上-生化危机同人h,文字被迫以一種奇怪的方式自適應_|_三八色。其實不用擔心-||韩国主播朴麦妮视频,隻要“父”容器對齊柵格_||至尊争霸大发快3的答案,這就沒有關係||中国电信iphone4。


Image title

Image title

Image title

父子級內容柵格排版示意


4. 除非有意||-欧蒂芙喷立婷,否則不要把列作為外部填充

所有重要內容都應該與柵格列寬相適應||105彩票天天有红包抢吗。一開始會覺得奇怪__阿诗曼,因為如果不習慣使用網格|-考察干部谈话,可能會把網格寬度當成全部內容區域_|搜搜返利网,所以還需要給它設定一定的內邊距_-陈大伟博客。此時外邊距就起到了留白的作用|手贱症候群,它們充當了內邊距|||106官方彩票com。不要在網格內部利用列寬當成內邊距-__铁梨花41,而是要與網格最外麵保持對齊--|上海中潭癫痫能治愈,利用網格外的間距來當做留白區域---医学基础知识。根據代碼實現方式|-云南鼎通贵金属,要麼網格內的內容按比例縮放---优酷加速器官方免费下载,邊距固定-_长春花卉批发市场,要麼外邊距與內容同時縮放_|盈彩在线平台是什么。


Image title

Image title

正確的內容填充方式和不正確的把柵格當做邊距


所以如果有人說“我需要一個1200px寬的設計”--_2元彩票网3d走势图,這並不意味著你的設計就是1200px寬|尹国驹 何鸿燊,這其實是說設計內容寬度在1200px的畫布內|青青岛社区胶南论坛,實際內容占位是960px|-|长春汽车保险,這樣就會有空間留出外邊距|-11选5走势图软件。


5. 完全出血的元素或紋理圖形應該設計在畫板邊緣_|_掌上彩票客户端,並理解為出血的列網格


Image title

這個頁麵布局的頂部圖片被設計成完全出血


這是一個例外的規則--_李攀教你一招,當背景顏色或者圖片在完全出血的情況下--刘军 姜培琳,開發同學會把它理解為一個全屏的內容元素_-|永宁县政府公众网。


Image title

Image title


如果設計的是裝飾元素之類的內容-__解放军64年前欠条,可以接受它被裁切掉_|江潮电脑维修,此時也可以脫離柵格化的設計_|-易彩堂赚钱是真的吗。


Image title

Image title

一些圖片和文字的出血設計


頁眉和頁腳有時也有例外_-冬不拉教学,它們不被認為是內容的一部分_|可劲玩神仙道。有些設計將它們固定在瀏覽器邊緣|_200元倍投方案,有些則喜歡保持內容的寬度_邝汇珍,這取決於自身功能和內容的情況_intel e5300。將它們保持在內容寬度內的好處是__红酒倒进高脚杯,當用戶在寬屏顯示器上看頁麵時|兰西小屋论坛,不需要來回掃視_-阿美珍珠微博;將它們固定在瀏覽器上的好處是可以為導航元素提供更多的空間_|_日升丰。


柵格化布局如何做到響應式


Image title

圖片來源Intuit


Image title


在傳統的柵格化係統設計中__|武汉市长热线,列的寬度和水槽的寬度是保持不變的-天弘基金网站,隻是列的“數量”發生變化-_-亿赢彩票官方网站。為什麼要這麼處理呢-|maxdos5 8?這是為了讓設計更簡單||cctv10怪兽之谜视频。如果一組三張卡片分別放在桌麵的四列上-_yonana,那麼在平板電腦上-_|0808彩票,會顯示兩張卡片金河半岛,並把第三張卡片進行折行顯示在第二行上_-雷公根粉。不需要做任何的調整|-至尊心水安装,因為已經知道它位於第四列上了-zooskooistay人与驴。在手機上-众发娱乐代理犯法吗,答案也很簡單|_小杯文胸,隻需要一張卡片|__维修电工技师总结,其他的就會自動堆到下麵的行中_鹿喜微断食纤体。如果你願意_祥康王晗,也可以變得有創意|-_038com彩票安全吗,選擇隻在手機上顯示一張卡片--|至尊争霸怎么下载,或者做一個水平滾動||陈焕新。這些列的自適應對於代碼來說就是很簡單的參考-_-陈秋平。


實際上-|_良乡二中校园网,web必須呈現任何瀏覽器的寬度-_|上海中潭癫痫病医院。例如-_快乐女生报名,有一個大顯示器|-qq2011官网下载,它可以看到1600像素寬的東西_|_宋慧乔谈结婚,實際上pc端的網頁設計是1200px寬-_众赢国际里面是赌钱吗,平板電腦上是768px寬|蓝工房,手機是360px寬|-|七咲枫花。所以你會看到一個小於1200px的設計-|-成都猛女资料,有大量的留白--苏州园区湖东地图。但是當你的瀏覽器再小一個像素-_徐子淇八字,1199px||1分快3官网开奖结果,會發生什麼呢_-比特币走势图?


固定網格


Image title

Image title

固定柵格示意


如果開發那邊寫了一個固定柵格|--兴洋家纺,當你從桌麵縮小到平板電腦_||阿诺德蓄电池,就像是在900px的瀏覽器寬度時|-永盛娱乐客服微信,你不會看到任何變化_||铜祖,設計就像是被剪掉了一樣|_铜皮规格。但當達到768px臨界點時||_长三角区域规划,設計馬上就會改變|||mz16男科在线,平板電腦上的顯示效果就會好起來|_|2628彩票。如果繼續減小這個值|-邪恶少年eb的小站,同樣的事情也會發生_霍尔瓦特大街 小说,在到達另一個臨界值之前-诺基亚6120c价格,設計看起來都是不變的--随心聊业务。


流動網格


Image title

Image title

流動網格的示例


現在來看看流動網格的特點___易建宝怎么样,當窗口縮小時||众博国际合法吗,內容將動態的發生變化|-快乐女声报名,文本會進行換行_霍启中,元素也會變窄-_|陈进平。然而-__自动扶梯荷载,這些元素在內容寬度縮小到下一個臨界值之前||_松原地震最新消息2018,布局是不會變化的--锦州人流。


所以我想說的是_盐城一中贴吧,設計的臨界值隻是一個更改布局的參考點-|206 217 214 175。這就是為什麼列寬和水槽在網格中不會改變的原因-_-永盛国际网址多少,因為我們想讓設計師在考慮布局時能夠更容易地創建一致性-阿鲁科尔沁旗绿源网。


混合網格

在實際項目中|_-手机qq2011免费下载,使用流動網格和固定網格的組合也是常見的做法_|小县城的故事。網站通常是流動網格__前世姻缘测试,因為它要去適應各種不同終端的大小-|_7k7k奥拉星。


一些做的很酷的柵格係統

不需要太死板地去堅持傳統柵格套路|--最近特大新闻,12-__淘宝 开店、8_-|10500com、4這樣的分布__注册彩金网站,甚至不需要20px的水槽-_卓易彩票怎么用不了。下麵是一些在設計中使用柵格係統做的很棒的設計靈感--_234彩票登陆。


Image title

Invision’s Genome Project


Image title

可以看到|_mp4游戏格式,他們的設計故意不去使用任何的水槽-_金华市婺城区地图,所以看起來是無縫的-_娱乐天地新版登录。


這個網站不僅設計的很好_-钱王美庐,他們還利用了在設計中展示他們自己的柵格係統來讓整體的設計變得更加酷炫-_-盈发彩票登录。


Dropbox Design


Image title


他們沒有設計水槽和外邊距_众赢彩票网,相反||-斗战神怎么入定修炼,整個頁麵被分成兩半-_-注册送168彩金,然後將內容填充到這兩部分|血色玫瑰金陵女神。


Wordpress


Image title

Wordpress創建賬號頁麵


使用網格的方式取決於你自己_|-仓井空。你可以在主要內容部分使用網格|__亿盈嘉的骗局,次要內容則不使用|_-何再贵。在Wordpress的例子中_|-斗战神怎么入定修炼,頁麵中間的部分使用柵格化設計|--长沙王府井影城,左側的側邊欄則沒有使用__|优博的奶粉好不好。


The Mockup Club


Image title


內容和網格也並不總是從中間開始_|立冬立秋诗句,對於模型網站|--个人工作经历怎么写,內容在左邊也未嚐不可-_优惠券打印机。


Instagram


Image title

Image title


我非常確定的說-_|2019年犯太岁的生肖,Instagram的PC端是用上了6列柵格布局||18092期大乐透中奖号码。


要點總結

寫這篇文章的目的是想提供一些關於如何在響應式設計中使用柵格係統-_-优衣库bt。我知道對於我自己來說__|0投资发圈赚钱平台,我花了很多年的時間寫了大量的代碼來理解網格是如何工作的_|_陈永馨 马来西亚。我在YouYube上看了很多視頻|-_易彩登录,也閱讀了大量的文章-||302sh,但每個人都在關注它為什麼重要--122网页版,卻不去注重到底怎麼在自己的項目中使用這些原則-__众博彩票开多久了。


你要做的最好的事情就是從現在開始注意那些優秀設計是如何對齊元素的|-斗战神入定修炼怎么弄,你將會開始看到這些模式--_张檬陈楚河。為了幫助理解---张翰郑爽2017金鹰同台,這裏有一些設計係統概述了它們的網格使用|--全国专科院校排名:


Google’s Material Design System

Intuit’s Design System

IBM’s Carbon Design System

…And here’s huge list of other systems you can look through


在完全理解了網格的工作原理之後-|_阿皮亚古道,我已經成為了一名更好的設計師-_-鹰彩写真机,因為我知道我的設計將如何在臨界值之間進行轉換_--1号彩票线路。我也可以落地我的設計-|105彩票官网,使它們能夠有一個完美的像素對齊--扬州小六子。這樣的規範帶來了更一致||_语笑今生,更簡潔的設計|寻找了解绝杀技,當用戶從一個界麵到另一個界麵流轉時_-铜钱占卜方法,這真的提升了產品的檔次-|众赢国际是个什么平台。我建議在你的設計中去應用這些網格|_|038彩票手机app,並和開發一起|野山谷门票,以相同的方式將它們落地-_叫兽系列,這將會是一個非常不錯的進步|--玛雅发信。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-诺基亚ovi套件官方下载,為期望卓越的國內外企業提供卓越的UI界麵設計-河北区haobc、BS界麵設計 __亿彩彩票平台、 cs界麵設計 _|360彩票app下载、 ipad界麵設計 --深度xp纯净版、 包裝設計 |_|亿彩彩票的骗局?、 圖標定製 |-flypaper刘玉玲、 用戶體驗 |-360重庆时时彩走势图彩、交互設計_|33彩票官方网站、 網站建設 ||_钱永真、平麵設計服務||-亿彩彩票官网下载。

« vue-router的兩種模式的區別 | 官方出品__-佳俊车行!揭秘阿裏巴巴APP 8.0 視覺品牌升級背後的設計思路»


訂閱Rss