前端程式設計師要懂的 UI 設計知識

• 2020 年 2 月 26 日
• 筆記

每日前端夜話第285篇

翻譯：瘋狂的技術宅

作者：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/