如何在Illustrator上設定完美像素（pixel perfection）

2021/10/18 更新：
這篇文章是早期為了使用 Illustrator 繪製介面所撰寫的文章，目前已有許多新的介面設計軟體可以使用，目前主流的軟體有：

• Sketch
• Figma
• Adobe XD

以上這些軟體都是針對「數位產品介面」所開發的軟體，要達成完美像素已經不是一件太困難的事！在這邊推薦大家使用更專業的介面設計軟體！下面針對 Illustraotr 完美像素的設定，依然沒有改變，所以還是可以使用 Illustrator 來進行完美像素的設定。

---

每個人繪製 UI 的習慣不太一樣，有人喜歡 Photoshop（Ps） 繪製 UI，個人是偏好使用 Illustrator（Ai）來繪製 UI，Ai 是向量軟體，所以每個圖案都是由路徑組成，路徑就是線，線是由兩個點來組點，而三點，就可以組成一個面。而PS是影像處理軟體，所有的畫面都是由像相素（pixel）組成， 因此在原理上，Ps 跟 Ai 是不太一樣。但用 Ai 來繪製 UI 主要有幾個好處：

1. 隨意縮放大小
   量軟體，可以隨意的縮放元件大小，所以用 Ai 來製圖，以後要用來製作不同尺寸的ICON或是用來輸出，都會來的比 Ps 還方便。
2. 以物件或路徑進行管理
   這是我個人覺得用 Ai 來製作 UI 最方便的地方，相對於 Ps，Ps 是用圖層進行管理，因此常常要在圖層裡開開關關，個人認為比較麻煩。而在 Ai 裡，在繪製任何畫面是以路徑及物件為主，所以可以隨意的去移動物件與路徑，如果用不到的物件可以暫時放在工作區域外，要用時再移至工作區域就可以了。
3. 多個工作區域（ 2021/10/8 補充： 目前 Ps 也支援多開工作區域了。）
   進行管理，但如果愈到差異很大的狀況, 例如：前一個畫面是九宮格（Spring board）的畫面，下一個畫面變成清單（List menu）的畫面，基本上就是要重新開一個新的文件，但在AI, 就可以直接新增工作區域來進行繪製。

看起來AI似乎比較方便，但是用 Ai 來繪製 UI 要注意的是 Ai 是向量軟體，但是輸出設備（手機、平板）是像素組成，只差在密度單位上可能不太一樣，因此在進行 UI 繪製過程，必須要進行一些基本設定，將向量的畫面模擬成像素的畫面，這樣在進行畫面的輸出時，才不會有 0.1234 像素的問題。

---

設定以像素為基礎的文件

首先在 Ai 新增一個文件。在新文件設定，請依照下列步驟進行設定：

1. 單位為「像素」（pixel）
2. 寬度與高度必需是以整數的像素為主。
3. 設彩模式必需是 RGB（CMKY是印刷輸出使用的模式）
4. 點陣特效設定為 72ppi.。
5. 預覽模式設為：像素。

完成後，在文件進行任何編輯，都會以像素為最小單位進行編輯。 此外，有些細節的情況要注意到，這也是後來發現的一些問題，提供大家參考。

方向鍵的鍵盤漸增請調整為1px

方向鍵可以用來控制物件位置，而移動的距離預設是3px,所以請到 「編輯」→「偏好設定」→「一般」將「鍵盤漸增」調整為1px，這樣在移動位置時，可以比較精確。

打開對齊像素格點功能

文件右上角，「對齊像素格點」的功能請打開，這樣所有的物件在移動時，就能自動的對齊像素格點。

1像素之差

請比較下面兩圖之間的差異

可以看到左圖是 4×4 的方型，在以中心為「參考點」的情況下，x 與 y 軸分別是（2,2） 而在右圖是3×3的方型，在以中心為「參考點」的情況下，x 與 y 軸分別是（1.5,1.5） 這有什麼影響呢? 影響在於在繪製 UI 時，經常會使用到對齊功能，假設一個 3×3 的方形要與一個 4×4 的方型要垂直置中對齊時，會發生什麼事？如下圖：

看起來 3×3 的方塊會與 4×4 的方式垂直置中，但 Ai 會幫你把 3×3 的方塊左右兩側，半透明霧化處理。

繪製任何對稱圖形請使用偶數

2021/10/21 更新：
對稱的問題，在新版的 Ai 似乎有獲得改善，但繪製對稱圖形建議還是以偶數做為單位。

---

有些情況在以像素為基礎的模式下無法避免， 請參考下圖繪製一個9×9(像素)的圓與10×10(像素)的圓會差在那裡?

有沒有發現，在右圖9×9（像素）的圓，無法對稱… （已改善），這也是用Ai 來繪製 UI 常見到的問題，因此要繪製任何對稱圖型，請盡量以偶數為單位。

結論

以上操作，有些是我參考國外的文章，部份是自己在繪製 UI 時所遇到的問題，問題當然還有， 像是框線也是一個讓人苦惱的問題，之後有空會再補充，當然有任何疑問或那邊有錯誤，也歡迎提出指教。

2021/10/8 更新：
框線（border）已不再困擾我，新的軟體可以很完美的解決問題

參考文章 How to get pixel-perfect designs in adobe illustrator