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

2023-08-27 09:27:54

UI交互設計是什么意思

一、UI交互設計是什么意思

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

二、UI交互設計的內容

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

1、用戶研究

用戶研究包含兩個方面：

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

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

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

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

他是得到用戶需求和反饋的途徑，也是檢驗界面與交互設計是否合理的重要標準。

2、交互設計

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

3、界面設計

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

三、提升UI交互設計的方法

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

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

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

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

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

四、UI交互設計常用工具

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

1、Adobe Photoshop

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

Adobe Photoshop

2、Sketch

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

2、Figma

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

3、Adobe Illustrator

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

Adobe Illustrator

4、Adobe XD

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

5、axure 原型工具

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

6、Xmind or Mindmanager思維導圖工具

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

7、Viso

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

8、MockingBot 墨刀

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

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

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

9、Mockplus

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

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

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

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

1、概念區(qū)別

(1)、UI設計

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

(2)、交互設計

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

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

UI設計與交互設計的關注點、產出、及技能的不同。

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