免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

網(wǎng)頁(yè)設(shè)計(jì)中如何掌握柵格系統(tǒng)基礎(chǔ)知識(shí)!

2016-10-07    分類(lèi): 網(wǎng)站建設(shè)

網(wǎng)站設(shè)計(jì)中板式運(yùn)用的刪格化計(jì)算法,使網(wǎng)站的頁(yè)面看起來(lái)更加舒服和平衡增強(qiáng)了內(nèi)容上的閱讀性,使網(wǎng)站設(shè)計(jì)上布局更加清晰有條理性、邏輯性。網(wǎng)站建設(shè)中設(shè)計(jì)師也通過(guò)刪格化,使頁(yè)面看起來(lái)更具有層次感,那么什么話(huà)到底是怎么規(guī)范的呢?

1. 柵格

柵格最早起源于平面設(shè)計(jì)。1692年法國(guó)為提高印刷水平,以方格為設(shè)計(jì)基礎(chǔ),將一個(gè)印刷版面分成上千個(gè)小格,這就是最早的柵格雛形。再后來(lái),慢慢演變成運(yùn)用固定的格子設(shè)計(jì)版面的平面設(shè)計(jì)風(fēng)格。

2. 網(wǎng)頁(yè)柵格

包括網(wǎng)頁(yè)端和移動(dòng)端,是以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)規(guī)范界面中的版面布局以及信息分布。

3. 為什么要使用柵格

通過(guò)柵格的使用,可以用邏輯解釋商業(yè)設(shè)計(jì)的細(xì)節(jié)問(wèn)題。

設(shè)計(jì)內(nèi)容都應(yīng)該有所依據(jù),當(dāng)其他人質(zhì)疑時(shí),可以系統(tǒng)有底氣的解釋設(shè)計(jì)內(nèi)容。設(shè)計(jì)師可以利用柵格讓畫(huà)面更有調(diào)性,讓內(nèi)容更具可讀性;可以快速校準(zhǔn)元素的位置,讓畫(huà)面更平衡;可以模塊化地管理元素,讓版面更有層次感。

4. 柵格基礎(chǔ)七要素

最小單位

需要先定好界面的單位基礎(chǔ),后續(xù)內(nèi)容元素和布局規(guī)則都是基于它整數(shù)倍遞增。

網(wǎng)頁(yè)端最小單位:10

移動(dòng)端最小單位:3、4、5

總寬度/W

總寬度:對(duì)整體布局進(jìn)行規(guī)范,且還可以保證設(shè)計(jì)尺寸的統(tǒng)一性。

界面設(shè)計(jì)要有具體尺寸,由于內(nèi)容多少不確定,所以高度沒(méi)有辦法定死,但內(nèi)容區(qū)的寬度是可以定的。

列數(shù)/N

列數(shù)是界面總寬度設(shè)定好后,縱向等分成幾列。

網(wǎng)頁(yè)端:12列、24列(常用等分列數(shù),當(dāng)然不是固定的,需要根據(jù)自己的內(nèi)容設(shè)定列數(shù))

移動(dòng)端:6列(常用等分列數(shù))

大列寬/L

把界面總寬度等分成幾列,每一列的寬度即為大列寬。

計(jì)算公式:L = W / N

大列寬包含:列寬和水槽

水槽/G

相鄰兩個(gè)列寬之間的間隔是水槽。

水槽寬度越大,頁(yè)面留白和呼吸感會(huì)更好,反之則更緊湊。水槽可以將內(nèi)容更規(guī)范的區(qū)分開(kāi)來(lái)。

列寬/C

把界面總寬度等分成列,相鄰兩列之間的間隔(水槽)減去后就是列寬。

安全邊距/M

界面左右能保證可讀性和美觀(guān)度的、合適的空隙就是安全邊距。

Sketch 里設(shè)置水槽后,安全邊距是水槽的0.5倍。

計(jì)算公式:M = G / 2

5. 安全邊距

除了使用水槽的0.5倍,還可以使用0、0.5、1.0、1.5、2.0等水槽的倍數(shù)。舉例:水槽是20,使用0.5倍,安全邊距為10;水槽是20,使用2.0倍,安全邊距為40。

柵格是輔助頁(yè)面布局的,所以需要根據(jù)實(shí)際內(nèi)容靈活的使用柵格,而不要被柵格所束縛。

6. 各種公式匯總

N 是自定義設(shè)置的列數(shù)。

小結(jié)

在 Sketch 里設(shè)置柵格,定義好3個(gè)數(shù)值即可,總寬度、列數(shù)和水槽,這三個(gè)內(nèi)容定義好數(shù)值后,其他內(nèi)容就會(huì)自動(dòng)計(jì)算,一個(gè)柵格就生成了。

如何用柵格系統(tǒng)布局頁(yè)面

第一步:確定頁(yè)面寬度,比如1920、1800、1600、1366、1280等等。

第二步:分析內(nèi)容等分的復(fù)雜度,如果內(nèi)容簡(jiǎn)單只需要3、4等分,12列的柵格系統(tǒng)即可。如果有較多不等分的可能,建議采用24列的柵格系統(tǒng),可靈活設(shè)置。

第三步:根據(jù)內(nèi)容布局頁(yè)面,確定模塊之間是否有「間隔」,間隔尺寸是多少,6px、8px、10px、12px和20px選一個(gè)方便計(jì)算、方便記憶和整除的數(shù)值即可。

就像過(guò)去,開(kāi)發(fā)人員發(fā)現(xiàn)960px是最適合作為網(wǎng)格布局的寬度,因?yàn)?60可以整除3,4,5,6,8,10,12,15,是不是突然發(fā)現(xiàn)設(shè)計(jì)其實(shí)是一道數(shù)學(xué)題。

1. 網(wǎng)頁(yè)舉例

根據(jù)具體內(nèi)容,使用方格布局整個(gè)頁(yè)面。

Sketch 柵格設(shè)置,這里的總寬度1190是內(nèi)容設(shè)計(jì)的實(shí)際寬度,設(shè)計(jì)頁(yè)面寬度是1920,因?yàn)橛行﹥?nèi)容展示選用居中布局方式,兩邊留白。

影響網(wǎng)頁(yè)設(shè)計(jì)的兩大因素

影響網(wǎng)頁(yè)設(shè)計(jì)的兩大因素:分辨率和瀏覽器。

1. 分辨率

什么是分辨率?

比如1920*1080px,整個(gè)屏幕可以看成是由很多小方格子組成,一個(gè)像素就是一個(gè)小格子,橫向有1920個(gè)小格子,豎向有1080個(gè)小格子。

電腦屏幕是14寸還是15寸的,尺寸不變,電腦分辨率是可變的,在同一個(gè)屏幕上,分辨率越大畫(huà)面就越精細(xì),反之就越模糊。當(dāng)下比較流行的屏幕分辨率:1024*768、1366*768、1280*800、1280*1024、1440*900、1600*900、1920*1080等。

注意:

關(guān)于分辨率,可以選用適合自己團(tuán)隊(duì)的分辨率尺寸,我們團(tuán)隊(duì)是梳理出所有產(chǎn)品的分辨率的使用情況,及團(tuán)隊(duì)產(chǎn)品設(shè)計(jì)的特點(diǎn),選取2~3個(gè)作為后續(xù)統(tǒng)一使用的尺寸。

2. 瀏覽器

在網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候也要考慮到各大瀏覽器的現(xiàn)實(shí)問(wèn)題,有的瀏覽器窗口比較高,有的瀏覽器窗口比較窄,那么我們?cè)谧鲈O(shè)計(jì)的過(guò)程中應(yīng)適當(dāng)?shù)目紤]到效果圖在瀏覽器上呈現(xiàn)的效果在全屏滾動(dòng)的時(shí)候要考慮的每一屏內(nèi)容的規(guī)劃,各大瀏覽器是否能夠顯示完整。

文章標(biāo)題:網(wǎng)頁(yè)設(shè)計(jì)中如何掌握柵格系統(tǒng)基礎(chǔ)知識(shí)!
地址分享:http://m.newbst.com/news44/49994.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站定制開(kāi)發(fā)品牌網(wǎng)站設(shè)計(jì)ChatGPT網(wǎng)站建設(shè)軟件開(kāi)發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司