從頭開始紀錄我的北科互動系畢業製作《茶嶼茶語》!|畢業製作特輯


文章系列介紹

作為設計師度過的每一個平凡日子。

畢業製作可說是每個設計系學生大學生涯的最高潮,互動系也不例外。這次我仿照紀錄片的形式,從頭開始紀錄我們的畢業專題《茶嶼茶語》的製作過程。

《茶嶼茶語》點餐機台介面設計

第一章:茶嶼茶語的由來(大三下學期)

謝承邑互動系畢制作品茶嶼茶語 前導動畫截圖
描述故事世界觀的前導動畫截圖

畢制開始的第一個學期,我們主要做的事是從數個備選題目中確立明確方向,並製作簡單的prototype驗證想法是否可行。

我自己感覺第一學期的發想題目,是整個畢業製作中最為迷茫與痛苦的過程。從寒假開始我們就密集地開會,透過brain storming以及過去收集的靈感擬定了一個又一個的題目。接著,還要分析題目的發展潛力與資源取得的容易性,經過層層篩選後,最終我們才決定要以「茶文化」繼續發展。

謝承邑互動系畢制作品茶嶼茶語 發想概念
專題開始時的各種文件紀錄
謝承邑互動系畢制作品茶嶼茶語 發想概念
我們決定以「調茶」作為專題發展核心
謝承邑互動系畢制作品茶嶼茶語 發想概念
概念底定後規劃的流程圖
謝承邑互動系畢制作品茶嶼茶語 發想概念
設想的機台使用情境
謝承邑互動系畢制作品茶嶼茶語 發想概念
設想的機台使用情境
謝承邑互動系畢制作品茶嶼茶語 發想概念
設想的機台使用情境
謝承邑互動系畢制作品茶嶼茶語 發想概念
設想的機台使用情境

「茶」是台灣的設計展中很常出現的主題,因此如何運用互動科技及嶄新的切入角度作出新意,就是我們接下來的挑戰。

茶文化在台經歷多年發展,我們觀察到其性質已從農產品昇華為具有文化、藝術價值的高附加商品。從飲茶方式、茶具、栽種技術到二次加工,關於茶的各種面向都有許多令人驚艷的創新。其中,名為「調茶」的創意飲茶方式最吸引我們注意。調茶的概念就如同調酒一樣,是由調酒師(調茶師)依據每位顧客的喜好即席調製不同的茶飲。即使飲品的基底是茶,但調製出來的成品仍像調酒一樣具有多樣顏色與味道變化。

口味、顏色豐富多變的調茶。Source: @chestertea_2008 on Instagram

為了更進一步暸解調茶,我們透過社群媒體聯繫到現職為調茶師的「茶斯特」先生與我們做訪談。在訪談中,茶斯特很熱心地和我們分享調茶目前在台灣的發展以及他對於調茶的解讀。茶斯特說:與手搖飲相比,調茶更重視的是過程中調茶師與客人的互動、調製茶飲時的動作,它就像日本的板前壽司一樣,除了享受食物以外,專業師傅的現場表演也是重要的看點。這些分享內容成為了日後我們設計互動體驗時的重要核心。

謝承邑互動系畢制作品茶嶼茶語 發想概念
訪談調茶師的訪綱
茶嶼茶語 訪問茶斯特
2022年時訪談茶斯特的紀錄照

依據對調茶的研究與訪談結果,我們發想了一台以調茶為主題,具有復古感的Barcode遊戲機台。且除了機台以外,我們還希望可以延伸到展場體驗設計,打造一場令體驗者能夠當場喝到調茶的展覽。

在機台內容方面,我們本想仿照調茶師與顧客的互動過程,以詢問玩家當下心情、喜好等主觀性的問題來決定玩家能喝到什麼樣的調茶,但後續的使用者回饋卻使我們發現這些主觀問題與調茶並沒有明顯的關聯所以作罷。於是,我們改以故事的形式推展遊戲。玩家將扮演架空故事裡的主角,隨著故事推進做出種種抉擇,利用不同抉擇選項影響最終玩家會喝到的調茶種類。(例如選擇到「紅茶潭」探險即代表選定用紅茶作為調茶基底)

謝承邑互動系畢制作品茶嶼茶語 服務流程
2022年5月時繪製的服務流程圖

內容決定後,我們才終於開始著手製作遊戲原型(Prototype)。時間線走到這裡已經到了五月左右。在學期結束前的這一段期間,我們和老師不斷地討論、修正,從專題目的、機台的使用情境、遊戲故事等項目幾乎都來回修改過好幾次才定案。以下是學期結束第三次評圖時的遊戲畫面截圖:

第一・五章:努力所迎來的轉捩點(大三升大四暑假)

程式不需要做的像其他組一樣厲害,但美術方面一定不能輸!

從第一章的內容就可以感受到,我們光是題目探索就花費了兩個月,最終只留下一個多月的時間製作prototype。很明顯地,在這短短的時間內絕對不可能做出好看的prototype,光是程式能動起來就已經謝天謝地了。雖然prototype醜是常態,但畢竟我們組四人都是美術背景出身,如果最終成品仍是這副德性真有點說不過去。

謝承邑互動系畢制作品茶嶼茶語 作品prototype
我們四人都是美術背景出身,如果最終成品仍是這副模樣真有點說不過去……

早在畢制開始以前,我們很早就定下了共識:程式不需要做的像其他組一樣厲害,但美術方面一定不能輸。

本著這副不認輸的倔強,即使在放暑假我們仍堅持每天撥一點時間出來做專題。千萬不要以為這沒什麼,要知道當時我們組裡有人正在實習、有人正在打工、有人正在準備畢業展的工作,也就是說,我們沒有一人能夠全職做專題,大家每天都要邊做其他事邊兼顧課業。但就算如此,我們每週都還是會定期線上開會討論進度,只為了讓遊戲畫面能夠更加好看。

這兩個月,我們的目標不是建很多3D模型,反而是希望放慢腳步、花心思慢慢鑽研改良遊戲畫面的各項技術,這也是只有在學期之外才能做的事。

謝承邑互動系畢制作品茶嶼茶語 作品prototype
為了改進場景畫面,我們收集了許多參考圖
謝承邑互動系畢制作品茶嶼茶語 作品prototype
為了改進場景畫面,我們收集了許多參考圖
謝承邑互動系畢制作品茶嶼茶語 作品prototype
雖然想靜下心來嘗試,但終究時間不多,因此我們排了如上的密集行程表

同時,為了補足上學期沒有時間學習的知識,我們還安排了一次「服務設計」讀書會。在這次的讀書會中,我們每人都讀了一本服務設計領域的經典書籍,在假期結束前和大家互相交流彼此的發現與讀書心得。雖然是讀書,但能夠和大家交流彼此對於服務設計的認識、學習經典案例真的很有趣,且隨著學習的深入,我們也發現對於專題規劃的眼光越發清晰。

謝承邑互動系畢制作品茶嶼茶語 作品prototype
這個暑假,我和同學一起辦了「服務設計」讀書會,彼此交流閱讀書籍的心得

也是在這個暑假,我們四人迎來人生中的茶館品茶初體驗。雖然我們已有研究過該如何泡茶,但畢竟大家都是喝茶的新手,實際操作起來仍是手足無措。結果最後還是請店員示範一次泡茶的過程給我們看我們才學會。

第二章:轉變、蛻變、擴展(大四上學期)

在這個學期,由於指導老師群的成員有變更,因此我們的指導老師也跟著從上學期的 張群儀 老師換為現在的 宋兆祥 老師。從這一學期開始,畢制的壓力就不光是來自專題本身,還包括畢業展籌備那邊的許多事項需要注意。當一切事物都在迅速變化中,唯一不變的,就是要持續保持製作速度前行。

經歷暑假兩個月的魔鬼集訓以後,我們的設計概念更加明確、畫面也變得更加精美。學期開始時,我們應該是當時全班進度最快的組別,連帶我們的宋老師都說我們是令他最不需要擔心的小組。

有了第一個場景的製作經驗,接下來的製作工作就變得明確許多。我們以平均每二至三週就完成一個新場景的製作速度進行,目標是在本學期結束前完成所有的場景並留些時間給優化與debug。

謝承邑互動系畢制作品茶嶼茶語 作品紀錄
圖中的每一個便條紙與小圖,都是我們奮鬥的紀錄
謝承邑互動系畢制作品茶嶼茶語 作品紀錄
圖中的每一個便條紙與小圖,都是我們奮鬥的紀錄

最終章:當時光繞了一圈,該是時候達成早已訂下的目標(大四下學期)

評圖時組員正和老師講解機台的操作方式

專題開始時,我們四人便半開玩笑、半認真地說著如果我們畢制作出了一定成果,一定要拿去投各式各樣的設計比賽。當時雖然我們說的很隨意,但心中不免還是有些猶豫,擔心著如果題目進展不順怎麼辦?畢竟許多同學在大四上換題目是常有的事;如果進度不如預期怎麼辦?到時別說是比賽了,連能不能趕得上畢業展都是個問號。

幸好,我們當初擔心的事情都沒有發生。

這一年間我們拼命地提升製作速度,只為能趕上從年初便開始收件的各式設計競賽。雖然設計競賽人通常不用親自到場,但取而代之的是許多書面文件需要準備,別的不說,同時準備好幾項的比賽文件那工作量還是挺驚人的。我們總共報名了三項比賽,分別是:

  • 金典設計獎《數位多媒體、APP類》(新一代設計展官方獎項)
  • 放視大賞《跨域類》(互動系指定參展)
  • 德國紅點概念設計獎《交互與用戶體驗設計類》(自發報名參加)

為了準備這些比賽,在三~四月間我們馬不停蹄的撰寫企劃書、設計影片腳本、安排影片錄音、設計海報、中英翻譯等工作,每天都忙得暈頭轉向,還好有組員彼此輪流hold住,不然光靠我一人我可能真的會完蛋。

謝承邑互動系畢制作品茶嶼茶語 作品紀錄
四下就是馬不停蹄地準備比賽!

同時,我們也開始針對展覽體驗做設計。雖然說是「設計」,但令我們最有感的還是課金把相關的展覽材料買回來。且展覽設計不只是小組內部的事,更關乎整體畢業展規劃,因此過程中我們也不斷地和畢籌幹部協調、確認資訊。底下的照片所是四月中旬校內展前最後一次評圖的攤位樣貌,當時雖然材料已經都買完了,但展櫃還沒有送回工廠翻修。

謝承邑互動系畢制作品茶嶼茶語 作品紀錄
2023年4月最後一次內部評圖時的攤位照。想知道最終成品的樣貌,歡迎你到畢業展來參觀!
和同學們一起拍攝畢業專刊要使用的個人照

如果想知道正式展覽樣貌的話,歡迎你到校內展、新一代、放視大賞來參觀!展覽期間文章下方的廣告欄位會揭露相關展覽攤位資訊!

製作感言

國立臺北科技大學 互動設計系108級畢業製作 茶嶼茶語 製作成員 全體
《茶嶼茶語》全體製作成員

如同開頭所說,寫這篇文章的目的是希望透過從零開始詳細記錄畢制的準備過程,讓未來的學弟妹們不會那麼地迷茫。但我想畢制畢竟是四人花了共一年半的時間做出來的作品,只有我發言的話,可能會有點不夠,因此我訪問了我的組員們關於這次畢業製作的感想給你們看!他們每個人都是很認真、願意互相配合的好夥伴,如果你們有興趣想要了解更多的話,歡迎和他們聯絡喔~

林沛琪 LIN PEI-CHI

國立臺北科技大學 互動設計系108級畢業製作 茶嶼茶語 製作成員 林沛琪
  • 想當個自由自在的旅人,做自己喜歡的創作
  • 負責項目:使用者介面設計、視覺設計
  • Email:[email protected]
  • Instagram:@peiii_2000

我覺得我們組的進度還蠻順利的,大家都做得挺不錯。像我自己畢制期間同時有在實習,所以時間規劃就需要特別注意。好在我們組大家進度都能準時交,所以規劃上就沒那麼擔心。我想建議學弟妹如果你們對「自律」沒有信心,那想兼顧畢制與實習就會很辛苦,也要顧慮到組內大家對畢制的看法與目標。最開始定方向很重要、自己想做什麼也很重要,如果過度看重老師的意見,就很常空轉浪費時間。

郭芝伶 KUO ZHI-LING

國立臺北科技大學 互動設計系108級畢業製作 茶嶼茶語 製作成員 郭芝伶

我很幸運我們沒有像其他組一樣,因為吵架、拆組、換主題而導致畢制進度受影響,就算真的有意見不一致的時候,也會以討論、協調的方式解決。謝謝在這一年間跟我密切配合的沛琪,時常找出粗心的我在做設計稿時遺漏的地方。也很謝謝其他組員跟宋老師,包容會的東西有限的我,並在感到挫折的時候給我激勵。

謝平怡 HSIEH PING-I

國立臺北科技大學 互動設計系108級畢業製作 茶嶼茶語 製作成員 謝平怡
  • 船到橋頭自然直,未來應該會走UI或UX方面
  • 負責項目:程式開發、宣傳規劃與拍攝
  • Email:[email protected]
  • Instagram:@hpi_.0822

關於畢制,我最主要的感想是覺得大家都配合得很好、沒有衝突,也有真的照著進度規劃走,這點我覺得很棒。另外就是我們大家想要做的東西方向還蠻確定的,彼此未來的目標方向也很像。我覺得美術有做起來是我們這組的重要轉捩點,很謝謝大家願意在暑假做,不然進度也不會這麼順利。最後是宋老師人很好,說走就走開車帶我們去坪林的茶館參訪,對學生很盡心盡力,很喜歡老師!

謝承邑 HSIEH CHENG-YI

國立臺北科技大學 互動設計系108級畢業製作 茶嶼茶語 製作成員 謝承邑
  • 未來應該會當個UI或UX設計師,說不定是更加想像外的職業
  • 負責項目:程式開發、專案管理
  • Email:[email protected]
  • Instagram:@chengyi_hsieh

一年半真的是個很長的時間,在互動系裡,幾乎是唯一一次的機會和組員同一組這麼久。雖然我們一開始的確是因為和原組別落單才聚在一起,但這不代表只靠我們就沒辦法撐起一組,也很幸運彼此對於畢制目標相同,因此才有辦法在後續為了同一目標努力。我很感謝大家願意在學期外一同配合專題製作、開讀書會,換作是其他人,情況就不一定會這麼順利。同時,也很感謝大家在美術上的鼎力相助,讓我可以無後顧之憂去負責程式和管理專案進度。

追蹤我的IG帳號@chengyi_hsieh

我的最新動態都在這裡!

追蹤

RECOMMEND

PROMOTION

全面釋放設計生產力

集結超過10種以上專業工具的Spaciing(Figma plguin),可幫你省下可觀的寶貴時間。

立即購買