你的布局設(shè)定方法靠譜嗎？

有一種“奇怪的”現(xiàn)象會(huì)經(jīng)常的看到“很多設(shè)計(jì)師沒有辦法清楚的跟其他人解釋他們是如何設(shè)計(jì)的，越細(xì)致的地方可能越是如此。比如，這個(gè)菜單的寬度為什么是200px？250px或者190px是否可以？圖片的尺寸為什么是278px*196px？如何確定網(wǎng)頁的寬度？“

軟件界面的設(shè)計(jì)師除了視覺本身以外，對(duì)于設(shè)計(jì)是否可以實(shí)現(xiàn)、大概以何種方式實(shí)現(xiàn)、規(guī)范可否被理解并且復(fù)制執(zhí)行、設(shè)計(jì)實(shí)現(xiàn)的性價(jià)比與時(shí)間比等緯度都應(yīng)有相當(dāng)高度的認(rèn)識(shí)。就像建筑設(shè)計(jì)師一樣，他們一定很了解建筑材料以及如何建筑，雖然他們不會(huì)去親自砌墻。:)

希望通過此文可以交流關(guān)于柵格化和盒子比例的設(shè)計(jì)方法。

柵格化

對(duì)于網(wǎng)頁的寬度，設(shè)計(jì)師之間基本上比較容易達(dá)成共識(shí)，比如：950px、960px、1000px、1190px、1200px。但是如果接下來讓每一個(gè)設(shè)計(jì)師設(shè)計(jì)一個(gè)左右布局的版式，左邊是一個(gè)樹形菜單，右邊是主要內(nèi)容區(qū)域。那么可能會(huì)有很多結(jié)果。但是這些結(jié)果基本上是比較接近的。如果這些設(shè)計(jì)師都服務(wù)于一個(gè)品牌下的話，這種情況并不是一個(gè)好的事情。會(huì)給人以沒有一致性的感覺。

圖1：一個(gè)產(chǎn)品站點(diǎn)，同樣是980px的頁面寬度，但是菜單寬度分別為：200px和245px

圖2：另外一個(gè)產(chǎn)品站點(diǎn)，同樣是1200px的頁面寬度，但是菜單的寬度分別為：250px、230px、200px

每一個(gè)界面單獨(dú)呈現(xiàn)的時(shí)候，并不會(huì)有不和諧的感覺，但是作為一個(gè)產(chǎn)品或者品牌下的一員，這種情況就會(huì)帶來負(fù)面的影響。這種情況可能因?yàn)樗姆N情況產(chǎn)生：1.寬度沒有理論基礎(chǔ)，憑借自身多年的經(jīng)驗(yàn)取得了一個(gè)方便記憶的整數(shù)；2.有自己的設(shè)計(jì)方法，但是一個(gè)團(tuán)隊(duì)的下的設(shè)計(jì)師沒有統(tǒng)一這個(gè)方法；3.設(shè)計(jì)的時(shí)候沒有查看已有的類似設(shè)計(jì)；4.認(rèn)為對(duì)方的（已有）的寬度不適合。

如果大家遵守一個(gè)柵格化的設(shè)計(jì)方法（希望您也可以貢獻(xiàn)其他的方法）那么這個(gè)問題將會(huì)迎刃而解。

先科普一點(diǎn)柵格化的基礎(chǔ)。

柵格化并不是一個(gè)新的概念，大家關(guān)注的點(diǎn)往往是他表面的950、960和1190。左邊的三個(gè)數(shù)據(jù)的核心是一個(gè)24等分的柵格系統(tǒng)?？梢员惠p松的2等分、3等分、4等分、6等分、8等分、12等分，還可以做到1:2、1:3、1:5、2:4、1:7、3:5的不對(duì)稱分割，并且可以精確到像素。由于3:5和3等分的需求，所以[3,8]得到了24這個(gè)結(jié)果。

W ＝ A * n - i;
A = a + i;
i:被分割的區(qū)塊之間的間隔（為了方便計(jì)算，大都為10px）

整個(gè)公示中，i和n一樣是核心，再確定i，即可確定整個(gè)柵格化系統(tǒng)。

當(dāng)n ＝ 24, i = 10;假如A＝40，則W＝950；假如A＝50，則W＝1190；假如A＝60，則W＝1430。

科普結(jié)束。

雖然A的值可以變成“任何”一個(gè)值，但有觀點(diǎn)認(rèn)為柵格化仍然是不太適合彈性布局。因?yàn)閺椥圆季值年P(guān)鍵在用百分?jǐn)?shù)單位來替代像素的單位（由于display:flex尚未成為Candidate Recommendation不適合大規(guī)模商用），用百分?jǐn)?shù)來表示無法整出100的分割方案。就算是像6等分這樣的訴求，每一份為16.66%，在視覺上也感知不到1像素級(jí)的差別。并且還可以轉(zhuǎn)變?yōu)?0%的33.33%保持對(duì)稱和1像素級(jí)差別的感知。

好像如果在界面中有5等分的需求，整個(gè)柵格化系統(tǒng)將變得復(fù)雜[3,5,8]，也就是120等分。但其實(shí)并不需要如此，因?yàn)閕并沒有改變，只是把a(bǔ)縮小，但對(duì)于24等分的下的組合并沒有產(chǎn)生變化。所以只需要設(shè)置每個(gè)A為20%，然后每個(gè)A的右測(cè)內(nèi)邊距為10即可以融入原來的24分的柵格化系統(tǒng)。

或者換一種更加容易理解的話語來描述柵格化：“柵格化是通過確定等分的單位寬度以及單位寬度之間的間距，把單位寬度進(jìn)行組合的一種排版方式?！保ㄟ@句是我自己總結(jié)的，求探討）

板式的變化越復(fù)雜，柵格化系統(tǒng)越復(fù)雜，就像這個(gè)系統(tǒng)最開始被設(shè)計(jì)的時(shí)候：64*36=2304。

在實(shí)際操作中，推薦24的柵格化，插入5等分，i＝10，大寬度1430px，最小寬度為950px。CSS采用百分比。

在設(shè)計(jì)自己產(chǎn)品的柵格化系統(tǒng)大致可以采用下面的流程：

首先分析等份的復(fù)雜度，如果版式僅僅是4等份、3等份的話，12列的柵格系統(tǒng)就可以滿足需求。如果有較多不等分的可能，那么還是建議采用24列的柵格系統(tǒng)，如上圖，這樣你可以靈活的設(shè)置。

其次確定頁面大概的寬度（如何確定在“比例”的部分會(huì)詳細(xì)說明），暫時(shí)采用1200px。

然后根據(jù)版式的預(yù)見性，確定模塊和模塊之前是否有清晰的“間隔”，這個(gè)間隔大概是多少？10px？15px？20px？個(gè)人認(rèn)為認(rèn)可設(shè)計(jì)方法都有一個(gè)目標(biāo)是效率的提升，所以個(gè)位數(shù)個(gè)人建議是0或者5的話，方便計(jì)算，記憶和檢驗(yàn)。當(dāng)然你也可設(shè)置其他的數(shù)字，給自己挖坑。

藍(lán)色區(qū)域是10px（為了更好的展示，實(shí)際是空白）

1200px可以被24整除，所以W=1190px。

再看下面一個(gè)示例3列等分。

如果目標(biāo)是1200px左右的話，則W=1180；(3*400px-20px)如果是1000左右的話。W可以等于970px；(3*330px-20px)或者是1000px（3*340px-20px）；

在管理控制臺(tái)一致性到達(dá)一個(gè)里程碑之后，現(xiàn)在我們?yōu)榱艘恢滦砸约敖鉀Q上面描述的問題，開始在騰訊云和DNSpod中去落地，并且希望要求中心內(nèi)所有設(shè)計(jì)師遵循此方法。（下圖僅為示意）

所以我們的柵格化系統(tǒng)為（30+20）*24-20=1180px

比例

這是一個(gè)重要的問題，極大的幫助我們確定字體和行高以及盒子的寬高。

對(duì)于字體和行高的比例，大多數(shù)也會(huì)存在難以統(tǒng)一，甚至可以用雜亂來表示。我曾經(jīng)在sohu的時(shí)候見過同一個(gè)新聞列表，14px的宋體，行高居然有22px，23px，24px，25px，27px。設(shè)計(jì)師的馬虎可能是一方面，另外一方面在長(zhǎng)達(dá)1年的配合中，我竟然發(fā)現(xiàn)他并沒有這樣一個(gè)概念，這種細(xì)節(jié)基本上就是憑感覺。因?yàn)樵谠O(shè)計(jì)這些文字的時(shí)候，內(nèi)心并沒有一個(gè)“理性”的方法，而是依賴于專業(yè)的背景和當(dāng)時(shí)的感覺。和柵格化一樣，我們應(yīng)需要一個(gè)方法，一個(gè)比例或者幾個(gè)比例在不同的場(chǎng)景下應(yīng)用。我推薦1:1.5和1:2的比例（如果你有一個(gè)你自己的比例請(qǐng)留言，謝謝）。我本身并不是設(shè)計(jì)專業(yè)，但我能保證這兩個(gè)比例是一個(gè)大多數(shù)人都會(huì)認(rèn)為是好的比例。因?yàn)椋?/p>

這是現(xiàn)成的設(shè)計(jì)“大師”推薦的比例。如果你是果粉的話，基本也會(huì)喜歡1:1.2。

所以，當(dāng)實(shí)際字體和行高的時(shí)候推薦比例1:1.2；1:1.5；1:2。

我們要如何確定網(wǎng)頁中大的盒子的大概寬度是多少？然后在這個(gè)寬度中進(jìn)行柵格化?，F(xiàn)在在這里解釋。以我們的用戶客戶端占比分辨率大的1920*1080為場(chǎng)景，說說我們可以如何確定網(wǎng)頁的寬度。

還是尋找一個(gè)大家覺得“好看”的比例作為方法，如果是16:9的比例。那寬度大概是1080px；這個(gè)比例又可以贏得果粉的青睞了，因?yàn)椋?/p>

而且16:9被大量的采用到了屏幕的尺寸中，最開始的寬屏顯示器。所以這個(gè)比例很可能一直在你的生活中陪伴著你。PC顯示器，14寸筆記本，手機(jī)，電視……

另外的主流比例是4:3。比如1024*768已經(jīng)大多數(shù)的電視信號(hào)源比例。如果你采用這個(gè)比例，那么頁面寬度就是1440px基準(zhǔn)。

根號(hào)2也是一個(gè)“好”的比例，所有的標(biāo)準(zhǔn)紙張的寬高都是這個(gè)比例，如果你手邊有A4紙的話，你現(xiàn)在就可以按照下面的方法去確認(rèn)一下。按照這個(gè)比例的話就是1357px為基準(zhǔn)。

大概認(rèn)知度高的比例就是黃金分割比了。

黃金分割奇妙之處，在于其倒數(shù)為自身減1，即：1.618的倒數(shù)為0.618 = 1.618 - 1

1.618倍和0.618倍

我們會(huì)發(fā)現(xiàn)有很強(qiáng)藝術(shù)背景的人很容易就會(huì)找到這個(gè)點(diǎn)（或者附近的位置），但是其他人就難以找到。當(dāng)我看到下面的圖的時(shí)候，簡(jiǎn)直是不可思議。

還有一些比例你可以嘗試，比如1.43:1，這個(gè)是IMAX的比例。比如7:5，這個(gè)是5R相片的比例。

上面所說的所有方法，就方法本身而言可能會(huì)引起諸多專業(yè)人士的挑戰(zhàn)，但是從一致性的角度來講我們需要在一個(gè)范圍內(nèi)統(tǒng)一設(shè)計(jì)方法。從我所從事的職業(yè)來說，理解設(shè)計(jì)師的設(shè)計(jì)原理會(huì)讓溝通更加順暢，減少更多的細(xì)節(jié)溝通，并且可以制作出更多復(fù)用性更強(qiáng)，代碼更優(yōu)雅的web。

附：頁面的留白也是有比較“理性”的方法來設(shè)計(jì)的。如下圖：

分享文章：你的布局設(shè)定方法靠譜嗎？
URL分享：http://www.bm7419.com/news37/43637.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、動(dòng)態(tài)網(wǎng)站、搜索引擎優(yōu)化、小程序開發(fā)、網(wǎng)站建設(shè)、定制網(wǎng)站

廣告

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