UI交互設(shè)計是什么意思？詳解UI交互設(shè)計的內(nèi)容、提升方法及常用工具

2023-08-27 09:27:54

UI交互設(shè)計是什么意思

一、UI交互設(shè)計是什么意思

UI交互設(shè)計（英文：Conversion Rate，英文縮寫：CR）是指把交互設(shè)計的理念體現(xiàn)在UI界面上，即兼顧UI與交互兩個方面進行設(shè)計，將交互的理念體現(xiàn)在UI界面上。UI是用戶界面，是英文User和interface的縮寫。從字面上看是用戶與界面2個組成部分，但實際上還包括用戶與界面之間的交互關(guān)系。

二、UI交互設(shè)計的內(nèi)容

從設(shè)計重心方面來看，UI設(shè)計的重心是色彩和視覺，以界面美觀設(shè)計為主，主要考慮產(chǎn)品看起來怎么樣。而交互設(shè)計則是以用戶為中心進行人機互動部分的設(shè)計，主要考慮產(chǎn)品用起來怎么樣。UI交互設(shè)計包含了用戶研究、交互設(shè)計、界面設(shè)計三個方面。

1、用戶研究

用戶研究包含兩個方面：

(1)、可用性工程學(xué)（usability Engineering），研究如何提高產(chǎn)品的可用性，使得系統(tǒng)的設(shè)計更容易被人使用、學(xué)習(xí)和記憶；

(2)、通過可用性工程學(xué)研究，發(fā)掘用戶的潛在需求，為技術(shù)創(chuàng)新提供另外一條思路和方法。

用戶研究是一個跨學(xué)科的專業(yè)，涉及可用性工程學(xué)、人類功效學(xué)、心理學(xué)、市場研究學(xué)、教育學(xué)、設(shè)計學(xué)等等學(xué)科。用戶研究技術(shù)是站在人文學(xué)科的角度來研究產(chǎn)品，站在用戶的角度介入到產(chǎn)品的開發(fā)和設(shè)計中。

用戶研究通過對于用戶的工作環(huán)境、產(chǎn)品的使用習(xí)慣等研究，使得在產(chǎn)品開發(fā)的前期能夠把用戶對于產(chǎn)品功能的期望、對設(shè)計和外觀方面的要求融入到產(chǎn)品的開發(fā)過程中去，從而幫助企業(yè)完善產(chǎn)品設(shè)計或者探索一個新產(chǎn)品概念。

他是得到用戶需求和反饋的途徑，也是檢驗界面與交互設(shè)計是否合理的重要標(biāo)準(zhǔn)。

2、交互設(shè)計

這部分指人與機之間的交互工程，在過去交互設(shè)計也由程序員來做，其實程序員擅長編碼，而不善于與最終用戶交互。所以，很多的軟件雖然功能比較齊全，但是交互方面設(shè)計很粗糙，繁瑣難用，學(xué)習(xí)困難。使用這樣的軟件后，不是使人聰明與進步而是讓人感到愚弄與羞辱。許多人因為不能操作電腦軟件而下崗失業(yè)，這樣的交互使電腦成為讓人恐懼的科技怪獸。于是把交互設(shè)計從程序員的工作中分離出來單獨成為一個學(xué)科，也就是人機交互設(shè)計。他的目的在于加強軟件的易用、易學(xué)、易理解，使計算機真正成為方便地為人類服務(wù)的工具。

3、界面設(shè)計

在漫長的軟件發(fā)展中，界面設(shè)計工作一直沒有被重視起來。做界面設(shè)計的人也被貶義的稱為"美工"。其實軟件界面設(shè)計就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計一樣，是產(chǎn)品的重要買點。一個友好美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創(chuàng)造賣點。界面設(shè)計不是單純的美術(shù)繪畫，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶而設(shè)計，是純粹的科學(xué)性的藝術(shù)設(shè)計。檢驗一個界面的標(biāo)準(zhǔn)即不是某個項目開發(fā)組領(lǐng)導(dǎo)的意見也不是項目成員投票的結(jié)果，而是最終用戶的感受。所以界面設(shè)計要和用戶研究緊密結(jié)合，是一個不斷為最終用戶設(shè)計滿意視覺效果的過程。

三、提升UI交互設(shè)計的方法

1、角色扮演和互動：找兩個人來，一個扮演界面，另外一個記錄筆記。為扮演界面的人手持一個瀏覽器窗口紙板，并且同時通過投影儀投射出界面。一個人扮演用戶，同"界面"進行對話，一個人闡述并解釋用戶的目標(biāo)，而"界面"則僅限于標(biāo)簽、菜單和其他的UI元素來為你的操作進行"反饋"。

2、勾勒出敘事線索：記錄者記錄每一個步驟的細節(jié)，包括任務(wù)和情緒。完成這個步驟，可以借助User ScenarIOS文檔來完成。

3、簡化步驟：有時候用戶要達成目標(biāo)需要經(jīng)歷許多步驟（比如買票），然而在制作原型的時候，就應(yīng)該將一個復(fù)雜的目標(biāo)肢解成為一系列簡單的步驟（比如詢問目的地，然后設(shè)定行程）。

4、控制用戶選擇：這可能是最艱難的一步，但是必須盡量減少用戶的操作。時刻審問自己，這個步驟當(dāng)中的每一個選項是不是非要不可的，如果不是，將它分離到其他的非關(guān)鍵位置。

5、注意微時刻：Micromoment，這是一個新的合成詞，指的是用戶在與界面進行交互的關(guān)鍵時刻，這時候用戶可能會猶豫、激進或者突然停止，暫時將其翻譯為微時刻?；叵虢巧缪莸沫h(huán)節(jié)，會有那些猶豫、忐忑的時刻。為了讓交互更清晰，應(yīng)該充分運用每一個細節(jié)上的文案選取，結(jié)合可靠的UI模式，引導(dǎo)用戶在這些微時刻作出對的選擇。

四、UI交互設(shè)計常用工具

在UI交互設(shè)計中，首先需要使用PS等工具完成保證視覺效果的設(shè)計稿，再使用交互工具為設(shè)計稿添加交互效果，轉(zhuǎn)為高保真原型。

1、Adobe Photoshop

Adobe Photoshop是一種優(yōu)質(zhì)的網(wǎng)頁設(shè)計工具。它有很多選項來創(chuàng)建和編輯您的Web模板。它適用于圖像，您可以為您的網(wǎng)頁設(shè)計創(chuàng)建圖形。通過無限的顏色和漸變選項，可以制作出最佳的模板設(shè)計。它為您提供了一個空白的畫布，讓您的想象力生動。您可以按照自己的方式附加圖像，移動元素，繪制框，裁剪邊緣以及編輯模板。它適用于圖層，這使您的工作非常簡單。您可以顯示/隱藏圖層以有效管理Web設(shè)計元素。

Adobe Photoshop

2、Sketch

Sketch是適用于Mac設(shè)備的網(wǎng)頁設(shè)計軟件。它是專注于創(chuàng)建Web模板和設(shè)計的專業(yè)工具。它適用于矢量圖像，因此您將獲得最佳，最高分辨率的結(jié)果。工具欄和選項非常簡單。Sketch提供了創(chuàng)建和管理Web設(shè)計項目的完全靈活性。它具有鏡像功能，允許在多種設(shè)備（如手機或平板電腦）上測試您的網(wǎng)頁設(shè)計模板，可以100％確定您的網(wǎng)頁設(shè)計將如何在不同的屏幕尺寸上顯示。

2、Figma

Figma是一個多用戶網(wǎng)頁設(shè)計軟件。它允許您與設(shè)計團隊聯(lián)系以使用相同的Web模板。它是與客戶共享項目并在模板設(shè)計上進行實時更改的智能工具。Figma將網(wǎng)頁設(shè)計提升到一個全新的水平，它的編輯面板中包含字體，顏色和其他設(shè)置。用于創(chuàng)建圖標(biāo)或完整的Web模板時，工具和選項非常棒。

3、Adobe Illustrator

Adobe Illustrator 提供了一個完美的像素級設(shè)計環(huán)境，您可以在其中創(chuàng)建靈活且流暢的 Web 元素。它為您提供了創(chuàng)建清爽利落的 Web 布局所需的一切，包括矢量圖形、響應(yīng)式媒體圖標(biāo)、可伸縮組件、CSS 生成、SVG 導(dǎo)出、線框以及可重復(fù)使用的符號。

Adobe Illustrator

4、Adobe XD

adobe家打造的一款集頁面設(shè)計和交互原型為一體的設(shè)計工具，支持多人在線實時協(xié)作功能。另外在兼容性上優(yōu)勢最大，能跟全家桶產(chǎn)品進行聯(lián)動；但是在資源和功能這兩方面相對于前面兩款就比較弱勢了。

5、axure 原型工具

Axure是交互設(shè)計師最核心的工具，Web端產(chǎn)品使用較多。通過它輸出的"原型"（交互稿）是交互設(shè)計師與產(chǎn)品經(jīng)理、前端開發(fā)、后端開發(fā)、測試等人員溝通的最好媒介。"原型"是產(chǎn)品開發(fā)前期的重要設(shè)計內(nèi)容，它直觀的體現(xiàn)了產(chǎn)品的框架結(jié)構(gòu)、界面內(nèi)容以及功能模塊之間的邏輯關(guān)系，且不斷確認(rèn)產(chǎn)品中的模糊部分，為后續(xù)的視覺設(shè)計，產(chǎn)品開發(fā)提供了準(zhǔn)確的產(chǎn)品信息。主要功能除了繪制"原型設(shè)計圖"，還包括"操作流程圖"、"信息架構(gòu)圖"等其它內(nèi)容。

6、Xmind or Mindmanager思維導(dǎo)圖工具

XMind/mindmanager是非常實用的思維導(dǎo)圖軟件，簡單易用，功能強大。在進行產(chǎn)品規(guī)劃，頭腦風(fēng)暴，任務(wù)分析等工作時，都需要借助XMind來完成。XMind的文件可以導(dǎo)出成Word，PPT，PDF，圖片等格式，方便將內(nèi)容與其他人共享。

7、Viso

viso這款工具主要是用于繪制流程圖，操作簡單易懂，小伙伴們上手練練就能懂。另外就是ProcessOn，這是一個在線作圖工具的聚合平臺，它可以在線畫流程圖、思維導(dǎo)圖、UI原型圖、UML、網(wǎng)絡(luò)拓?fù)鋱D、組織結(jié)構(gòu)圖等等，無需擔(dān)心下載和更新的問題，不管Mac還是Windows，一個瀏覽器就可以隨時隨地的發(fā)揮創(chuàng)意，規(guī)劃工作。

8、MockingBot 墨刀

墨刀是一款在線原型設(shè)計與協(xié)同工具，以前只有網(wǎng)頁版，現(xiàn)在也有客戶端，但都需要聯(lián)網(wǎng)使用。有點類似于Figma，國產(chǎn)中文版的一款很好的交互設(shè)計軟件。

優(yōu)點：墨刀上手難度不高，墨可以實現(xiàn)元素切換、界面跳轉(zhuǎn)，動效平滑，可以調(diào)試參數(shù)；支持win和mac，有桌面版，支持移動端預(yù)覽（iOS&AndROId），有Sketch插件等。

不足：也是無法實現(xiàn)條件判斷等復(fù)雜交互邏輯（不過這對于很多項目來說也不一定要做出來，有時間成本和學(xué)習(xí)難度）。

9、Mockplus

Mockplus（摹客）是一款簡潔快速的原型圖設(shè)計工具。適合制作低保真原型，界面簡單，能夠快速上手。

優(yōu)點：界面簡潔，快速上手，有交互組件可用，可生成單獨的壓縮包，打開即可演示。摩客還有一個原型托管平臺，也挺方便，不過要收費~

缺點：無法實現(xiàn)復(fù)雜邏輯如條件判斷等情況的交互，市面上可用的組件較少；適合做手機的簡單原型，不適合做網(wǎng)頁的原型。2年前用過，不知道現(xiàn)在這么樣，平臺收費，開發(fā)運維不易，支持國產(chǎn)。

五、UI交互設(shè)計、UI設(shè)計、交互設(shè)計的區(qū)別

1、概念區(qū)別

(1)、UI設(shè)計

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

(2)、交互設(shè)計

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

2、工作內(nèi)容的區(qū)別

UI設(shè)計與交互設(shè)計的關(guān)注點、產(chǎn)出、及技能的不同。

交互設(shè)計和UI設(shè)計的區(qū)別