3 個系統性方法：人人都可以創造出具美感的 UI
有不少想轉職到 UX 的朋友，包括一些編程背景的朋友，有時會對自己如何創造出具美感的 UI 感到困惑。
在這裡我有一套方法：透過系統性思維來創造出具有美感的 UI。
在某種程度上，UI 的美觀性有時是主觀的，但可以通過系統化的方法來實現一個相當「好看」的 UI，其中一個關鍵方法就是：間距。
間距在 UI 設計中非常重要，因為它使設計看起來整潔且乾淨。這不僅使 UI 增加易用性，還使其更加吸引人和美觀。
1. 使用 Point Grid System
Point Grid System 的原理是將界面的所有元素（如文字、圖標、按鈕等）對齊在一個基於特定單位的網格上。這樣可以確保元素之間的間距、邊距和尺寸都遵循相同的規則，從而保持界面的統一性和一致性。
隨意搭配隔距 VS 格線系統 (Grid System)
一般人可能看不出分別，可是招聘主管就是能看出當中沒有使用 Grid System 的『不尋常』間距
為甚麼 Point Grid System 在 UI 設計中這樣重要？
1. 一致性：Point Grid System 可以幫助設計師保持界面元素的一致性。當所有的間距、邊距、字體大小等都基於相同的網格系統時，整個界面看起來會更加統一和協調，不會有不對稱或不均勻的感覺。
2. 可擴展性：Point Grid System 在設計和開發過程中提供了很好的可擴展性。設計師可以輕鬆地調整元素的大小和間距，而不會破壞整體設計的平衡，這對於響應式設計尤其重要。
3. 提升美感：當所有的元素都根據 Point Grid System 進行排列和調整時，界面會顯得更加整潔和美觀。這種系統化的布局方式能夠讓用戶更輕鬆地掃描和理解界面內容，提高整體的用戶體驗。
4. 提高開發效率：Point Grid System 為設計師和開發者提供了一個統一的基準，減少了設計和開發過程中的反覆調整和測試，從而提高工作效率。
常用的有 4 Point Grid System 和 8 Point Grid System：
4 Point Grid System
4px / 8px / 12px / 16px / 20px / 24px / 28px / 32px / 40px / 44px
8 Point Grid System
8px / 16px / 24px / 32px / 40px / 48px / 56px
為什麼要使用 4 或 8？
隨著螢幕尺寸和像素密度的多樣性不斷增加，資產（Asset）生成的工作對設計師來說變得更加複雜。使用像 4 或 8 這樣的偶數來調整元素的尺寸和間距，使得針對多種設備進行縮放變得簡單且一致。
如果使用奇數如 5 的話，在解析度為 1.5 倍的設備裡，便在會造成畫面出現模糊的可能。
如： 5px 按 1.5 倍縮放（7.5）會導致半個像素的偏移。
為什麼不使用 2 或 6？
用 2 的話，產生出來的間距變數變得很多，比較難以控制和管理。 雖然用 2 的話，能提供非常細緻的粒度，但我覺得在可能是有點多餘，使界面過於擁擠。
那為甚麼不用 6？
有人說是因為一些常見的螢幕尺寸，無法整除 6，可能導致縮放問題，如：1280。不過有時候 iPhone 的尺寸也讓設計師很無奈，如：iPhone 8 的 375，iPhone 15 Pro Max 的430 ，它們其實是無法整除 4 或 8。
所以，我覺得螢幕尺寸並不是主要原因。
我自己覺不用 6 的原因，是因為萬一 6 在極端情況需要再進一步減少的話，便會變成 3。那麼在 1.5 倍縮放的情況下，便會出現半個像素（4.5）的偏移的現像，因此 6 是相對缺乏了靈活性，大家都避開使用。
始終最終間距的規則也是人定出來，有時候不想限制極端情況時能使用的『靈活』方案。
就像有人使用 8 Point Grid System 時，也會在必要時加入 4px。
綜合我多年的經驗，我個人比較喜歡使用 4 Point Grid System。
為什麼選擇 4 Point Grid System？
它提供更多的細節控制：即更多的選擇。你可以在 8 或 16 之間選擇 12。這適用於圖標大小、元素之間的間距、文本與圖標之間的水平間距等。
能夠創建更容易掃描的佈局：鑑於更細微的間距，內容可以更容易地被分組在一起，形成一個焦點，從而使用戶更容易掃描內容。
靈活性：在創建美觀佈局方面提供了更多的靈活性
使用 4 Point Grid System 具有更高彈性，讓設計師容易達到心目中的『美感』。
2. 應用「內部 ≤ 外部」的原則
意思是外部的間距使用較大的數值，內部的間距使用較少的數值，以獲得更乾淨的外觀。
「Outer Padding 總要比 Inner Padding 大」
或者換句話說：
「越深入子群組，Padding 就越小」
當然，在上面的例子，沒有人說不可以全用同一個數值的 Padding。不過，我認為版面的呈現會顯得較呆滯。
如果需要展示大量資訊時，便一定要使用不同數值的 Padding 來帶領用戶閱讀。
在以下的（誇張）例子更為明顯：
上圖：全用 24px Padding
下圖：只有 Outer Padding 用 24px
下面的影片展示了如何使用了：「越深入子群組，Padding 就越小」的原則
3. 按鈕的 Padding 原則
關於按扭的 Padding 的使用並沒有固定的規則；這完全取決於所需的風格和美學效果：有些人選擇較大的內邊距來賦予設計輕盈感和通透感，而另一些人則更喜歡較窄的內邊距來優化可用空間。
然而，為了確保按鈕作為 CTA（行動呼籲）的可讀性，可以遵循某些內邊距規則/標準。
英文的書寫方式是「水平」的：單詞的長度往往大於高度。因此，遵循一個「自然」的規則，即水平內邊距大於垂直內邊距，是比較可取的。
通常，水平 Padding 比垂直 Padding 多 1 到 2 倍，或至少 1:1 。這種比例的好處可以在下例中清楚地看到。
最後，有一個 Figma Plugin 可以試用一下：
它可以輕鬆列出開發人員要知道的設計規格，尤其對使用非付費版 Figma 的朋友（自由工作者）特別有用，因為非付費版 Figma 並不能使用 Dev Mode，不能讓開發人員輕鬆地知道設計規格。
總結：
使用 4 Point Grid System：4 Point Grid System 幫助保持 UI 的一致性和可擴展性，提供足夠靈活度，確保元素之間的間距和尺寸統一，提升整體美感。
應用「內部 ≤ 外部」的原則：使用較大的外邊距來保持界面乾淨，當越深入子群組，Padding 數值就越小，讓用戶容易掃視。
按鈕的內邊距規則：水平內邊距通常比垂直內邊距大 1 - 2 倍，或至少 1:1， 這樣可以提升按鈕的可讀性和使用體驗。
今天就分享到這裡。
謝謝你耐心閱讀！
下星期日見，
Kogi