(轉(zhuǎn))常見的4類交互項目制作技巧(APP、裝置、游戲制作)

申請海外交互設計專業(yè),作品集中不僅要有調(diào)研和模型研發(fā)過程,還需要完整的成品制作展示。

根據(jù)漢藝對往屆成功申請CMU、NYU、SCAD等名校的學員作品集分析得出,基于不同設計目的和需要會產(chǎn)生不同的成品形態(tài),而80%以上的交互作品集中出現(xiàn)的成品多為APP、網(wǎng)頁、復合APP、交互裝置、游戲項目

而以上幾種不同類型的成品形態(tài),也對應著各不相同的制作流程。但國內(nèi)學生似乎對不同類型的交互成品的制作流程并沒有一個清晰的概念認知。那么今天漢藝將系統(tǒng)梳理出不同交互成品的制作方式供申請者參考。

2018 漢藝國際 交互設計已拿到

CMU、TUDelft、Pratt、LCC、Syracuse等名校offer

01

APP/網(wǎng)頁制作

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

一、制作過程

一般來說,APP/網(wǎng)頁制作過程分為4步:

1. 概念設計階段(Concept Development),在這一階段會將調(diào)研痛點整合,得出設計機會。將設計機會變?yōu)楣δ茳c投放在信息架構(gòu)圖中,用線框圖表現(xiàn)交互方式。

2. 方案調(diào)整階段(Concept Refine),在這一階段會將信息架構(gòu)圖和線框圖給他人進行測試,對測試反饋的結(jié)果進行修改。修改過程需要表現(xiàn)在作品集中。

3. 原型呈現(xiàn)階段(Concept Delivery),在這一階段會將測試的最終版以高保真的呈現(xiàn)形式放在作品集中

4. 頁面渲染、場景渲染階段(Rendering),在這一階段對整體界面再美化,提高作品集競爭力。

漢藝2016屆 G同學

漢藝2015屆 W同學

二、制作方法

1. 信息架構(gòu)圖?InformationArchitecture/structure

信息框架圖就是將用戶需求中所包含的信息提取出來。有些同學們會對信息結(jié)構(gòu)圖、功能結(jié)構(gòu)圖的區(qū)別感到疑惑,這里給同學們明確一點,產(chǎn)品本身就是承載信息的存在,沒有完全的信息類和功能類的區(qū)別。

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

微信主功能模塊圖

這里我們會注意到,主功能模塊圖并不是按四個tab標簽去分類的。一般情況下,功能結(jié)構(gòu)圖會按照tab分類,僅當二級模塊價值平行于一級模塊時,卻因為版式滯后時,才會將其提前。不過也要注意一點,主功能模塊最多也不要超過9個。

功能模塊+承載信息=信息架構(gòu)圖

漢藝2016屆 H同學

注意在作品集的信息架構(gòu)圖表現(xiàn)時還是采取“寬+淺”,“長+深”架構(gòu)來平衡內(nèi)容與版式。

軟件使用:Xmind、PS、AI

2. 線框圖 Wireframe

低保真的APP/網(wǎng)頁呈現(xiàn)方式,主要目的就是勾勒儲結(jié)構(gòu)布局,以及基礎的互動關(guān)系。給用戶進行反饋的時候是在無需考慮視覺和代碼的基礎上,進行信息規(guī)劃。所以,信息架構(gòu)圖搭配線框圖進行測試能夠得到最有效的反饋。

漢藝2015屆 C同學

漢藝2015屆 W同學

表現(xiàn)形式:紙模,電子版模型,交互性模型

軟件使用:Axure、Moqups、 PS、AI

3. 原型 prototype

高保真的APP/網(wǎng)頁呈現(xiàn)方式,在測試過后成型的最終版本,也是給到工程師進行開發(fā)的版本,所以他需要盡可能符合最終用戶界面的高保真模型。

漢藝2016屆 H同學

漢藝2015屆 W同學

APP項目表現(xiàn)形式:電子版模型嵌套手機樣式

APP項目軟件使用:PS,AI

網(wǎng)頁項目表現(xiàn)形式:靜態(tài)一二級頁面

網(wǎng)頁項目軟件使用:PS,Cutterman,Dreamweaver

02

復合APP制作

比上述提到的APP和網(wǎng)頁稍復雜的是復合APP,比如產(chǎn)品+APP,傳感+APP,裝置+APP,手表+APP ,網(wǎng)頁+APP等等,簡單說,不僅僅是以APP為載體類型的應用都可以稱之為復合App。主要也是為了解決形式單一化,以及豐富項目內(nèi)容創(chuàng)造更多設計點。如果思考維度多元化,專業(yè)領(lǐng)域深入探究,也可以發(fā)展為一個服務設計項目。

一.制作過程

一般來說,復合App制作過程分為4步:

1、概念設計階段(Concept Development),在這一階段會將調(diào)研痛點整合,得出設計機會并解釋這些機會如何投放在每個載體形成交互,簡易標出載體間的連接關(guān)系。

2、流程圖階段(Workflow),在這一階段詳細明示每個載體的連接關(guān)系,細節(jié)會具體到同步后的數(shù)據(jù)會如何在后臺轉(zhuǎn)換,從而形成有利信息。

3、藍圖階段(Blueprint),如果為服務類項目則需要細化前中后端的關(guān)系,歸納出服務藍圖。

4、原型呈現(xiàn)階段(Concept Delivery),在這一階段會將每個載體測試的最終版以高保真的呈現(xiàn)形式放在作品集中。由于頁數(shù)限制,不會將所有測試過程呈現(xiàn)在作品集內(nèi)。

5、頁面/場景渲染(Rendering),在這一階段對整體界面再美化,提高作品集競爭力。

漢藝2016屆 Y同學

二、制作方法

1、流程圖 Workflow

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

軟件使用:PS、AI

2、藍圖Blueprint

藍圖技巧是指通過分析組織系統(tǒng)和架構(gòu),鑒別顧客同服務人員的接觸點(Touch Points),并從接觸點出發(fā)來改進企業(yè)服務質(zhì)量的一種策略。 如果以可視化的角度分析,可以簡單分為5個層級:物理行為(載體)、用戶行為、系統(tǒng)前端、系統(tǒng)中斷、系統(tǒng)終端。

漢藝2016屆 Y同學

軟件使用:PS、AI

03

交互裝置制作

交互作品集中出現(xiàn)交互裝置是屬于拔高項目的,因為技術(shù)方面涉及到了電子化編程和電路板連接傳感器等內(nèi)容,呈現(xiàn)效果體現(xiàn)了交互意識,審美意識以及代碼意識。內(nèi)容方面,交互裝置更多是從產(chǎn)品原型開發(fā)去研究,由于涉及到代碼,經(jīng)常會有同學疑惑項目制作的過程與方法,那么在這一小節(jié)會為大家做解答。

一、制作過程

一般來說,交互裝置項目制作過程分為5步:

1、概念設計階段(Concept Design),在這一階段會歸納出設計機會,轉(zhuǎn)換為設計點,簡單明示運用到的裝置,以及人們的互動行為。

2、目標設定(Target Setting),由于裝置一般適用于特定范圍和人群,需要進行目標人群設定,場景規(guī)劃,裝置投放規(guī)劃等。

3、流程圖階段(Work Flow),在這一階段會使用故事版,把裝置的功能細節(jié),連接關(guān)系表明出來。作品集中,根據(jù)裝置不同工藝,不同技術(shù)有不同展示流程。

4、頁面/場景渲染階段(Rendering),在目標設定的大環(huán)境下對裝置表現(xiàn)力進行一個虛擬呈現(xiàn)

5、Demo實現(xiàn)階段,將設計的產(chǎn)品原型呈現(xiàn)出來,便于開發(fā)研究。作品集中呈現(xiàn)代碼思想,提高作品集競爭力。

漢藝2015屆 H同學

二、制作方法

由于交互裝置類項目不像App、網(wǎng)頁項目,沒有太多術(shù)語或者信息類名稱在作品集中出現(xiàn),所以相對可直接闡述功能軟件的原理。

1. processing+各式傳感器

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

漢藝2017屆 L同學

2. Arduino+各式傳感器+Processing

原理就是arduino把傳感器的物理信號轉(zhuǎn)化為數(shù)字信號,再把數(shù)字信號通過arduino導入processing,processing利用數(shù)字信號抽象生成藝術(shù)。

漢藝2016屆 S同學

04

游戲制作(普通→AR→VR)

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

一、制作過程

一般來說,交互游戲項目制作過程分為4步:

1. 概念設計階段(Concept Design),在這一階段會進行人物設計和場景設計,人物設計不僅僅包括角色,還有其動作、衣服、背景簡介。場景也可以豐富細節(jié),真實景色素材收取,進行數(shù)字繪景。

2. 流程圖階段(Work Flow),由于游戲中存在關(guān)卡或者任務,存在邏輯關(guān)系,需要規(guī)劃主要levels。有時候也可以以單、雙人去區(qū)分游戲機制。

3. 建模階段(Modeling),將概念設計中的草圖、原圖進行細化建模,為下一階段Demo實現(xiàn)作準備。

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

*4. 頁面/場景渲染階段(Rendering),在這一階段對游戲主要levels進行一個虛擬呈現(xiàn)

補充說明:

1. 第4步屬于二選一,可以選擇Demo實現(xiàn),也可根據(jù)實際情況選擇概念渲染呈現(xiàn);

2. VR、AR項目,如果Demo實現(xiàn),需要在作品集中添加說明各自SDK的使用方式。

漢藝2016屆 G同學

漢藝2017屆 L同學

二、制作方法

1. 草圖/原圖 Sketch

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

表現(xiàn)形式:手繪、數(shù)字繪圖

軟件使用:PS、AI、Procreate

2. 流程圖 WorkFlow

游戲不論大小,邏輯順序,玩法順序都需要通過流程圖規(guī)劃出來。比如APP類小游戲,就只需要把APP信息架構(gòu)突出。PC端游打游戲,就需要把主模塊邏輯寫出。

漢藝2017屆 R同學

漢藝2017屆 L同學

軟件使用:PS、AI、ID

3. 建模 Modelling

熟練運用一眾3D軟件和渲染軟件是游戲制作學生們必修課。

漢藝2017屆 L同學

軟件使用:3DMax、Maya、Blender、C4D、ZBrush

4. 游戲引擎 Engine

市面上有非常多的引擎,下面漢藝為大家介紹2款最常見的引擎:

a. 虛擬引擎4(Unreal Engine4)是當前最火的商用引擎,優(yōu)勢是兼容于眾多平臺,如IOS、Android、Linux、Mac、Windows和大多游戲主機。缺點就是在收取99美元的商業(yè)售價之后,盈利超過5萬美元則必須支付25%分成,并且使用門檻過高。比如桃園、劍靈、全球使命采用虛擬引擎。

b. Unity3D引擎,也是漢藝導師在用的引擎,主要優(yōu)點在于具有業(yè)內(nèi)最具競爭力的授權(quán)條款,兼容于各大平臺,學習門檻低。缺點在于,工具數(shù)量有限,需要自己去創(chuàng)作工具,比較耗時。著名單機游戲仙劍奇?zhèn)b傳6就是在這個平臺制作。

同學們需要將自己的模型投放在游戲引擎中,才能夠有簡單的實現(xiàn)。

AR SDK加載,如果要制作AR游戲,需要使用AR引擎

其中Vuforia的普及度是最高的,由高通開發(fā),通過在Vuforia上存儲數(shù)據(jù)搭配Unity可以實現(xiàn)交互。

Vuforia 數(shù)據(jù)存儲

AR引擎搭配Unity

VR SDK 加載,同AR SDK一樣,需要同學們在網(wǎng)上下載Google VR SDK for Unity安裝包,由于安裝包更新很快,最新版本的安裝包和最新版本的Unity系統(tǒng)搭配會減少Bug機率。

Google VRSDK 1.100.1

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

Demo場景

以上是關(guān)于APP、網(wǎng)頁、復合APP、交互裝置、游戲這5類最常見的交互項目的通識制作過程與基礎設計方法。文章略長,但涉及到的設計流程還是相對比較明晰的,建議交互設計的同學收藏,方便反復查看。

當然,還有其他類型交互設計項目值得去探索,畢竟交互是探討人造物與行為方式的設計領(lǐng)域,具體項目還要結(jié)合實際使用條件和操作狀態(tài)去綜合分析。如果大家對交互設計有其他方面的疑問,也歡迎添加下方二維碼留言,獲取漢藝教學團隊的專業(yè)解答。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容