很多人看到“交互設計”一詞，首先映入腦海的就是APP，然后是……使用APP……就只有APP了……但顯然，這是對交互設計很大的誤解。

    其實，交互設計還包括移動端和網絡端的設計，卻也不止于此，所以交互設計的解決方案既可以是Web，也可以是移動平臺，卻又并不限于任何特定的平臺。

    是不是很繞口？

    每次小v試圖把交互設計的概念解釋清楚就發(fā)現，很快小v自己也被繞進去了。因為交互設計的概念并不想其他藝術設計類專業(yè)那么直接，而更像是一種溝通與互動的狀態(tài)。

    而無法否認的是：

    在這個信息時代飛速發(fā)展的時代，交互人才是各個行業(yè)的剛需，就業(yè)率高、就業(yè)面廣且高于普通行業(yè)的薪資待遇是同學們跨專業(yè)選擇交互設計的最主要原因。

    那么一名交互設計師

    他最主要的工作內容和職責是什么呢？

    希望小v在接下來的敘述中能幫助你理清思路。

    

    交互設計師的職責

    @關鍵詞：Why

    交互設計師的工作，是在大眾與他們所使用的產品和服務之間建立有意義的關系。從早期的計算機，到移動設備，再到如今的可穿戴設備、智能家電等，皆是如此。

    從詞匯學的角度來說，交互所對應的單詞“interaction”便是由兩部分組成的：

    Inter + Action

     即在兩種行為之間“你來我往”

“你來”  是指發(fā)送指令，即 輸入

“我往”  是指進行反饋，即 輸出

    這么解釋的話，我們最先想到的可能是人與人之間的交互，但其實交互行為還可以發(fā)生在人與人造物，甚至人與自然之間。因此，交互設計的產出形式也很多，而設計的重點便是從使用者的邏輯出發(fā)，考慮互動和反饋的形式，盡可能地增強用戶的使用體驗。

    這也是為什么交互設計的應用領域非常之廣，且與多個學科交叉，如工業(yè)設計、人機工程、建筑設計等。而這么做的目的也都是為了提升用戶體驗，因此，交互設計也可被認為是用戶體驗設計的一部分。

用戶體驗設計的構成

    這邊就要對比到另一個很相似的職業(yè)：UI設計師。

    很多人都會分不太清UI設計師和交互設計師之間的區(qū)別和聯系。如果說UI設計讓用戶知道產品是什么，那交互設計就是讓用戶懂得做什么、如何做。

    交互設計師不會將全部的精力放在界面表現層上，而是探索更多方案的可行性，深入到框架層、架構層里面，探索產品/界面/場景/用戶/設備/系統六者之間的關系。

    正因如此，我不想把所有的腦細胞都消耗在像素、顏色、圖標上，不想一直處于被動研究方案的位置，不想處于一個積極的方案接收者，我想主動挖掘用戶場景和痛點、想成為一個方案制定者、想更緊密的將產品和用戶鏈接起來。

    這就是交互設計師和UI設計師最本質的區(qū)別了。

    

    交互設計的架構

    @關鍵詞：How

    設計流程的展現和邏輯思維能力是交互設計至關重要的兩大因素，從主題到解決問題的一整套設計推導過程必須十分清晰，而這也就構成了交互設計專業(yè)整體知識框架中最重要的部分。

    因此，想要入行交互設計，首先就要了解交互設計的整體架構。

• 第一層為戰(zhàn)略層，需要我們用心做好調研，收集用戶需求，發(fā)現使用過程中的痛點所在，從而提出自己的設計目標；

• 第二層為范圍層，需要我們確立產品的適用范圍，劃定產品的主要功能，從而將戰(zhàn)略轉化為實際的需求；

• 第三層為結構層，需要我們思考產品的使用流程、信息架構與互動形式，從而決定產品的內容組織和呈現方式；

• 第四層為框架層，需要我們設計線框圖，從而決定產品的框架形式及允許用戶使用的組件；

• 第五層為視覺層，需要我們繪制高保真圖與UI設計，從而用視覺化呈現產品的最終樣式。

交互設計架構圖

    有了架構，我們就有了搭建交互產品方案的骨架，可要想使方案“有血有肉”，我們還要了解以下這些交互設計，乃至任何一門設計專業(yè)都需要考慮的幾個關鍵要素：

• 頭腦風暴：可以在一個項目沒有成型前獲得大量的方向和靈感，一般的呈現方式是Mind Map（思維導圖），由一個話題作為中心主題，然后與該中心話題相關的所有思考結果，聯想主題都可以以子話題的形式呈現，與中心話題產生曲線連接。

Mind Map圖示

• 用戶畫像：指項目針對的核心用戶群的屬性，是對調研樣本的共性合并以及確定所產品的用戶的特點；

• 用戶行為地圖：可以用來展示用戶在完成目標操作前所有行為、想法、感受、觸點，從而分析痛點，尋找設計的出發(fā)點；

• 流程圖：是對產品的使用流程的陳述，方便用戶學習和操作；

• 原型圖：是低保真的線框圖，目的是宏觀考慮設計布局和信息架構，以及頁面間的跳轉方式，為測試做準備；

• 原型測試：針對已有的線框圖尋找用戶進行測試，通過訪談、觀察等方式發(fā)掘現有原型中的不足，為后期視覺層輸出高保真圖做準備。

    

    交互設計的流程

    @關鍵詞：What

    交互設計這么有邏輯性的一個專業(yè)，它的整個開展過程也是相當有禮有條的，小v為大家進行了總結和歸納加以參考哦。

    理解需求和目標 Understand

    在整個設計項目的開始階段，設計師們需要了解基本的設計目標和方向。研究項目與背景可以從用戶（User）和 產品（product）入手。

    先從用戶開始說起，了解目標用戶的大致情況（年齡、職業(yè)、興趣愛好）。設計師的最大用途在于發(fā)現問題和解決問題。因此，需要明白用戶在某領域的產品使用過程中潛在的問題和未來可能會出現的漏洞。

    了解設計所涉及的品牌。品牌的定位、核心價值、目標消費人群、服務內容、以及品牌所期許的設計目標。做一個細致的品牌梳理，確定需要解決的實際問題，才能提出有效的設計方案。

    需要注意的是，前期的基礎階段就要具備設計師的思維：以目標為導向，所有的思考都基于發(fā)現和解決問題角度出發(fā)。

    例如：京東、淘寶等電商平臺上的海報設計的目的并不追求好看，而是為了提升用戶購買，從而達到電商平臺的業(yè)務目標。

背景調研 Research

    接下來要針對實際問題進行目標群體的背景調研，充分的了解主題的方方面面。

    例如：

    目標用戶是誰？

    用戶群體有哪些特征？

    他們在使用產品時有哪些共同點和異同點？

    最好也深入研究下運營市場，做下對比同類產品的競品是如何進行設計的? 有何優(yōu)缺點?

    調研階段，其實沒有必要去調查和整理成百上千個人的信息。人的精力是非常有限的，不要做大而空的無用功。一般來說，設計師需要做的是從目標人群中找到3-5個人為代表進行詳細調研。同時，最好能有多種調研方式進行輔助，進行細致的了解。

    簡單總結下這一步驟的內容：

    作用：有效的收集用戶行為信息。

    目的：挖掘用戶的真正需求。

    要特別注意：選擇目標群體3-5人進行調研，同時應有其他方式同時進行收集，一種調研不可成為唯一判斷方法。

數據分析 Analyze

    調研階段的到的數據，就需要在第三步進行分析。一個非常好用的用戶分析工具就是User Persona （用戶畫像）。

    用戶畫像就像是一個整合了真實用戶需求的虛擬角色。模擬角色的各方面信息都會清晰的整理出來（年齡、性別、職業(yè)、星座、社會關系、消費習慣、行為特征）等。

    這些信息將幫助產品經理和設計師理解用戶的真實需求和使用場景，始終圍繞著典型用戶的核心訴求點進行設計和開發(fā)，大大的提升了設計工作的效率。

    如果你的設計范圍涉獵的比較廣， 那么可以嘗試做Customer journey map（用戶體驗地圖）。

    用戶體驗地圖的基本內容:

    1、用戶角色：主要目標用戶，需求、期望

    2、時間線：可以時間為單位（例如周或者月），也可以按行為來進行劃分（例如瀏覽、購買、復購）

    3、情緒指數：描述用戶在體驗過程中的情感變化。

    4、關鍵節(jié)點：用戶在體驗過程中的關鍵性動作（以網購為例，在線支付即為一個關鍵性動作）。

    5、使用場景：用戶產生的“觸點”的環(huán)境（例如網站、手機客戶端）。

    用戶體驗地圖會更清晰直觀的總結出用戶與產品之間的關聯和互動，同時幫助你從用戶的角度來考慮產品與人進行互動過程中未來可能出現的情況、挖掘用戶的痛點、尋找新的機遇去建立更好的用戶體驗。

交互設計 design

    開始進行到主要的設計環(huán)節(jié)。在設計過程中通過故事板、任務流程圖、繪制線框、制作原型多種形式來輔助設計。

    這里著重介紹下幾乎是任何設計中，都必不可少的繪制線框（wireframe）。

    線框圖像是汽車導航軟件一樣的頁面導航指南。將數字產品的想法變?yōu)楝F實必不可少的步驟，是任何產品頁面的骨架，提供了整體的布局思路。如果說框線圖是骨架，那么內容和產品就是血和肉。

    只有骨架制作好，才能定義好設計的信息層次結構，輕松地根據用戶處理信息的方式來規(guī)劃布局。

    框線設計的注意事項:

    1、保持顏色的簡單：白色，黑色以及介于兩者之間的灰色。

    2、最多使用兩種通用字體：通過更改字體的大小以及是否設置樣式(粗體，斜體等)，顯示信息的層次結構。

    3、避免使用浮華的圖像：嘗試使用簡單的矩形和正方形作為占位符，并在框的中間插入一個"x"，以顯示圖像的放置位置。

    做線框設計有幾個常用的工具，這里也一并分享給大家：

    Balsamiq、Axure、Mockplus、Indesign、Adobe Effect、Photoshop。

設計落實 Launch

    這一步便是產品的最終落地實施。但是在最終推出前還需要進行下評估和整體優(yōu)化。

    與產品經理、設計小組進行討論，交互方式是否合理、是否能滿足用戶的使用需求、將方案的整體視覺、和內容進行修改。

    除了內部評測，還需要讓用戶進行評測，我們通常稱這個環(huán)節(jié)為「可用性測試」。

    給他們安排一個任務，看他們在使用過程中是否還會遇到問題，是否解決了最初的問題，并最終調整出一個最優(yōu)方案。

    如果你通篇看完了，那你真的是相當喜歡交互設計了。雖然交互設計師們的工作相對來說十分的繁瑣，但整體來看，交互設計是一個范圍廣泛，整體素質要求較高的學科。

    對于交互設計感興趣的同學們，一定要早早的根據自身情況來做規(guī)劃和定位。

    國外尤其是英國、美國院校的交互學科已經發(fā)展成熟，早早抓牢時代的機遇，出國深造交互學科，提升專業(yè)能力，對于未來無論是國內外的設計就業(yè)，都會有更多的職業(yè)機會和選擇哦~

 英 國 院 校 

1# 中央圣馬丁藝術與設計學院

Central Saint Martins College of Art and Design

2# 倫敦傳媒學院

London College of Communication

3# 南安普頓大學溫徹斯特藝術學院

University of Southampton

4# 曼徹斯特大學

University of Manchester

5# 金斯頓大學

Kingston University

6# 利茲大學

University of Leeds

7# 伯明翰城市大學

Birmingham City University

8# 諾丁漢特倫特大學

Nottingham Trent University

以HCI為主，偏技術研發(fā)

1# 倫敦大學學院

2# 巴斯大學

以UX為主，偏交互裝置、技術應用

1# 倫敦大學金史密斯學院

2# 愛丁堡藝術學院

3# 倫敦傳媒學院

4# 拉夫堡大學

5# 格拉斯哥美術學院

6# 愛丁堡大學

 美 國 院 校 

1# 羅德島設計學院

Rhode Island School of Design

2# 普瑞特藝術學院

Pratt Institute

3# 圣路易斯華盛頓大學

Washington University in St. Louis

4# 藝術中心設計學院

Art Center College of Design

5# 紐約大學

New York University

6# 加州藝術學院

California College of the Arts

7# 帕森斯設計學院

Parsons The New School for Design

8# 薩凡納藝術與設計學院

Savannah College of Art and Design

以HCI+UX方向，偏技術研發(fā)

1# 卡內基梅隆大學

2# 佐治亞理工大學

3# 華盛頓大學-西雅圖分校

4# 斯坦福大學

5# 麻省理工大學

6# 加州大學-伯克利分校

7# 塔夫茨大學

8# 羅徹斯特理工大學

9# 紐約大學

10# 南加州大學

以UX為主，偏交互裝置、技術應用

1# 普瑞特藝術學院

2# 薩凡納藝術與設計學院