追求卓越一諾千金

藍藍設計__微商怎么找客源xs7031,2011年成立_--凯源吧,主創清華團隊_--港西二手房,專注軟件和互聯網ui設計開發__盈彩彩票v258。擅長企業信息化管理-234彩票官网登录、監控__-武陟一中网站、大數據軟件UIUE谘詢和設計開發服務|九阴真经门派内功。立足UI_-认识国旗,好好學習_-东亚经贸新闻数字报,天天進步_-吉林移动话费详单!


幹貨分享-|256是黑彩票吗:如何更好地使用柵格係統

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


如果您想訂閱本博客內容---金士顿u盘恢复工具,每天自動發到您的郵箱中--|神州行充值卡序列号, 請點這裏

柵格係統在UI設計和前端開發中是被應用的很廣泛一套體係殷世航,但真正能掌握並很好運用的人卻不多-招商银行济南分行,一起來學習吧___新民歌!


環顧身邊常見的優秀設計很多都使用了柵格係統|58创业加盟,你可能非常讚同在界麵中使用柵格係統-__35彩票com,但卻沒有人告訴你應該如何使用它們-_雷霆扫毒中介人是谁。


印刷中也會用到柵格|_-csol防沉迷,但就本文而言||赢钱彩是什么东西,我主要想討論的是用於PC和移動設備上的柵格係統設計-||河南大象网。


Image title

紫色塊放內容


內容塊包括文本-物合网,圖片或者是兩者的組合形式--_注册送28元体验金,背景顏色實際上不能算是內容元素||群芳录,除非是作為文本或者圖片的容器_-京东商城首页淘宝。


Image title


上圖中的粉色塊作為柵格中的列||-赢彩彩票可靠吗,它們構成了內容寬度||历届北京市委书记。一般來說|阎玺,列寬是不會變的|||初中化学知识点总结,隻是列數會隨著設備的不同而變化_|北京466鼻腔科医院,比如從PC端的12列變為平板電腦上的8列|__青山湖区教体局,然後在移動端變為4列||云顶平台。嚴格來說|__雪花飞舞图片,你其實可以定義任何想要的列寬|_三星铃声免费下载,但大多數情況下的網格列寬都設置在60-80px之間|--132彩票com苹果版。選擇合適的列寬是最重要的||1998分分彩,因為它是內容寬度的主要決定因素-_|诺基亚5610软件下载。


Image title


水槽是在列與列之間的空間|-气雾剂之家。20px是一個常見的尺寸設置__诺基亚来电通下载,當設計塊狀或者卡片元素的網格時-_重庆方言电视剧下载,這種間距非常重要_||我们约会吧李飒,比如做照片類設計的時候_-兰西小屋论坛。有些係統會隨著設備寬度的增加而增加水槽的寬度易彩娱乐福,但也可以保持固定_-众博集团彩票。


Image title


外邊距也稱為外水槽__红罂粟2生死之间,是內容寬度之外的空白區域--诺基亚5700主题下载。為了更方便的設計-里程碑3怎么样,外邊距會隨著設備寬度的增加而增加_雷十二。移動設備的邊距通常為20-30px_-_长春汽车保险,而在平板電腦和PC端168彩票手机app苹果,這個間距通常會差異很大_--2019王中王论坛资料。


下麵會介紹一些基本的準則-晋城五人,但要明白在實際設計中其實沒有任何硬性的規定__龙珠ol国服下载。


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

其核心思想是內容元素必須位於若幹列上_|盈盈彩中奖怎么领取,你可以任意分割---花园皇后,比如6x2,3x4,4x3|莱州中考成绩查询。下麵的例子中_-|旅游鞋品牌,我展示了不同分割方式設計的信息卡片__|盈彩时时彩计划。

Image title

Image title

不同柵格設計展示


很棒--|上海电玩巴士实体店,這看起來很簡單對吧--_杨幂被灌醉扒衣视频。有的時候--|众彩娱乐app,你想把內容嚴格的套用在柵格布局上__众盈彩票新三D是骗局吗,會發現可能不夠美觀|-诛仙飞升,比如下麵的例子--云顶娱乐有挂吗。


Image title

Image title



如果我們把內容都放在網格上__长江流域图,文本內容會顯得很長||青岛教育人事处,最佳的位置是不嚴格在任何網格上-船位船讯网,這也是可以的||尊宝娱乐平台app,隻要理解了整個元素實際上是一個不可見的_||256买彩票安卓版2016,更大的容器就行---19000彩票送彩金。


Image title

Image title


這也是4x3的布局-|-360彩票双色球远程杀号,隻是給了它內部不可見的填充_-众赢国际app是真的吗。當把這樣的設計稿給到開發時-|广州qq女,他們就能很直觀的知道這一點|_钟欣潼艳照门,所以這更利於去理解如何實際地分配好內容|1998模式娱乐平台。


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


Image title

Image title


內容元素應該要在列寬以內-_碳棒生产厂家,而不能流出在水槽之外_|iphone5s香港官网,這樣會違背柵格化的目的__紫砂饮水机。


3. 隻要父級元素對齊柵格_--天天向上20130412,子級可以不完全對齊列

有些時候_--哈斯维修,你想要將設計和卡片分成兩部分-船位船讯网,一半是圖片--阿里学院视频教程,一半是文字--家门的荣光百度影音。你可能遇到這樣尷尬的情況-__2M全年彩图,圖片沒有完全落在一列上-_让我取暖歌词,文字被迫以一種奇怪的方式自適應|_易网彩票网开奖。其實不用擔心|-盈众彩票信誉怎么样,隻要“父”容器對齊柵格|_自由篮球pf加点,這就沒有關係-|鹿喜微。


Image title

Image title

Image title

父子級內容柵格排版示意


4. 除非有意_|详细个人自传,否則不要把列作為外部填充

所有重要內容都應該與柵格列寬相適應_|溶剂脱色剂。一開始會覺得奇怪__-优雅莱,因為如果不習慣使用網格--_注册送38元彩票主页,可能會把網格寬度當成全部內容區域__香港大学集体欺凌,所以還需要給它設定一定的內邊距_硅酸铝绳。此時外邊距就起到了留白的作用-|2000彩,它們充當了內邊距||-全运会时间。不要在網格內部利用列寬當成內邊距-_花冈实太,而是要與網格最外麵保持對齊--湘湖二期,利用網格外的間距來當做留白區域-234彩票app可靠吗。根據代碼實現方式_--美国高菲特,要麼網格內的內容按比例縮放-|疥舒宁多少钱一盒,邊距固定_帅同论坛,要麼外邊距與內容同時縮放-_金成真。


Image title

Image title

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


所以如果有人說“我需要一個1200px寬的設計”|-长虹lt32876,這並不意味著你的設計就是1200px寬_潘春春 樊玲,這其實是說設計內容寬度在1200px的畫布內_|淘宝企业开店流程,實際內容占位是960px-_|金兜洞兕大王,這樣就會有空間留出外邊距_|意彩账号注册。


5. 完全出血的元素或紋理圖形應該設計在畫板邊緣_|陈道旺,並理解為出血的列網格


Image title

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


這是一個例外的規則---亿客隆彩票注册,當背景顏色或者圖片在完全出血的情況下-长青贝妮,開發同學會把它理解為一個全屏的內容元素|__广州宏城广场。


Image title

Image title


如果設計的是裝飾元素之類的內容_|2019六开彩开奖记录,可以接受它被裁切掉-qq空间fd模块,此時也可以脫離柵格化的設計||众发娱乐怎么推广别人。


Image title

Image title

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


頁眉和頁腳有時也有例外__v880刷机包,它們不被認為是內容的一部分|_-智彩平台不锈钢茶。有些設計將它們固定在瀏覽器邊緣--|诺安股票320003,有些則喜歡保持內容的寬度--东莞唐会,這取決於自身功能和內容的情況___168彩票是国家彩票吗。將它們保持在內容寬度內的好處是-|-云鼎招商捷豹系统,當用戶在寬屏顯示器上看頁麵時|_|女人二十种外阴,不需要來回掃視|梧州网通露天影院;將它們固定在瀏覽器上的好處是可以為導航元素提供更多的空間-__至尊彩是真的吗。


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


Image title

圖片來源Intuit


Image title


在傳統的柵格化係統設計中_||雯雅婷漫画全集图片,列的寬度和水槽的寬度是保持不變的-金华百姓网招聘,隻是列的“數量”發生變化|-|蛋神奇踪第1部全集。為什麼要這麼處理呢_-|昆明39手机网?這是為了讓設計更簡單-|2019香港今晚买什么马。如果一組三張卡片分別放在桌麵的四列上_oppo智能手机803,那麼在平板電腦上_今日股市行情查询,會顯示兩張卡片-|-山东栾海燕,並把第三張卡片進行折行顯示在第二行上|-怎么在淘宝开店。不需要做任何的調整_快手封号名单300人,因為已經知道它位於第四列上了|--阿玛拉王国 锻造。在手機上--盈彩在线贴吧,答案也很簡單_祖峥,隻需要一張卡片__-7788电视剧百度影音,其他的就會自動堆到下麵的行中-01彩票软件。如果你願意|||20元公益彩票赚钱,也可以變得有創意||王梁微博,選擇隻在手機上顯示一張卡片||还有几天高考,或者做一個水平滾動__-长汀南禅寺。這些列的自適應對於代碼來說就是很簡單的參考-|149特马结果。


實際上|-_苦力泥鳅,web必須呈現任何瀏覽器的寬度__-注册送29彩金平台。例如||_养热带鱼赚钱,有一個大顯示器_海安新闻网,它可以看到1600像素寬的東西|_广西桑拿网,實際上pc端的網頁設計是1200px寬-_|云购彩票是什么,平板電腦上是768px寬_|花月婷,手機是360px寬--|智行彩票平台。所以你會看到一個小於1200px的設計_|_雷暴套装,有大量的留白-_|2m彩票2m彩票振撼来袭。但是當你的瀏覽器再小一個像素|_全球鹰熊猫怎么样,1199px|||易彩票正规吗,會發生什麼呢|168彩票pk10提现没到账?


固定網格


Image title

Image title

固定柵格示意


如果開發那邊寫了一個固定柵格---观心者胡戈伦,當你從桌麵縮小到平板電腦-_|海伦二中贴吧,就像是在900px的瀏覽器寬度時|-|106彩票注册,你不會看到任何變化_座机电话费查询,設計就像是被剪掉了一樣|-_亿人娱乐平台用户登录。但當達到768px臨界點時_-古典舞基本功,設計馬上就會改變-设备保修卡,平板電腦上的顯示效果就會好起來__038彩票是骗局吗。如果繼續減小這個值--艾瑞泽7洛阳事故,同樣的事情也會發生_亿彩彩票的规律,在到達另一個臨界值之前__中兴国际彩票客服电话,設計看起來都是不變的-_我爱你爱的花都谢了。


流動網格


Image title

Image title

流動網格的示例


現在來看看流動網格的特點遵义市招生考试网,當窗口縮小時|财经郎眼 余额宝,內容將動態的發生變化|_360时时彩平台,文本會進行換行|_空军副班长,元素也會變窄_|脸红心跳的关系4。然而-_班级元旦晚会策划书,這些元素在內容寬度縮小到下一個臨界值之前__-300118,布局是不會變化的--求佛临淄方言版。


所以我想說的是--易旺彩票信誉,設計的臨界值隻是一個更改布局的參考點||_零纪元特权礼包。這就是為什麼列寬和水槽在網格中不會改變的原因|-_闪光迈瑞恩,因為我們想讓設計師在考慮布局時能夠更容易地創建一致性|-_29彩票注册。


混合網格

在實際項目中-|_金立evd,使用流動網格和固定網格的組合也是常見的做法|-_阿里170号段预约网站。網站通常是流動網格_-_好听的炫舞团名,因為它要去適應各種不同終端的大小|||11086移动彩票网。


一些做的很酷的柵格係統

不需要太死板地去堅持傳統柵格套路|_聂小倩的梦岛,12--_1q币购物券怎么用、8---106官网彩票怎么下、4這樣的分布-阳光工资标准,甚至不需要20px的水槽_|-永胜国际app可靠吗。下麵是一些在設計中使用柵格係統做的很棒的設計靈感|__张莜雨魅惑。


Image title

Invision’s Genome Project


Image title

可以看到|-|cctv13在线直播下载,他們的設計故意不去使用任何的水槽_东北二嫂水仙视频种子,所以看起來是無縫的_|_铁路调度系统。


這個網站不僅設計的很好-|_1号娱乐APP,他們還利用了在設計中展示他們自己的柵格係統來讓整體的設計變得更加酷炫|__海比网。


Dropbox Design


Image title


他們沒有設計水槽和外邊距|--智彩电子走势图11,相反-_-中国现役上将,整個頁麵被分成兩半|-_诛仙奋斗任务,然後將內容填充到這兩部分|--苍井空 ed2k。


Wordpress


Image title

Wordpress創建賬號頁麵


使用網格的方式取決於你自己_|1号平台怎么样。你可以在主要內容部分使用網格-|-金恩圣的姐姐,次要內容則不使用||智行彩票官网。在Wordpress的例子中|_夜美梦娃娃网,頁麵中間的部分使用柵格化設計|-移动彩票官11086,左側的側邊欄則沒有使用_--长发速递。


The Mockup Club


Image title


內容和網格也並不總是從中間開始_||比亚迪f5报价,對於模型網站_||金兜洞兕大王,內容在左邊也未嚐不可|-135彩票平台官网。


Instagram


Image title

Image title


我非常確定的說_|青岛米娜婚纱摄影,Instagram的PC端是用上了6列柵格布局--重庆力帆少东家。


要點總結

寫這篇文章的目的是想提供一些關於如何在響應式設計中使用柵格係統|_208彩下载。我知道對於我自己來說|||苏芩博客,我花了很多年的時間寫了大量的代碼來理解網格是如何工作的_-淘宝网开店教程。我在YouYube上看了很多視頻_|仲博彩票黑过钱吗,也閱讀了大量的文章||烟熏枣,但每個人都在關注它為什麼重要_||讯累看看,卻不去注重到底怎麼在自己的項目中使用這些原則|105彩票网是正规的吗。


你要做的最好的事情就是從現在開始注意那些優秀設計是如何對齊元素的-|外国人评价中国乒乓球,你將會開始看到這些模式||诺基亚1110电池。為了幫助理解||距离高考还有几天,這裏有一些設計係統概述了它們的網格使用-|-模特庞盼盼:


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


在完全理解了網格的工作原理之後-_丧尸新人类,我已經成為了一名更好的設計師|_-都匀蓝宇装饰,因為我知道我的設計將如何在臨界值之間進行轉換|-炫舞今日答题答案。我也可以落地我的設計_-_打歌器,使它們能夠有一個完美的像素對齊_|kookai价格。這樣的規範帶來了更一致-|画蛇添足文言文翻译,更簡潔的設計__雷神2 豆瓣,當用戶從一個界麵到另一個界麵流轉時_|-掌上彩票平台,這真的提升了產品的檔次|--给个身份证。我建議在你的設計中去應用這些網格|二手军用吉普车,並和開發一起|银彩印刷,以相同的方式將它們落地_|胡定欣舞动奇迹,這將會是一個非常不錯的進步|_|5q币购物券怎么用。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|_锐度网站,為期望卓越的國內外企業提供卓越的UI界麵設計-||反间谍工作的主管单位、BS界麵設計 |-横扫天下升阶数据、 cs界麵設計 _-青海卫视下一站幸福、 ipad界麵設計 |亿贝在线平台登录、 包裝設計 ||穿越神墓之何为逆天、 圖標定製 -_全际通物流、 用戶體驗 ||2013年考驾照多少钱、交互設計|_|仲博平台注册账号、 網站建設 ___深圳中学初中部、平麵設計服務||22彩票ios。

« vue-router的兩種模式的區別 | 官方出品||_炒葱椒鸡 菜系!揭秘阿裏巴巴APP 8.0 視覺品牌升級背後的設計思路»


訂閱Rss