如何設計頁面佈局？

說說你對佈局的理解？說說你是怎麼進行佈局的？你如何肯定頁面寬度？可能不少同窗在面試的時候都會遇到問到此類和佈局相關的問題。估計大多數同窗聽到此類大方向的問題都是不知所措，最多隻能說說以前寫頁面的一些經驗之談。ok，這篇文章，教你如何裝逼給10分。

細思極恐的事情

---

有沒有想過這樣的問題？好比，這個菜單的寬度爲何是200px？250px或者190px是否能夠？圖片的尺寸爲何是278px*196px？如何肯定網頁的寬度？越細緻的地方越是如此。這是細思極恐的事情，若是有人問你這樣的問題，你又該怎麼回答？估計大多數人得回答都是，美工UI怎麼設計怎麼作了，或者是，字體圖片到了這個位置就這麼寬了…這種回答是至關不專業的。

軟件界面的設計師除了視覺自己之外，對於設計是否能夠實現、大概以何種方式實現、規範能否被理解而且複製執行、設計實現的性價比與時間比等緯度都應有至關高度的認識。就像建築設計師同樣，他們必定很瞭解建築材料以及如何建築，雖然他們不會去親自砌牆。

那有沒有一種方案，能夠比較好得回答或者處理此類問題？固然有，那就是柵格化和盒子比例的設計方法

(圖1)

柵格化

---

若是問你這麼一個問題，讓你設計一個PC端的頁面，頁面寬度多少比較好？可能有人會回答，950px、960px、980px、1000px、1190px、1200px。這多是以前作頁面的一些經驗之談。那麼在這個基礎之上，再設計一個左右佈局的版式，左邊是一個樹形菜單，右邊是主要內容區域。那麼可能會有不少結果。可是這些結果基本上也是比較接近的。看一下下面的兩種狀況：

一個產品站點，一樣是980px的頁面寬度，可是菜單寬度分別爲：200px和245px

（圖2）

另一個產品站點，一樣是1200px的頁面寬度，可是菜單的寬度分別爲：250px、230px、200px

（圖3）

每個界面單獨呈現的時候，並不會有不和諧的感受，可是做爲一個產品下的一員，這種狀況就會帶來負面的影響。這種狀況可能由於四種狀況產生：

1.寬度沒有理論基礎，憑藉自身的經驗感受取得了一個方便記憶的整數；

2.有本身的設計方法；

3.設計的時候沒有查看已有的相似設計；

4.認爲對方的（已有）的寬度不適合。

若是你們遵照一個柵格化的設計方法，那麼這個問題會比較好的統一

先科普一點柵格化的基礎。

柵格化並非一個新的概念，你們關注的點每每是他表面的950、960和1190。左邊的三個數據的核心是一個24等分的柵格系統。能夠被輕鬆的2等分、3等分、4等分、6等分、8等分、12等分，還能夠作到1:二、1:三、1:五、2:四、1:七、3:5的不對稱分割，而且能夠精確到像素。因爲3:5和3等分的需求，因此[3,8]獲得了24這個結果。

（圖4）

W ＝ A * n – i; A = a + i; i:被分割的區塊之間的間隔（爲了方便計算，大都爲10px）

整個公示中，i和n同樣是核心，再肯定i，便可肯定整個柵格化系統。當n ＝ 24, i = 10;假如A＝40，則W＝950；假如A＝50，則W＝1190；假如A＝60，則W＝1430。

（圖5）

雖然A的值能夠變成「任何」一個值，但有觀點認爲柵格化仍然是不太適合彈性佈局。由於彈性佈局的關鍵在用百分數單位來替代像素的單位，用百分數來表示沒法整出100的分割方案。就算是像6等分這樣的訴求，每一份爲16.66%，在視覺上也感知不到1像素級的差異。而且還能夠轉變爲50%的33.33%保持對稱和1像素級差異的感知。已經工做過的同窗，應該遇到過像素眼的這麼一類人…

用一種更加容易理解的話語來描述柵格化：柵格化是經過肯定等分的單位寬度以及單位寬度之間的間距，把單位寬度進行組合的一種排版方式。

（圖6）

（圖7）

（圖中紅色部分表示橫向計算，藍色標記是縱向）

在設計本身產品的柵格化系統大體能夠採用下面的流程：

首先分析等份的複雜度，若是版式僅僅是4等份、3等份的話，12列的柵格系統就能夠知足需求。若是有較多不等分的可能，那麼仍是建議採用24列的柵格系統，如上圖，這樣你能夠靈活的設置。

其次肯定頁面大概的寬度，暫時採用1200px。

而後根據版式的預見性，肯定模塊和模塊以前是否有清晰的間隔，這個間隔大概是多少？10px？15px？20px？設計方法都有一個目標是效率的提高，因此個位數我的建議是0或者5的話，方便計算，記憶和檢驗。固然你也可設置其餘的數字，給本身挖坑。

看一下下面的兩個例子，比較形象的說明，頁面寬度到底該怎麼肯定：

（圖8）

藍色區域是10px（爲了更好的展現，實際是空白）

1200px能夠被24整除，因此W=1190px。（50 * 24 - 10 = 1190忘記算法的請看圖4）

再看下面一個示例3列等分。

這裏間隔稍大，設置爲20px，若是目標是1200px左右的話，則W=1180；(3*400px-20px)若是是1000左右的話。W能夠等於970px；(3*330px-20px)或者是1000px（3*340px-20px；

不管你怎麼設計，爲了柵格化是爲了解決一致性問題，以及數據化界面設計。因此只要給本身的網站定製一個你們均可以接受的柵格就好，如上圖，整個柵格就是 （30+20）* 24 - 20 = 1180

比例

---

這是一個重要的問題，極大的幫助咱們肯定字體和行高以及盒子的寬高。

對於字體和行高的比例，大多數也會存在難以統一，甚至能夠用雜亂來表示。我曾經在sohu的時候見過同一個新聞列表，14px的宋體，行高竟然有22px，23px，24px，25px，27px。這種細節基本上就是憑感受。由於在設計這些文字的時候，心裏並無一個「理性」的方法，而是依賴於專業的背景和當時的感受。和柵格化同樣，咱們應須要一個方法，一個比例或者幾個比例在不一樣的場景下應用。我推薦1:1.5和1:2的比例。我自己並非設計專業，但我能保證這兩個比例是一個大多數人都會認爲是好的比例。由於：

這是現成的「設計大師」推薦的比例。若是你是果粉的話，基本也會喜歡1:1.2。由於：

因此，當實際字體和行高的時候推薦比例1:1.2；1:1.5；1:2。

如何肯定頁面寬度

---

咱們要如何肯定網頁中最大的盒子的大概寬度是多少？而後在這個寬度中進行柵格化。如今在這裏解釋。以咱們的用戶客戶端佔比分辨率最大的1920*1080爲場景，說說咱們能夠如何肯定網頁的寬度。

仍是尋找一個你們以爲「好看」的比例做爲方法，若是是16:9的比例。那寬度大概是1080px；這個比例又能夠贏得果粉的青睞了，由於：

（PS：下面的解釋涉嫌裝逼，若有不適，謹慎觀看！）

並且16:9被大量的採用到了屏幕的尺寸中，最開始的寬屏顯示器。因此這個比例極可能一直在你的生活中陪伴着你。PC顯示器，14寸筆記本，手機，電視……

另外的主流比例是4:3。好比1024*768已經大多數的電視信號源比例。若是你採用這個比例，那麼頁面寬度就是1440px基準。

根號2也是一個「好」的比例，全部的標準紙張的寬高都是這個比例，若是你手邊有A4紙的話，你如今就能夠按照下面的方法去確認一下。按照這個比例的話就是1357px爲基準。

大概認知度最高的比例就是黃金分割比了。

黃金分割奇妙之處，在於其倒數爲自身減1，即：1.618的倒數爲0.618 = 1.618 – 1

1.618倍和0.618倍

咱們會發現有很強藝術背景的人很容易就會找到這個點（或者附近的位置），可是其餘人就難以找到。當我看到下面的圖的時候，簡直是難以想象。

還有一些比例你能夠嘗試，好比1.43:1，這個是IMAX的比例。好比7:5，這個是5R相片的比例。

頁面的留白也是有比較「理性」的方法來設計的。以下圖：

此文章內容來自 騰訊ISUX ，爲了便於你們閱讀，稍微作了修改。