8點網(wǎng)格已經(jīng)流行了一段時間。我第一次意識到這種設計方法是在我看到Google的Material Design設計規(guī)范之后開始的。我發(fā)現(xiàn)這種設計方法非常適合我的科學設計師，所以這就是你應該使用8點網(wǎng)格的原因。

閱讀本文后，您將學習：

1. 8點網(wǎng)格系統(tǒng)的含義

2.為什么要使用8點網(wǎng)格系統(tǒng)

3. 8點網(wǎng)格系統(tǒng)有哪些技能？

什么是8點網(wǎng)格

它是創(chuàng)建一個8點的網(wǎng)格作為一個單元，所有元素大小是8的倍數(shù)。

△材料設計規(guī)范圖像

為什么是8點？

為什么它基于8個點來定義網(wǎng)格而不是6或10？引用Quora的一個問題的答案：

如果使用8，則可以輕松調(diào)整大小，而不會使用半像素或四分之一像素。 8/2=4,4/2=2和2/2=1。如果從10開始，你最終會得到2.5像素，然后是1.25（10,5,2.5,1.25和hellip;），你會明白這一點。 8為您提供比10./Sjur O. Sundin更高的靈活性，高級UX架構師/設計經(jīng)理–加利福尼亞州圣地亞哥/

意思是：如果你使用8作為最小的設計單位，你可以輕松縮小你的設計尺寸，8/2=4,4/2=2,2/2=1。如果從10開始，縮小的網(wǎng)格單位可能是2.5像素，下降1.25像素。

△8次; 8個元素減少了50％

如果您是2x屏幕設計，1x是奇數(shù)尺寸。如果要使用偶數(shù)尺寸的屏幕（基本上屏幕尺寸均勻），將在對齊位置生成小數(shù)點。如果是Double的縮放，這次元素大小產(chǎn)生了一個小數(shù)點，我相信你不能承受清潔。

為什么要使用這個系統(tǒng)？

以下是材料設計中的一些設計指南以及Spec的一篇文章中的信息，并結合您自己的經(jīng)驗來說明：

1.更統(tǒng)一的用戶界面

當所有元素大小符合相同規(guī)則時，您自然會獲得更加統(tǒng)一的UI。

△材料設計規(guī)范圖像

2.減少選擇=節(jié)省更多時間

也許在設計元素時，或者在定義間隙時，使用8更寬一點，所以你要逐位調(diào)整它。但是當你選擇間隙為7或8的時候，你做其他事情的時間就會浪費掉，最后效果的差異實際上并沒有那么大。

更可怕的是，在你的設計的最后部分，這里有6個，有8個，沒有明確的規(guī)則集，它會影響你設計元素的大小發(fā)展，所以你仔細調(diào)整細節(jié)請問恢復不太好。

想象一下，你已經(jīng)與開發(fā)達成了默契：如果我的標簽在這里小于8，那么你認為它也是8。其他人必須是8的倍數(shù)。

3.多平臺響應式設計

基本主流屏幕尺寸可在水平軸和垂直軸上至少8維分割。在許多情況下，兩個軸都未讀。甚至一些平臺設計規(guī)范（例如Material Deisgn）也特別需要創(chuàng)建基于4pt或8pt的網(wǎng)格，以便整個系統(tǒng)自然地符合此規(guī)則。

△目前的主流屏幕解決方案幾乎可以被8整除

有些屏幕很難適應這個系統(tǒng)，例如375×尺寸為667的iPhone6，但解決方案也很簡單。保持襯墊和尺寸的尺寸。保證金符合規(guī)則，剩余空間可以填充塊元素。如果某些元素的奇數(shù)大小是奇數(shù)，則無關緊要，只要它們可以使整個規(guī)則符合這組規(guī)則。

請記住，您的用戶永遠不會看到您實際使用的尺寸。

例如，Material Design不會將元素的高度限制為8的倍數(shù)，但允許元素的單擊范圍遵循8點網(wǎng)格的規(guī)則。

因此，該系統(tǒng)更多地用于規(guī)范自身的設計和開發(fā)，節(jié)省開發(fā)和設計通信時間，提高設計的一致性，并且可能對用戶沒有太大的了解。

實施該計劃的技巧

1.構建網(wǎng)格并對齊網(wǎng)格

幾乎所有的設計軟件都可以選擇“對齊網(wǎng)格”。如果您的設計完全符合此系統(tǒng)，設置適當?shù)木W(wǎng)格選項和對齊肯定會對您有所幫助。因此，請確保打開“對齊網(wǎng)格”選項。

△在Sketch

2.確定自己的增量習慣

大多數(shù)設計軟件都可以調(diào)整移動增量值，我喜歡將我的大值增加（保持命令移動的增量）從默認值10調(diào)整到8，這樣更容易。

△調(diào)整草圖中的鍵盤增量

3.快捷方式

許多應用程序都有快捷方式，可以讓您在設計時快速移動元素并調(diào)整大小。請記住，這些快捷方式與網(wǎng)格相結合，可以大大提高您的效率。

4.創(chuàng)建一個圖標框架

△材料設計框架圖標

圖標通常需要不同的尺寸以保持相同的視覺重量。使用框架設計圖標是保持尺寸一致性的簡單方法。同時，框架可以有效地確保圖標的大小符合網(wǎng)格的規(guī)格。還要記住將圖標的幀大小設置為8的倍數(shù)，并從大圖標開始設計?？s放后，請記住調(diào)整細節(jié)。

5.放大和縮小

如果您繼續(xù)放大到1600％進行設計，則可能會失去布局的垂直感。相反，如果您以50％縮放率查看UI，則可能會丟失一些重要細節(jié)，例如完美像素。因此，請記住經(jīng)常放大和縮小以查看各種比例的設計。

材料設計規(guī)范：https://material.io/guidelines

規(guī)范文章鏈接：https://spec.fm/specifics/8-pt-grid

« 專注輕資產(chǎn)，開光辦公，凌雄租賃進入國際電子商務博覽會 | 數(shù)千農(nóng)產(chǎn)品4小時直播：淘寶授權農(nóng)村扶貧模式 »