一窺 UI/UX 世界（附示例）

已發表: 2020-03-24

如果您研究過某種形式的軟件設計或正在從事設計，您應該熟悉術語 - “UI”和“UX”。 然而，有時我們傾向於交替使用這兩個詞。
那麼，是什麼讓 UI 與 UX 不同呢？
UX 設計使界面以最簡單的形式發揮作用，而 UI 設計使界面具有吸引力和美觀。

用戶界面設計

什麼是 UI 設計？

用戶界面是用戶用來與產品或服務交互的東西。 與用戶體驗設計一樣，用戶界面設計是一項複雜且具有挑戰性的任務。 它負責將產品的創建、分析、內容和佈局轉換為吸引人、引導性和響應性的用戶界面。

  • 用戶界面設計是關於產品界面的外觀。 這考慮了界面的所有視覺和交互元素——包括按鈕、圖標、間距、排版、配色方案和響應式設計。
  • UI 設計的目的是通過產品的界面直觀地引導用戶。 一切都是關於擁有良好的體驗，不需要消費者過多的思考和努力。
  • 良好的 UI 設計可確保設計一致且美觀。

什麼是用戶體驗設計？

用戶體驗是用戶與產品或服務交互時的整體體驗。

  • 用戶體驗設計是一種改進和增強用戶交互功能的方法。
  • UX 概念與視覺效果無關； 它基於整體體驗。
  • 然而，用戶體驗不僅僅是讓消費者滿意。 它是關於幫助客戶以最佳方式完成他們的活動並實現業務目標。
運球
圖片來源 - Dribbble

用戶體驗設計是設計和增強用戶參與業務各個方面的一致性，從而改善用戶體驗的過程。
就當前數字地球的情況而言，每個企業都試圖對用戶產生影響，以增加其銷售額並在用戶體驗和用戶界面設計的幫助下為消費者提供發生的體驗。

像 Drupal 8 這樣的 CMS 如何幫助增強網站的用戶體驗？

內容管理系統在網站用戶體驗設計的成功中起著關鍵作用。 Drupal 8 在定制內容和設計方面提供了靈活性。 如果您希望創建引人注目的 UX 設計，讓我們看看 Drupal 8 如何成為 CMS 的絕佳選擇。

  • 頁面速度- 快速加載的網站不僅可以提高性能，還可以提高整體用戶體驗。 Drupal 8 提供了性能提升功能，如高級緩存選項、圖像優化、代碼優化、數據庫優化等。
  • 響應性– 使用 Drupal 8，響應性在血液中流動。 這意味著所有 Drupal 8 網站都是開箱即用的響應式！ 沒有響應能力，網站的用戶體驗是不完整的。
  • 個性化– 事實證明，提供個性化體驗的網站比沒有個性化體驗的網站獲得更多轉化。 Drupal 8 提供了各種模塊，讓您可以根據用戶的人口統計、設備信息、登錄日期和時間等來個性化您的內容。
  • 多語言– 您知道世界上只有 20% 的人口會說/理解英語嗎？ 為了能夠通過網站的 UX 提供個人風格，用他們熟悉的語言與用戶交談很重要。 Drupal 8 提供開箱即用的多語言支持，有 100 多種語言可供選擇。
  • Headless Drupal – 解耦 Drupal 使 UI/UX 設計師可以更好地控製網站的設計元素。 當 ReactJS 和 Angular JS 等前端框架與 Drupal 8 結合使用時，可以豐富用戶體驗。
  • 主題——Drupal 社區已經構建了數百個可以適應任何業務需求的主題。 您可以找到 Drupal 8 自帶的 Drupal 核心主題以及第三方 Drupal 8 主題。 如果它們都不適合您的需求，您還可以自定義主題以使它們適合您。

UX 與 UI 有何不同？

這是我喜歡用來描述兩者之間差異的一個類比。
如果你把人體想像成一個產品。 器官體現UX設計：衡量和優化支持生命，UI設計體現身體的化妝品； 他們的外表，他們的感官，還有他們的反應。
要記住的關鍵區別是：UX 設計與用戶的整體感覺有關，而 UI 設計則與產品界面的外觀和工作方式有關。

運球
圖片來源 - Dribbble

例如，用戶體驗 (UX) 主要是情緒化的，是消費者的心理行為，例如用戶在使用產品時的反應或使用產品時的感受。

它主要涉及用戶試圖通過產品實現什麼目標，他們的需求是什麼，他們的感受是什麼，要應用什麼策略，以及為了實現他們的目標，他們可能會進行哪些交互。

而用戶界面 (UI) 是有形的。 它主要處理產品的視覺層次，包括按鈕、排版、顏色等。 UI 設計師基本上必須處理可擴展的設計，並且必須通過減少用戶達到目標所需的時間來改善用戶流程，同時使對用戶來說，產品美觀且具有視覺美感。

好的和壞的 UI/UX 示例

說說幾個UI/UX不好的例子

用戶界面/用戶體驗示例
分心會造成不好的第一印象

當第一眼看到上面的例子時，它會讓人對網站的全部內容感到困惑。 用戶會看到各種廣告和不需要的信息，並且會看到大量難以處理的信息，因此使用戶甚至沒有閱讀他們最初尋找的新聞發布就離開了網站。

用戶界面/用戶體驗體驗壞用戶界面


這些是一些更糟糕的 UI/UX 示例。
當查看以上兩張圖片時，用戶會感到困惑，並且很可能會偏離他的實際目標。 2020年，響應式設計不是趨勢而是必需品。 上面的例子顯示了顏色和排版的糟糕和苛刻的使用導致混亂。但並不是每一個設計都是糟糕的。 我們也來談談 UI/UX 的一些非常好的例子。
上面的例子展示了一個簡單的微交互如何讓用戶開心和投入，從而帶來一些身臨其境的體驗。
好用戶界面良好的用戶界面體驗