2026-1-10 清陽
什么是UI、 UX？或者說它們之間有什么不同？說句實(shí)話早幾年我連UI都不是很明白，說出來都有一點(diǎn)不好意思了……
Ok…讓我們用圖片的形式來看一下UI與UX的不同之處吧。
圖一：倒過來的蕃茄醬瓶設(shè)計(jì)，考慮到番茄醬快用完時(shí)很難倒出來的使用情境
圖二：從定義來解釋UI與 UX之間的差異，兩者定義有很大的不同。
UI定義：UI是網(wǎng)站頁面是如何物理布局。一個(gè)UI設(shè)計(jì)師會(huì)和你談東西應(yīng)該放哪里，用什么顏色。UI是負(fù)責(zé)網(wǎng)站的創(chuàng)意和視覺作品。
UX定義：UX專注于網(wǎng)站，它的行為與互動(dòng)，比如一個(gè)盒子滑出，以及人們?nèi)绾闻c它進(jìn)行交互，比如他們會(huì)點(diǎn)擊或輸入進(jìn)行交互。UX處理的內(nèi)容和網(wǎng)站地圖的結(jié)構(gòu)。
圖三：從專業(yè)分工的角度來說明差別，可以看出負(fù)責(zé)的部份有哪些相同，哪些不同。
圖四：這張圖比較復(fù)雜，但是基本上還是看得出差異。相同之處很明顯，都有大胡子，但是裝扮上就有很大的區(qū)別。為什么？你們可以根據(jù)定義思考一下……
下面的這張圖跟上面的那張是同一張,只是風(fēng)格不一樣,從設(shè)計(jì)師的角色轉(zhuǎn)變成很酷的時(shí)尚年輕人。
圖五：從工作職責(zé)來解釋差異， UX的范圍很廣，很少人可以精通全部，可以說幾乎沒有。
圖六：這張圖的表述可能并不全面或清晰，但可以做為一個(gè)參考。
圖七：UI、 UX基本的工作項(xiàng)目來區(qū)分的話，UI沒有品牌推廣這個(gè)職位。
圖八：從產(chǎn)品的角度看UI與UX，UI是產(chǎn)品的一部份，UX是使用產(chǎn)品的體驗(yàn)。
圖九：UI Design:功能；Usabilitydesign:動(dòng)作；User Experiene Design:情感；
圖十：UI是用來取內(nèi)容的工具，使用者使用UI吃完東西（內(nèi)容）的體驗(yàn)是UX。
總結(jié)：UI設(shè)計(jì)是展現(xiàn)視覺層面的（界面），而UX是使用過程中的情感（互動(dòng)與體驗(yàn)）。UX設(shè)計(jì)師不僅關(guān)注界面的設(shè)計(jì)，更關(guān)心所有會(huì)影響使用者體驗(yàn)的一切。如架構(gòu)、互動(dòng)、內(nèi)容與及使用者對象、需求、價(jià)值觀。
有人會(huì)說設(shè)計(jì)UI不就是在設(shè)計(jì)UX嗎？如果用戶的體驗(yàn)只注重視覺界面的美觀，或許可以這么說。但是使用者手上拿的不是UI，而是產(chǎn)品，UI只是產(chǎn)品設(shè)計(jì)的一部份，體驗(yàn)不僅受到產(chǎn)品的影響，還會(huì)受到使用產(chǎn)品體驗(yàn)過程中的情境及使用者對品牌印像等等其它體驗(yàn)相關(guān)的事影響。
轉(zhuǎn)載：微信公眾號(hào)UI設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wnxcall.com