2022-5-6 博博
當(dāng)我們拿到網(wǎng)頁(yè)設(shè)計(jì)需求時(shí)，首先要確定是不是要單獨(dú)開發(fā)移動(dòng)版本。因?yàn)轫憫?yīng)式布局兼顧了手機(jī)端適配問(wèn)題，但是受加載速度、手機(jī)瀏覽器、柵格化系統(tǒng)的限制設(shè)計(jì)發(fā)揮的自由度、等的影響很大。
柵格化設(shè)計(jì)：是針對(duì)網(wǎng)頁(yè)設(shè)計(jì)師。主要是為了提高網(wǎng)頁(yè)的規(guī)范性。
柵格設(shè)計(jì)系統(tǒng)：（網(wǎng)格設(shè)計(jì)系統(tǒng)，標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計(jì)）是一種屏幕設(shè)計(jì)的方法和風(fēng)格，運(yùn)動(dòng)固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整、整潔。
柵格化布局：針對(duì)前端開發(fā)人員，指前端攻城獅使用的css框架，來(lái)實(shí)現(xiàn)頁(yè)面的響應(yīng)式布局。
設(shè)計(jì)師使用縱向的柵格（列）讓頁(yè)面元素垂直方向上對(duì)齊，使用橫向的柵格（排）讓元素水平方向上對(duì)齊。設(shè)計(jì)師結(jié)合基準(zhǔn)網(wǎng)格（8pt）和縱向柵格（12欄 16pt）進(jìn)行設(shè)計(jì)。
基于設(shè)備的邏輯像素進(jìn)行UI設(shè)計(jì)——設(shè)計(jì)開始前UI設(shè)計(jì)師要根據(jù)桌面和平板手機(jī)分辨率大小，考慮最大最小響應(yīng)的屏幕，給出響應(yīng)的策略設(shè)置斷點(diǎn)和次斷點(diǎn)。
斷點(diǎn)：(breakpoint)是頁(yè)面改變布局的臨界點(diǎn)，一個(gè)響應(yīng)式網(wǎng)頁(yè)可能會(huì)有一個(gè)或者多個(gè)斷點(diǎn)。有時(shí)候網(wǎng)頁(yè)也會(huì)設(shè)置次斷點(diǎn)。
次斷點(diǎn)：(minor breakpoint)并未對(duì)頁(yè)面布局做很大的改動(dòng) 只是對(duì)細(xì)節(jié)做了一些微調(diào)。
媒體查詢：（media queries）是實(shí)現(xiàn)斷點(diǎn)的一種方法，它提供了簡(jiǎn)單的邏輯方法來(lái)根據(jù)不同的設(shè)備特征（寬度 高度 像素比）應(yīng)用不同樣式，最常用的媒體查詢變量是min-width和max-width。）
設(shè)計(jì)師根據(jù)網(wǎng)頁(yè)的內(nèi)容找到合適的斷點(diǎn)。設(shè)置多少個(gè)斷點(diǎn)由網(wǎng)站的內(nèi)容決定，設(shè)置幾個(gè)斷點(diǎn)就需要設(shè)計(jì)幾套UI設(shè)計(jì)圖。設(shè)法避免列間空白太寬或太窄的情況。常見的設(shè)計(jì)尺寸1920PX（大屏電腦）、1440PX/1280PX（小屏電腦）、1024PX（橫屏Ipad）、768PX（手機(jī)和豎屏Ipad）。（這些是根據(jù)市場(chǎng)常見的機(jī)型分辨率來(lái)的。再根據(jù)網(wǎng)頁(yè)內(nèi)容多少進(jìn)行合理的增減。）
用chrome瀏覽器打開一個(gè)響應(yīng)式網(wǎng)站，檢查元素，右上角會(huì)顯示視窗當(dāng)前的分辨率，慢慢縮小視窗的寬度，找到頁(yè)面布局的變化點(diǎn)，就是我們上面說(shuō)到的斷點(diǎn)或者次斷點(diǎn)。）
這個(gè)當(dāng)然不是了。這個(gè)視網(wǎng)站中每個(gè)頁(yè)面的內(nèi)容而定，甚至同一個(gè)頁(yè)面的不同內(nèi)容模塊布局?jǐn)帱c(diǎn)設(shè)置也不盡相同。在我的實(shí)踐過(guò)程中，很多頁(yè)面只需要設(shè)計(jì)三套，當(dāng)然比較復(fù)雜的頁(yè)面，在這五個(gè)分辨率上，都需要對(duì)布局做一些修改或者自動(dòng)隱藏部分內(nèi)容。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn