火星網(wǎng)校
UI界面中的網(wǎng)格系統(tǒng)
發(fā)布時(shí)間：2024-03-12 18:48:57 瀏覽量：232次
（一）什么是網(wǎng)格系統(tǒng)？
| 包含了水平和垂直方向的參考線，用來(lái)合理排列內(nèi)容。
最基本的網(wǎng)格系統(tǒng)由一系列水平和垂直的交叉參考線構(gòu)成。網(wǎng)格系統(tǒng)最開(kāi)始在紙媒中廣泛應(yīng)用，有著悠長(zhǎng)的歷史，引入到網(wǎng)頁(yè)設(shè)計(jì)之后，出現(xiàn)了很多CSS網(wǎng)格框架，幾乎成了網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)。利用網(wǎng)格系統(tǒng)可以更好的駕馭內(nèi)容，保持一致性。也是響應(yīng)式網(wǎng)頁(yè)表現(xiàn)的方法之一。
下面我們來(lái)看圖（一）為響應(yīng)式網(wǎng)站在不同終端的顯示效果，顯示終端為不同的顯示器，各種手機(jī)（包括橫版豎版）都需要很好適配做好用戶體驗(yàn)。
當(dāng)然你也可以打破網(wǎng)格系統(tǒng)，用更好的布局取而代之，也可從網(wǎng)格系統(tǒng)中衍生出自己的布局方式。如果你的網(wǎng)站設(shè)計(jì)的已經(jīng)很不錯(cuò)，那么可以通過(guò)網(wǎng)格來(lái)讓你的網(wǎng)站更具有體驗(yàn)價(jià)值。但網(wǎng)格系統(tǒng)不意味著循規(guī)蹈矩，一味按照網(wǎng)格線來(lái)進(jìn)行布局。就拿響應(yīng)式設(shè)計(jì)來(lái)說(shuō)，靈活性是其最大的特點(diǎn)網(wǎng)格系統(tǒng)也應(yīng)如此，網(wǎng)格系統(tǒng)的意義在于更靈活的幫助你有序布局，而不是限制你的設(shè)計(jì)。網(wǎng)上可以找到很多合適的網(wǎng)格框架，當(dāng)然，我們也可以自己創(chuàng)造。但還有句老話說(shuō)的好，規(guī)矩就是用來(lái)被打破的。無(wú)需拘泥于網(wǎng)格系統(tǒng)的形式，我們使用網(wǎng)格系統(tǒng)只是為了理解布局的理念和手法，之后，我們便可以進(jìn)行創(chuàng)新。
（二）如何建立網(wǎng)格系統(tǒng)？
網(wǎng)格系統(tǒng)的設(shè)定不同人有不同的習(xí)慣，有人喜歡12列的網(wǎng)格，有人則喜歡16列網(wǎng)格，還有人喜歡24列的網(wǎng)格等等。
為什么老鐵喜歡運(yùn)用12欄，網(wǎng)頁(yè)中最多的欄就是導(dǎo)航的劃分了，12欄已經(jīng)可以滿足大多數(shù)的分欄了。我們可以先去看蘋(píng)果的官網(wǎng)響應(yīng)式就做的很棒，以此來(lái)開(kāi)啟我們的網(wǎng)格之旅?。?！
那么什么樣的網(wǎng)格系統(tǒng)更適合我們呢？
我們要從實(shí)際的設(shè)計(jì)產(chǎn)出物（平面、網(wǎng)頁(yè)、APP）來(lái)考慮，就能夠知曉網(wǎng)格系統(tǒng)如何設(shè)定。
平面：尊重常用分欄進(jìn)行劃分，尺寸可以有小數(shù)點(diǎn)但需要達(dá)到均衡感。
網(wǎng)頁(yè)：為了能夠符合工程師書(shū)寫(xiě)代碼，請(qǐng)按2的倍數(shù)進(jìn)行欄與間距的劃分，盡量不要出現(xiàn)奇數(shù)與小數(shù)點(diǎn)，小數(shù)點(diǎn)不好書(shū)寫(xiě)，奇數(shù)不好對(duì)齊。
APP：為了適配不同手機(jī)能夠方便工程師開(kāi)發(fā)，請(qǐng)按2的倍數(shù)（工程師尺寸設(shè)計(jì)效果圖）、4的倍數(shù)來(lái)劃分（按2倍手機(jī)設(shè)計(jì)效果圖）、6的倍數(shù)來(lái)劃分（按3倍手機(jī)設(shè)計(jì)效果圖），以此為參考進(jìn)行網(wǎng)格設(shè)定就真正意義上考慮到效果圖在手機(jī)上的還原度。
下面的圖解主要分析網(wǎng)頁(yè)與手機(jī)H5頁(yè)面的網(wǎng)格系統(tǒng)建立方法。我個(gè)人更喜歡12列的網(wǎng)格。需要參考整體的寬度來(lái)進(jìn)行分割。如果設(shè)計(jì)上有比較多的小元素可以設(shè)置24列網(wǎng)格。以前網(wǎng)上下載到CSS樣式大多數(shù)都是960px的網(wǎng)格系統(tǒng)，這里的960px就是頁(yè)面的可視區(qū)域?，F(xiàn)在屏幕的分辨率都提高了，大多數(shù)網(wǎng)頁(yè)都基于1200px以內(nèi)進(jìn)行響應(yīng)式設(shè)計(jì)適配不同的瀏覽器。下圖（二）、圖（三）為老鐵針對(duì)網(wǎng)頁(yè)的網(wǎng)格系統(tǒng)的劃分請(qǐng)童鞋參考，也可以自己重新定義屬于自己的網(wǎng)格系統(tǒng)（網(wǎng)頁(yè)的高度看你的內(nèi)容多少了）版式中的banner（廣告）遵循廣告的設(shè)計(jì)規(guī)律，字體字號(hào)大小、字體顏色老鐵的其它文章都講解過(guò)了~~~
平面設(shè)計(jì)中的立體空間
設(shè)計(jì)排版字號(hào)大小知多少？
最容易上手的配色方法
（四）手機(jī)H5網(wǎng)格系統(tǒng)
我們知道手機(jī)端的開(kāi)發(fā)分為原生開(kāi)發(fā)（基于iOS、Android、Windows Phone也叫本地智能操作系統(tǒng)Native APP）與Web APP（基于高端機(jī)瀏覽器運(yùn)行）以及混合開(kāi)發(fā)（web與原生結(jié)合）,后臺(tái)的開(kāi)發(fā)語(yǔ)言也不同如安卓Jav是a開(kāi)發(fā)語(yǔ)言、iOS是Objective-C語(yǔ)言、Windows Phone是C##。
原生APP的優(yōu)點(diǎn)可以節(jié)約寬帶成本、訪問(wèn)本地資源、打開(kāi)的速度更快并為用戶提供最佳的用戶體驗(yàn)和優(yōu)質(zhì)的用戶界面，但現(xiàn)在web端口也有很多優(yōu)點(diǎn)基于網(wǎng)頁(yè)端開(kāi)發(fā)完成后移入到移動(dòng)端內(nèi)部就需要混合開(kāi)發(fā)來(lái)解決了。
手機(jī)端的網(wǎng)格系統(tǒng)建立我們首先需要基于效果圖來(lái)進(jìn)行討論，H5與APP在展現(xiàn)效果上是相同的，但開(kāi)發(fā)上是不一樣的。H5是基于web，APP基于原生與web。我們?cè)谥谱餍Ч麍D上都希望還原度較好，請(qǐng)?jiān)诰W(wǎng)頁(yè)設(shè)計(jì)與APP設(shè)計(jì)上注重尺寸規(guī)范考慮到工程師書(shū)寫(xiě)代碼的習(xí)慣。手機(jī)里我們知道有0.75倍、1倍、1.5倍、2倍、3倍、4倍，其中0.75倍、1倍、1.5倍已經(jīng)淘汰了。我們通過(guò)老鐵書(shū)寫(xiě)的<設(shè)計(jì)排版字號(hào)大小知多少？>文章就可以了解到平面設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)都是1倍，手機(jī)里是2倍3倍居多。
我們?cè)谥谱鱄5與APP設(shè)計(jì)效果圖上需要制作蘋(píng)果版與安卓版，理論上可以制作工程師的1倍尺寸，設(shè)計(jì)師的2倍、3倍尺寸都在允許范圍，都需要工程師進(jìn)行適配到各種手機(jī)上顯示。
用來(lái)制作效果圖的尺寸如下：
iOS包括:
工程師-375x667pt、414x736pt ；
設(shè)計(jì)師-640x1136px、750x1334px、1125x2001px、1242x2208px、1080x1920px;
Android包括：
工程師-360x640dp;
設(shè)計(jì)師-720x1280px、1080x1920px；
以上的尺寸都是可以制作效果圖的但看工程師想依照那個(gè)效果圖進(jìn)行開(kāi)發(fā)，因人而異，有的工程師設(shè)計(jì)師制作一套效果圖剩下都可以適配出來(lái)，有的工程師需要設(shè)計(jì)師再更改一個(gè)其它版本。下圖的H5頁(yè)面使用蘋(píng)果2倍手機(jī)尺寸制作效果圖進(jìn)行的網(wǎng)格系統(tǒng)建立，共建立了兩個(gè)網(wǎng)格系統(tǒng)8分欄-圖（六）與6分欄-圖（七）其它版本的頁(yè)面可以以此為借鑒制作符合需求的網(wǎng)格效果圖。
熱門(mén)課程推薦
熱門(mén)資訊
-
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范，原來(lái)如此重要！
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
-
3. 移動(dòng)端UI設(shè)計(jì)中常見(jiàn)的5種APP界面類(lèi)型，你get到了嗎？
通過(guò)介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁(yè)、引導(dǎo)頁(yè)、浮層引導(dǎo)頁(yè)、空白頁(yè)和首頁(yè)等5種APP界面類(lèi)型，幫助大家更好地了解UI設(shè)計(jì)的基本知識(shí)
-
4. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、字體...
-
5. 移動(dòng)端列表頁(yè)和表單頁(yè)設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁(yè)和表單頁(yè)是不可或缺的部分。一個(gè)好的列表頁(yè)和表單頁(yè)設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計(jì)師看的書(shū)籍，輕松掌握技能!
對(duì)于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來(lái)說(shuō),這本書(shū)是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺(jué)醒》(IKKO TANAKA)推薦理由: 這本書(shū)是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長(zhǎng)與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專(zhuān)業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過(guò)程中,應(yīng)盡量使用簡(jiǎn)潔的圖標(biāo)、文字和色彩,避免過(guò)多的視覺(jué)干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過(guò)對(duì)色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
-
10. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣？想學(xué)UI設(shè)計(jì)要多少錢(qián)？
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎？不知道學(xué)UI設(shè)計(jì)要花多少錢(qián)？不妨看看這篇文章，了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
最新文章
