幹貨分享_||诺基亚翻盖手机:如何更好地使用柵格係統

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

如果您想訂閱本博客內容|--陕西今日点击,每天自動發到您的郵箱中-_|化学公式编辑器, 請點這裏

柵格係統在UI設計和前端開發中是被應用的很廣泛一套體係-_-诗兰百丽,但真正能掌握並很好運用的人卻不多_-_百度云刷机,一起來學習吧|或门芯片!


環顧身邊常見的優秀設計很多都使用了柵格係統-_|苏州网上车管所,你可能非常讚同在界麵中使用柵格係統|-红洋胶囊,但卻沒有人告訴你應該如何使用它們_-qq炫舞答题答案每日更新。


印刷中也會用到柵格|-weddingdress歌词,但就本文而言||-平安果包装方法图解,我主要想討論的是用於PC和移動設備上的柵格係統設計|诺基亚n78主题。


Image title

紫色塊放內容


內容塊包括文本||亚当夏娃怡情谷,圖片或者是兩者的組合形式__彭庆国,背景顏色實際上不能算是內容元素-|芭莎礼品网,除非是作為文本或者圖片的容器_|-金星果。


Image title


上圖中的粉色塊作為柵格中的列|093彩票提款安全吗,它們構成了內容寬度__获奖身份证号码。一般來說-||至尊传奇,列寬是不會變的_--朱晓东我型我秀,隻是列數會隨著設備的不同而變化--金山抢票软件,比如從PC端的12列變為平板電腦上的8列-葛兰雪,然後在移動端變為4列||-武汉文具批发市场。嚴格來說_-逍遥花丛录,你其實可以定義任何想要的列寬__金绒飞,但大多數情況下的網格列寬都設置在60-80px之間|_家门的荣光国语版百度影音。選擇合適的列寬是最重要的-|_致青春台词,因為它是內容寬度的主要決定因素__掌上购彩app犯法吗。


Image title


水槽是在列與列之間的空間||-01彩票是正规的吗?。20px是一個常見的尺寸設置_qq道具商城,當設計塊狀或者卡片元素的網格時|_-装甲车 电影,這種間距非常重要-_|潮百搭女装2013,比如做照片類設計的時候_-腾讯中国好声音。有些係統會隨著設備寬度的增加而增加水槽的寬度|__众彩网是正规的吗,但也可以保持固定--蛋神奇踪第1部全集。


Image title


外邊距也稱為外水槽-|三星b7732微信,是內容寬度之外的空白區域_|张家口网通。為了更方便的設計|||福州市华伦中学,外邊距會隨著設備寬度的增加而增加||小提琴座套。移動設備的邊距通常為20-30px-||35彩票app,而在平板電腦和PC端___唐易康官网,這個間距通常會差異很大__河北移动梦网。


下麵會介紹一些基本的準則|-打吊针原曲,但要明白在實際設計中其實沒有任何硬性的規定|_-阿卡纳之王。


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

其核心思想是內容元素必須位於若幹列上__娱乐天地下载,你可以任意分割_-_诺基亚e900,比如6x2,3x4,4x3--镇江舰。下麵的例子中-106官网彩票平台ios,我展示了不同分割方式設計的信息卡片|__芮娜森黑钻全效面膜。

Image title

Image title

不同柵格設計展示


很棒_|注册充值送彩金的,這看起來很簡單對吧--466耳鼻喉科。有的時候-||qq空间fd模块,你想把內容嚴格的套用在柵格布局上_-_氰化钠价格,會發現可能不夠美觀__木豆影院,比如下麵的例子|_-吉利心水论坛。


Image title

Image title



如果我們把內容都放在網格上_|-盈彩在线输钱能追回吗?,文本內容會顯得很長__冰河时代2歌词,最佳的位置是不嚴格在任何網格上||色中色账号,這也是可以的-2018大乐透148期,隻要理解了整個元素實際上是一個不可見的||_四平青年2百度影音,更大的容器就行-_|布鲁金斯基征。


Image title

Image title


這也是4x3的布局_优优娱乐彩票反波胆,隻是給了它內部不可見的填充|-邢利斌。當把這樣的設計稿給到開發時|-_亿发彩票犯法吗,他們就能很直觀的知道這一點-隐藏密码,所以這更利於去理解如何實際地分配好內容-_-七关枫花。


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


Image title

Image title


內容元素應該要在列寬以內_-亿彩彩票提现规则,而不能流出在水槽之外_-卓易彩票停了,這樣會違背柵格化的目的_|_黑车交易市场。


3. 隻要父級元素對齊柵格|360彩票走势图,子級可以不完全對齊列

有些時候_-青银高速地图,你想要將設計和卡片分成兩部分__金巧巧胸,一半是圖片|青楼十2房在线观看,一半是文字|__陈坤梦立方。你可能遇到這樣尷尬的情況--大明嫔妃之选秀全集,圖片沒有完全落在一列上|-|艾派国历,文字被迫以一種奇怪的方式自適應-|_京津高铁二线。其實不用擔心-_-3cp彩票官网,隻要“父”容器對齊柵格_|神州租车车型,這就沒有關係__|阜宁新闻。


Image title

Image title

Image title

父子級內容柵格排版示意


4. 除非有意|-|娱乐天地怎么下载,否則不要把列作為外部填充

所有重要內容都應該與柵格列寬相適應-。一開始會覺得奇怪||韩衣衣,因為如果不習慣使用網格-__辽宁电视台全运频道,可能會把網格寬度當成全部內容區域|_快乐向前冲崔璀车祸,所以還需要給它設定一定的內邊距-|-欢乐白领夫妻。此時外邊距就起到了留白的作用---帅同论坛,它們充當了內邊距_-running man20120429。不要在網格內部利用列寬當成內邊距_许君浩,而是要與網格最外麵保持對齊-__高仿古画,利用網格外的間距來當做留白區域|广安严春风的妻子。根據代碼實現方式|__和讯基金净值,要麼網格內的內容按比例縮放||妖精的尾巴421,邊距固定__米肤,要麼外邊距與內容同時縮放||云顶娱乐下载官网100。


Image title

Image title

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


所以如果有人說“我需要一個1200px寬的設計”-|139期香港内部传真,這並不意味著你的設計就是1200px寬_-_塞班5800论坛,這其實是說設計內容寬度在1200px的畫布內_-168手机彩票,實際內容占位是960px_|_qq防沉迷网站,這樣就會有空間留出外邊距|_|2000彩官网。


5. 完全出血的元素或紋理圖形應該設計在畫板邊緣|--105彩票苹果版,並理解為出血的列網格


Image title

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


這是一個例外的規則-__角竹光寿是什么成语,當背景顏色或者圖片在完全出血的情況下|-诺基亚7070拆机教程,開發同學會把它理解為一個全屏的內容元素---青岛往事下载。


Image title

Image title


如果設計的是裝飾元素之類的內容||仲博彩票平台靠谱吗,可以接受它被裁切掉_-诺基亚n97功能,此時也可以脫離柵格化的設計--_北京建材市场地图。


Image title

Image title

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


頁眉和頁腳有時也有例外||性价比较高的笔记本,它們不被認為是內容的一部分_--许喵喵mickey。有些設計將它們固定在瀏覽器邊緣-_曾海潮李悦陈霁江陵肃,有些則喜歡保持內容的寬度-三水芦苞祖庙,這取決於自身功能和內容的情況|-陕西医科大学。將它們保持在內容寬度內的好處是_苍之封印动画,當用戶在寬屏顯示器上看頁麵時|-w508主题,不需要來回掃視|__成都到雅安多少公里;將它們固定在瀏覽器上的好處是可以為導航元素提供更多的空間_花花公子成人网站。


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


Image title

圖片來源Intuit


Image title


在傳統的柵格化係統設計中-|093网络彩票,列的寬度和水槽的寬度是保持不變的-_-花儿乐队演唱会,隻是列的“數量”發生變化|--学习考试好帮手。為什麼要這麼處理呢|--仙剑5下载?這是為了讓設計更簡單|2019年香港走势图。如果一組三張卡片分別放在桌麵的四列上-168开奖网历史,那麼在平板電腦上|__村村通卫星电视,會顯示兩張卡片__2013年母亲节是几月几号,並把第三張卡片進行折行顯示在第二行上||-谈爱 李白。不需要做任何的調整|-|2019还能买足彩的app,因為已經知道它位於第四列上了|jindon京东商城。在手機上|destinywarfare,答案也很簡單||_莅临的意思,隻需要一張卡片-|至尊娱乐腾讯分分彩,其他的就會自動堆到下麵的行中_-农牧场盗匪。如果你願意|-0165彩票正版,也可以變得有創意--_234彩票是黑平台吗,選擇隻在手機上顯示一張卡片|-|廊坊大学城吧,或者做一個水平滾動新疆武警。這些列的自適應對於代碼來說就是很簡單的參考|_-7k7k7小游戏。


實際上___高桥亜由美,web必須呈現任何瀏覽器的寬度___穿越神墓之何为逆天。例如-亿贝平台登录地址,有一個大顯示器||-优彩app苹果,它可以看到1600像素寬的東西-|-陈锡联将军,實際上pc端的網頁設計是1200px寬|__金都西路申徐路,平板電腦上是768px寬||_抖音949415093,手機是360px寬--巴萨勒沃库森。所以你會看到一個小於1200px的設計--_陈思涵,有大量的留白--东风之眠邵长老在哪。但是當你的瀏覽器再小一個像素--楚雄999手机网,1199px_105彩票真的能获利,會發生什麼呢|永利线路检测?


固定網格


Image title

Image title

固定柵格示意


如果開發那邊寫了一個固定柵格|||菊苣草种,當你從桌麵縮小到平板電腦_|雪弗莱乐驰报价,就像是在900px的瀏覽器寬度時||至尊苹果app官方正版,你不會看到任何變化-__挟货要5倍运费,設計就像是被剪掉了一樣--谈爱李白原文。但當達到768px臨界點時--优优娱乐彩票反向,設計馬上就會改變_|jindon京东商城,平板電腦上的顯示效果就會好起來_-_选票模板。如果繼續減小這個值--云顶国际赛车,同樣的事情也會發生_-|说话犀利是什么意思,在到達另一個臨界值之前|__众彩娱乐是不是黑平台,設計看起來都是不變的|_花溪变态杀人狂。


流動網格


Image title

Image title

流動網格的示例


現在來看看流動網格的特點--泰国斗鱼繁殖,當窗口縮小時__成都工商网上年检,內容將動態的發生變化_|天翼无线上网卡驱动,文本會進行換行宏泰电影,元素也會變窄__0898是哪里的区号。然而|-256手机彩票软件怎么样,這些元素在內容寬度縮小到下一個臨界值之前_-雪弗莱suv,布局是不會變化的___178娱乐平台怎么玩。


所以我想說的是||_璎珞潮牌服装批发网,設計的臨界值隻是一個更改布局的參考點__诺顿最新激活码。這就是為什麼列寬和水槽在網格中不會改變的原因|_35彩票没人管吗?,因為我們想讓設計師在考慮布局時能夠更容易地創建一致性-|-夹心取力器。


混合網格

在實際項目中|__东莞酒店一条龙服务,使用流動網格和固定網格的組合也是常見的做法|--爱意文学。網站通常是流動網格|||13彩官网,因為它要去適應各種不同終端的大小-2013长春车展。


一些做的很酷的柵格係統

不需要太死板地去堅持傳統柵格套路_-淘宝怎么开店,12||娱乐彩票app排名榜、8_-众彩彩票app下载安装、4這樣的分布_|陈丽华 前夫,甚至不需要20px的水槽--_阿旗绿源。下麵是一些在設計中使用柵格係統做的很棒的設計靈感--038彩票赌博。


Image title

Invision’s Genome Project


Image title

可以看到_|-众益彩票合法吗,他們的設計故意不去使用任何的水槽|-穆勒故意跪倒,所以看起來是無縫的|qq校内网登陆。


這個網站不僅設計的很好_湖南基础教育资源网,他們還利用了在設計中展示他們自己的柵格係統來讓整體的設計變得更加酷炫|-火焰之纹章圣魔之光石金手指。


Dropbox Design


Image title


他們沒有設計水槽和外邊距__力证逍遥,相反_2k彩票,整個頁麵被分成兩半|-_易彩网多少钱可以提现,然後將內容填充到這兩部分|__武汉口碑网。


Wordpress


Image title

Wordpress創建賬號頁麵


使用網格的方式取決於你自己_|爱相约。你可以在主要內容部分使用網格-|2015gdp世界排名,次要內容則不使用|报考省份的代码。在Wordpress的例子中_李白 谈爱,頁麵中間的部分使用柵格化設計|三星w2017,左側的側邊欄則沒有使用_-网曝 查开房 网址。


The Mockup Club


Image title


內容和網格也並不總是從中間開始|15700牛蛙彩票开奖记,對於模型網站-许雯may,內容在左邊也未嚐不可-|-霍林郭勒政府网。


Instagram


Image title

Image title


我非常確定的說__猪饲料排行,Instagram的PC端是用上了6列柵格布局___135时时彩彩票。


要點總結

寫這篇文章的目的是想提供一些關於如何在響應式設計中使用柵格係統_|4466k最近10天更新。我知道對於我自己來說|168彩票IOS,我花了很多年的時間寫了大量的代碼來理解網格是如何工作的|--oppo翻盖音乐手机。我在YouYube上看了很多視頻|-易中彩票网站靠谱吗,也閱讀了大量的文章_--跆拳道太子妃,但每個人都在關注它為什麼重要-|-苏西 埃米斯,卻不去注重到底怎麼在自己的項目中使用這些原則-|111彩票安卓。


你要做的最好的事情就是從現在開始注意那些優秀設計是如何對齊元素的|_兰州房价,你將會開始看到這些模式||-钱塘老娘舅2013。為了幫助理解_-|01彩票正规不,這裏有一些設計係統概述了它們的網格使用--shuaitong:


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


在完全理解了網格的工作原理之後-|金瓜钺斧朝天蹬,我已經成為了一名更好的設計師|_-许君浩,因為我知道我的設計將如何在臨界值之間進行轉換__至尊彩app。我也可以落地我的設計||注册就送38可微信提现,使它們能夠有一個完美的像素對齊-|云顶娱乐微信二维码。這樣的規範帶來了更一致|北上广地铁神器,更簡潔的設計-_-龙驹私服,當用戶從一個界麵到另一個界麵流轉時||_77k7k小游戏,這真的提升了產品的檔次_-口交图。我建議在你的設計中去應用這些網格_108娱乐是真的吗,並和開發一起|197彩票官网,以相同的方式將它們落地-_-168开奖1680380com,這將會是一個非常不錯的進步--智彩网。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|-_1号彩票主页,為期望卓越的國內外企業提供卓越的UI界麵設計|_永盛娱乐平台靠谱吗、BS界麵設計 __臭豆腐打一歌手、 cs界麵設計 _兰西征婚、 ipad界麵設計 |-葱灯网、 包裝設計 |_欧冠皇马vs马竞、 圖標定製 ||5320手机软件下载、 用戶體驗 |长江电力商务、交互設計_|陶陶洁具、 網站建設 -|海诗神楼、平麵設計服務_|mc擦皮鞋歌词。

Powered by emlog 京ICP備12006971號-1 sitemap