UI與UX之間最大的區(qū)別可以概括為：UI是通過視覺的維度去解決效率問題；UX是偏向于功能的維度去解決需求問題。本文章是結(jié)合作者個(gè)人的多年經(jīng)驗(yàn)，和大家（尤其是新人PM）一起分享下對(duì)UI和UX的對(duì)比理解。

UI與UX之間的差異對(duì)剛剛?cè)肼毑痪玫男氯薖M而言，可能略有混淆。我個(gè)人也在工作中碰見過新人在這方面的疑問或者失誤，故而就以自己的經(jīng)驗(yàn)和理解在這里總結(jié)下UI與UX的區(qū)別，供大家借鑒、討論。

UI與UX的定義

從最基本的層面上來說，用戶界面（UI）是用戶和產(chǎn)品互動(dòng)之后產(chǎn)生的的一系列視覺感受，比如界面中的按鈕和圖標(biāo)等，用戶看了之后會(huì)有如何的認(rèn)知；用戶體驗(yàn)（UX），相對(duì)來說，則是一個(gè)人在與一家公司的產(chǎn)品、服務(wù)等各方面互動(dòng)之后產(chǎn)生的體驗(yàn)感受。

大家會(huì)看到，UI與UX都是最終落到用戶主觀的感受層面上來，這點(diǎn)的總結(jié)意義在于：其實(shí)兩者都是帶有根本的主觀性質(zhì)的，服務(wù)用戶其實(shí)服務(wù)的就是用戶的主觀。那么我們?cè)谒伎糢I與UX的設(shè)計(jì)時(shí)，都要從用戶的主觀角度去換位思考。

UI——用戶界面

上溯到上世紀(jì)七十時(shí)代，如果你想使用一臺(tái)電腦，就必須使用命令行界面。那時(shí)，買不到一臺(tái)使用圖標(biāo)、按鈕、或鼠標(biāo)的電腦，為了讓電腦行使你的指令，你必須用編程語言和它交流。

之后在1981年，Xerox PARC的一幫電腦科學(xué)家開發(fā)了Xerox Star，一臺(tái)配置了最初的圖形用戶界面（GUI）的個(gè)人電腦。它使用了窗口、圖標(biāo)、下拉菜單、單選按鈕、復(fù)選框等元素，還允許用戶打開、移動(dòng)、刪除文檔。

蘋果公司的團(tuán)隊(duì)繼續(xù)在圖形用戶界面這點(diǎn)上開發(fā)創(chuàng)新，1984年，他們發(fā)布了Macintosh。Macintosh是第一款成功商業(yè)化的使用鼠標(biāo)點(diǎn)擊和多窗口界面的桌面電腦，當(dāng)然大家最早接觸的可能絕大部分都是Windows系列的系統(tǒng)界面。

圖形界面的出現(xiàn)也帶來了對(duì)新型設(shè)計(jì)師的需求——專門設(shè)計(jì)個(gè)人電腦圖形界面的設(shè)計(jì)師，用戶界面設(shè)計(jì)師就是在這樣的背景下誕生的。這一學(xué)科在過去的幾十年中不斷演化，還會(huì)在將來繼續(xù)進(jìn)化。

如今的用戶界面設(shè)計(jì)師主要圍繞軟件、網(wǎng)站、移動(dòng)應(yīng)用、可穿戴設(shè)備和智能電器等進(jìn)行設(shè)計(jì)。他們需要負(fù)責(zé)設(shè)計(jì)數(shù)字產(chǎn)品界面的布局，以及一個(gè)系統(tǒng)各個(gè)頁面上的視覺元素，當(dāng)然這里指的是視覺設(shè)計(jì)師，平面設(shè)計(jì)師要起步更早，這兩個(gè)職位可大不相同。

UX——用戶體驗(yàn)

用戶體驗(yàn)這個(gè)術(shù)語是由認(rèn)知科學(xué)家Don Norman在上世紀(jì)九十年代創(chuàng)造的，那時(shí)，他正擔(dān)任蘋果公司高新科技組的VP。

他是這么定義用戶體驗(yàn)的：

用戶體驗(yàn)包涵了終端用戶與一家公司及其服務(wù)、產(chǎn)品進(jìn)行交互的所有層面。

在解釋這一術(shù)語起源的電郵中，Norman寫道：

我發(fā)明這個(gè)術(shù)語主要是因?yàn)槲艺J(rèn)為人機(jī)界面和可用性這兩個(gè)概念太過狹窄：我想要覆蓋一個(gè)人使用某個(gè)系統(tǒng)的所有層面，包括工業(yè)設(shè)計(jì)、圖像、界面、物理交互，以及手冊(cè)等。后來，這一術(shù)語流傳甚廣，以致開始喪失原有的意義。

在最近發(fā)表的一篇文章中，Norman闡述了構(gòu)成高質(zhì)量用戶體驗(yàn)的元素：

打造杰出用戶體驗(yàn)的第一要義就是準(zhǔn)確地滿足顧客需求，別讓他們忙亂或不安。接下來是產(chǎn)品本身的簡(jiǎn)潔和雅致，讓用戶覺得擁有、使用這些產(chǎn)品是富有樂趣的。

真正的用戶體驗(yàn)不僅僅是滿足顧客口中的需求，或是提供一系列的清單。為了實(shí)現(xiàn)高質(zhì)量的用戶體驗(yàn)，一家公司的工程、市場(chǎng)、視覺、工業(yè)設(shè)計(jì)、界面設(shè)計(jì)等各個(gè)部門之間必須要無縫銜接。

用戶體驗(yàn)并不止于產(chǎn)品的視覺界面。它是一個(gè)多維的、覆蓋了用戶的整體使用行程的概念，包括：

1. 他們發(fā)現(xiàn)你公司產(chǎn)品的過程；
2. 他們和界面互動(dòng)中的一系列行為；
3. 他們?cè)谕瓿扇蝿?wù)過程中產(chǎn)生的想法和感受；
4. 他們?cè)谡麄€(gè)交互過程中形成的整體印象。

用戶體驗(yàn)設(shè)計(jì)師主要負(fù)責(zé)確保公司能夠交付一款滿足顧客需求，并順利達(dá)到他們期望結(jié)果的產(chǎn)品或服務(wù)。他們需要開展用戶研究，來獲取關(guān)于產(chǎn)品用戶盡可能多的背景資料，然后利用這些資料設(shè)計(jì)線框圖和產(chǎn)品原型，以幫助用戶從A點(diǎn)到達(dá)B點(diǎn)。

并且還要考慮一部分技術(shù)實(shí)現(xiàn)邏輯、性能等方面的問題，因?yàn)檫@些都會(huì)直接、間接的影響到體驗(yàn)的設(shè)計(jì)思路和最終能落地、實(shí)現(xiàn)出什么樣的產(chǎn)品或服務(wù)。

UI與UX的不同角度的對(duì)比

1. 一些名人怎么說

Don Norman和Jakob Nielsen很恰當(dāng)?shù)乜偨Y(jié)了兩者之間的差異：

把整體的用戶體驗(yàn)和用戶界面區(qū)別開來是相當(dāng)重要的，雖說用戶界面顯然也是設(shè)計(jì)流程中極其重要的一部分。

舉個(gè)電影評(píng)論網(wǎng)站的例子——即使用來找到一部電影的用戶界面是完美的，然而對(duì)于一個(gè)想要找到小成本獨(dú)立電影的用戶來說，如果底層數(shù)據(jù)庫只有主流電影制片廠的電影信息，那這個(gè)用戶體驗(yàn)就是差勁的。

用戶體驗(yàn)注重用戶解決問題的行程，用戶界面則注重產(chǎn)品的外觀和功能。

——Ken?Norton：Google Ventures合伙人，前Google產(chǎn)品經(jīng)理

用戶體驗(yàn)設(shè)計(jì)師關(guān)心的是設(shè)計(jì)流程的概念層面，而用戶界面設(shè)計(jì)師則更注重肉眼可見的元素。

——Andy?Budd：Clearleft聯(lián)合創(chuàng)始人，UX?London創(chuàng)始人

用戶界面一般是指圍繞屏幕界面的視覺設(shè)計(jì)和信息設(shè)計(jì)；用戶體驗(yàn)是指完整的體驗(yàn)，它可以和屏幕界面無關(guān)。

——Patrick Neeman：Apptio產(chǎn)品設(shè)計(jì)部門主管，Usability?Counts創(chuàng)始人

2. 產(chǎn)品流程的角度作對(duì)比

• UI ：在產(chǎn)品開發(fā)流水線中，往往是想好了UX后，才會(huì)去思考UI層面的問題，它甚至是產(chǎn)品在開發(fā)前的最后一個(gè)環(huán)節(jié)。UI的核心意義在于如何將需求解決方案以更好的視覺呈現(xiàn)給用戶，視覺首要目標(biāo)是要有效率，其次是美觀，所以我們不能說UI是美工。
• UX：當(dāng)從零開始做產(chǎn)品時(shí)，PM在明確了目標(biāo)以后，首先要想的就是解決什么核心需求，解決方案的邏輯是什么，以及如何將這個(gè)解決方案落地到具體產(chǎn)品形態(tài)上，如何讓用戶更便捷的理解方案的邏輯，這就是在思考UX方面的事情。

3. 思維點(diǎn)的角度作對(duì)比

• UI：相對(duì)更加傾向于在UX的基礎(chǔ)上，再進(jìn)行視覺優(yōu)化，提供用戶對(duì)界面、功能點(diǎn)的認(rèn)知效率。過去常講的擬物化，是引導(dǎo)用戶從真實(shí)世界到移動(dòng)設(shè)備世界；扁平化，是在擬物化已培育了用戶習(xí)慣的基礎(chǔ)上，進(jìn)一步提升效率。
• UX：考慮用戶體驗(yàn)的維度非常多：用戶本質(zhì)的需求、解決方案邏輯、產(chǎn)品流程、產(chǎn)品模塊結(jié)構(gòu)、產(chǎn)品框架、產(chǎn)品交互和產(chǎn)品文案表述等等。

4. 職能的角度作對(duì)比

UI：由專業(yè)的視覺設(shè)計(jì)師完成具體的設(shè)計(jì)工作。產(chǎn)品經(jīng)理往往在設(shè)計(jì)師開始設(shè)計(jì)前與其溝通需求的背景、目標(biāo)、邏輯、流程、功能點(diǎn)以及功能點(diǎn)的優(yōu)先級(jí)。在UI設(shè)計(jì)稿完成后，還需要進(jìn)行驗(yàn)收，與設(shè)計(jì)師再做微調(diào)，直到最終達(dá)到產(chǎn)品的目的。

UX：這部分主要有產(chǎn)品經(jīng)理和交互設(shè)計(jì)師完成設(shè)計(jì)工作。產(chǎn)品經(jīng)理自身應(yīng)該先完成自己對(duì)需求的梳理、制定目標(biāo)，如有必要可制作流程圖、邏輯圖以及功能點(diǎn)表格說明，確定這些以后再和交互設(shè)計(jì)師詳細(xì)溝通以上準(zhǔn)備的內(nèi)容。交互設(shè)計(jì)師來完成交互稿的設(shè)計(jì)，再由產(chǎn)品經(jīng)理驗(yàn)收后，再轉(zhuǎn)到UI設(shè)計(jì)師在交互稿的基礎(chǔ)上完成視覺填充、設(shè)計(jì)。

兩者之間的協(xié)作

正如上文中流程的角度對(duì)比一樣，UI和UX之間雖有千差萬別，但都是產(chǎn)品加工流水線上的一個(gè)環(huán)節(jié)。需要產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI設(shè)計(jì)師之間的密切溝通、配合，共同達(dá)成最終的目標(biāo)。整個(gè)團(tuán)隊(duì)的合作對(duì)產(chǎn)品實(shí)現(xiàn)到什么程度、實(shí)現(xiàn)過程成本都至關(guān)重要，這也關(guān)系到產(chǎn)品經(jīng)理的溝通、組織和協(xié)調(diào)的能力。

另外，有時(shí)UI甚至也可以說是UX的一部分，因?yàn)橐曈X也是一種體驗(yàn)，看上去都亂糟糟的，怎么會(huì)有好的體驗(yàn)?zāi)兀?/p>

作者個(gè)人的總結(jié)：好看的產(chǎn)品不一定是好體驗(yàn)的產(chǎn)品，但好體驗(yàn)的產(chǎn)品總會(huì)有著很友好的視覺效果。

總結(jié)

UI和UX之間存在著本質(zhì)上的差別，也必須緊密協(xié)作，以達(dá)到產(chǎn)品的最終目標(biāo)。

本次先做這些核心的幾點(diǎn)分析、對(duì)比，拋磚引玉，供大家借鑒、討論。

#專欄作家#

中人人，人人都是產(chǎn)品經(jīng)理專欄作家。高級(jí)產(chǎn)品經(jīng)理，擅長(zhǎng)需求分析、數(shù)據(jù)分析，關(guān)注零售、電商領(lǐng)域。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議