前端程序員要懂的 UI 設計知識
瘋狂的技術宅 前端先鋒
翻譯：瘋狂的技術宅
作者：Per Harald Borgen
來源：freecodecamp
正文共：1401 字
預計閱讀時間：5分鐘
作爲一個前端工程師，如果你對 HTML 和 CSS 有基本的瞭解，並希望在瀏覽器中創建美觀的用戶界面，那就別到處亂找資料了！在本文中，你將通過了解以下七個基本知識來提高 UI 設計技能：
- 留白
- 對齊
- 對比
- 比例
- 板式
- 顏色
- 視覺層次
讓我們開始吧！
留白
我們要研究的第一個設計基礎是空間留白，也被稱爲負空間。顧名思義，它是頁面上元素之間的空間。
被壓縮在沒有留白的頁面上的元素不僅看起來沒有吸引力，而且難以瀏覽和閱讀。
可以通過多種方式調整留白，包括填充、邊距和行高。通過查看下圖瞭解有效留白帶來的不同。
調整留白前後
對齊
接下來是對齊。這是確保每個元素相對於其他元素正確放置的過程，例如通過對其列在頁面上保持向下對齊。
從下圖中可以看到，第一頁的元素在許多不同的列中（弱對齊）遠沒有第二頁的吸引力和可讀性好，而第二頁具有很強的對齊性：
頁面對齊不良
頁面高度對齊
對比
在構建頁面或應用程序時也要考慮對比度，這一點很重要。對比度是頁面上相鄰顯示的顏色之間的差異。
從該示例可以看出，對比度差的頁面很難閱讀，並且元素也不突出。
對比度差的頁面
具有良好對比度的頁面（如下面的頁面）不僅看起來更好，而且更加用戶友好和具有高可訪問性。
高對比度示例
爲了幫助你正確地獲得對比度，WCAG（Web內容可訪問性指南）建議最小（AA）對比度至少爲 4.5:1，對於大文本，則爲 3:1，或者增強（AAA）對比度爲 7:1 或 4.5:1（大文本）。有很多插件或網站可以幫你進行檢查。
比例
比例 也是用戶界面的重要組成部分，所以請仔細考慮每個元素的大小。例如元素相對於頁面應該足夠大（因此沒有大的間隙）。同樣，標題等有較高重要性的元素應大於重要性較小的元素。
查看下面的前後圖像，並注意正確調整後頁面的外觀。
頁面比例不佳
很好的例子
版式
版面設計對 UI 也有很大的影響。有很多方法可以調整這個設置，包括字體選擇、字體大小、對齊方式、字母間距、行高、字體樣式、顏色和對比度等。
通常，在一個頁面上使用不超過 2 個字體系列，並確保不同的方面可以協同工作，以建立重要性的順序。這就是所謂的視覺層次結構，我們將在下面詳細介紹。
如果遵循這些提示，則頁面外觀將如下所示：
良好的排版案例
而不是令人困惑和難以理解，像這樣：
排版不佳的頁面
顏色
最先影響用戶體驗的 UI 設計是顏色。顏色心理學認爲着每種顏色都對某些人產生了意義——例如紅色可以表示危險，而白色可以表示清潔和寧靜。
但是要注意顏色。含義會因爲文化差異而改變，因此在選擇顏色時，請務必進行研究並考慮目標受衆。
同樣要記住，太多的顏色會造成不良的 UI，並且你選擇使用的顏色應該互補。根據經驗，將相同色調的較淺或較暗的變體彼此相鄰，一般不會出錯。只需看看下面兩張圖的對比，是不是第一張很辣眼睛！
顏色選擇不佳的頁面
善用色彩
視覺層次
我們列表上的最後一項是視覺層次。UI 的某些元素比其他元素更重要。視覺層次結構使我們可以確立這種重要性。
可以用位置、對比度、顏色、比例、樣式或以上各項的組合來完成此操作，如下面的第二個圖像所示，它有比第一個圖更好的視覺層次。
視覺層次不佳的頁面
使用字體和顏色建立視覺層次
總結
在本文中，我們介紹了七個主要的設計基礎：留白，顏色，對比，比例，對齊方式，版式和視覺層次。它們對於 UI 都同樣重要——如果缺少這些元素中的任何一個，都會損害整個用戶體驗。
原文鏈接
https://www.freecodecamp.org/news/learn-ui-design-in-5-minutes-tutorial/