使用 Sketch 設計時如何盡量做到像素精確，並聊聊視覺對齊和像素對齊

在特別小的團隊，設計精確到像素其實有時候真的沒什麼必要，就像我以前在乙方公司做項目，節奏快，人少，轉身跟開發說一下距離，甚至丟給他們 Sketch 文件，直接就出來成品了，然後和開發坐在一起慢慢調一遍 UI，完成度還是非常高的，可是在比較大的團隊做產品，涉及到不同的產品團隊、開發以及設計團隊的時候，盡量讓設計做到精確就特別有必要了，特別是在大團隊里使用各種提高效率的工具，比如自動生成標註的軟體／插件等，設計是否精確直接影響這些工具輸出的結果，雖然很多時候都需要有統一的規範，但是做到精確還是可以避免很多實際寫作當中遇到的問題。

下面我來聊聊使用 Sketch 做設計的時候如何盡量做到像素精確，注意這裡有個詞「盡量」，不是100%。

UI 設計做到像素精確的一些方法

1. 在設計最一開始，最好給項目設定一個最小的基本的間距大小，例如 8pt／dp，或者10pt／dp，然後所有元素的距離都是這個基本間距的倍數，可以是0.5倍，可以是 2倍，也可以是1.5倍，這樣整個設計的間距就會比較系統，你在設計元素之間的間距的時候，就有據可依，這個標準也可以直接和開發溝通，未來標註就更省事了。以下就是我為一個項目訂立的間距單位，這個確定了以後，界面里的大多數距離，就是 8，16，24等這樣以 8 的倍數的數值了。即使我手抖了，開發者發現設計里出現了一些 17，23 這樣的數值，他們也自動會糾正為 16，24。雖然你的設計不太精確，但是可以保證出來的成品是精確的。

2. 不要直接拉伸形狀來改變大小，一律在右邊屬性欄里輸入大小的數值。即便是臨時拉伸看效果，接著最好也是使用輸入數值的方式來最終確定下來。當然你可以在 Sketch 的設置里 （ Preferences > Generals)，勾選 Pixel Fitting 的設置:

第一個小點是改變元素大小時，讓元素邊界自動貼近最近的像素，第二個小點是對齊元素時，也根據最近的像素來對齊，這兩個選項都可以避免元素佔據半個像素情況出現。

3. 線條不要用 Sketch 提供的 Line 元素來繪製，而採用 retangle （矩形）來代替，把矩形高度設定成 1 就是一根線了，因為 Line 元素會有很非常奇怪的 x y 坐標，而且寬度會是小數，很難做到像素精確。看下圖，線條的長度總是會出現到小數點後兩位的數值，坐標也是，所以還是不要用 Line 來畫線了。

4. 在擺放元素的時候，反覆使用 Option 按鍵來查看元素之間的間距，不斷進行調整。選中一個元素然後按住 Option 鍵，移動游標，就可以查看選中的元素和游標移動到的元素之間的距離關係，然後再進行細緻的調整。

5.使用 Show Pixel 按鈕來檢查一些設計元素是否會佔據半個像素，而在真實設備上出現模糊毛刺的效果。這個按鈕默認是不出現的，需要「右鍵」 Sketch 頂部的工具欄，選擇 Cusotmize Tool Bar 才會出現，如下圖。

看看下面的一個圖標，默認狀態下看著是平滑的，似乎並沒有什麼問題，但是當你點擊 Show Pixels 打開後，就會發現，中間的 + 有佔據半個像素的情況，這樣切圖後在設備端顯示就會有毛刺，不夠精確，因此 Show Pixels 選項可以幫你檢查一些元素，然後調整。

6.在繪製元素，或者圖標時，記住「雙數對齊雙數，單數對齊單數」。什麼意思呢？我們看看以下這個例子，是不是有點怪怪的，感覺中間的 + 沒居中對齊？你的感覺是對的，可是我保證這個 + 和正方形是採用了 Sketch 的劇中對齊按鈕來對齊的，為什麼呢？原因在於 + 的大小是 13 x 13，而外部正方形的大小是 24 x 24，怎麼也對不齊的（如果不佔據零點幾個像素的話），因此中間的 + 大小改成 12 x 12 就解決了。

不過也有不少例外情況，例如很多設計師的圖標是在 AI 里繪製的，然後粘貼到 Sketch 裡面，這不可避免會出現很多零點幾像素的情況，貌似像素精確很難搞，在接下里的「視覺對齊和像素對齊」會繼續講一下如何解決這個問題。

視覺對齊和像素對齊

先來看看下面這個例子，可能是最經典的了。

左邊中間的三角形是完全的中間對齊，右邊向右移動了幾像素，並沒有劇中對齊，試試眯著眼，拉開和屏幕的距離看一下，是不是右邊??的這個給你的感覺更合理一些？沒錯，有的時候，有一些元素由於形狀的因素會導致我們視覺重心的偏移，因此需要照顧視覺對齊。

播放按鈕中間的三角形如果按照像素大小，使用 Sketch 里的對齊工具與外面的圓圈中間對齊的話，得到的效果看起來就會偏了，需要往右移幾個像素才在在視覺的上平衡了。

在具體的設計項目中，也會遇到很多這樣的情況，有不少設計師在做設計的時候直接使用 Sketch 的對齊工具，感覺這就肯定是對齊的，標準的，起碼數值上是不會出錯的；也有開發者在拿到設計文件的時候，元素並沒有像素對齊（視覺上是對齊的），在實現的時候，通過數值修正了一下，最終結果看起來就怪怪的。

再看看一個例子，上面兩個圖標，寬高都不一樣，但是看起來是和諧的，可是要是分別讓它們寬或者高一致，更好地實現像素對齊的話，就會特別彆扭。

高度一致的時候，右邊的就會大很多，特別不協調。當然這個是一個相差比較大的例子，在設計中會遇到很多這樣要照顧視覺平衡的情況，特別是圖標的大小，這就需要設計師的感覺出馬了，而不是靠精確的數字。但是開發又是非常精確的一件事情，怎麼做才好呢？對於圖標或者占點陣圖等元素，我的做法通常是給它們設定邊界。

就像這一套圖標（標準的 Android 圖標），他們大大小小不一致，但是每一個都需要佔據 24 x 24 大小的位置，每一個圖標其實都有一個透明的正方形作為背景，這個正方形就是邊界（bounds），把圖標框住併合並成一個組合（group），這樣不但在設計上可以完美對齊，切圖出來的大小也讓程序員很方便地編寫界面，不需要照顧不同大大小小的圖標的對齊和間距關係。Bounds 這個概念其實應用在更廣泛的 UI 元素里，因為對於開發來說，很多界面元素都是一個個矩形的佔位，如果設計上對元素設定了 bounds， 就相當於開發里的 UI 元素的佔位大小了，這樣的實踐能很好地讓開發理解設計的間距和大小關係。

好了，暫時想到這些，歡迎大家也給我補充你們在實際操作中的一些小技巧，我想到更多也會更新到這篇文章中。最後賣一個關子，本文並沒有涉及到文字的對齊，我感覺文字對齊是特別難搞的一個事情，這裡有一篇文章是專門寫關於文字對齊的，《iOS 文本對齊，如何像素般精確還原設計稿》。但是他是從開發的角度，也側重英文和 iOS 的開發，我想在下一篇文章中從設計的角度聊一下文字的對齊問題。

推薦閱讀：