UI知識(shí)，UI設(shè)計(jì)和交互的區(qū)別(4)

通過(guò)本篇文章，讓你秒懂UI和UX到底有什么不同，如果你身處小公司，那么你肯定深有體會(huì)，UI設(shè)計(jì)師？UX（UE）設(shè)計(jì)師？有區(qū)別嗎？

肯定有，但是為你兩份工作都得做�。�！更甚的還要懂代碼，而在這種環(huán)境熏染下，有些小白根本不知道兩者之間有什么區(qū)別？

今天我們主要解決這兩個(gè)問(wèn)題：

UI和UX兩者的區(qū)別

UI和UX工作責(zé)職的區(qū)分

UI和UX兩者的區(qū)別

1. UI 設(shè)計(jì)師

UI，指的是用戶(hù)界面，也就是人與機(jī)器互動(dòng)的界面。同時(shí)又有GUI和WUI之分，不過(guò)一般的話統(tǒng)稱(chēng)是UI設(shè)計(jì)師。

在PC端從事網(wǎng)頁(yè)設(shè)計(jì)，我們稱(chēng)呼WUI設(shè)計(jì)師或者網(wǎng)頁(yè)設(shè)計(jì)師。

在移動(dòng)端，從事移動(dòng)設(shè)計(jì)的稱(chēng)呼為GUI設(shè)計(jì)師。

而UI可以理解為UX的一個(gè)分支，不同于UX 設(shè)計(jì)師需要關(guān)注產(chǎn)品的整體感覺(jué)，UI 設(shè)計(jì)師更關(guān)注產(chǎn)品以怎樣的界面呈現(xiàn)。

其實(shí)互聯(lián)網(wǎng)領(lǐng)域中，UI 和 UX 設(shè)計(jì)師的界限相當(dāng)模糊，在很多創(chuàng)業(yè)公司，這兩個(gè)設(shè)計(jì)角色是合二為一的。這個(gè)就是為什么很多中小型的公司為什么要求UI設(shè)計(jì)會(huì)交互，或者交互又要懂UI的原因。

國(guó)內(nèi)而言，目前一般把屏幕上顯示的圖形用戶(hù)界面（GUI ：Graphic User Interface）都簡(jiǎn)單稱(chēng)為UI。

我們經(jīng)常聽(tīng)到的UI設(shè)計(jì)師，其實(shí)指的是GUI設(shè)計(jì)師，也就是圖形界面視覺(jué)設(shè)計(jì)師，負(fù)責(zé)產(chǎn)品或網(wǎng)站的圖形、圖標(biāo)、色彩、視覺(jué)風(fēng)格等，決定營(yíng)造出什么樣的視覺(jué)體驗(yàn)。

從視覺(jué)層面把控產(chǎn)品界面設(shè)計(jì)，確保UI稿在視覺(jué)上清晰的傳達(dá)UX設(shè)計(jì)師的交互設(shè)計(jì)稿，也就是高保真視覺(jué)稿。

舉個(gè)栗子，在設(shè)計(jì)一個(gè)數(shù)據(jù)分析界面時(shí)， UI 設(shè)計(jì)師可以決定使用滑塊還是控制旋鈕，通過(guò)這樣的控件來(lái)闡述圖表帶來(lái)的直觀感受。

此外 UI 設(shè)計(jì)師還負(fù)責(zé)制定視覺(jué)設(shè)計(jì)規(guī)范，確保產(chǎn)品設(shè)計(jì)的一致性；在規(guī)范中，明確一些UI 控件/組件的使用行為，比如確認(rèn)誤或取消提示。

熟悉不同分辨率的多端產(chǎn)品，諸如桌面端，Web 端和手機(jī)設(shè)備；能夠完成高質(zhì)量的視覺(jué)設(shè)計(jì)稿——從概念設(shè)計(jì)確定設(shè)計(jì)風(fēng)格到詳細(xì)設(shè)計(jì)。

設(shè)計(jì)內(nèi)容包括圖標(biāo)、圖形界面等；執(zhí)行統(tǒng)一的設(shè)計(jì)語(yǔ)言，撰寫(xiě)并完善網(wǎng)站的設(shè)計(jì)規(guī)范，為產(chǎn)品注入美和生活氣息。” 這可能就是UI設(shè)計(jì)師日常事項(xiàng)啦。

設(shè)計(jì)產(chǎn)出物 ：視覺(jué)設(shè)計(jì)稿，視覺(jué)設(shè)計(jì)標(biāo)注規(guī)范 ，視覺(jué)設(shè)計(jì)規(guī)范文檔，視覺(jué)切圖

用的比較多的工具：Photoshop，Sketch，Illustrator，F(xiàn)ireworks，markman（視覺(jué)標(biāo)注軟件），cutterman。

2. UE 設(shè)計(jì)師

UX ，英文為 User Experience ,指的是用戶(hù)體驗(yàn)。一般而言，國(guó)內(nèi) UX 設(shè)計(jì)師，也稱(chēng)為交互設(shè)計(jì)師或 UE 設(shè)計(jì)師（而國(guó)外的 UX 設(shè)計(jì)師指的是用戶(hù)體驗(yàn)設(shè)計(jì)師，交互設(shè)計(jì)師指的是動(dòng)效設(shè)計(jì)師）。

UX 設(shè)計(jì)師主要關(guān)注用戶(hù)對(duì)產(chǎn)品的體驗(yàn)感受，確保產(chǎn)品邏輯的流程可以跑得通，甚至跑得順、跑得精彩。

正如一千個(gè)人眼里有一千個(gè)哈姆雷特，一個(gè)設(shè)計(jì)問(wèn)題往往也沒(méi)有唯一解。UX 設(shè)計(jì)師會(huì)深入場(chǎng)景，探索多種不同的解決方案，這種深入思考通常能產(chǎn)生創(chuàng)新方案。

UX 設(shè)計(jì)師們通過(guò)頭腦風(fēng)暴、角色扮演、故事版等設(shè)計(jì)方法探索設(shè)計(jì)機(jī)會(huì)點(diǎn)，向著創(chuàng)造出“最好的”用戶(hù)體驗(yàn)?zāi)繕?biāo)而前進(jìn)，典型案例就是為新用戶(hù)設(shè)計(jì)一套令人愉悅的登錄流程。

總的來(lái)講，UX設(shè)計(jì)師是設(shè)計(jì)人與信息產(chǎn)品的流程和關(guān)系，歸根結(jié)底都要研究人、事、物的聯(lián)系，它是一個(gè)囊括計(jì)算機(jī)工程、心理學(xué)、設(shè)計(jì)的交叉學(xué)科。

進(jìn)行利益相關(guān)者訪談、用戶(hù)訪談，挖掘用戶(hù)需求，提煉用戶(hù)任務(wù)流；完整體驗(yàn)不同產(chǎn)品，挖掘交互設(shè)計(jì)模式，設(shè)計(jì)交互模式，撰寫(xiě)交互設(shè)計(jì)稿，并最終形成交互設(shè)計(jì)規(guī)范/UIspec；跟進(jìn)視覺(jué)設(shè)計(jì)和開(kāi)發(fā)，確保產(chǎn)品正常上線” 這可能就是UX設(shè)計(jì)師日常事項(xiàng)。

設(shè)計(jì)產(chǎn)出物：流程圖，網(wǎng)站地圖，故事版，交互設(shè)計(jì)原型圖（線框圖），UIspec ，交互設(shè)計(jì)規(guī)范。

用的比較多的工具：axure，Visio，Sketch，Illustrator，F(xiàn)ireworks，InVision，PPT，Keynote，Photoshop。

2.UI和UX工作責(zé)職的區(qū)別

從專(zhuān)業(yè)分工來(lái)看，UX和UI的工作內(nèi)容有不同之處，但也有重合的部分。

UI 關(guān)注產(chǎn)品功能，UX關(guān)注用戶(hù)情感。

UI 則是布局設(shè)計(jì)，視覺(jué)設(shè)計(jì)，品牌形象。UX 職責(zé)包括用戶(hù)畫(huà)像，用戶(hù)故事，用戶(hù)調(diào)研，可用性測(cè)試。連接兩者的是線框圖。

UI 涉及人機(jī)交互、工業(yè)設(shè)計(jì)、視覺(jué)和聲音設(shè)計(jì)等。而 UX 則包含信息架構(gòu)、內(nèi)容策略在內(nèi)的更多部分，他需要從整體動(dòng)態(tài)流程上考慮產(chǎn)品是否能解決用戶(hù)的問(wèn)題。UI 屬于 UX 的一部分。

UI 設(shè)計(jì)重心則是色彩、排版等視覺(jué)方面。UX 設(shè)計(jì)以用戶(hù)為中心，關(guān)注任務(wù)流和使用場(chǎng)景。相似之處是兩人都留著大胡子。

UI 是你使用的部分，而 UX 是在你使用時(shí)的感受。

UI 設(shè)計(jì)師關(guān)注按鈕的顏色，考慮的是視覺(jué)的部分，是產(chǎn)品看起來(lái)如何。而 UX 設(shè)計(jì)師則關(guān)注按鈕放置的位置是否合適，最終出發(fā)點(diǎn)是用戶(hù)的感受 ，想要弄清楚人類(lèi)想要使用的是什么，解決用戶(hù)痛點(diǎn)。

近年來(lái)，在「設(shè)計(jì)思考流程」的趨勢(shì)下，整體性設(shè)計(jì)流程越來(lái)越受到關(guān)注，UI和UX設(shè)計(jì)師的界限變得越來(lái)越模糊，設(shè)計(jì)師不再關(guān)細(xì)節(jié)部分，而是著眼整體和全局，只為打造以用戶(hù)為中心的最佳產(chǎn)品體驗(yàn)。

這樣解釋是不是清晰多了？