一篇幾乎解決你所有交互作品集創作問題的"五一巨獻"

來自專欄 Portfolio+

申請海外交互設計專業，作品集中不僅要有調研和模型研發過程，還需要完整的成品製作展示。而且基於不同設計目的和需要會產生不同的成品形態，而80%以上的交互作品集中出現的成品多為APP、網頁、複合APP、交互裝置、遊戲項目。

以上幾種不同類型的成品形態，也對應著各不相同的製作流程。但國內的大部分同學似乎對不同類型的交互成品的製作流程並沒有一個清晰的概念認知。

本周二Portfolio+專欄，康石石便為同學們系統梳理出不同交互設計項目成品的製作方式，望能對大家的交互作品集創作提供明確的製作思路及技巧。

一、APP/網頁製作

交互設計作品集中，最容易上手的就是單一化的APP或網頁項目，幾乎每一個同學都會涉及到。由於APP與網頁項目的製作過程與方法相似程度高達90%，所以在這一小節里將簡明扼要地為同學們講解這一部分知識。

1. 製作過程

一般來說，APP/網頁製作過程分為4步：

1）概念設計階段（Concept Development）

在這一階段會將調研痛點整合，得出設計機會。將設計機會變為功能點投放在信息架構圖中，用線框圖表現交互方式。

2）方案調整階段（Concept Refine）

在這一階段會將信息架構圖和線框圖給他人進行測試，對測試反饋的結果進行修改。修改過程需要表現在作品集中。

3）原型呈現階段（Concept Delivery）

在這一階段會將測試的最終版以高保真的呈現形式放在作品集中。

4）頁面渲染、場景渲染階段（Rendering）

在這一階段對整體界面再美化，提高作品集競爭力。

G同學，漢藝16屆學生，獲布魯內爾、金斯頓、拉夫堡、朴茨茅夫offer

W同學，漢藝15屆學員，獲倫藝offer

2. 製作方法

1）信息架構圖 InformationArchitecture/structure

信息框架圖就是將用戶需求中所包含的信息提取出來。有些同學會對信息結構圖、功能結構圖的區別感到疑惑，這裡給同學們明確一點，產品本身就是承載信息的存在，沒有完全的信息類和功能類的區別。

因此，信息架構圖會把功能核心表現出來。這樣的架構是產品的骨骼，它應該盡量保持簡單、明了，不可以輕易變更，讓用戶無所適從。次要功能豐富主幹，不可以喧賓奪主，盡量隱藏起來，而不要放在一級頁面。

微信主功能模塊圖

這裡我們會注意到，主功能模塊圖並不是按四個tab標籤去分類的。一般情況下，功能結構圖會按照tab分類，僅當二級模塊價值平行於一級模塊時，卻因為版式滯後時，才會將其提前。不過也要注意一點，主功能模塊最多也不要超過9個。

功能模塊+承載信息=信息架構圖

H同學，漢藝16屆學員，獲帕森斯、普瑞特offer

• 注意在作品集的信息架構圖表現時還是採取「寬+淺」，「長+深」架構來平衡內容與版式。
• 軟體使用：Xmind、PS、AI

2）線框圖 Wireframe

低保真的APP/網頁呈現方式，主要目的就是勾勒儲結構布局，以及基礎的互動關係。給用戶進行反饋的時候是在無需考慮視覺和代碼的基礎上，進行信息規劃。所以，信息架構圖搭配線框圖進行測試能夠得到最有效的反饋。

C同學，漢藝15屆學員，獲GIT offer

W同學，漢藝15屆學員，獲倫藝offer

• 表現形式：紙模，電子版模型，交互性模型
• 軟體使用：Axure、Moqups、 PS、AI

3）原型 prototype

高保真的APP/網頁呈現方式，在測試過後成型的最終版本，也是給到工程師進行開發的版本，所以他需要儘可能符合最終用戶界面的高保真模型。

H同學，漢藝16屆學員，獲帕森斯、普瑞特offer

W同學，漢藝15屆學員，獲倫藝offer

• APP項目表現形式：電子版模型嵌套手機樣式
• APP項目軟體使用：PS,AI
• 網頁項目表現形式：靜態一二級頁面
• 網頁項目軟體使用：PS，Cutterman，Dreamweaver

二、複合APP製作

比上述提到的APP和網頁稍複雜的是複合APP，比如產品+APP，感測+APP，裝置+APP，手錶+APP ，網頁+APP等等，簡單說，不僅僅是以APP為載體類型的應用都可以稱之為複合App。主要也是為了解決形式單一化，以及豐富項目內容創造更多設計點。如果思考維度多元化，專業領域深入探究，也可以發展為一個服務設計項目。

1. 製作過程

一般來說，複合App製作過程分為4步：

1）概念設計階段（Concept Development）

在這一階段會將調研痛點整合，得出設計機會並解釋這些機會如何投放在每個載體形成交互，簡易標出載體間的連接關係。

2）流程圖階段（Workflow）

在這一階段詳細明示每個載體的連接關係，細節會具體到同步後的數據會如何在後台轉換，從而形成有利信息。

3）藍圖階段（Blueprint）

如果為服務類項目則需要細化前中後端的關係，歸納出服務藍圖。

4）原型呈現階段（Concept Delivery）

在這一階段會將每個載體測試的最終版以高保真的呈現形式放在作品集中。由於頁數限制，不會將所有測試過程呈現在作品集內。

5）頁面/場景渲染（Rendering）

在這一階段對整體界面再美化，提高作品集競爭力。

2. 製作方法

1）流程圖 Workflow

由於載體趨於多樣化，同學們不要理所應當地認為用戶能夠自己認知載體之間的連接方式。比如可穿戴設備用以記錄日常數據，然後在APP中進行數據分析，那麼在設計中就需要給兩個載體一個最基本的藍牙連接功能。

• 軟體使用：PS、AI

2）藍圖Blueprint

藍圖技巧是指通過分析組織系統和架構，鑒別顧客同服務人員的接觸點（Touch Points），並從接觸點出發來改進企業服務質量的一種策略。 如果以可視化的角度分析，可以簡單分為5個層級：物理行為（載體）、用戶行為、系統前端、系統中斷、系統終端。

• 軟體使用：PS、AI

三、交互裝置製作

交互作品集中出現交互裝置是屬於拔高項目的，因為技術方面涉及到了電子化編程和電路板連接感測器等內容，呈現效果體現了交互意識，審美意識以及代碼意識。內容方面，交互裝置更多是從產品原型開發去研究，由於涉及到代碼，經常會有同學疑惑項目製作的過程與方法，那麼在這一小節會為大家做解答。

1. 製作過程

一般來說，交互裝置項目製作過程分為5步：

1）概念設計階段（Concept Design）

在這一階段會歸納出設計機會，轉換為設計點，簡單明示運用到的裝置，以及人們的互動行為。

2）目標設定（Target Setting）

由於裝置一般適用於特定範圍和人群，需要進行目標人群設定，場景規劃，裝置投放規劃等。

3）流程圖階段（Work Flow）

在這一階段會使用故事版，把裝置的功能細節，連接關係表明出來。作品集中，根據裝置不同工藝，不同技術有不同展示流程。

4）頁面/場景渲染階段（Rendering）

在目標設定的大環境下對裝置表現力進行一個虛擬呈現。

5）Demo實現階段

將設計的產品原型呈現出來，便於開發研究。作品集中呈現代碼思想，提高作品集競爭力。

H同學，漢藝15屆學員，獲愛丁堡、倫藝、拉夫堡offer

2. 製作方法

由於交互裝置類項目不像App、網頁項目，沒有太多術語或者信息類名稱在作品集中出現，所以相對可直接闡述功能軟體的原理。

1）Processing+各式感測器

由於代碼的可能性是無限的，它可以做到矢量繪圖，聲音捕捉繪圖，實時影像捕捉繪圖以及數據可視化，所以學生們利用生成藝術和互動藝術來探索交互領域的課題也能夠得到多元化的發展。

L同學，漢藝17屆學員，獲愛丁堡、謝菲爾德、利物浦offer

2）Arduino+各式感測器+Processing

原理就是arduino把感測器的物理信號轉化為數字信號，再把數字信號通過arduino導入processing，processing利用數字信號抽象生成藝術。

S同學，漢藝16屆學員，獲莫那什offer

四、遊戲製作（普通→AR→VR）

在交互遊戲製作過程當中，學生們會遇到不知道製作流程，不明晰VR和AR是什麼概念，或許也會困惑為何我們把AR、VR列入遊戲製作等種種問題。事實上，VR、AR也都需要通過遊戲引擎搭建，所以本質上，它們都是遊戲。製作過程，下面會詳細說明：

1. 製作過程

一般來說，交互遊戲項目製作過程分為4步：

1）概念設計階段（Concept Design）

在這一階段會進行人物設計和場景設計，人物設計不僅僅包括角色，還有其動作、衣服、背景簡介。場景也可以豐富細節，真實景色素材收取，進行數字繪景。

2）流程圖階段（Work Flow）

由於遊戲中存在關卡或者任務，存在邏輯關係，需要規劃主要levels。有時候也可以以單、雙人去區分遊戲機制。

3）建模階段（Modeling）

將概念設計中的草圖、原圖進行細化建模，為下一階段Demo實現作準備。

4）Demo實現

在這一階段會讓部分遊戲功能實現，基本的建模投放到遊戲引擎中進行再拼合，加入碰撞、剛體、反向運動學等物理現象來達到既定效果。

*4）頁面/場景渲染階段（Rendering）

在這一階段對遊戲主要levels進行一個虛擬呈現。

補充說明：

• 第4步屬於二選一，可以選擇Demo實現，也可根據實際情況選擇概念渲染呈現
• VR、AR項目，如果Demo實現，需要在作品集中添加說明各自SDK的使用方式

G同學，漢藝16屆學生，獲布魯內爾、金斯頓、拉夫堡、朴茨茅夫offer

L同學，漢藝17屆學員，獲倫傳offer

2. 製作方法

1）草圖/原圖 Sketch

首先需要確定遊戲整體風格，風格包括配色，字體，畫風，維度。畢竟2D遊戲和3D遊戲相差很大。在2D遊戲的畫面Sketch中我們不用思考透視問題，然而3D遊戲場景草圖繪畫中，往往會多維度，呈現同一張場景。

• 表現形式：手繪、數字繪圖
• 軟體使用：PS、AI、Procreate

2）流程圖 WorkFlow

遊戲不論大小，邏輯順序，玩法順序都需要通過流程圖規划出來。比如APP類小遊戲，就只需要把APP信息架構突出。PC端游打遊戲，就需要把主模塊邏輯寫出。

R同學，漢藝17屆學員，獲皇藝、愛丁堡、倫傳、布魯內爾offer

L同學，漢藝16屆學員，獲南衛理工會大學offer

• 軟體使用：PS、AI、ID

3）建模 Modelling

熟練運用一眾3D軟體和渲染軟體是遊戲製作學生們必修課。

L同學，漢藝16屆學員，獲南衛理工會大學offer

• 軟體使用：3DMax、Maya、Blender、C4D、ZBrush

4）遊戲引擎 Engine

市面上有非常多的引擎，下面為大家介紹2款最常見的引擎：

• 虛擬引擎4（Unreal Engine4）是當前最火的商用引擎，優勢是兼容於眾多平台，如IOS、Android、Linux、Mac、Windows和大多遊戲主機。缺點就是在收取99美元的商業售價之後，盈利超過5萬美元則必須支付25%分成，並且使用門檻過高。比如桃園、劍靈、全球使命採用虛擬引擎。
• Unity3D引擎，主要優點在於具有業內最具競爭力的授權條款，兼容於各大平台，學習門檻低。缺點在於，工具數量有限，需要自己去創作工具，比較耗時。著名單機遊戲仙劍奇俠傳6就是在這個平台製作。

同學們需要將自己的模型投放在遊戲引擎中，才能夠有簡單的實現。

• AR SDK載入，如果要製作AR遊戲，需要使用AR引擎

其中Vuforia的普及度是最高的，由高通開發，通過在Vuforia上存儲數據搭配Unity可以實現交互。

Vuforia 數據存儲

AR引擎搭配Unity

VR SDK 載入，同AR SDK一樣，需要同學們在網上下載Google VR SDK for Unity安裝包，由於安裝包更新很快，最新版本的安裝包和最新版本的Unity系統搭配會減少Bug機率。

Google VRSDK 1.100.1

打開Demo文件夾中Scenes，可以體驗Demo場景。同時學生們還需要學習基礎C#代碼，還有Unity操作知識，才能把整套VR機制用得流暢。

Demo場景

Final: 以上是關於APP、網頁、複合APP、交互裝置、遊戲這5類最常見的交互項目的通識製作過程與基礎設計方法。文章略長，但涉及到的設計流程還是相對比較明晰，建議交互設計的同學收藏，方便反覆查看。當然，還有其他類型交互設計項目值得去探索，畢竟交互是探討人造物與行為方式的設計領域，具體項目還要結合實際使用條件和操作狀態去綜合分析。

最後，附上康石石東家-漢藝國際教育2018的交互設計教育「成果」，同時也希望19年準備申請交互專業的同學能夠抓緊時間，從不同維度上去豐富作品集內容，提高作品集質量，如果出現問題要及時與有相關專業背景的老師溝通，或於康石石後台留言諮詢。

2018 漢藝國際交互設計已拿到CMU、TUDelft、Pratt、LCC、Syracuse等世界名校offer

康石石現已推出個人微信公眾號——康石石（kang-shishi）

除每周二、周五發布專欄文章外，康石石公眾號將每日推送1-3篇文章，針對同學們提出的問題進行詳盡解答，敬請關注

訂閱方式：微信搜索 康石石 即可