Kei Zheng Portfolio（2018）

Since 2015-2018

Por tfolio

Z

鄭 琪 馨 Kei Zheng

Z

Z

Z

Z Z

Z

Z

Z

Z

Z

Z

Z

Z

Z

Content

#01 Interactive Installation 拓栽子 隨來逸筆 互動手模牆 斷手舞者 見習雷神

Plant Plan Sui Tang Dynasties Interactive Designers Wall Miss Bella 2.0 Rumble

#02 UI/UX 介面改善計畫

Music App - Listen

料理新鮮人助手 Cook App - Cooble

#03 Graphic Design Logo 設計

Logo Design

網站宣傳圖

Banner

#04 Film Project 不然你是 ...

Birtney is ...

你不真的想流浪

If You Still Wander

鄭 琪 馨

Chi Shin Zeng ZChishin@gmail.com

About me behance.net/ZChishin

Education 國立臺北科技大學 互動設計系 媒體設計組 National Taipei University of Technology Department of Interaction Design

Skills 互動設計 程式設計 視覺設計

使用者經驗 介面設計 動態影像

企劃簡報 溝通能力 理解能力

Design

Adobe Illustrator, Adobe Photoshop

Video

Adobe After Effects, Adobe Premiere

Coding

Unity, Processing, Arduino

Others

Keynote, Logic Pro

Exhibition 2017 2017 2017 2016 2016 2015 2015 2015 2015

彼此彼此 | 臺北科大設計學院 | 跨界設計展 新一代設計 YODEX Arte Laguna Prize | 虛擬與數位藝術類 畏什麼｜ VR / AR 恐懼體驗展 出神入化｜ VR / AR 恐懼體驗展 Maker Faire Taipei 不太乖教育節 高雄放視大賞 | 跨領域組 新一代設計 YODEX

4

#00

我是 鄭琪馨， 致力於學習互動設計、互動新媒體等領域，尤其喜歡思考人與作品之間有趣 的互動關係。 高中：踏實培養基礎 努力跨過門檻 16 歲那年，姊姊帶我去看新一代設計，那是我第一次見識到浩大、豐富、 精彩全部集結在一起的設計力。也因此讓我決定捨棄高中，轉往技職發展， 學習基礎設計知識與繪圖能力，並考取設計類群。

大學：跨域整合技能 積極爭取曝光， 憑藉著對於未知領域的強烈好奇心，毅然決然選擇「互動設計系」，這四年 當中，不管是老師還是同學，不斷給予我思想上的衝擊與更新，大量的討論、 協作增進我的互動設計、圖像設計與程式能力，擁有執行企劃、表達想法的 能力以及 9 次參展經驗、其中更曾經受邀至威尼斯拉古納藝術獎展覽。

出國：勇敢挑戰未知 寬容學習文化 大四下學期，我向學校申請延畢，到德國當交換學生，短短半年期間我走訪 12 個國家、32 個城市，遇見來自歐洲、中東、南美洲、亞洲等 17 個國家 的學生、旅者、居民，並與他們交流文化差異、語言、人生故事，將我的觀 察力與溝通技巧提升到另一層次。

5

6

Interactive Installation

#01

Design For Interaction

設計體驗，體驗設計

7

‘‘ 拓栽子

Plant Plan

‘‘ 隨來逸筆

Sui Tang Dynasties

‘‘ 互動手模牆

Interactive Designers Wall

‘‘ 斷手舞者

Miss Bella 2.0

‘‘ 見習雷神

Rumble

KUMONStudio, Interactive Installation

互動 裝置

拓栽子 Plant Plan

概 念 「100 年 後 的 自 然 環 境 是 什 麼 樣 子 呢？」在手工種子紙上畫下心中的想像， 再透過擴增投影具象化 「種植」 與 「環 境」 的美好本質。 主題式的互動體驗誘使體驗者結束後願 意 將 種 子 手 工 紙 帶 回 家 栽 種， 延 續 此 作 品與自然環境的生命週期。

作 品 影 片 vimeo.com/195609952

團 隊 成 員 鄭琪馨、鄒元媛、顏晧真、張文瑋

8

組長 專案企劃 裝置設計

9

KUMONStudio, Plant Plan

互動機制

使用技術

1. 首先想像未來的植物環境並且畫在手工種子紙上面 2. 接著將畫紙貼到牆上進而擴增投影出動畫到畫紙上頭 3. 對種子紙模擬澆水、施肥等栽種步驟，民眾所繪製的圖畫將會活 起來並與人們產生互動 4. 仔細照料自己的植物才可以使之開花結果，觸發機關散發香味 5. 在體驗的最後，民眾可以將這張手工圖畫紙帶回家埋入土壤，讓 新芽破土而出，這也象徵民眾對於未來的想像發芽。

紅外線偵 AR Map Process

手工種子紙

10

受邀至威

術

偵測 pping sing

威尼斯拉古納藝術獎展出花絮

11

KUMONStudio, Interactive Installation

互動 裝置

隨來逸筆

Sui Tang Dynasties

概 念 年 少 時， 在 課 本 上 一 連 串 的 塗 鴉 惡 搞 行 動 , 是考試壓力的苦中作樂 , 也是青春時 代的文藝復興。 我們想再次使壞 , 從體驗的過程中 , 激發 樂趣 , 也喚醒你我的赤子之心 , 同時藉由 此作品讓大眾更貼近互動設計 , 看見未來 教育的無限可能。

作 品 影 片

vimeo.com/165669372

團 隊 成 員 鄭琪馨、鄒元媛、顏晧真、張文瑋

12

專案企劃 裝置設計

13

KUMONStudio, Sui Tang Dynasties

作品理念 背負著學生身份已達十多年的我們，問自 己 在 求 學 生 涯 中 難 以 忘 懷 的「 不 乖 」 行 為，其中之一就是上課畫畫，尤其是課本 上只要出現人臉的照片，幾乎都會被粉墨 一番，偶爾還會流傳到網路上讓人莞爾一 笑。 於是我們將整個展場牆面設計成一本攤開 的國文課本，民眾對著牆上的李白或是杜 甫頭像進行塗鴉，同時他們會對體驗民眾 說出現代人的流行用語，產生古人與鄉民 詼諧的衝突。 之所以選擇「畫畫」當作《隨來逸筆》的 操作行為，是因為考量到來參觀《不太乖 教育節》的對象，如果是畫畫這件事情， 只要拿起筆、想畫什麼就畫什麼，幾乎不 會受到年齡、性別、主題等等的限制。越 多人來塗鴉，像李白跟杜甫這樣知名的古 人就有更豐富多樣的詮釋。

互動機制

使用技術

1.

2.

3.

4.

Touch Board Processing

牆面有兩幅詩人畫像，選擇其中之一 使用彩色筆於其臉上豪放創作 塗鴉的同時，觸發 TouchBoard 裝置 詩人會即時對民眾說話，產生有趣回饋

14

「找回制服年代在課本塗鴉的年少輕狂。」

2015/May. 參展 不太乖教育節 Naughty Education

15

Interactive Installation

互動 裝置

《彼此彼此》互動手模牆 Each Other interactive designers wall

概 念 設 計 師 牆 設 置 於 展 場 入 口 處， 牆 上 所 展 示的 50 隻手模是按照所有參展設計師的 手 打 造 而 成， 以 初 次 見 面 的「 握 手 」 動 作 作 為 互 動 方 式， 以 此 形 式 歡 迎 民 眾 前 來觀展。

團 隊 成 員 顏晧真、鄒元媛、梁毓珮、江元、徐宗逸、 鄭琪馨、林君哲

16

模型施作 裝置設計

17

Interactive Installation

作品理念 臺北科大互動設計系畢業展 《彼此彼此》。「彼 此」自那邊與這邊的距離，延伸至你我之意；「彼 此 彼 此 」 重 複 乙 次， 成 了 對 話 中 的 謙 言 用 語。 就 讓「 你 我 」 的 互 動 與 影 響， 加 上 新 的「 你 我 」， 持續產生新意，彼此彼此輝映。 在展場設計中，特意在入口迎賓處設置此互動裝 置，牆上的 50 隻手模，是展場組根據每一位參展 的 設 計 師 量「 手 」 打 造 而 成， 上 下 微 動 其 中 一 個 手模會出現該設計師的動態大頭貼，以獨特的方 式向初見面的觀展民眾行握手禮。

18

互動機制 1. 投影牆上同時播著 50 位參展設計師的動態大頭貼 2. 小橘牌寫的不是名字，是屬於該設計師的特徵，猜猜 看這是誰的手？ 3. 選定一隻手模握手（上下搖動） 4. 投影牆上放大該設計師的動態大頭貼，猜對了嗎？

使用技術 Arduino Mega Processing

2017/June. 參展 臺北科大設計學院 | 跨界設計展

19

Junior's Final Presentation

互動 裝置

斷手舞者 Miss Bella 2.0

概 念 失去雙手的貝拉，為了夢想淪為音樂盒的 零件，但她終究是個怪胎，終究難逃一死。 你問我為什麼？那你為何見死不救？ 你只是拉著貝拉的雙手，跟她跳完最後一 支舞。

團 隊 成 員 鄭琪馨、古偉助、林佳燕、 田雅銘、王靜儀、徐宗逸

20

程式設計 裝置結構設計

21

使用技術 Unity 3Ds Max After Effects

作品理念 「你願意跟我跳舞嗎 ? 讓我 重返過去的榮光。」 這是來 自 一 名 芭 蕾 舞 者 Bella 最 終 的企盼。 在這看似華麗的馬 戲團 , 是成全 個少女的夢還 是摧毀 , 不得而知。 只有請您親身靠近 , 與之共 舞 , 真相才會漸漸清晰。

本作品希望透過實際的互動 讓觀者與 更親近 , 並以觸 摸、 共 舞 等 行 為 對 虛 擬 影 像 做連結 , 希望達到虛實結合 的效果 , 同時透過氣氛營造、 故 事 設 定、 互 動 體 驗 讓 玩 家 感到寒慄之餘更是煞有其事 的錯覺。 22

Miss Bella 2.0

23

斷手舞者

裝置結構 為使觸覺更如假似真，針對實體裝 置、道具、跳舞動作進行改善：原本 體驗者是握著貝拉的假手，一前一後 地拉手；後改為扶著貝拉的腰左右搖 擺，在舞蹈動作上更為直覺，也更近 似於扶著女孩共舞。

互動機制 1. 靠近這個怪胎馬戲團特製的箱子 2. 雙手伸進箱子摸到貝拉曼妙的身軀； 透過面具上的挖洞看見貝拉幻象站在眼前 3. 左右搖擺貝菈的身軀，貝拉就會與你共跳一 支舞 4. 一邊共舞、一邊觀賞貝拉的面貌從腐屍回到 容光煥發及更深入的故事情節

24

Miss Bella 2.0

2016/Apr. 參展 臺北科技大學 互動設計系 大三期末成果展 《畏什麼》VR / AR 恐懼體驗展

25

Web Game

網頁 遊戲

見習雷神 Rumble

概 念 Rumble 是一款賦予玩家權力懲罰別人的 網頁遊戲，你是一位見習中的雷神，在時 間的壓力下找出壞人並給予雷擊！ 手握權力的你，究竟行使的是正義？亦或 是被自我價值觀凌駕之上的假正義呢？

團 隊 成 員 鄭琪馨、田雅銘、林佳燕

專案企劃 遊戲機制設計

26

27

見習雷神

作品理念 我們想呈現的是身處於網路時代的人們，在快速 的訊息流竄之中，往往還來不及了解事情的來龍 去脈，就憑著心中自以為是的正義妄下評論，這 也是人性的通病 ---「認為眼見就是為憑」。 我們運用「錯視」的手法來表達「誤解」，透過 任意旋轉方型城市產生錯視感，玩家要找出真正 的壞人做壞事；給予雷擊，也就如同網路上的輿 論攻擊，這些具有強烈正義感的網民，透過手機、 平板、電腦在玩此款網頁遊戲的同時，就像是人 們隔著螢幕針對時事評論的模樣。

28

Rumble

遊戲機制 1. 輸入自己的雷神暱稱進入遊戲 2. 在時限內找出正在做壞事的人類給予雷擊懲罰！ 3. 人類的方型城市可以 360 度旋轉，特殊的角度 有時造成錯視（誤會好人） 4. 依據得分高低，獲得雷神等級，從最低的 菜鳥、中等、經驗豐富的、專家 2016/Jul.

競賽

Adobe Design

Achievement Awards

Finallist / Social Impact

29

30

‘‘ 介面改善計畫

Music App - Listen

‘‘ 料理新鮮人助手

Cook App - Cooble

UX / UI

#02

Design For Users

設計為人，人為設計

31

UI / UX Design

介面 設計

2015/Nov.

介面改善計畫 Music app - Listen

概 念 Listen 具 有 明 確 的 設 計 宗 旨（ 降 低 App 功 能、簡單手勢操作、單純聽音樂），我們在 主要功能不變的狀態下，只針對易用性、慣 用性、企業識別做整體介面的調整。

團 隊 成 員 顏晧真、鄭琪馨

32

UX 分析 Wireframe

33

UI / UX Design

Music App - Listen

Persona

姓名：Merita Mille 性別：女性 年齡：28 歲 職業：外商公司業務

情境：單身未婚的 M 到公園慢跑，比起抒 呼吸跟跑步速度。有 或是卡歌下一首。

經 測 試後發現問題：

1. 初次使用的教學繁複

2. 功能按鈕的位置與 iOS 操作習慣相反

主打輕易操作的 Listen，在初次使用時 就 塞 給 用 戶 多 達 12 種 的 手 勢 要 記， 結 束教學進入主畫面後，便沒有再任何提 示。

​ 如： 愛 心 在 上 面， 往 上 滑 變 成 喜 愛 歌 例 曲， 但 是 在 iOS 系 統 的 多 工 頁 面 中， 往 上 滑 則 是 關 閉 應 用 程 式； 上 一 首 置 於 右 邊、 下 一 首 則 置 於 左 邊， 與 大 多 數 播 放 器位置相反。

34

er

務員

Merita，平日時常加班跑業務，想運動的話會 抒情歌，更喜歡搭配輕快有節奏感的音樂調整 有時會邊跑邊操作音樂播放器，像是重聽一遍

3. 不知道可以左右滑動，導致找不到 " 設定 "

4. 排序並非以用戶的需求為優先 用戶能透過 " 設定 " 來調整個人的使用偏 好， 但 在 這 個 頁 面 中 卻 是 將 評 分、 訂 閱 的 選 項 置 於 調 整 選 項 之 前。 此 外 灰 色 的 說明小字在深綠色背景會閱讀不易。

主頁介面並無任何提示，使用教學中也 沒 有 提 到， 完 全 不 知 道 " 設 定 " 頁 面 是 要往右滑。

35

UI / UX Design

Music App - Listen

36

37

UI / UX Design

介面 設計

2016/Jan.

料理新鮮人助手 Cook app - Cooble 概 念 許多人都經歷過剛開始學習料理的新手時 期， 隨 著 食 譜 App 越 來 越 多， 到 底 有 沒 有解決到根本的問題呢？還是衍生更多的 廚房問題呢？ 使 用 Cooble 實 體 投 影 球 搭 配 獨 家 開 發 App，Cooble 將食譜教學投影到牆上， 全手勢偵測控制投影畫面，更連動社群功 能，為你打造智慧做菜空間。

團 隊 成 員 喻可安、陳曉倩、林于珺、江元、 顏晧真 梁毓珮、凌霄、鄭琪馨

38

UX 分析 企劃簡報

39

UI / UX Design

Cookble

Persona 1 姓名：Lisa 姓別：女性 年齡：30 歲 職業：商務公司組長 情境：為了省錢和安心而準備三餐 , 縱使上班忙碌 , 下班也會趕著 回家煮晚餐給老公與小孩。 假日會採買一個禮拜的食材量 , 不太 敢買不熟悉的食材。

Persona 2 姓名：欣慧 性別：女性 年齡：21 歲 身份 : 大學生 情境 : 嘗試新料理 , 做完帶去學校分享，注重擺盤與配色 , 喜歡拍 菜色分享至社群 , 租屋處只有電鍋跟微波爐 , 喜歡快速俐落 , 不會 花時間研究太高深的食譜。

Persona 3 姓名：Alex 姓別：男性 年齡：27 歲 職業：銀行行員 情境：本來三餐外食 , 最近健身教練建議他開始攝取高蛋白食物 , 於是他上網學著做幾道料理 , 但偶爾會吃膩 , 也開始陸續添購廚房 用具 , 希望特殊節日時做一頓好吃的飯給女朋友。

40

訪 問「料理時的煩惱」： 3 5 歲媽媽：

「無法邊料理邊使用手機觀看阿基師教學視頻 , 油膩的手會弄得螢幕很髒。」 「平時沒有時間去傳統市場 , 只能去就近的超市 ,

2 5 歲小資女： 卻無法即時知道便宜的當令食材」

「課業繁忙 , 平常收藏的食譜懶得拿出來學習 ,

2 1 歲男大生： 想要多變的菜色。」

41

UI / UX Design

Cookble

投 影 與 A PP 介面設計 :

42

43

44

Design For visual

Graphic Design

#03

設計視覺，視覺設計

45

‘‘ 商標

Logo

‘‘ 文宣

Banner

Graphic Design

視覺 設計

2017/Jan.

Awespire LOGO 設計 開發觸覺模擬、互動設計、虛擬實境之技術。

46

草稿發想關鍵字：孚信相交融、虛擬實境、縱橫時間軸、五感模擬

47

Graphic Design

視覺 設計

2017/Jan.

Awespire LOGO 設計 開發觸覺模擬、互動設計、虛擬實境之技術。

48

49

Graphic Design

視覺 設計

2017/Jan.

Nothing Studio LOGO 設計 此工作室提供電路設計、韌體撰寫、機構設計等電路工程服務。

50

草稿發想關鍵字：電路、電子、科技、電焊、機械、工具、電路板、金屬

51

Graphic Design

視覺 設計

2017/Feb.

活動宣傳 Banner Banner

52

53

Graphic Design

視覺 設計

2017/Feb.

活動宣傳 Banner Banner

54

55

Graphic Design

視覺 設計

2016/Nov.

活動宣傳 Banner Banner

56

57

Graphic Design

視覺 設計

2016/Jul.

活動宣傳 Banner Banner

58

59

60

‘‘ 不然你是

Britney is...

‘‘ 你不真的想流浪

If You Still Wander

Film Project

#04

Design For Every Second

設計分秒，分秒設計

61

Film Project

影片 專案

2016/Jun.

不然你是 ...

Britney is...

前 言 α 454--- 地 球， 為 了 不 讓 這 顆 蘊 藏 著豐富資源的美好星球落入宇宙聯盟 其他行星手裡，被賦予機密任務來到 地球的 冷血之星 - 布蘭妮，究竟能不 能順利找出人類的弱點帶領瓦利亞星 成功侵略地球呢 ?

作 品 影 片 youtube.com/watch?v=ymzlQIPs78s

團 隊 成 員 何承佑、梁毓珮、吳東霖、鄭琪馨、 顏晧真、江家伶、特別演出 喻可安

62

視覺特效 演員

63

64

Britney is...

2016/Jun.

影展 / 競賽

第二屆金互動影展

臺北科技大學 微電影 首獎

65

Film Project

影片 專案

2016/Jun.

你不真的想流浪

2016 GMA 金曲國際音樂節 演唱會影像

故 事 摘 要 男孩悉心照料魚群 然後緩緩將頭浸泡入水缸 感受，感受水中和緩的波動 感受，感受魚群撫擾的柔軟 只要他用力想，想像他正在水中 甚至也能隨心所欲控制想像中魚缸的形狀 他與紛擾隔絕了， 連喜歡的女孩那溫柔聲音都隔絕了 柔軟的身軀掛在那兒 好像沒有煩惱的

作 品 影 片 vimeo.com/172401654

團 隊 成 員 何承佑、梁毓珮、吳東霖、鄭琪馨、 顏晧真、江家伶、特別演出 喻可安

66

故事腳本 動態

67

68

69

70