139-1008-4168

首頁 > SEO建站 > 建站百科交互設計是什么意思？詳解交互設計的原則、流程及常用軟件

交互設計是什么意思？詳解交互設計的原則、流程及常用軟件

2023-08-25 09:27:14

推薦訪問：SEO百科 SEO資料建站百科營銷百科

交互設計是什么意思

一、交互設計是什么意思

交互設計（英文：Interaction Design，英文縮寫：IXD）, 是指設計人和產品或者服務互動的一種機制，以用戶體驗為基礎，使得最終用戶在使用產品時愉悅、符合自己的邏輯、有效完成并且高效的使用產品。交互設計努力去創(chuàng)造和建立的是人與產品及服務之間有意義的關系，以"在充滿社會復雜性的物質世界中嵌入信息技術"為中心。交互系統(tǒng)設計的目標可以從"可用性"和"用戶體驗"兩個層面上進行分析，關注以人為本的用戶需求。

二、交互設計的主要內容

從用戶角度來說，交互設計是一種如何讓產品易用，有效而讓人愉悅的技術，它致力于了解目標用戶和他們的期望，了解用戶在同產品交互時彼此的行為，了解"人"本身的心理和行為特點，同時，還包括了解各種有效的交互方式，并對它們進行增強和擴充。交互設計還涉及到多個學科，以及和多領域多背景人員的溝通。交互設計主要關注以下內容：

1、文案

文案（尤其是交互中使用的文本，如按鈕上的文本）應該有意義且易于理解。他們應該向用戶傳達信息，但也不能用過多的信息淹沒用戶的認知。

2、視覺表達

它涉及到用戶與之交互的圖形元素，如圖像、字體和圖標。這些和文本信息相配合，補充性地向用戶傳達信息。

3、實體以及空間

用戶通過什么實體與產品進行交互？一臺筆記本電腦，是帶鼠標還是觸摸板？還是觸屏的智能手機？用戶在什么樣的物理空間內這樣做？例如，用戶是站在擁擠的火車上，同時在智能手機上使用應用程序，還是坐在辦公室的桌面上瀏覽網站？這些都會影響用戶和產品之間的交互。

4、時間

雖然這個維度聽起來有點抽象，但它主要指的是隨時間變化的媒體（動畫，視頻，聲音）。動作和聲音在向用戶的交互提供視覺和語音的反饋方面起著至關重要的作用。同樣值得關注的是用戶花費在與產品交互上的時間：用戶能不能了解他們的進度，或是否能在一段時間之后繼續(xù)他們的交互？

5、行為

這包括產品的機制：用戶如何在網站上執(zhí)行操作？用戶如何操作產品？換句話說，它體現了前面的維度是如何定義產品交互的。它還包括"反應" —— 例如用戶對產品的情緒反應或反饋。

三、交互設計的目的

通過對產品的界面和行為進行交互設計，讓產品和它的使用者之間建立一種有機關系，從而可以有效達到使用者的目標，這就是交互設計的目的。交互設計從"目標導向"的角度解決產品設計：

1、要形成對人們希望的產品使用方式，以及人們?yōu)槭裁聪胗眠@種產品等問題的見解。

2、尊重用戶及其目標。

3、對于產品特征與使用屬性，要有一個完全的形態(tài)，而不能太簡單。

4、展望未來，要看到產品可能的樣子，它們并不必然就像當前這樣。

四、交互設計的原則

從用戶角度來說，交互設計是一種如何讓產品更易用，讓用戶更愉悅的產品設計。它致力于了解目標用戶和他們的期望，了解用戶在同產品交互時彼此的行為，了解用戶心理和行為特點，在進行交互設計中遵循尼爾森十大交互原則。

1、狀態(tài)可見原則

系統(tǒng)應該讓用戶時刻清楚當前發(fā)生了什么事情，也就是快速的讓用戶了解自己處于何種狀態(tài)、對過去發(fā)生、當前目標、以及對未來去向有所了解，一般的方法是在合適的時間給用戶適當的反饋，防止用戶使用出現錯誤。

2、環(huán)境貼切原則

網頁的一切表現和表述，應該盡可能貼近用戶所在的環(huán)境（年齡、學歷、文化、時代背景），而不要使用第二世界的語言?！秈Phone人機交互指南》里提到的隱喻與擬物化是很好的實踐。此外，還應該使用易懂和約定俗成的表達。

3、用戶可控原則

用戶常常會誤觸到某些功能，我們應該讓用戶可以方便的退出。這種情況下，我們應該把"緊急出口"按鈕做的明顯一些，而且不要在退出時彈出額外的對話框，很多用戶發(fā)送一條消息、總會有他忽然意思到自己不對的地方，這個叫做臨界效應；所以最好支持撤銷/重做功能。

4、一致性原則

對于用戶來說，同樣的文字、狀態(tài)、按鈕，都應該出發(fā)相同的事情，遵從通用的平臺慣例；也就是，同一用語、功能、操作保持一致。產品的一致性包括：

(1)、結構一致性：保持一種類似的結構，新的結構變化會讓用戶思考，規(guī)則的排列順序能減輕用戶的思考負擔；

(2)、色彩一致性：產品所使用的主要色調應該是統(tǒng)一的，而不是換一個頁面顏色就不同；

(3)、操作一致性：能讓產品更新換代時仍然讓影虎保持對原產品的認知，減小用戶的學習成本；

(4)、反饋一致性：用戶在操作按鈕或者條目的時候，點擊的反饋效果應該是一致的；

(5)、文字一致性：產品中呈現給用戶閱讀的文字大小、樣式、顏色、布局都應該是一致的；

5、防錯原則

比一個優(yōu)秀錯誤提醒彈框更好的設計方式，是在這個錯誤發(fā)生之前就避免它?？梢詭椭脩襞懦恍┤菀壮鲥e的情況，活在用戶提交之前給他一個確認的選項。在此，特別要注意再用戶操作具有毀滅性效果的功能時要有提示，防止用戶犯不可挽回的錯誤。

6、易取原則

通過把組件、按鈕及選項可見化，來降低用戶的記憶負荷。用戶不需要記住各個對話框中的信息。軟件的使用指南應該是可見的，且再合適的時候可以再次查看。

7、靈活高效原則

有經驗的用戶通常可以在人機交互的過程中迅速掌握系統(tǒng)，新手用戶則不行。要設計出完善的系統(tǒng)，同時滿足有經驗的用戶和經驗不足的新手，保持靈活高效。

8、優(yōu)美且簡約原則

對話中的內容應該去除不相關的信息或幾乎不需要的信息。任何不相關的信息都會讓原本重要的信息更難被用戶察覺。

9、容錯原則

幫助用戶從錯誤中恢復，將損失降到最低。如果無法自動挽回，則提供詳盡的說明文字和指導方向，而非代碼，比如404。

10、人性化幫助原則

即使系統(tǒng)不適用幫助文章是最好的，但我們也應該提供一份幫助文檔。任何幫助信息都應該可以方便地搜索到，以用戶的任務為核心，列出相應的步驟，但文字不能太多。

五、交互設計的定律

1、菲茲原則（費茨法則）

任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關，距離越大時間越長，目標越大時間越短。

菲茲原則

菲茲原則（費茨法則）

得到結論：越是重要按鈕，按鈕要越大，這樣操作時間就越短，越方便。位置距離用戶操作越近，這樣用戶越易點擊。

2、米勒定律（7±2法則）

米勒定律（7±2法則）是交互設計中一個常用的定律。1956年美國心理學家喬治·米勒對短時記憶能力進行了定量研究，他發(fā)現人的短時記憶能力廣度為7±2個信息塊，記憶信息超過了該范圍就容易出錯。這說明人的大腦短時記憶容量約為"7"，并在7+2與7-2之間浮動，因此心理學家把這個神奇的記憶容量規(guī)律稱為"7±2法則"。由7±2法則我們可以得出，一般人接受新事物的記憶容量最多不會超過9。

米勒定律

3、席克定律

席克定律是一種心理物理學定律。用戶所面臨的選擇數量越多，做出選擇所花費的時間就越長，在人機交互的界面中選項越多，意味著用戶做出決策的時間越長。

席克定律雖然給設計帶來的是克制，但也不能用于極端場景，妨礙用戶選擇，以"強奸"的方式強迫用戶遵照產品目標去選擇，比如某產品退押金的流程設計，從發(fā)現退款按鈕到"好像申請成功"的過程，你是不是暗自吐槽過？當然這里是站在用戶角度去看待這個設計，如果站在產品角度去審視它，會發(fā)現它是一個產品、交互、UI三者配合非常棒的案例。

席克定律

4、接近法則（親密性）

我們通常把位置相對靠近的事物當成一個整體：

接近法則

同樣都是圓，在視覺呈現上你會認為哪些是一組的呢？

接近法則的"權重"非常大，大到可以抵消其他法則，比如為上面的圓形添加顏色，甚至改變形狀，我們也會把接近圖形當成一個組：

接近法則

接近法則也是格式塔理論中我們最為熟悉、最常用的一種法則，它描述的是觀察者看到彼此鄰近（空間或時間）的物體時，會將它們視為一個整體。在界面設計中，對信息的組織已經離不開這個法則了，他在界面中所體現的就是把相關的信息塊組合在一起，不太相關的分離開，增強與區(qū)分元素之間的關聯性，所強調的是空間和位置。接近法則產生于群組，它可以減少信息設計的復雜性，對引導用戶的視覺流、便于用戶對界面的解讀起到至關重要的作用。

5、泰斯勒定律（復雜性守恒定律）

泰斯勒定律

泰斯勒定律又稱復雜性守恒定律，該定律認為每一個過程都有其固有的復雜性，這個復雜性存在一個臨界點，超過了這個點就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。比如我們發(fā)現頁面的功能是必須的，但當前的頁面信息過載，那么就需要將次要的功能收起或者轉移，但是你卻無法刪除他，只能想辦法權衡。

這一觀點主要被應用在交互設計領域，作為一名以體驗至上的交互設計師在面對復雜需求、復雜場景、復雜流程、復雜頁面的時候，如何在不影響業(yè)務和功能的情況下，保證用戶的使用體驗。而不是為了所謂的頁面簡潔、設計趨勢，就自以為是的刪除一些用戶認為重要的東西，最終導致功能滿足不了用戶。

6、奧卡姆剃刀原理

奧卡姆剃刀原理

奧卡姆剃刀原理的核心思想為："切勿浪費較多東西去做用較少東西同樣可以做好的事——如無必要，勿增實體，即簡單有效原理"。

在功能性頁面設計過程中，在動手前就要養(yǎng)成先理解用戶使用場景和行為的習慣。流程內的引導盡量弱化于主流程，流程外的內容，沒有必要的不要增加，這一點其實很重要，簡單的頁面讓用戶一眼就能找到他們感興趣的內容，使用戶瀏覽更舒適，更能專心于你要表達的內容上。而復雜的頁面會讓用戶找不到信息的重點，容易分散用戶的視覺注意力，這些弊端加起來會影響用戶使用的效率。不管是實體、視覺還是認知上，多余的設計元素，有可能造成失敗或者引發(fā)其他問題。

同時這個原理也強調了在相同的條件下，如果有兩種不同的方案，且沒有條件做AB測試、灰度測試，應當優(yōu)先選擇更簡單、更合適的那個，如果連前提條件都不同，那就根本無從對比。當下快節(jié)奏的移動互聯網時代，每位產品設計者都需要在寸土寸金的屏幕上快速處理各自的需求，那么這個原理也會很實用。

這個原理還有視覺上的魅力，可以比喻成"修剪"設計中多余的元素、去除雜質，最后的設計將會更嚴謹、更純粹，恰到好處的留白和清晰信息指引影響著用戶在使用產品過程中的重要感受。而設計需要從開始的發(fā)散，最終回歸到克制，因為你是商業(yè)屬性的產品設計師。

7、新鄉(xiāng)重夫：防錯原則

用戶在界面中發(fā)生的錯誤大部分是由設計和開發(fā)過程中的疏忽造成的，而不能認為是用戶操作疏忽（不能認為用戶是xx）。因此，在設計中非常有必要考慮防錯機制，尤其是用戶的操作具有毀滅性效果的功能時要有強提示和強確認，防止用戶犯不可挽回的錯誤。

六、交互設計的流程

1、需求挖掘與分析

在這個階段，交互設計師要配合產品經理做好市場調研工作，深刻理解需求，因為只有理解了需求，才能做出符合自身產品特性的好設計。同時也要對競品進行一定的調研與分析，充分的競品分析完善你的用戶場景，幫你更好地了解產品用戶。尋找你的產品與競品之間的共通性及差異點，找到自己產品的競爭優(yōu)勢，可以幫你清晰自身產品定位，打通自身產品賣點。

2、設計洞察與概念設計

剖析用戶，洞察設計機會點：拆解用戶需求，提出設計方案，解決用戶的問題。在這個階段，輔助各種方法、工具，如用戶畫像、用戶行為旅程，對用戶需求進行深入解讀，弄清楚用戶真正的痛點，它們真正想要的是什么，并結合自己現在已有的商業(yè)、技術資源，我們當前可以做什么，什么值得做，進一步清晰產品定位。

3、產品設計功能/內容規(guī)劃

細化產品功能、內容，得出交互原型，進行測試驗證。這個階段，需要對產品的信息、功能進行優(yōu)先級排布，進一步細化產品形態(tài)，得出詳細的功能、流程設計，并畫出設計原型，交互Demo，并交與用戶測試。

(1)、信息架構設計

在產品設計流程中，信息架構主要用于對收集到的信息進行分組和導航結構的設計，方便用戶了解周邊環(huán)境，并快速找到自己想要的功能。信息架構有【自上而下】和【自下而上】兩種分類方式。

(2)、功能與流程設計

產品功能的設計一般由產品經理來完成，需要對用戶有深入的了解，知道用戶的細分場景有哪些，在這些細分場景下，用戶的關注對象有哪些，這些關注對象是由哪些要素構成的，然后將這些要素抽象為用戶可操作的功能點。產品經理可結合腦圖，一步步將功能模塊兒進行細化，拆分成細小的功能點。在功能設計完備了之后，交互設計師需要將各個功能進行連線，對功能之間的跳轉進行設計，梳理功能流程及業(yè)務流程。并根據產品定位，結合用戶需求，劃分各個細分場景下的優(yōu)先級，將其拆分為一個個具體的頁面。

(3)、原型設計與測試

在功能與流程設計完備了之后，交互設計師需要通過交互原型的方式將頁面功能及交互流程得以呈現，這個過程中交互設計師需要完善具體的交互細節(jié)：頁面布局、交互動效、icon大小都要在這個階段進行完善與確定。并在原型設計完成之后，交與用戶測試，對產品的可用性、易用性進行驗證，以及前期的猜想是否正確，交互邏輯是否合理，產品的價值是否在測試當中得到了良好展現…結合測試結果，調整交互原型。

4、產品開發(fā)支持

驗證/追蹤在UI設計師完成了視覺設計之后，產品就到了開發(fā)測試的階段，在這個階段，交互設計師要配合開發(fā)人員、測試人員、UI設計師，對設計還原度、產品可用性進行走查，推動產品上線。

5、搜集用戶反饋階段

對于迭代中的產品來說，這一點需要持續(xù)關注。通常采用的方式是用戶調研、可用性測試、各種用戶反饋渠道搜集。交互設計師需要分析用戶反饋問題的合理性、是否需要優(yōu)化。對于值得重視的反饋，需要思考設計方案、推進實現。

七、交互設計規(guī)范

當產品規(guī)模大了之后就需要多個產品設計師協作完成整個產品，由于不同產品設計師之間的設計理念、設計方法、設計習慣的不同，協作完成的產品往往會導致產品一致性差，質量參差不齊。這個時候會需要一份交互設計規(guī)范來規(guī)范和指導產品設計，從而保證產品設計的一致性，提升整體產品質量。

1、頁面規(guī)范

頁面信息規(guī)范主要指頁面的靜態(tài)信息應該遵循的規(guī)則，包括：

(1)、標題規(guī)范

用于規(guī)定整個產品中所有不同層級不同功能的頁面應該使用的標題的規(guī)則。

(2)、新窗口鏈接規(guī)范

用于規(guī)定頁面鏈接是采用新窗口打開還是本窗口打開的規(guī)則。

(3)、圖片規(guī)范

用于規(guī)定圖片信息是否帶有alt title值，這些值又取自那里。

2、信息規(guī)范

交互提示規(guī)范主要用于規(guī)定在交互過程中交互的方式及其信息提示，包括：

(1)、預先信息提示

所有交互進行前需要提供充分給用戶的預先應該知道的提示信息。

a.表單提交類

表單提交的步驟，每個表單項的要求需要給出提示信息。（如密碼要多少多少位。搜索框鼓勵輸入什么內容。）

b.謹慎類操作

一個操作對用戶來說需要慎重操作的。如扣除金幣等。需要預先提示。（如：扣除金幣的操作需要預先提示扣除金幣數目，以及當前金幣是否足夠等等。）

c.差異化規(guī)則

當一個功能的規(guī)則與用戶習慣的規(guī)則具有一定的差異或比較復雜時，需要給出提示?；蛘呓o出幫助鏈接。

(2)、操作信息提示

所有交互進行中需要提供操作相關的提示。

A、操作確認提示

一個操作涉及數據刪除，等需要謹慎操作的操作需要給出刪除確認提示框。

B、操作錯誤提示

當用戶的操作不符合操作的規(guī)則，需要給出操作提示。（如評論字數為0或超過限制字數，搜索框未輸入內容時提交）

(3)、結果信息提示

交互進行后給出結果反饋是應該給出適當的提示。

A、查詢類結果

任何信息列表、查詢結果，當對應信息無結果的時候需要給出有無結果狀態(tài)提示。

B、保存類結果

一個表單是用戶提交保存數據的。如設置個人資料。提交保存后需要給出提示。成功綠色、失敗紅色、普通灰色。

C、附加類結果

一個表單是對其他數據進行附加的，如評論等。提交成功后應直接跳轉到操作產生的結果展示部分。（如提交評論后應該直接展示給用戶他提交的評論）

3、控件規(guī)范

當有一些功能會被多個模塊復用的時候（如標準評論框、標準好友選擇器等），需要把這些功能提煉出來設計成通用控件被多個模塊共用。

有了頁面信息規(guī)范、交互信息規(guī)范、通用控件規(guī)范就能保證頁面信息的一致、交互方式及提示的一致、通用功能模塊一致。從而保證產品的一致性，并提高產品質量。

八、交互設計常用工具

1、axure 原型工具

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

2、Sketch （蘋果電腦）

Sketch大部分功能和操作思路，和Axure是一樣的，如果我們期待做更精致的原型界面，或者出高保真原型時，sketch是個很好的工具。各種方便的插件，大大提升了工作效率。目前工作過的團隊基本UI設計都是使用的sketch，如果大家使用同一種工具，那么在交流、修改等時間成本上就會快很多。

3、Xmind or Mindmanager思維導圖工具

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

4、Viso

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

5、Figma

Figma是一個基于瀏覽器的在線工具，與墨刀相似，現在也有桌面版，個人版免費；界面與Sketch相仿，可以制作可交互原型。在國外是時下最多人用的交互設計軟件之一。但Figma只有英文版，對網絡也有要求。很好用的一個交互工具，只是目前在國內不好推廣。

6、MockingBot 墨刀

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

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

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

7、Mockplus

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

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

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