基于8點(diǎn)網(wǎng)格的響應(yīng)式網(wǎng)站設(shè)計(jì)

時間：2023-09-01 16:36:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-01 16:36:01 來源：網(wǎng)站運(yùn)營

基于8點(diǎn)網(wǎng)格的響應(yīng)式網(wǎng)站設(shè)計(jì)：8點(diǎn)網(wǎng)格這個概念在今年初的時候在medium上面火起來，很多設(shè)計(jì)師寫文章介紹了它，我和很多設(shè)計(jì)師一樣對于它的來源和可行性很好奇，正好最近自家公司啟動新項(xiàng)目（一個基于行為數(shù)據(jù)分析的安全風(fēng)控系統(tǒng)），需要設(shè)計(jì)一個供客戶使用的后臺系統(tǒng)，于是就真正實(shí)踐了8點(diǎn)網(wǎng)格和響應(yīng)式布局的概念，現(xiàn)將實(shí)踐過程的一些心得分享給大家。

情境

在項(xiàng)目整體路線圖確定后，產(chǎn)品推進(jìn)節(jié)奏緊湊，功能和低保真原型確定后給設(shè)計(jì)大概一周的時間達(dá)到交付前端同事的標(biāo)準(zhǔn)，前端同事開發(fā)周期也比較緊，故決定后臺網(wǎng)站設(shè)計(jì)考慮最小響應(yīng)到到平板豎屏寬度，移動設(shè)備在平板豎屏基礎(chǔ)上整體縮放即可。

正文前的一些說明

先解釋下文章標(biāo)題“基于8點(diǎn)網(wǎng)格的響應(yīng)式網(wǎng)站設(shè)計(jì)”中的兩個關(guān)鍵詞（ P.s 本文之前的標(biāo)題是“8點(diǎn)柵格系統(tǒng)實(shí)踐心得”，不夠清晰準(zhǔn)確 == ）


8點(diǎn)基準(zhǔn)網(wǎng)格：

網(wǎng)格，顧名思義就是網(wǎng)絡(luò)狀的格子，做設(shè)計(jì)的對網(wǎng)格這個詞應(yīng)該都再熟悉不過了。

8點(diǎn)/8point/8pt，說的是邏輯像素尺寸，它獨(dú)立于屏幕分辨率，簡單來說，普通屏?xí)r1pt=1px, Retina屏?xí)r1pt=4px(2px*2px) , 設(shè)計(jì)師在sketch中做設(shè)計(jì)的時候畫板的大小就是使用的邏輯像素尺寸，涉及到多設(shè)備多平臺響應(yīng)的網(wǎng)站開發(fā)工程師也會棄用px這個單位。

每個小格子都是8pt*8pt的一個方塊，許多個這樣的方塊形成了所謂的8點(diǎn)基準(zhǔn)網(wǎng)格。


響應(yīng)式布局：

設(shè)計(jì)師使用縱向的柵格（column 列）讓頁面元素垂直方向上對齊，使用橫向的柵格（row 排）讓元素水平方向上對齊。


柵格，和網(wǎng)格的意義不同，柵（shan）格是柵（zha）欄，有欄寬（column width）和間隔（gutter）這兩個概念。


下圖二是結(jié)合縱向柵格（12欄，16pt間隔）和基準(zhǔn)網(wǎng)格（8pt）后的一個示例。


那你們可能想問，具體在不同設(shè)備尺寸上如何“響應(yīng)”起來呢？

說來話長，請看接下來的正文吧！

正文第一部分: 8點(diǎn)基準(zhǔn)網(wǎng)格

• 8點(diǎn)基準(zhǔn)網(wǎng)格的價值？
  

對于數(shù)字產(chǎn)品，設(shè)計(jì)師不要認(rèn)為把一份設(shè)計(jì)稿丟給前端一切就完了，設(shè)計(jì)師自己可以說我有像素眼，我可以用肉眼看出來元素的距離，但是我們沒法要求和我們合作的前端工程師也同樣擁有的像素眼啊。

所以設(shè)計(jì)交付物如果缺乏一個定義間距關(guān)系的標(biāo)準(zhǔn)，一個不機(jī)車的前端工程師最終給的產(chǎn)出將會和設(shè)計(jì)稿大相徑庭，機(jī)車的前端工程師會很累。

8點(diǎn)基準(zhǔn)網(wǎng)格正好起到的就是一個標(biāo)準(zhǔn)的作用，即使工程師有失誤，你通過后來的效果驗(yàn)收也可以簡單的告知前端“側(cè)邊欄的文字應(yīng)該再向左靠近8pt” 而不是“再靠近3px哦不5px吧” 。


那么對設(shè)計(jì)師做UI設(shè)計(jì)本身有影響嗎？會束縛嗎？我認(rèn)為系統(tǒng)設(shè)計(jì)的延展性非常重要，是沒有壞處反倒有益處，8點(diǎn)網(wǎng)格讓設(shè)計(jì)變得更加規(guī)范和統(tǒng)一了


另外推薦看一下Elliot Dahl的Intro to the 8-Point Grid System ，它比較全面的介紹了8點(diǎn)柵格對設(shè)計(jì)師和工程師以及整個產(chǎn)品團(tuán)隊(duì)的價值，本站上＠林南翻譯了一波正式為大家安利“8點(diǎn)柵格”


貼一段文中說明8點(diǎn)柵格價值的內(nèi)容

• 對于設(shè)計(jì)師：提升效率、減少決策、同時讓元素之間保持一種協(xié)調(diào)的節(jié)奏。
  
• 對于團(tuán)隊(duì)：設(shè)計(jì)師和工程師之間更容易達(dá)成默契，工程師可以較輕松地用肉眼丈量8的倍數(shù)，而不是趴在那一個一個數(shù)像素。
  
• 對于用戶：這讓他們信賴的品牌得以保持高質(zhì)量的一致性體驗(yàn)。并且在自己的設(shè)備上也不會出現(xiàn)模糊的半像素偏移。

• 硬柵格還是軟柵格？
  

8點(diǎn)基準(zhǔn)網(wǎng)格系統(tǒng)實(shí)際上有兩個版本。

一 將元素放到8pt柵格中（稱之為“硬柵格”）

二 元素之間的距離是8pt的多少倍（稱之為“軟柵格”）

我在實(shí)際應(yīng)用的過程中最開始也試過硬柵格，將元素放在 8pt柵格之中，這種方法遇到了很多實(shí)際的阻力，比如說一個按鈕，24px（8的三倍）的高度感覺小了點(diǎn)，32px（8的四倍）的高度又大了點(diǎn)，總之感受到了數(shù)學(xué)的束縛，于是便使用軟柵格，這樣只限制元素之間的距離是8pt的倍數(shù)，并不限制元素本身的大小，對于設(shè)計(jì)師來說


P.s 既然元素之間的距離都是8pt的倍數(shù) Nudg這個工具可以改變sketch的大步距。

• 在sketch中怎么設(shè)置8pt基準(zhǔn)網(wǎng)格？
  

正文第二部分: 響應(yīng)式布局

• 基于設(shè)備的邏輯像素設(shè)計(jì)和開發(fā)

下圖是主流的桌面和平板設(shè)備的分辨率大小（開篇介紹文章背景的時候也提到了，我們這次的設(shè)計(jì)考慮最小響應(yīng)到到平板豎屏寬度，移動設(shè)備在平板豎屏基礎(chǔ)上整體縮放，所以沒有把手機(jī)的分辨率列出來），圖中的數(shù)值都是邏輯像素大小，這些數(shù)值也是我們在sketch中開始設(shè)計(jì)時的畫板需要設(shè)置的大小。如圖。

• 響應(yīng)策略是由設(shè)計(jì)師還是前端工程師給出？
  

設(shè)計(jì)師或者懂設(shè)計(jì)的前端。

雖然響應(yīng)式的概念火了很多年了，但很多網(wǎng)站都并不是響應(yīng)式的，在平板或者手機(jī)上打開網(wǎng)站就完全亂了，而另一些可以說是響應(yīng)式網(wǎng)站的感覺是前端工程師自己憑借經(jīng)驗(yàn)設(shè)置一些了斷點(diǎn)，大體還是不錯的，但是還沒有達(dá)到很好的程度，在不同的設(shè)備上并沒有提供一個很易用很美觀的感受。所以說，響應(yīng)的策略還是應(yīng)該由設(shè)計(jì)師來給出，但前提是設(shè)計(jì)師最好對html和CSS了解，不了解的話需要提前和前端工程師討論下當(dāng)前布局的可行性。

• 什么是斷點(diǎn)？次斷點(diǎn)？
  

我：咱們這次的官網(wǎng)弄個響應(yīng)式的吧，手機(jī)平板電腦都完美顯示

前端工程師：沒問題啊，響應(yīng)式就是做一些媒體查詢嘛

我：==

前端說的媒體查詢（media queries）是實(shí)現(xiàn)斷點(diǎn)的一種方法，它提供了簡單的邏輯方法來根據(jù)不同的設(shè)備特征（寬度 高度 像素比）應(yīng)用不同樣式，最常用的媒體查詢變量是min-width和max-width。

斷點(diǎn)(breakpoint)是頁面改變布局的臨界點(diǎn)，一個響應(yīng)式網(wǎng)頁可能會有一個或者多個斷點(diǎn)。

有時候網(wǎng)頁也會設(shè)置次斷點(diǎn)，次斷點(diǎn)(minor breakpoint)并未對頁面布局做很大的改動 只是對細(xì)節(jié)做了一些微調(diào)。

• 怎么查看一個響應(yīng)式網(wǎng)站的斷點(diǎn)？
  

用chrome瀏覽器打開一個響應(yīng)式網(wǎng)站，檢查元素，右上角會顯示視窗當(dāng)前的分辨率，慢慢縮小視窗的寬度，找到頁面布局的變化點(diǎn)，就是我們上面說到的斷點(diǎn)或者次斷點(diǎn)。

P.s 一個提供地圖服務(wù)的公司mapbox 它的官網(wǎng)和后臺都是完美響應(yīng)到各種設(shè)備的，很強(qiáng)勢，查看需自備梯子哦。另外常用的QQ郵箱也是響應(yīng)式的。你們可以檢查元素這些網(wǎng)站設(shè)置了幾個斷點(diǎn)以及如何“響應(yīng)”的

• 設(shè)計(jì)稿要怎么設(shè)計(jì)，要做幾套？
  

這是個設(shè)計(jì)師最常問的問題，該怎么設(shè)計(jì)響應(yīng)式網(wǎng)站，具體設(shè)計(jì)幾套呢？

設(shè)計(jì)幾套取決于這個網(wǎng)站你會設(shè)置幾個斷點(diǎn)，而設(shè)置多少個斷點(diǎn)由網(wǎng)站的內(nèi)容決定，設(shè)計(jì)師需要根據(jù)網(wǎng)站的實(shí)際內(nèi)容找到合適的斷點(diǎn)，設(shè)法避免列間空白太寬或太窄的情況。

如何設(shè)置斷點(diǎn)既是科學(xué)，也是藝術(shù)。

結(jié)合基準(zhǔn)網(wǎng)格（8pt）和縱向柵格（12欄 16pt）我們這次整體上設(shè)置了下圖中幾個斷點(diǎn)，由小到大依次是：768px; 1024px; 1248px; 1440px; 1920px


這樣基本上所有的設(shè)備都被我們考慮進(jìn)去了，從手機(jī)（盡管是在平板的基礎(chǔ)上整體縮放的）到平板到PC到MBP 甚至于把超大的5K屏的顯示方式也納入了考慮范圍

• 一個網(wǎng)站中每一個頁面都需要設(shè)置同樣的斷點(diǎn)嗎？
  

看到上一題后你可能想問，那我豈不是每一個頁面都要設(shè)計(jì)5套圖？

這個當(dāng)然不是了。這個視網(wǎng)站中每個頁面的內(nèi)容而定，甚至同一個頁面的不同內(nèi)容模塊布局?jǐn)帱c(diǎn)設(shè)置也不盡相同。在我的實(shí)踐過程中，很多頁面只需要設(shè)計(jì)三套，當(dāng)然比較復(fù)雜的頁面，在這五個分辨率上，都需要對布局做一些修改或者自動隱藏部分內(nèi)容

• 樓上上那題有個斷點(diǎn)是1248px？主流屏幕分辨率里沒有呀
  

斷點(diǎn)的選擇基于內(nèi)容，而不是基于主流屏幕的分辨率。

• 怎么在sketch中設(shè)置布局？
  

下面貼了不同布局的兩張圖，我主要使用了12欄的布局方法，為什么是12欄呢？12這個數(shù)本身有著天然的數(shù)學(xué)優(yōu)勢，學(xué)過小學(xué)數(shù)學(xué)的人都知道，它的公約數(shù)有1 2 3 4 6 12 它給設(shè)計(jì)師布局提供了更高的靈活性。當(dāng)然，大家也可以自行探索實(shí)踐其他的柵格系統(tǒng)，10欄 8欄 16欄 真的試過了才知道適用什么類型的系統(tǒng)。