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






































