深度解讀:3分鐘秒懂UI和UX到底有何不同

sky
3 評(píng)論 22507 瀏覽 51 收藏 18 分鐘

編輯導(dǎo)語(yǔ):什么是UI?什么是UX?它們之間有什么區(qū)別呢?如今,越來(lái)越多的公司開始強(qiáng)調(diào)UX設(shè)計(jì),為什么UX開始被重視了?如果想做UX,我們?cè)撊绾稳?zhǔn)備?帶著這幾個(gè)疑問,我們來(lái)看本文作者的深度解讀,讓你弄懂UX和UI到底有何不同。

現(xiàn)在越來(lái)越多公司都在提倡UX體驗(yàn)設(shè)計(jì),那么到底什么是UX體驗(yàn)設(shè)計(jì)?和UI有哪些區(qū)別?

感覺這個(gè)詞語(yǔ)熟悉又陌生,那么今天我和大家分享下我的理解,僅代表我個(gè)人的觀點(diǎn)和大家互相交流探討,如有不對(duì)的地方歡迎多交流。

一、什么是UI?什么是UX?

1. 什么是UI?

簡(jiǎn)單理解就是界面+交互。

什么屬于UI呢?

這個(gè)我想大家都已經(jīng)很熟悉,就是我們每天使用的產(chǎn)品的界面外觀設(shè)計(jì),無(wú)論是視覺效果,還是品牌個(gè)性,還是頁(yè)面的交互設(shè)計(jì),都屬于UI范圍內(nèi)。

很多同學(xué)會(huì)問,交互設(shè)計(jì)不是屬于交互么?怎么劃分在UI了?

其實(shí),UI是用戶界面設(shè)計(jì)的統(tǒng)稱。隨著時(shí)代的發(fā)展,純UI的時(shí)代已經(jīng)過去了,今天的UI設(shè)計(jì)師,除了掌握視覺設(shè)計(jì)還需要具備一定交互設(shè)計(jì)能力。

從百科中對(duì)于UI的定義也是如此:負(fù)責(zé)產(chǎn)品的人際交互、操作邏輯、界面視覺的整體設(shè)計(jì)。從字面大家也可以看出-用戶界面,除了界面還包含用戶和界面之間的交互。

如果你覺得不好理解,一個(gè)簡(jiǎn)單粗暴的理解方式就是UI=交互+視覺。

2. 什么是UX?

UX我們可以把它理解為用戶任務(wù)流程設(shè)計(jì),今天我們用戶注冊(cè)我們一個(gè)新的產(chǎn)品,需要那幾個(gè)步驟?

——用戶通過朋友圈看見我們的商品廣告,通過那幾步到達(dá)購(gòu)買頁(yè),最后轉(zhuǎn)化付費(fèi),這些我理解為UX,

引用百度百科的資料UX核心是用戶,體驗(yàn)指用戶在使用產(chǎn)品以及與產(chǎn)品發(fā)生交互時(shí)出現(xiàn)的主觀感受和需求滿足。

UX設(shè)計(jì)師研究和評(píng)估一個(gè)系統(tǒng)的用戶體驗(yàn),關(guān)注該系統(tǒng)的易用性、價(jià)值體現(xiàn)、實(shí)用性、高效性等。

舉個(gè)例子:我們?nèi)ャy行的ATM提款機(jī)上取錢,看到的界面和每一步操作數(shù)據(jù)UI設(shè)計(jì)。但是如何存錢?如何更改密碼?如何轉(zhuǎn)賬匯款?

——這些流程的設(shè)計(jì)屬于UX設(shè)計(jì),他關(guān)注這個(gè)產(chǎn)品是否好用和易用。

UX我更多理解為用戶的行為表達(dá),UX設(shè)計(jì)是在用戶直接或者使用服務(wù)時(shí)候感受到的體驗(yàn),比如反饋,和任務(wù)指引的整體設(shè)計(jì)。

比如之前我們?nèi)バ前涂速I咖啡時(shí)候,如果遇見人很多,我們就必須排著很長(zhǎng)的隊(duì)。但是今天,我們?nèi)サ昀锶撕芏?,直接可以手機(jī)上操作,手機(jī)上排號(hào),大大提升了效率。

那么這個(gè)體驗(yàn)的的優(yōu)化就是UX工作,它可以改變我們生活的體驗(yàn),類似這樣的UX改變生活的案例還有很多。比如越來(lái)越多餐廳也可以通過微信排號(hào),無(wú)須店門口等待,只需要關(guān)注他們公眾號(hào),到時(shí)候會(huì)有排號(hào)提醒。

3. 解決問題的視角不同

UI和UX大家本質(zhì)都是在解決用戶問題,只不過站位不同視角不同,UI更多是解決用戶第一印象,這個(gè)設(shè)計(jì)好不好看,交互邏輯合理不合理,結(jié)構(gòu)清晰不清晰,頁(yè)面功能層次表達(dá)是否合理。

而UX更多是定義了產(chǎn)品目標(biāo)流程,UX更多解決產(chǎn)品的深度,而UI是產(chǎn)品的寬度,兩者都很重要。

互聯(lián)網(wǎng)行業(yè)發(fā)展了這么多年,用戶體驗(yàn)已經(jīng)融入到了我們生活中點(diǎn)點(diǎn)滴滴,UI和UX盡管本質(zhì)不同,UI更加具有視覺性,UX更多是邏輯系統(tǒng)性。

但是他們一般都屬于一個(gè)團(tuán)隊(duì),只不過大家運(yùn)用不同的技能,不用的工具,不同的問題處理方式——但是最終都是把我們產(chǎn)品體驗(yàn)做好。

二、UI與UX的區(qū)別有哪些?

1. UX讓界面更好用,UI讓界面更好看

這句話很好理解,UI設(shè)計(jì)師的價(jià)值是讓我們的界面好看符合用戶審美趨勢(shì),同時(shí)交互上符合用戶邏輯,符合產(chǎn)品想傳遞的功能優(yōu)先級(jí),沒有大的交互原則問題。

UX是讓整個(gè)流程更好用,更好引導(dǎo)用戶完成任務(wù),達(dá)成我們的商業(yè)目標(biāo)。這中間兩者使用的技能也不相同。

2. UX讓用戶實(shí)現(xiàn)目標(biāo),UI讓界面提升品牌感

【深度解讀】3分鐘秒懂UI和UX到底有何不同

UX幫產(chǎn)品實(shí)現(xiàn)產(chǎn)品目標(biāo),很好理解,今天任何的產(chǎn)品都需要有商業(yè)目標(biāo),無(wú)論是剛上線的新產(chǎn)品,還是老產(chǎn)品都有用戶目標(biāo)。

拿618,雙11這些大型活動(dòng)來(lái)說:很多電商都各種營(yíng)銷,那他們的商業(yè)目標(biāo)是什么?

——是GMV成交額,所以UX的目標(biāo)是怎么讓GMV最大化,那么這中間就涉及到:用戶入口、用戶路徑和鏈路的完整設(shè)計(jì),每一個(gè)環(huán)節(jié)的漏損都應(yīng)該考慮在里面。

【深度解讀】3分鐘秒懂UI和UX到底有何不同

那么UI就是用戶在使用產(chǎn)品過程中,心情是否感覺愉悅,沒有任何的使用負(fù)擔(dān),體驗(yàn)時(shí)候特別友好。

同時(shí)界面和交互時(shí)候不會(huì)感覺冗余,同時(shí)用戶界面的表達(dá)有溫度,如上圖google的情感化表達(dá)一樣,UI就是建立用戶和商業(yè)這件的情感品牌橋梁。

3. UX核心目標(biāo)引導(dǎo)用戶完成任務(wù),UI不是

另外一個(gè)不一樣的點(diǎn)是,UX核心是引導(dǎo)用戶完成用戶目標(biāo)和任務(wù)。

比如火車票軟件,雖然它的交互視覺很糟糕,但是相對(duì)比這個(gè)更重要是如何幫助用戶完成目標(biāo),UX的優(yōu)先級(jí)高于UI,如果產(chǎn)品無(wú)法滿足用戶價(jià)值,對(duì)用戶沒有意義,那么UI做的再好其實(shí)意義也不大。

歷史上有很多曇花一現(xiàn)的產(chǎn)品都是如此,比如早期的Path、Paper等產(chǎn)品就是UI視覺交互很都很好,但是在商業(yè)層面以及UX上沒有那么完美,沒有很好的用戶價(jià)值,最終頁(yè)難躲過消失的命運(yùn)。

4. 交付的成果不一樣

UI和UX的交付產(chǎn)出也有很大的不一樣,UX的輸出包括UX體驗(yàn)報(bào)告、功能定義、功能規(guī)劃、項(xiàng)目進(jìn)度、概念設(shè)計(jì)、需求評(píng)估、市場(chǎng)研究、數(shù)據(jù)研究、可用性測(cè)試、用戶體驗(yàn)地圖、流程圖、交互原型圖等等。

這是大概一些產(chǎn)物,當(dāng)然還包括一些通用的比如匯報(bào)、提案等。

UI的交付大家都比較清楚,包括視覺和交互、視覺設(shè)計(jì)、品牌設(shè)計(jì)、動(dòng)效設(shè)計(jì)、組件設(shè)計(jì)和設(shè)計(jì)語(yǔ)言等等,當(dāng)然方案匯報(bào)提案也是一樣的。

5. 職責(zé)不同

UX設(shè)計(jì)師還一個(gè)重要角色就是策略制定和內(nèi)容設(shè)定,任何產(chǎn)品內(nèi)容是核心。

拿電商來(lái)說:人、貨、場(chǎng),貨就是內(nèi)容非常的主要,這個(gè)內(nèi)容如何和用戶互動(dòng),同時(shí)被用戶接受,和用戶互動(dòng),這個(gè)中間UX設(shè)計(jì)師扮演著非常重要的角色。

說說我了解的UX在阿里的職業(yè)有哪些:

  1. 競(jìng)爭(zhēng)對(duì)手的分析:這個(gè)我在星球說過很多次,了解對(duì)方的商業(yè)模式,和最近的動(dòng)作;
  2. 用戶分析:用戶人群特點(diǎn),數(shù)據(jù),用戶分層是什么樣的,在我們APP里面的習(xí)慣又是如何;
  3. 業(yè)務(wù)目標(biāo)拆解:根據(jù)業(yè)務(wù)目標(biāo),那么我們產(chǎn)品要完成需要做哪些工作,如何去規(guī)劃功能,以及頁(yè)面詳細(xì)的布局和功能設(shè)計(jì);
  4. 戰(zhàn)略設(shè)計(jì):如何更好的幫助頂層戰(zhàn)略完成目標(biāo);
  5. 落地計(jì)劃:有了前面這些如何協(xié)調(diào)資源,如何推進(jìn)項(xiàng)目的落地和排期;
  6. 平時(shí)日??蚣茉O(shè)計(jì),交互原型圖設(shè)計(jì)這些都是屬于UX設(shè)計(jì)師工作范疇,因?yàn)樗麄儽萓I不同,他們接觸的信息都比較寬,更容易設(shè)計(jì)出更好的結(jié)構(gòu),同時(shí)用戶也能更好的理解;
  7. 跟蹤反饋:用戶的數(shù)據(jù)跟蹤,反饋和分析,同時(shí)還需要和開發(fā)人員進(jìn)行頁(yè)面埋點(diǎn)等工作,來(lái)保證項(xiàng)目的順利。

三、為什么UX開始被重視?

1. 產(chǎn)品需要突破

為什么UX體驗(yàn)設(shè)計(jì)突然被很多公司開始重視起來(lái),我覺得核心是:目前商業(yè)互聯(lián)網(wǎng)競(jìng)爭(zhēng)太激烈了,大家的產(chǎn)品功能都類似,交互視覺也類似,需要在這種激烈競(jìng)爭(zhēng)的情況下取得新的突破。

那么如何取得突破,除了功能和服務(wù)外,體驗(yàn)環(huán)節(jié)也應(yīng)該需要突破。

【深度解讀】3分鐘秒懂UI和UX到底有何不同

如上圖,國(guó)內(nèi)金融產(chǎn)品設(shè)計(jì),從設(shè)計(jì)還是體驗(yàn)層面很同質(zhì)化,那么在產(chǎn)品同質(zhì)化背景下,就需要在體驗(yàn)上進(jìn)行一些設(shè)計(jì)突破

2. 技術(shù)的發(fā)展

【深度解讀】3分鐘秒懂UI和UX到底有何不同

另外一個(gè)維度就是技術(shù)的發(fā)展,隨著技術(shù)的發(fā)展,技術(shù)趨勢(shì)的提高。創(chuàng)新和突破就必須快速跟上,如何讓用戶的體驗(yàn)服務(wù),和趨勢(shì)很好的結(jié)合,變的越來(lái)越重要。

【深度解讀】3分鐘秒懂UI和UX到底有何不同

傳統(tǒng)的電商買鞋體驗(yàn)是靜態(tài)圖片,但是隨著AR/VR技術(shù)的越發(fā)成熟,購(gòu)物體驗(yàn)也在發(fā)生著變化,用戶已經(jīng)不滿足于購(gòu)買商品只是看靜態(tài)圖片,也希望和實(shí)物體驗(yàn)一樣可以在手上去看任意角度。

所以毒APP這塊買鞋的體驗(yàn),就比傳統(tǒng)的要有新意的多。

【深度解讀】3分鐘秒懂UI和UX到底有何不同

比如觸摸屏技術(shù)、5G技術(shù)、人臉識(shí)別技術(shù),這些新的技術(shù)對(duì)于設(shè)計(jì)都是需要去突破,去創(chuàng)新出更多的體驗(yàn)。

【深度解讀】3分鐘秒懂UI和UX到底有何不同

5G的到來(lái)對(duì)于整個(gè)體驗(yàn)、購(gòu)物、生活中很多方面都發(fā)生了很大的影響,拿購(gòu)物來(lái)說,都可以邊看邊買。

今天你買一個(gè)東西,無(wú)需去商場(chǎng),只需要在直播間和賣家當(dāng)面溝通就可以解決你的疑惑,同時(shí)還可以有折扣。直播帶貨這種新的模式產(chǎn)生,對(duì)于體驗(yàn)都是全新的。

3. 智能手機(jī)硬件的體驗(yàn)差異

【深度解讀】3分鐘秒懂UI和UX到底有何不同

隨著數(shù)字時(shí)代來(lái)了,各種智能設(shè)備更新迭代,蘋果和安卓手機(jī),還有手表等,這些產(chǎn)品之間的差異性各不系統(tǒng)。

比如我之前一直是蘋果的深度用戶,從iPhone4一直到現(xiàn)在,前段時(shí)間買了一個(gè)華為,就嚴(yán)重不習(xí)慣。我常用的筆記軟件不支持安卓同步,還有支付等等都不方便。

這樣的體驗(yàn),必定需要設(shè)計(jì)師去解決。

以上原因,或許是現(xiàn)在很多大公司開始重視起體驗(yàn)思維一個(gè)縮影,其實(shí)UX一詞存在很久,已經(jīng)融入我們生活方方面面。那么大家肯定會(huì)疑惑到底UX和UI,普通設(shè)計(jì)師該如何去定位自己發(fā)展方向。

四、如果想做UX該怎么準(zhǔn)備?

UX設(shè)計(jì)師未來(lái)一定是必然的,阿里幾年前已經(jīng)把設(shè)計(jì)師title改為UX用戶體驗(yàn)設(shè)計(jì)師,原因就是設(shè)計(jì)師最終的目標(biāo)是需要將企業(yè)的商業(yè)需求和用戶需求聯(lián)系起來(lái)。

如果用戶是來(lái)我們平臺(tái)買東西,那么我們就需要把貨、內(nèi)容和用戶聯(lián)系起來(lái)。設(shè)計(jì)師需要保證我們銷售的貨用戶更容易看見,同時(shí)購(gòu)物體驗(yàn)是讓人愉快的。

因?yàn)閁X設(shè)計(jì)師,是一個(gè)非常的復(fù)雜的角色:它有一部分是設(shè)計(jì)師職責(zé),又有一部分是戰(zhàn)略制定者;同時(shí)也一部分是營(yíng)銷人員,同時(shí)還需要具備數(shù)據(jù)研究員的能力。

同時(shí)還是半個(gè)用研,了解用戶以及用戶的問題。

當(dāng)然,雖然聽起來(lái)很難,但是相對(duì)于做UI會(huì)比較有意思一些,因?yàn)樗粌H僅是設(shè)計(jì),不僅僅是視覺。它最終還是在解決用戶的問題。如果你想轉(zhuǎn)型,有幾方面能力是可以鍛煉起來(lái)的。

1. 培養(yǎng)自己解決問題的能力

因?yàn)閁X設(shè)計(jì)師每天都是解決產(chǎn)品的各種體驗(yàn)問題,沒有局限。如果你在生活中,或者做項(xiàng)目時(shí)候是一個(gè)問題解決者,有這方面能力,那么非常具備轉(zhuǎn)型。

這個(gè)問題可以是設(shè)計(jì)問題、視覺問題或者交互問題,雖然問題本身不同,但是能力都是通用的。

2. 提升看問題的視角

UX和UI設(shè)計(jì)師很大差別是UX需要提高視角,看到商業(yè)的全貌,就和打仗一樣,必須了解整個(gè)作戰(zhàn)地圖,才能更好的打仗。

但是UI不同,我們解決一個(gè)局部問題就行。所以如果你想成為UX,從現(xiàn)在項(xiàng)目開始,每個(gè)項(xiàng)目多去了解商業(yè)背后的原因。

你做的設(shè)計(jì)如何呈現(xiàn)給用戶的、運(yùn)營(yíng)如何我推廣的,用戶的購(gòu)買路徑到哪一步折損,已經(jīng)整個(gè)鏈路是不是很順暢,這些都有助于你抬高視角,我們?cè)O(shè)計(jì)師千萬(wàn)不能只埋頭干活,忘記了抬高視角。

3. 學(xué)會(huì)洞察用戶和數(shù)據(jù)

如果要做好UX還必須很好的洞察用戶行為,以及觀察數(shù)據(jù),通過在數(shù)據(jù)中發(fā)現(xiàn)一些問題,你必須去研究用戶在使用你們產(chǎn)品的心理感受,需要有很好的同理心。

當(dāng)然平時(shí)也需要多去聽聽真實(shí)用戶的聲音,用戶聲音從哪里來(lái)?

微博留言、app商店評(píng)論等等都可以看見用戶的聲音,根據(jù)用戶的反饋去做設(shè)計(jì)。

如果你更喜歡一些實(shí)用的東西,平時(shí)設(shè)計(jì)上也比較認(rèn)可好用比好看更重要,那么你可能適合UX,因?yàn)閁X平時(shí)的工作看起來(lái)甚至有些枯燥和無(wú)聊,沒有做視覺那樣容易賞心悅目。

五、最后

最后,UI設(shè)計(jì)和UX設(shè)計(jì)有一些相似之處,但一個(gè)更偏向分析性解決問題的能力,另一個(gè)是更具有視覺和美學(xué)驅(qū)動(dòng)力。

希望這篇文章能幫正在研究這兩個(gè)區(qū)域,想弄清楚概念的你們有幫助。

其實(shí)一個(gè)設(shè)計(jì)師的工作永遠(yuǎn)不會(huì)真正完成,因?yàn)槊總€(gè)項(xiàng)目有它自己的生命周期,人們每天在使用它和它互動(dòng),所以隨時(shí)都有體驗(yàn)的問題可以優(yōu)化,我們作為設(shè)計(jì)師,一直在路上,共勉!

#專欄作家#

Sky,微信公眾號(hào):我們的設(shè)計(jì)日記(ID:helloskys),人人都是產(chǎn)品經(jīng)理專欄作家。原支付寶體驗(yàn)設(shè)計(jì)專家,阿里巴巴天貓?jiān)O(shè)計(jì)專家;10年知名互聯(lián)網(wǎng)公司設(shè)計(jì)經(jīng)驗(yàn),對(duì)于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計(jì)規(guī)范、運(yùn)營(yíng)規(guī)范、大促等有豐富實(shí)戰(zhàn)經(jīng)驗(yàn)。

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

題圖來(lái)自?Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. ux的工作和產(chǎn)品的是不是有點(diǎn)重疊

    來(lái)自湖南 回復(fù)
  2. 簡(jiǎn)單明了,喜歡這篇文章

    回復(fù)
  3. 這篇真的很棒!

    來(lái)自山東 回復(fù)