交互设计

**互動設計**，又稱**交互設計**，(英文 Interaction Design, 縮寫 IxD 或者 IaD)，是指「設計互動式數字產品、環境、系統和服務的活動」。除了數字領域，互動設計在非數字領域也得到應用，比如探索使用者和產品的互動方面。互動設計通常涵蓋以下幾個方面：設計、人機互動和軟體開發。互動設計在於定義人造物的行為方式 (the "interaction", 即人工製品在特定場景下的反應方式) 相關的介面。

互動設計師首先進行使用者研究相關領域，以及潛在使用者，設計人造物的行為，並從有用性，可用性和情感因素（usefulness, usability and emotional）等方面來評估設計品質。

## 歷史、淵源

比爾・摩格理吉在 20 世紀 80 年代後期提出了互動設計的概念。初始名為 "SoftFace"，後改名為互動設計。

在 1989 年，Gillian Crampton-Smith 在倫敦的皇家藝術學院，建立了互動設計的碩士學位教育（初始名為「電腦相關的設計」，後改名為 "互動設計"）。2001 年，她在 Ivrea 建立了互動設計研究所，專門從事互動設計的研究和教育。目前，全球眾多的教育機構已經開展互動設計的教育。

## 互動設計解決的問題和目前發展狀況

互動設計在任何的人工物的設計和製作過程中，都是不可以避免的，區別只在於顯意識和無意識。然而，隨著產品和使用者體驗日趨複雜、功能增多，新的人工物不斷湧現，給使用者造成的認知摩擦日益加劇的情況下，人們對互動設計的需求變得愈來愈顯性，從而觸發其作為單獨的設計學科在理論和實踐的呼聲變得愈發迫切。

然而，由於互動設計的研究者和實踐者來自不同領域，而且這個領域本身尚在建立階段，因此人們往往對某些問題尚未達成共識，甚至對類似和相同的問題本身的理解以及解決方式也可能有不同方案，且相互矛盾。比如互動設計的基本元素包含什麼，現在也還在討論中。

但是人們依然形成了一些不相互否認的共識，比如，互動設計是設計人和物的對話 (dialog)，而互動設計研究和實踐的本質可能是隱藏於這個對話中的。互動設計的目的包括，有用性，易用性和吸引性的設計和改善。在這邊對話 (dialog) 指的是互動，人們操作給予機器傳遞訊息後，機器回饋給人的形式與資訊。

特別是進入數字時代，多媒體讓互動設計的研究顯得更加多元化，多學科各角度的剖析讓互動設計理論的顯得更加豐富。現在基於互動設計的產品已經越來越多的投入市場，而很多新的產品也大量的吸收了互動設計的理論。

## 相關領域

### 相關的設計領域

平面設計、產品設計、藝術設計、工業設計等。

### 與介面設計的關係

使用者介面是互動設計的結果的自然體現，但是不能說互動設計就是使用者介面設計。互動設計的出發點在於研究人在和物交流（dialog）時候，人的心理模式和行為模式，並在此研究基礎上，設計人工物的可提供的互動方式，來滿足人對使用人工物的三個層次的需求（usefulness, usability and emotionality）。從這個角度看來，互動設計是設計方法，而介面設計是互動設計的自然結果。同時介面設計不一定由顯意識互動設計驅動，然而介面設計必然自然包含互動設計（人和物是如何進行交流的）

需要指出：互動性不限於技術相關的系統。人和人之間天然是需要互動的。因此，互動設計可以應用到和人相關的各種活動中，比如服務。這類互動的設計者，會以不同的名目用到互動設計的方法和原則。

### 互動設計和產品開發的關係

在沒有提出互動設計和體驗設計以前，產品設計總是將互動設計以某種方式交給相關人員去實施。從這個意義上而言，產品的設計從來就包含互動設計來滿足人們的使用需求；然而，當人們意識到簡單的介面規劃不能滿足人的使用需求的時候，互動設計開始作為一個獨立的設計階段出現。並且有研究者和實踐者提出，互動設計需要在制定初步產品的策略之後技術設計以前實施，這樣可以避免低效的互動給產品的開發和發布造成過多的損失。

## 互動設計的一般步驟

一般而言，互動設計師都遵循類似的步驟進行設計，為特定的設計問題提供某個解決方案（注意，沒有絕對正確的方案）。設計流程的關鍵是快速迭代，換言之，建立快速原型，通過使用者測試改進設計方案。

如下是互動設計步驟的要點：

1. 使用者調研：通過使用者調研的手段（介入觀察、非介入觀察、採訪等），互動設計師調查了解使用者及其相關使用的場景，以便對其有深刻的認識（主要包括使用者使用時候的心理模式和行為模式），從而為後繼設計提供良好的基礎。找出可能的契機點與方案方向。
2. 概念設計：通過綜合考慮使用者調研的結果、技術可行性、以及商業機會，互動設計師為設計的目標建立概念（目標可能是新的軟體、產品、服務或者系統）。整個過程可能來回迭代進行多次，每個過程可能包含頭腦風暴、交談（無保留的交談）、細化概念模型等活動。
3. 建立使用者模型：基於使用者調研得到的使用者行為模式，設計師建立場景或者使用者故事或者 storyboard 來描繪設計中產品將來可能的形態。通常，設計師設計人物誌 (persona) 來作為建立場景的基礎.
4. 建立介面流程：通常，互動設計師採用線方塊圖來描述設計物件的功能和行為。線上方塊圖中，採用分頁或者分屏的方式（夾帶相關部分的註解），來描述系統的細節。介面流圖主要用於描述系統的操作流程。
5. 開發原型以及使用者測試：互動設計師通過設計原型來測試設計方案。原型大致可分三類：功能測試的原型，感官測試原型以及實現測試原型；總之，這些原型用於測試使用者和設計系統互動的品質。原型的可以是實物的，也可以是電腦類比的；可以是高度仿真的，也可以是大致相似的。

### 實現

互動式設計師需要參與方案的實現，以確保方案實現是嚴格忠於原來的設計的；同時，也要準備進行必要的方案修改，以確保修改不傷害原有設計的完整概念。

### 系統測試

系統實現完畢的測試階段，可能通過使用者測試發現設計的缺陷；設計師需要根據情況對方案進行合理的修改。

## 互動設計的原則

認知心理學為互動設計提供基礎的設計原則。這些原則包括心智模型（mental model），感知 / 現實對映原理（mapping），比喻（metaphor）以及可操作暗示（affordance）。這些原則大都在 _The Design of Everyday Things_ 中被提及。

## 可以應用互動設計的領域

互動設計師通常在如下領域活動：軟體介面設計、資訊系統設計、網路設計、產品設計、環境設計、服務設計以及綜合性的系統設計。上述領域各自需要自身的設計特徵同時，也會用到通用的互動設計的原則和實踐。

## 互動設計和其他產品相關活動的關係

互動設計師通常需要參與到團隊中不同的活動中，比如圖形設計、程式設計、使用者心理、使用者測試，產品設計等等。因此，互動設計師需要對上述領域有相當理解，以便於和不同領域專家開展合作。

## 人際互動設計

由於聯網裝置的普及催生了人際互動設計 (Social interaction design, SxD)。人際互動設計關注人之間的互動以及人和裝置直接的互動。人際互動的關鍵要素諸如：人際交流，口頭交流，書面交流，交談的語用學等等。這些相關要素已經不能完全用認知科學的原理進行描述，為此，需要引入社會學、心理學和人類學來作為設計師設計的支撐。

## 參考資料

* 比爾・摩格理吉《關鍵設計報告：改變過去影響未來的互動設計法則》（Designing Interactions）徐玉玲翻譯。麥浩斯出版。2008 年 12 月 4 日。ISBN 9789866555305
* Herbert A. Simon,"The Sciences of the Artificial - 3rd Edition", ISBN 978-0262691918
* Marion Buchenau & Jane Fulton Suri, "Experience Prototyping", DIS '00, ISBN 1-58113-219-0/00/0008.
* Alan Cooper & Robert M. Reimann: _About Face 2.0: The Essentials of Interaction Design_, Wiley, 2003, ISBN 0-764-52641-3.
* Stephanie Houde & Charles Hill, "What Do Prototypes Prototype?" in _Handbook of Human-Computer Interaction_ (2nd ed.), M. Helander, T. Landauer, and P. Prabhu (eds.), Elsevier Science B. V, 1997.
* Brenda Laurel & Peter Lunenfeld: _Design Research: Methods and Perspectives_, MIT Press, 2003, ISBN 0-262-12263-4.
* 唐・諾曼: _The Design of Everyday Things_, ISBN 0-465-06710-7.
* Preece Jennifer&Yvonne Rogers&Helen Sharp, "Interaction Design - Beyond Human-computer Interaction",ISBN 0471492787.

## 相關條目

* 人機互動
* 工效學
* 認知心理學
* 電腦科學
* 電腦軟體科學
* 工程學
* 社會學
* 使用者體驗
* 資訊架構