UI界面當(dāng)中的網(wǎng)格系統(tǒng)
時(shí)間:2023-09-28 00:06:01 | 來源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-09-28 00:06:01 來源:網(wǎng)站運(yùn)營(yíng)
UI界面當(dāng)中的網(wǎng)格系統(tǒng):
(一)什么是網(wǎng)格系統(tǒng)?| 包含了水平和垂直方向的參考線,用來合理排列內(nèi)容。 最基本的網(wǎng)格系統(tǒng)由一系列水平和垂直的交叉參考線構(gòu)成。網(wǎng)格系統(tǒng)最開始在紙媒中廣泛應(yīng)用,有著悠長(zhǎng)的歷史,引入到網(wǎng)頁設(shè)計(jì)之后,出現(xiàn)了很多CSS網(wǎng)格框架,幾乎成了網(wǎng)頁設(shè)計(jì)的標(biāo)準(zhǔn)。利用網(wǎng)格系統(tǒng)可以更好的駕馭內(nèi)容,保持一致性。也是響應(yīng)式網(wǎng)頁表現(xiàn)的方法之一。
下面我們來看圖(一)為響應(yīng)式網(wǎng)站在不同終端的顯示效果,顯示終端為不同的顯示器,各種手機(jī)(包括橫版豎版)都需要很好適配做好用戶體驗(yàn)。
當(dāng)然你也可以打破網(wǎng)格系統(tǒng),用更好的布局取而代之,也可從網(wǎng)格系統(tǒng)中衍生出自己的布局方式。如果你的網(wǎng)站設(shè)計(jì)的已經(jīng)很不錯(cuò),那么可以通過網(wǎng)格來讓你的網(wǎng)站更具有體驗(yàn)價(jià)值。但網(wǎng)格系統(tǒng)不意味著循規(guī)蹈矩,一味按照網(wǎng)格線來進(jìn)行布局。就拿響應(yīng)式設(shè)計(jì)來說,靈活性是其最大的特點(diǎn)網(wǎng)格系統(tǒng)也應(yīng)如此,網(wǎng)格系統(tǒng)的意義在于更靈活的幫助你有序布局,而不是限制你的設(shè)計(jì)。網(wǎng)上可以找到很多合適的網(wǎng)格框架,當(dāng)然,我們也可以自己創(chuàng)造。但還有句老話說的好,規(guī)矩就是用來被打破的。無需拘泥于網(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)頁中最多的欄就是導(dǎo)航的劃分了,12欄已經(jīng)可以滿足大多數(shù)的分欄了。我們可以先去看蘋果的官網(wǎng)響應(yīng)式就做的很棒,以此來開啟我們的網(wǎng)格之旅?。?!
那么什么樣的網(wǎng)格系統(tǒng)更適合我們呢? 我們要從實(shí)際的設(shè)計(jì)產(chǎn)出物(平面、網(wǎng)頁、APP)來考慮,就能夠知曉網(wǎng)格系統(tǒng)如何設(shè)定。
平面:尊重常用分欄進(jìn)行劃分,尺寸可以有小數(shù)點(diǎn)但需要達(dá)到均衡感。
網(wǎng)頁:為了能夠符合工程師書寫代碼,請(qǐng)按2的倍數(shù)進(jìn)行欄與間距的劃分,盡量不要出現(xiàn)奇數(shù)與小數(shù)點(diǎn),小數(shù)點(diǎn)不好書寫,奇數(shù)不好對(duì)齊。
APP:為了適配不同手機(jī)能夠方便工程師開發(fā),請(qǐng)按2的倍數(shù)(工程師尺寸設(shè)計(jì)效果圖)、4的倍數(shù)來劃分(按2倍手機(jī)設(shè)計(jì)效果圖)、6的倍數(shù)來劃分(按3倍手機(jī)設(shè)計(jì)效果圖),以此為參考進(jìn)行網(wǎng)格設(shè)定就真正意義上考慮到效果圖在手機(jī)上的還原度。
下面的圖解主要分析網(wǎng)頁與手機(jī)H5頁面的網(wǎng)格系統(tǒng)建立方法。我個(gè)人更喜歡12列的網(wǎng)格。需要參考整體的寬度來進(jìn)行分割。如果設(shè)計(jì)上有比較多的小元素可以設(shè)置24列網(wǎng)格。以前網(wǎng)上下載到CSS樣式大多數(shù)都是960px的網(wǎng)格系統(tǒng),這里的960px就是頁面的可視區(qū)域?,F(xiàn)在屏幕的分辨率都提高了,大多數(shù)網(wǎng)頁都基于1200px以內(nèi)進(jìn)行響應(yīng)式設(shè)計(jì)適配不同的瀏覽器。下圖(二)為大家對(duì)網(wǎng)頁的網(wǎng)格系統(tǒng)的劃分請(qǐng)童鞋參考,也可以自己重新定義屬于自己的網(wǎng)格系統(tǒng)(網(wǎng)頁的高度看你的內(nèi)容多少了)
(三)網(wǎng)頁網(wǎng)格系統(tǒng)~點(diǎn)鏈接可以訪問實(shí)際效果可以通過電腦端手機(jī)進(jìn)行檢驗(yàn)~
http://www.adobeedu.com/images/laiyi/(四)手機(jī)H5網(wǎng)格系統(tǒng) 我們知道手機(jī)端的開發(fā)分為原生開發(fā)(基于iOS、Android、Windows Phone也叫本地智能操作系統(tǒng)Native APP)與Web APP(基于高端機(jī)瀏覽器運(yùn)行)以及混合開發(fā)(web與原生結(jié)合),后臺(tái)的開發(fā)語言也不同如安卓Jav是a開發(fā)語言、iOS是Objective-C語言、Windows Phone是C##。
原生APP的優(yōu)點(diǎn)可以節(jié)約寬帶成本、訪問本地資源、打開的速度更快并為用戶提供最佳的用戶體驗(yàn)和優(yōu)質(zhì)的用戶界面,但現(xiàn)在web端口也有很多優(yōu)點(diǎn)基于網(wǎng)頁端開發(fā)完成后移入到移動(dòng)端內(nèi)部就需要混合開發(fā)來解決了。
手機(jī)端的網(wǎng)格系統(tǒng)建立我們首先需要基于效果圖來進(jìn)行討論,H5與APP在展現(xiàn)效果上是相同的,但開發(fā)上是不一樣的。H5是基于web,APP基于原生與web。我們?cè)谥谱餍Ч麍D上都希望還原度較好,請(qǐng)?jiān)诰W(wǎng)頁設(shè)計(jì)與APP設(shè)計(jì)上注重尺寸規(guī)范考慮到工程師書寫代碼的習(xí)慣。手機(jī)里我們知道有0.75倍、1倍、1.5倍、2倍、3倍、4倍,其中0.75倍、1倍、1.5倍已經(jīng)淘汰了。我們通過老鐵書寫的<設(shè)計(jì)排版字號(hào)大小知多少?>文章就可以了解到平面設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)都是1倍,手機(jī)里是2倍3倍居多。
我們?cè)谥谱鱄5與APP設(shè)計(jì)效果圖上需要制作蘋果版與安卓版,理論上可以制作工程師的1倍尺寸,設(shè)計(jì)師的2倍、3倍尺寸都在允許范圍,都需要工程師進(jìn)行適配到各種手機(jī)上顯示。
用來制作效果圖的尺寸如下:
iOS包括:
工程師-375x667pt、414x736pt ;
設(shè)計(jì)師-640x1136px、750x1334px、1125x2001px、1242x2208px、1080x1920px;
Android包括:
工程師-360x640dp;
設(shè)計(jì)師-720x1280px、1080x1920px;
以上的尺寸都是可以制作效果圖的但看工程師想依照那個(gè)效果圖進(jìn)行開發(fā),因人而異,有的工程師設(shè)計(jì)師制作一套效果圖剩下都可以適配出來,有的工程師需要設(shè)計(jì)師再更改一個(gè)其它版本。下圖的H5頁面使用蘋果2倍手機(jī)尺寸制作效果圖進(jìn)行的網(wǎng)格系統(tǒng)建立,共建立了兩個(gè)網(wǎng)格系統(tǒng)8分欄-圖(六)與6分欄-圖(七)其它版本的頁面可以以此為借鑒制作符合需求的網(wǎng)格效果圖。
下圖是以H5網(wǎng)格系統(tǒng)設(shè)計(jì)的專題作品在你的設(shè)計(jì)中使用網(wǎng)格可以讓你更有邏輯地進(jìn)行設(shè)計(jì)工作,并且網(wǎng)格系統(tǒng)可以更好地組織畫面中的信息,讓重要的元素更加鮮明,讓設(shè)計(jì)稿有更好的結(jié)構(gòu),帶來更好的體驗(yàn)。設(shè)計(jì)師的工作是盡可能更有創(chuàng)意地傳遞信息,網(wǎng)格系統(tǒng)是讓信息更具條理的方式之一,但我們不一定非得100%完全遵循網(wǎng)格的分欄進(jìn)行設(shè)計(jì),我們也要打破網(wǎng)格系統(tǒng),這也是創(chuàng)建視覺興趣點(diǎn)的好方法!
喜歡的記得點(diǎn)贊謝謝