60秒解釋 UX & UI
Medium上有個哥們號稱60秒就能解釋清楚UX和UI，讓我們看看他是怎么解釋的。
Medium上有個哥們號稱60秒就能解釋清楚UX和UI，讓我們看看他是怎么解釋的。
在Web設(shè)計的世界中，一直充斥著各種諸如UX、UI這樣的專業(yè)名詞。然而他們到底是什么意思呢？
在傳遞一個非凡的網(wǎng)站使用體驗給終端用戶的過程中，UX（User Experience 用戶體驗）設(shè)計和UI（User Interface 用戶界面）設(shè)計兩者皆是其中重要的組成部分，但又并不相同。我們將快速的分解出兩者之間的關(guān)鍵差異，并接著討論他們又是如何關(guān)聯(lián)在一起的。
配圖來源：UX Movement
UI （用戶界面） 設(shè)計主要包括Web設(shè)計的視覺部分。它呈現(xiàn)了展示層和互動層的不同層次，賦予產(chǎn)品一個整體的外觀觀感和感受。
Usability.gov 是一個面向Web設(shè)計最佳實踐和指南的重要資源網(wǎng)站，其中將不同的UI元素分類為：
- 輸入類（Input） --- 文本字段表單（Text field forms）、日期字段表單（date field forms）、下拉列表（dropdown lists）、復(fù)選框（checkboxes）、列表框（list boxes）、可點擊按鈕，等等。
- 導(dǎo)航類（Navigation） --- 滑動條（Sliders）、搜索字段表單（search field forms）、分頁元素（pagination）、側(cè)邊欄（siderbars）、標簽（tags）、圖標（icons）等等。
- 分享類（Sharing） --- 好友列表（Friend lists）、關(guān)注按鈕（follow buttons）、贊/頂（like/promote）、分享按鈕、邀請好友，等等。
- 信息類（Information）--- 文本內(nèi)容（Text content）、提示信息（tooltips）、消息框（message boxes）、通知提醒（notifications）、圖標、進度條（progress bar），等。
UI設(shè)計不僅僅包含第一次訪問某個頁面時所看到內(nèi)容，還包括當用戶與這些頁面元素互動時元素如何反饋的設(shè)計。下面這個天氣預(yù)報的App 就是一個UI設(shè)計的互動部分的典型范例展示：
配圖來源：Dribbble
如果UI把這些內(nèi)容都涵蓋了，那還剩下什么給UX呢？
UX（用戶體驗）設(shè)計被定義為：通過改善用戶和產(chǎn)品互動過程中的可用性（usability）、易用性（ease of use）、樂用性（pleasure）來提升用戶滿意度和忠誠度（粘性）的過程。
為了在企業(yè)和用戶之間創(chuàng)建這樣的高質(zhì)量體驗，用戶體驗設(shè)計師聚焦于研究、可用性測試、以及其他可以深入理解用戶的各個方面。例如，許多UX研究人員使用A/B 測試方法來幫助判斷兩個設(shè)計方案中哪個更受終端用戶的青睞。
So，他們兩者是如何關(guān)聯(lián)的呢？有效的UI和UX設(shè)計會緊密配合，為用戶創(chuàng)造一個全面愉悅的體驗。如果其中之一沒有達標，將會大大的影響整個網(wǎng)站的表現(xiàn)。例如，一個網(wǎng)站的UI設(shè)計很棒，但UX設(shè)計很糟糕，就會感覺不對勁。因為它看來美的令人驚嘆，但是卻又非常難以駕馭。另一方面，有些東西很實用但很不好看，就是UX設(shè)計很棒，UI設(shè)計很糟糕的典型例子。
更多關(guān)于UX（用戶體驗），UI（用戶界面），和可用性的內(nèi)容，可以查看原作者其他文章：
- The Carousel: Useful Tool or Usability Detractor
- 13 UX Mistakes Explained in GIFs
- Mobile Usability: Testing Your Website in the Real World
