目錄

1、幾種常見的后臺頁面的尺寸，我們一般設(shè)計多大合適？

首先詢問需求方，我們的軟件或后臺做多大的，一般他會告訴你，如果不告訴你，你可以選擇一個市面上常見的分辨率，比如我常用的是（w:1280px/1440px），給大家推薦一些常見的分辨率對應(yīng)的設(shè)備尺寸。

12.1寸 1280*800

13.3寸 1024*600或1280*800

14.1寸 1366*768

15.4寸 1280*800或1440*900

15.6寸 1600*900

也有一些筆記本是特殊的高分辨率屏幕， 包括現(xiàn)在的平板電腦,甚至有 1920X1080的分辨率

臺式機顯示器分辨率：

14寸顯像管(CRT)顯示器 800×600

17寸液晶或CRT顯示器 1024×768

19寸液晶顯示器(普屏) 1280×1024

19寸液晶顯示器(寬屏) 1440×900

22寸液晶顯示器寬屏 16：9的分辨率是 1680*1050，

23寸液晶顯示器寬屏 16：9的最佳分辨率是1920*1080

24寸液晶顯示器寬屏 一般24寸都是16：10的 分辨率是 1920X1200

上面的尺寸不是絕對的，比如有些廠家23寸顯示器是23.5 或23.1寸的，稍有不同

一般我們設(shè)計軟件系統(tǒng)/后臺界面會選擇一個最小的分辨率，然后去適配最大分辨率，比如你設(shè)計的是1280px需要能適配1920px，這一點在搭建頁面的時候要考慮好自適應(yīng)的問題。

2、運用sketch刪格，我們需要注意什么？

打開sketch后，我們需要找到“插件——管理插件——圖層——契合像素”把契合像素勾選??上，（請不要鄙視我用的漢化版）??，勾選的原因是搭建頁面的時候防止模塊間距出現(xiàn)小數(shù)點，也是為了繪制圖標的時候不出現(xiàn)虛邊像素。

這里我們不用sketch的刪格布局，因為我的算數(shù)不太好。

圖例1

設(shè)置好這一步后，你就需要新建一個畫板，設(shè)置好你要搭建的頁面尺寸，這里我設(shè)置的是1280*800px，你可以根據(jù)自己的項目需求。

圖例2

3、安利一個網(wǎng)站，進行刪格化布局

網(wǎng)址：http://grid.guide/#

它的頁面是這個樣子的。當我第一次看見這個網(wǎng)址的時候，我的第一個想法是，我去/我去/我去，從此我再也沒為了規(guī)范頁面發(fā)愁過。

圖例3

簡單的說下用法，回頭大家自己去嘗試，這個網(wǎng)站是英文的，我們要設(shè)置的就是右上角的幾個數(shù)：

1、Max witdth——頁面最大值 （注意：這個最大值有個小小的算法，如果你的頁面是w：1280px，展開的導航是200，那么你在max width應(yīng)該為1280-200=1080px，在max width里輸入1080即可），畫了簡單的圖，就是標注的意思，你輸入的這個最大值是你的內(nèi)容區(qū)域的數(shù)值。

圖例4

2、Columns——欄目，容器的意思，就是一些大佬常說的12刪格，24刪格。這個欄就是網(wǎng)站里我們看到好多“黃色的塊”，這里提供了四種可供我們選擇。一般設(shè)置這個欄的時候，數(shù)量越少排版越寬松，數(shù)量越多內(nèi)容排版越緊湊。這塊根據(jù)項目需求自己來定。我常用的是24，因為我們的項目內(nèi)容比較多。

3、Outer gutter ratio——外邊距，一般我們搭建頁面的時候，內(nèi)容區(qū)域到導航會有一定的間距，這里我們就稱之為“外邊距”網(wǎng)站提供了：“0、0.5、1.0、1.5、2.0”，這里是外邊距的倍數(shù)，我們只要選擇你想要幾倍的外邊距即可。

當我們把右上角這幾個數(shù)填寫好，下面會給出四種刪格樣式，我們只要選擇和自己匹配的樣式即可。下面舉例說明一下。

1、column width：99 意思為 欄目寬度99px，gutter width：4px 意思為欄目到欄目的間距為4px，如果我們選擇的外邊距為1.0倍，這組的外邊距也是4px。

下面給出的是其它幾種樣式，如果你的內(nèi)容比較多可以選擇緊湊型，如果內(nèi)容少可以選擇寬松型，如果覺得這個邊距不合適，可以選擇其它倍數(shù)的外邊距。當然如果你選擇的倍數(shù)不符合外邊距偶數(shù)標準，系統(tǒng)會提示你沒有合適的樣式。

外邊距有個簡單的小公式：欄目*倍數(shù)=外邊距? ? ? 希望不難理解。

圖例5

最后，就是選擇你喜歡的，你覺得合適，點擊下載，把這個圖片下下來，拖拽到你的sketch畫板去布局吧。這里我就不做演示怎么操作了。大致的樣式就是下圖這樣。如果你需要自適應(yīng)看下導航關(guān)閉的樣式，需要設(shè)定好關(guān)閉后導航的寬度，用總寬度-關(guān)閉導航的寬度=內(nèi)容區(qū)域，再去這個網(wǎng)站里輸入一下max width，一般欄目會變，內(nèi)容區(qū)域更大，欄目可以設(shè)定為16/18/24等，但是外邊距的倍數(shù)是不變的。這里這么做的原因是為了防止項目經(jīng)理或者產(chǎn)品經(jīng)理問你，頁面自適應(yīng)你是怎么考慮的，你可以給它說下你的所思所想，堵住他天馬行空的問號。

圖6

4、后臺界面怎么搭比較舒服？

我個人的習慣是，

1、頁面習慣搭建1280px/1440ox，主要考慮小尺寸筆記本。

2、側(cè)邊欄導航用偶數(shù)，具體根據(jù)你導航內(nèi)容的寬度來定。

3、欄目（刪格）常用12/24、欄目寬度為偶數(shù)，欄目間距在10/12/14/16區(qū)間選擇。

4、外邊距常用1倍，外邊距不能太大，內(nèi)容排不下，一般在10/12/14/16區(qū)間選擇。

最后：希望我寫的你看懂了，解除了你的困惑。