UI設(shè)計師用8點網(wǎng)格設(shè)計你的規(guī)范

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

就是建立8點為一個單位的網(wǎng)格，所有的元素尺寸都是8的倍數(shù)。

圖片來自Material Deisgn設(shè)計規(guī)范

為什么是 8點？

為什么是基于8點去定義網(wǎng)格，而不是6點或者10點？引用下Quora上一個提問的回答：

If you use 8, you can easily resize without ending up with half or quarter pixels. 8/2=4, 4/2=2 and 2/2=1. If you start with 10 you’ll end up with 2.5 pixels, and then 1.25 (10, 5, 2.5, 1.25 …) you get the idea. 8 gives you more flexibility than 10. /Sjur O. Sundin, Senior UX Architect / Design Manager – San Diego, CA/

8×8的元素被一直縮小50%的情況

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

如果你是2倍屏設(shè)計，1倍下就是奇數(shù)的尺寸，如果是要在偶數(shù)尺寸的屏幕中（基本上的屏幕尺寸都是偶數(shù)的）劇中對齊位置上就會產(chǎn)生小數(shù)點了，如果是再縮放一倍，這時候元素尺寸又產(chǎn)生了小數(shù)點了，相信各位的潔癖肯定是不能忍的。

為什么要使用這套系統(tǒng)?

這里引用一些Material Design中的設(shè)計指導(dǎo)，和Spec的一篇文章中信息結(jié)合自己的經(jīng)驗來說明下：

更統(tǒng)一的UI

當所有的元素尺寸都符合同樣的規(guī)則時，你自然就獲得了一套更加統(tǒng)一的UI。

圖片來自Material Deisgn設(shè)計規(guī)范

更少的選擇=節(jié)約更多的時間

也許在設(shè)計某個元素的時候，或者定義某個空隙的時候，你用8好像稍微寬了點，于是你一點一點地調(diào)整。但你在選擇空隙是7還是8的時間時，你做其他事情的時間也就被浪費了，最后效果的差異其實并沒有那么大。

更可怕的是最后你的設(shè)計稿里這里是6，那里是8，沒有一套清楚的規(guī)則的時候，會影響到開發(fā)對你設(shè)計稿元素間尺寸的認知，于是你精心調(diào)好的細節(jié)也會沒有那么好的被還原。

試想你跟開發(fā)達成一種默契：如果我這里的標注小于8，那你看成8就好。其他的，一定是8的倍數(shù)。

多平臺的響應(yīng)式設(shè)計

基本的主流屏幕尺寸都至少在橫豎一個軸的維度上能被8整除，很多時候兩個軸的未讀都可以。甚至，有些平臺的設(shè)計規(guī)范（比如Material Deisgn）會特別要求建立4pt或8pt為基準的網(wǎng)格，這樣整套系統(tǒng)就能自然的符合這一規(guī)則。

當前主流屏幕的解決方案，可以看到基本上都能被8整除

有些屏幕會很難調(diào)整適應(yīng)這個系統(tǒng)，比圖iPhone6開始的375×667的尺寸，但是解決方法也很簡單。保持填充和空隙（padding & margin）的尺寸統(tǒng)一遵循規(guī)則，剩余的空間可以用塊狀的元素來填充。有一些元素的尺寸是奇數(shù)的也沒關(guān)系，只要他們能讓整體遵守這套規(guī)則就好。*記住你的用戶永遠不會看到你實際使用的尺寸*。

比如Material Design沒有限制元素的高度一定符合8的倍數(shù)，但是讓元素的點擊范圍遵守8點網(wǎng)格的規(guī)則

所以說，這套系統(tǒng)更多的是用來規(guī)范自己的設(shè)計和開發(fā)，節(jié)省開發(fā)和設(shè)計溝通的時間，提高設(shè)計統(tǒng)一性，對用戶來說可能感知不大。

執(zhí)行這套方案的技巧

建立網(wǎng)格并對齊網(wǎng)格

幾乎所有設(shè)計軟件都有「對齊到網(wǎng)格」的選項。如果你的設(shè)計絕對符合這套系統(tǒng)的話，設(shè)置好相應(yīng)的網(wǎng)格選項并對齊絕對會給你很大的幫助。所以首先，你要確保你打開了“對齊到網(wǎng)格”選項。

Sketch中設(shè)置8px為基準的網(wǎng)格

確定你自己的增量習(xí)慣

大多數(shù)設(shè)計軟件都會允許你調(diào)整你的移動增量值，我喜歡把我的大增加值（按住command移動的增量）從默認的10調(diào)整到8，這會方便很多。

在sketch中調(diào)整鍵盤增量

快捷鍵

很多應(yīng)用程序都有快捷鍵，可以讓你在設(shè)計時快速移動元素、調(diào)整大小。記住這些快捷鍵，配合網(wǎng)格使用可以大大提高你的效率?！缸?」

建立icon的框架

Material Design icon的框架

圖標通常需要不同的大小以保持相同的視覺重量。用框架來設(shè)計圖標，這是保持尺寸一致性的簡單方法。同時，框架能有效保證圖標的大小符合網(wǎng)格的規(guī)范。同樣記得把圖標的框架大小設(shè)置成8的倍數(shù)，并從大的圖標開始設(shè)計，縮放后記得對細節(jié)做調(diào)整。

放大，縮小

如果你一直放大到1600%來設(shè)計，你可能會丟失垂直方向上的布局感受。相反，如果你一直在50%的縮放比例下查看你的UI，你可能會丟失一些重要的細節(jié)，比如像素完美。記住經(jīng)常放大縮小在各個比例下查看你的設(shè)計。


相關(guān)文章--《UI設(shè)計師概念設(shè)計前的思路》