三者關(guān)系圖：

從上圖來(lái)看，似乎UI交互設(shè)計(jì)還真是UI設(shè)計(jì)和交互設(shè)計(jì)的結(jié)合。不過(guò)具體區(qū)別如何，還是讓我們來(lái)看看三者的對(duì)比吧！

1. UI交互設(shè)計(jì)vs UI設(shè)計(jì)vs交互設(shè)計(jì)對(duì)比之概念

UI設(shè)計(jì)

UI設(shè)計(jì)或稱(chēng)界面設(shè)計(jì)（英文UserInterface Design, 縮寫(xiě)為UID），它是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀(guān)的整體設(shè)計(jì)。UI設(shè)計(jì)主要分為實(shí)體UI和虛擬UI兩種，互聯(lián)網(wǎng)行業(yè)常見(jiàn)的UI設(shè)計(jì)是虛擬UI，UI即User Interface(用戶(hù)界面)的簡(jiǎn)稱(chēng)。

交互設(shè)計(jì)

交互設(shè)計(jì)（英文Interaction Design, 縮寫(xiě)IXD），它主要指的是兩個(gè)或多個(gè)個(gè)體之間交流和互動(dòng)方式的設(shè)計(jì)，以達(dá)成某種設(shè)計(jì)產(chǎn)品的目的。交互設(shè)計(jì)的目標(biāo)一般從“可用性”和”用戶(hù)體驗(yàn)“兩個(gè)層面出發(fā)，以幫助解決用戶(hù)需求。

UI交互設(shè)計(jì)

其實(shí)小編從多方查找資料發(fā)現(xiàn)，UI交互設(shè)計(jì)這個(gè)術(shù)語(yǔ)是非常模糊的。在小編不斷對(duì)比整理下，終于得出了它的基本概念。從廣義上來(lái)說(shuō)，UI設(shè)計(jì)是可以包含交互設(shè)計(jì)的，在這樣的情況下。簡(jiǎn)單來(lái)說(shuō)，把交互設(shè)計(jì)的理念體現(xiàn)在UI界面上，就是UI交互設(shè)計(jì)。

從設(shè)計(jì)重心方面來(lái)看，UI設(shè)計(jì)的重心是色彩和視覺(jué)，以界面美觀(guān)設(shè)計(jì)為主，主要考慮產(chǎn)品看起來(lái)怎么樣。而交互設(shè)計(jì)則是以用戶(hù)為中心進(jìn)行人機(jī)互動(dòng)部分的設(shè)計(jì)，主要考慮產(chǎn)品用起來(lái)怎么樣。而UI交互設(shè)計(jì)則需要兼顧UI與交互兩個(gè)方面進(jìn)行設(shè)計(jì)，將交互的理念體現(xiàn)在UI界面上。

2. UI交互設(shè)計(jì)vs UI設(shè)計(jì)vs交互設(shè)計(jì)對(duì)比之工作人群

UI設(shè)計(jì)相關(guān)人群：

UI設(shè)計(jì)師，界面設(shè)計(jì)師，網(wǎng)頁(yè)設(shè)計(jì)師。

交互設(shè)計(jì)相關(guān)人群：

UX設(shè)計(jì)師，交互設(shè)計(jì)師，UE設(shè)計(jì)師，產(chǎn)品經(jīng)理，網(wǎng)頁(yè)設(shè)計(jì)師，產(chǎn)品經(jīng)理。

UI交互設(shè)計(jì)相關(guān)人群:

UI設(shè)計(jì)師，界面設(shè)計(jì)師，交互設(shè)計(jì)師，網(wǎng)頁(yè)設(shè)計(jì)師，UX設(shè)計(jì)師，產(chǎn)品經(jīng)理。

從相關(guān)的工作人群來(lái)看，不同的設(shè)計(jì)工作類(lèi)型，涉及的人群也盡不相同。UI設(shè)計(jì)的相關(guān)人群主要是工作中包涵該部分的人，除了專(zhuān)業(yè)的UI設(shè)計(jì)師，界面設(shè)計(jì)師，網(wǎng)頁(yè)設(shè)計(jì)師等也是它的工作人群。而交互設(shè)計(jì)涉及的人群更廣，交互設(shè)計(jì)師、UX設(shè)計(jì)師自然不在話(huà)下。另外，需要表達(dá)設(shè)計(jì)想法的產(chǎn)品經(jīng)理運(yùn)營(yíng)人員也是其中一員。最后，UI交互設(shè)計(jì)所涉及的范圍比兩者稍廣，包含了UI設(shè)計(jì)人群和大部分交互設(shè)計(jì)人群。

3. UI交互設(shè)計(jì)vs UI設(shè)計(jì)vs交互設(shè)計(jì)對(duì)比之例子

UI設(shè)計(jì)案例：

如上圖所示，UI設(shè)計(jì)主要在于通過(guò)對(duì)用戶(hù)界面的色彩，布局，文字排版等方面進(jìn)行設(shè)計(jì)，以保證整體界面的美觀(guān)。

UI交互設(shè)計(jì)案例：

小編這邊選取了一個(gè)簡(jiǎn)單的UI交互作為案例，這個(gè)交互的效果是通過(guò)點(diǎn)擊UI界面中按鈕出現(xiàn)不同的圖片。這種將交互體現(xiàn)在UI界面上的設(shè)計(jì)，就是UI交互設(shè)計(jì)。UI交互設(shè)計(jì)包含了各式各樣的交互效果，如下列刷新、進(jìn)度條、圖片輪播等，小編就不再一一例舉了。

交互設(shè)計(jì)案例：

而這種以人機(jī)互動(dòng)為目的，注重用戶(hù)體驗(yàn)的設(shè)計(jì)則稱(chēng)為交互設(shè)計(jì)。

從以上的案例不難看出，UI設(shè)計(jì)主要以界面美觀(guān)為主，以靜態(tài)的方式呈現(xiàn)居多（也有以動(dòng)圖動(dòng)畫(huà)形進(jìn)行呈現(xiàn)）。交互方式是靜態(tài)的。UI交互設(shè)計(jì)是在UI的基礎(chǔ)上進(jìn)行交互設(shè)計(jì)，以偏動(dòng)態(tài)的形式存在。交互設(shè)計(jì)則以用戶(hù)體驗(yàn)為主，以動(dòng)態(tài)的形式存在。

4. UI交互設(shè)計(jì)vs UI設(shè)計(jì)vs交互設(shè)計(jì)對(duì)比之工具

UI設(shè)計(jì)工具：

PS（Photoshop）：適用于界面設(shè)計(jì)，圖標(biāo)設(shè)計(jì)，手繪等。

AI （Illustration）：適合創(chuàng)建徽標(biāo)、圖標(biāo)、草圖、排版和其他矢量圖。

Sketch：適合圖標(biāo)、界面設(shè)計(jì)，支持多文件分層，切片等插件。

交互設(shè)計(jì)工具

Axure：老牌原型設(shè)計(jì)工具，適用于制作中高保真交互原型。

Mockplus：適合創(chuàng)建快速交互原型，簡(jiǎn)單高效，同時(shí)支持團(tuán)隊(duì)協(xié)作。

摹客：適合一鍵切圖，生成智能標(biāo)注，生成圖層代碼，交互演示，設(shè)計(jì)協(xié)作。

UI交互設(shè)計(jì)工具：

PS，AI，Sketch，Mockplus、摹客原型設(shè)計(jì)工具。

從使用的工具來(lái)看，UI設(shè)計(jì)主要以圖形、圖標(biāo)、界面設(shè)計(jì)工具為主；交互設(shè)計(jì)主要以原型設(shè)計(jì)，交互設(shè)計(jì)工具為主；而UI交互設(shè)計(jì)則囊括了前兩者使用的所有工具。

看完本文后，小編相信大家對(duì)UI交互設(shè)計(jì)，UI設(shè)計(jì)，交互設(shè)計(jì)三者的關(guān)系已經(jīng)有所了解了。簡(jiǎn)單來(lái)說(shuō)：UI是為了好看，交互設(shè)計(jì)是為了好用，UI交互設(shè)計(jì)就是好看又好用。如果想從事UI交互設(shè)計(jì)相關(guān)的工作，小編建議不妨在了解它們的基本定義后，開(kāi)始學(xué)習(xí)一些技能知識(shí)，著手開(kāi)始練習(xí)設(shè)計(jì)。這樣可以幫助大家在UI交互設(shè)計(jì)的路上快速成長(zhǎng)！

原文地址：慕客

作者：慕客產(chǎn)品協(xié)作設(shè)計(jì)

 轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》UI設(shè)計(jì)、交互設(shè)計(jì)、UI交互設(shè)計(jì)的聯(lián)系和區(qū)別是什么？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.dzxscac.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司