設計好看 UI 的七個方法
前端很重要的一項技能就是切版，切版就是一項看似簡單，但充滿眉眉角角的一項技能。也是在自己使用 Figma 設計 UI 之後，才更了解到專業的重要。
UI 設計的工作，大至整個版面的風格要統一，小至每個 element 相差幾個 pixel。
有時候公司沒有 UIUX 設計師時，設計版面的工作就會變成前端的工作之一，但有時候不太懂一些設計概念時，只要掌握以下七點就可以設計出不失敗的 UI，沒錯，就是不失敗，一種順眼好的概念。
此篇會以工程師的角度看設計，所以有許多不專業的地方再請多包涵。
原文連結：7 UI Design Fundamentals for Developers - DEV Community
- 空白的空間
- 對齊
- 對比度
- 大小
- 字體排版學
- 顏色
- 視覺的層次
空白的空間
使用一些空白空間可以讓整體視覺更舒適，包括了字的間距(line-height)，卡片的上下左右。
下方的圖可以看到非常明顯的對比，視覺上右邊的卡片會比左邊的卡片好看許多，讓人比較不會有壓迫感，這就是使用一些空白空間的重要性。
對齊
以下兩張圖有很明顯的對比，對齊也是設計當中很重要的元素，比起雜亂無排序的樣子，人的眼睛更喜歡整齊的排列，一方面好找資料，一方面整體視覺也較舒適。
上方圖一，logo，headline，text，button 都沒有對齊。
上方圖二，logo，headline，text，button 對齊在同一條線上，看起來是不是會有更好的使用體驗。
對比度
明顯的對比可以讓人快速的找到頁面中的亮點，像是下圖中的 button。
當 button 一個是灰色，一個是紫色時，呈現出來的感覺就會差很多。
當背景又很花時，明顯的對比才更能讓人掌握住重點。
就像製作簡報時，應該要將整個簡報中最重要的部分，用最亮眼的顏色標出，就可以讓人快速找到講者在這一頁想要表達的精隨是什麼。
大小
元素的大小也十分重要，以下兩張圖，可以看得出對比。空間足夠的卡片讓人看起來更賞心悅目。
上方圖一，可以發現他的 title，還有 subtitle 都不夠顯眼，整個頁面也十分擁擠。
上方圖二，可以發現不同的是，title 加粗且變得更大，而 subtitle 縮小，讓人可以直接看到重點的 title，整個頁面就十分成功的表達重點。
字體排印學 Typography
AKA 文字設計，也是看這篇文才發現字體排印是個大學問，這邊只需要掌握一個重點就是，頁面中的
- 文型
- 大小
- 距離
統一風格就好
以下圖來講，充滿著各種字體，不僅看起來雜亂，也會有種難以閱讀的感覺。
相較於上圖，下圖的字型統一給人的感受就差異甚大。
所以在一個頁面中，最多就不超過兩種字體，統一的字體可以有更好的使用者體驗。
顏色
色彩在設計中也是非常重要的，色彩學也是一門大學問。不同的顏色也代表不同含意，以綠色為例，它象徵著生長與健康，紅色象徵著警告與熱情，黑色的象徵優雅與奢華。
在設計 UI 的顏色之前，可以先想應用程式的目標族群，再來考慮主視覺的顏色。
也需要避免使用過多的顏色，過多的顏色會讓版面顯得雜亂不堪，所以需要特別注意。
視覺層次
每個元素對使用者來說都又不同的重要程度，如果希望使用者在某個地方留下資料，就需較將它凸顯出來，那如何凸顯出來呢?
可以使用視覺層次來呈現，以下圖來說，我們會無法明確地區別哪個元素屬於 Email Address。
所以以下方第二張圖來說，後面增加一層 Layout，就可以讓整個 Email Address 變得很清楚。
那麼視覺層次還有許多的眉角要注意，可以參考這篇文章。
結論
設計出好看的 UI 不難，只要遵循這七個方法，基本上就可以拿到及格的設計。
或是，當你看到可以改善的 UI 設計時，可以遵循這七個方法來給予對方建議。
一起成為有美感的工程師吧！