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

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

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

今天我們主要解決這兩個問題：

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

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

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

1. UI 設(shè)計師

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

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

在移動端，從事移動設(shè)計的稱呼為GUI設(shè)計師。

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

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

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

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

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

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

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

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

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

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

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

2. UE 設(shè)計師

UX ，英文為 User Experience ,指的是用戶體驗。一般而言，國內(nèi) UX 設(shè)計師，也稱為交互設(shè)計師或 UE 設(shè)計師（而國外的 UX 設(shè)計師指的是用戶體驗設(shè)計師，交互設(shè)計師指的是動效設(shè)計師）。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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