前端程序員要懂的 UI 設計知識

前端程序員要懂的 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/