浩渺無極 揚帆信風 劉珈維 個人作品集
浩渺無極 揚帆信風 劉珈維 個人作品集
目 CONTENTS. 錄 01
02
03
個 人 簡 介
Biography. 個人簡歷
03
互 動 裝 置 / 程 式
Interactive Installation / Program.
推 測 設 計
Speculative Design.
互動繪本 - 喵卡過節趣
07
AR APP - 西本願寺AR
21
製皮所
35
04
05
平 面 設 計
攝 影
Graphic Design. 第十七屆光影之間 - 瞬影
51
躁鬱症資訊視覺化海報
57
攝影社108年下學期期初大會海報
59
攝影社108年下學期人像攝影海報
61
Photography. 人生色彩
65
重溫舊夢
67
観音百箋
69
城市剪影
71
黑白複數
73
毛孩焦點
75
夜不歸
77
植物 X 幾何
79
01 個 Biography. 人 簡 個人簡歷 介
03
個 Biography. 人 簡 介
個 Personal Qualities. 人 特 質 善於傾聽
獨立
理解力
謙和
腳踏實地
適應力
劉珈維 JIA WEI LIU 耐心
連 Contact Way .
自 Introduction.
絡
我
方 式
感性
沉著冷靜
+886-929-731-155
介
我是個善於觀察的人，喜歡四處走走，在自己的
s89336606@gmail.com
紹
周遭尋找靈感，無論大小都能成為創作的元素。
k10118690@xuite.net
我希望能透過自己的專業，將想法和創意展現出
k10118690
來，如同封面所寫 -「浩渺無極，揚帆信風」， 在設計這片廣闊的水域中，揚起風帆御風前行。
03
學 Educational History / Experience. 習 經
2017 - 就讀大同大學媒體設計學系互動組
歷
- 擔任無齡苗圃工讀生 : 資料統整、採購物資、工作坊工作人員
/
2018 - 擔任攝影社美宣 : 製作宣傳海報及課表
經
- 擔任宿營攝影 : 活動紀錄攝影
驗
2019 - 擔任系學會攝影組組長 : 活動紀錄攝影、期末展宣傳照拍攝 - 擔任宿營攝影 : 活動紀錄攝影、宣傳照拍攝 2020 - 攝影比賽 : 第十八屆光影之間-『年華』總獎&單張組佳作 - 參與畢籌會攝影組 : 活動紀錄攝影、宣傳照拍攝
軟 Skill.
個 Personal Strengths.
體
人
技
強
能
項 AI
PS
LR
PR
影像後製
攝影
影片剪輯
AE
Processing
Arduino
Unity
程式
平面設計
木工
ID
Maya
3D MAX
網頁
插畫
04
02 互 動 裝 置 / 程 式
Interactive Installation / Program.
互動繪本 - 喵卡過節趣
07
AR APP - 西本願寺AR
21
互 Interactive Installation / Program. 動 裝 置 / 程 式
中/台語互動繪本 - 喵卡過節趣
作品簡介
專案成員
現代小孩對於傳統節日的相關習俗越來越不了解，因此希望藉由
丁妍馨 : 美術設計
互動繪本吸引兒童目光，了解、體驗傳統節慶，並從中學習一些
劉珈維 : 程式設計、美術設計
台語單字和會話。我們設定了6個場景，分別是新年放鞭炮和團
林詠萱 : 美術設計
圓飯、端午節包粽子和划龍舟、中秋節賞月和烤肉，透過常見的
黃立薇 : 程式設計
節日讓兒童可以更貼近生活。
負責項目 1 美術上色(CLIP) : 新年大掃除(角色、配件)和團圓飯(全)。 視覺 : 標準字和起始、幫助、設定頁、ICON及字幕設計。 程式編寫(Unity) : 設定頁面(音量控制)及部分互動設計 (點擊觸發動畫、場景切換和Loading畫面)。 音效 : 角色配音(中、台語)和錄音。
07
1. 起始頁示意圖。
08
互 Interactive Installation / Program. 動 裝 置 / 程 式
09
10
互 Interactive Installation / Program. 動 裝 置 / 程 發展過程 - 主題元素表 式
透過將有關「 節慶」的人事時地物這五大元素發想歸類，整理出一份主題元素表，方便選擇互動繪本中會出現的角 色型態、習俗活動、舉辦地點時間及配件。從多種傳統節慶中我們選擇出新年、端午節及中秋節，這三個小朋友平 時最容易接觸到，且習俗活動較具特色的節慶來做為繪本中的主要元素。
節慶
人
事
時
地
物
阿嬤
吃團圓飯
新年
祖母家
年獸
祖母
大掃除
元宵
三合院
鞭炮
孫子
掃地
清明
門口
掃把
屈原
曬被子
端午
河邊
被子
船員
放鞭炮
七夕
竹林
灰塵
嫦娥
貼春聯
中元
河堤
燈籠
玉兔
提燈籠
中秋
橋下
春聯
阿公
收紅包
重陽
山下
壓歲錢
阿嬤
貓吃魚
冬至
路邊
紅包
妖怪
屈原掉水裡
除夕
屋頂
大魚大肉
熊貓打屈原
兒童
水果
包粽子(遊戲 )
萬聖
畚斗
採竹葉
聖誕
粽子
烤肉
教師
龍舟
祭祖
情人
竹子
賣月
熊貓
拜拜
月亮
帶柚子帽
柚子 麻糬 香 牌位 神桌
11
發展過程 - 故事文本
新年 起
端午
中秋
主角翻年曆、回想
從這三個節慶中，又分別挑選出最具代表性的
承
大掃除
立蛋、掛菖蒲
祭祖
各三個習俗活動作為故事背景，創建出故事文
轉
放鞭炮、寫春聯
包粽子
烤肉
合
團圓飯
屈原、划龍舟
賞月
本，希望能藉由這9個活動，以有趣的互動方 式讓孩子們認識傳統節慶的習俗活動。
發展過程 - 資訊架構圖
為組織整個互動繪本的軟體，我們發展出了資訊架構圖，方便之後無論在程式編輯或是UI的設計上能夠更快速了 解整個軟體的架構。
遊戲頁面
繪本首頁
幫助頁
設定頁
新年
遊戲頁面
端午節
回首頁
中秋節
設定頁
音量
遊戲頁面
家長設定
回首頁
導讀
設定頁
語言
遊戲頁面
字幕
回首頁
開發者資訊
設定頁
12
互 Interactive Installation / Program. 動 裝 置 / 程 式
13
1. 初期角色設計三視草圖。 2. 初期分鏡草圖 - 新年放鞭炮。
1
2
3
4
3.初期分鏡草圖 - 新年團圓飯。
5
6
7
4.初期分鏡草圖 - 端午節包粽子。 5.初期分鏡草圖 - 端午節採竹葉(後改為划龍舟)。 6.初期分鏡草圖 - 中秋節烤肉。 7.初期分鏡草圖 - 中秋節賞月。
14
互 Interactive Installation / Program. 動 裝 置 / 程 式
15
執行過程 - 美術上色(CLIP)
利用CLIP軟體上色。拿到線稿後，先幫角色上 色後，最後再加上角色陰影及背景上色。
色彩計畫 : 考慮到傳統節慶給人比較熱鬧活潑 的感覺，因此選用較為鮮艷的紅色及黃色作為 整體的主色調，同時也比較容易吸引小孩的目 光，讓他們對繪本更有興趣。
1
2
1. 新年放鞭炮角色上色過程。 2. 新年團圓飯整體上色過程。
16
互 Interactive Installation / Program. 動 裝 置 / 程 式
17
執行過程 - 程式編寫(Unity)
1 2
設定頁可以利用「 音效」及「背景音樂」來分別控制在
1. 設定頁更改音量示意圖。
每個場景當中，角色台詞及背景音樂的音量。
2. 設定頁更改音量程式碼。
18
互 Interactive Installation / Program. 動 裝 置 / 程 式
1
2
3
執行過程 - 程式編寫(Unity)
19
4
5
1
2 3
端午節包粽子的互動為將指定順序的常見材料拖曳進粽
1. 端午節包粽子互動示意圖。
子當中，就可以完成一顆完整的粽子。讓小孩們可以學
2. 端午節包粽子拖曳互動程式碼。
習食材的中/台語名稱。
3. 端午節包粽子互動程式碼。
20
互 Interactive Installation / Program. 動 裝 置 / 程 式
西本願寺AR app
作品簡介
專案成員
西本願寺本堂原本是一個莊嚴氣派的寺廟，但因為遭大火焚毀，
丁妍馨 : Wireframe、程式
失去了往日的風華，導致西本願寺雖然位於熱鬧的西門町附近，
李育綺 : 美術、視覺、文本
卻沒有很多人知道這個建築的存在，因此我們希望利用AR來讓
劉珈維 : UI、程式
大眾看見西本願寺今昔的對比，將西本願寺的文化傳承給大眾。
負責項目 1 發想wireframe、繪製UI Mockup Flow 程式編寫(Unity) : AR主程式、建築細部介紹、其他建築介紹
1. 首頁示意圖。 操作DEMO影片
21
22
互 Interactive Installation / Program. 動 裝 置 / 程 式
23
24
互 Interactive Installation / Program. 動 裝 置 / 程 式
發展過程
藉由西本願寺的「昔日樣貌」、「歷史」、「交通」、「現在外觀樣貌」及「建築建材介紹」這五大面向來發想 APP內容，希望讓觀光客來到西本願寺時，能夠利用我們的AR APP了解此建築，而不是拍完照就草草離去。最終決 定以「2D建築模型重現以前建築樣貌」及「了解現在的外觀特色」為APP主軸，重現西本願寺的昔日樣貌，同時也 能了解現況。
西本願寺 以前建築的樣貌
AR
遊戲
用建築特徵配件 拼湊出完整建築
光雕
用手機AR光雕 畫出以前建築的 樣貌
動畫MG 介紹西本願寺建 築群的興建與修 介紹 復
2D建築 模型
情境
25
點擊虛線框框重 現以前建築樣貌
歷史 透過過關斬將， 來了解歷史
交通 怎麼到達指定地 點
現在樣貌(外觀)
建築建材介紹
了解現在與以前 的不同
透過搬建材來重 建西本願寺以往 的樣貌
按照現在的樣貌 再手機AR中呈 現光雕
按照現在的樣貌 再手機AR中呈 現光雕 介紹現在的西本 願寺變成什麼樣 子
介紹歷史變革
介紹如何到達西 本願寺
介紹現在的西本 願寺變成什麼樣 子
重現過去建築的 歷史發展
利用地圖帶領使 用者到想去的地 方
了解現在的外觀 特色
讓到西本願寺參觀的台灣人，可以用AR掃現在實際的場景，了解到西本願寺昔日的樣貌
功能架構圖
說明手冊
APP主要分成操作說明、AR與相簿功能。說明手冊介紹 APP使用方式，AR可以重現西本願寺的昔日樣貌及建物介
介紹
MAP(AR)
掃描
相簿
編輯相片
對比實照
紹，相簿則可以依據喜愛編輯與2D建物的合照。
功能流程圖 APP功能流程圖。介紹APP中所有功能以及其相互間的關係，方便程式與UI的執行可以更加順暢。
略過 Loading
說明手冊 下一步
完成
back
back 主頁
說明
Map
本堂/御廟所/山門
播完自動返回 掃描實景
虛線框
2D建築物件
建築細部介紹按鈕
和尚導覽員+2D物件
拖曳物件給和尚
出現info+動畫
back 其他建築物件
出現info
back
back
back 相簿
照片
編輯
添加濾鏡
完成
新的相片
back
取消
26
互 Interactive Installation / Program. 動 裝 置 / 程 式
Wireframe UI Flow - AR MAP
logotype
使用說明
start
使用說明 下一頁
開始畫面
上一頁
說明視窗
使用說明 下一頁
上一頁
下一頁
地圖
本堂
本堂
說明手冊
AR Map
相簿 拍照
點擊AR-Map
西本願寺地圖，點擊建築
AR實景掃描(右下角有圖片提示)
鐘樓
information
點擊建築細部介紹
本堂
提示
建築細部介紹
本堂
建築介紹 拖曳 自動 返回
建築介紹
27
拖曳物件到和尚身上
建築物件細部介紹
Wireframe UI Flow - 相簿
06:13
logotype start
使用說明
使用說明 下一頁
開始畫面
上一頁
說明視窗
使用說明 下一頁
上一頁
關閉說明視窗
下一頁
相簿
照片1
編輯
編輯
說明手冊
濾鏡 縮圖
濾鏡 縮圖
AR Map
相簿
點擊相簿
編輯
濾鏡效果
濾淨效果預覽
選擇照片
照片1-1
點擊編輯
編輯
選擇AR濾鏡
重新編輯
編輯完成的照片
編輯完成
28
互 Interactive Installation / Program. 動 裝 置 / 程 式
#E07035
#F6F5EF
#E6DAAA
初期UI Mockup
西本願寺廣場中的建物大多都是木造建築，因此視覺設
1
2
計選用了橘色作為主色，淡黃色為輔，讓整體視覺有復 古、溫暖的感覺，同時重現西本願寺給人們的感受。
1. 標準字及配色。 2. 初期UI Mockup。
29
操作手冊
操作說明 操作手冊
AR AR
MAP
MAP
AR MAP
相簿
AR MAP
相簿
想利用AR認識西本願寺請點選AR MAP
AR MAP
回首頁
本堂
AR MAP
鐘樓
本堂
AR MAP
御廟所 宿舍
庫裡 輪番所
山門
鐘樓
樹心會館
AR MAP
本堂
鐘樓建於於1922年,鐘樓內原本懸掛的大銅鐘,於 明治34年(1901年)完成,鐘上鑄有「明治34年1月 鑄造之旋主臺北最勝講」字樣,以及開頭為「本 願寺」的經文內容,可惜原銅鐘在二次世界大戰 中已遺失,現在的銅鐘則為修建時參考同時期銅 鐘樣式仿製而成。 目前看得到的就是一些殘存木造樑柱與斗拱,只 是銅鐘在光復後已不知去向。
「本堂」則為西本願寺的主體建築，建於1900年
回首頁
相簿
取消編輯
相片1
完成編輯
30
互 Interactive Installation / Program. 動 裝 置 / 程 式
介面介紹 - 操作手冊
簡單介紹APP的操作方式及功能。
介面介紹 - 首頁
APP首頁。功能分別為操作手冊、AR MAP及相簿。
介面介紹 - AR MAP
進入AR MAP會出現西本願寺廣場的地圖，點擊想認識 的建物就可開始互動。
介面介紹 - 建物介紹
點擊到現存建物，就會出現相關圖文介紹，可以從中了 解建物變革及建築特色。
31
介面介紹 - AR
AR功能會提供角度參考圖，方便使用者找到正確角度掃 描建物。掃描成功後就可以與建物合照或是觀看介紹。
介面介紹 - AR建物介紹
掃描AR後出現的2D建物模型。拖曳建物零件給予和尚就 會出現零件解說。
介面介紹 - 相簿
在AR中與建物的合照回儲存至相簿。從相簿可以進行瀏 覽與編輯相片。
介面介紹 - 編輯相片
拍攝的相片可以根據使用者需求來編輯，可以增加想要 的物件並儲存。
32
03 推 Speculative Design. 測 設 製皮所 計
35
推 Speculative Design. 測 設 計
製皮所
作品簡介
皮革加工經常會產生環保或道德的問題，從而觸發動物保護組織 的反彈。2030年的未來，我們是否能利用他人的基因，培養皮 膚並將其鞣製成皮革中，生產出的人造皮革是否可以替代市場上 的皮革產品，還可以給人們帶來優雅，品位或高貴的感覺？
技術利用 1 現在的DNA技術可以從頭髮中提取DNA，將其複制並培養出與
2
客戶幾乎相同的皮膚，最後只要經過加工，人類的皮膚就可以製 成皮革產品，製作過程就像是普通皮革材料(如牛皮革)。只要維 護良好，可以保持皮膚原樣。
35
1. 2. 製皮所介紹海報(IF格式)。
36
推 Speculative Design. 測 設 計
1
2
1. 品牌精神、元素及商品提案海報。 2. 獲利及商業模式介紹海報。
37
發展過程
將製皮所建立成一個獨立品牌，發 展出專屬的品牌識別、獲利及商業 模式，思考如何讓新客戶被吸引而 來消費，讓常客產生信任感，長期 購買產品。商業模式則條列出品牌 建立時所需的各項成本，以便了解 品牌運作模式。 38
推 Speculative Design. 測 設 計
Leather Making Studio
#E5BA9F 發展過程 - LOGO&標準字
LOGO的製作元素是由皮革及DNA所組成，希望讓使用者一眼就知
1
2
道這個品牌的產品是可以用DNA可製化的皮革製品。標準字則是使
39
用方正姚體和象徵人類皮膚紋路的三角形所組成，讓使用者知道品
1. 品牌LOGO及標準字製作元素。
牌的皮革產品來源是源自於人皮。標準色則是使用皮膚色呈現。
2. 品牌服務流程圖。
發展過程 - 服務流程
品牌產品製作過程。當一位使用者想要購買產品時，會先透過網路 商店下訂單，並需取得提供DNA者的同意書，製皮所才會提取DNA 開始製作產品，製作完成再運送給使用者。後續皮革維護過程可再 連絡製皮所做保養。
選擇產品形式
訂單結帳
雙方簽署協議書
取得皮膚DNA
培養皮膚
皮膚加工成皮革
製作產品
產品完成
運送
取貨
產品後續維護
40
推 Speculative Design. 測 設 計
品牌網路商店 1
為了方便使用者無論何時何地都可以使用服務，因此選用較為方便
2
的網路商店，增加顧客使用意願，不用大老遠跑到實體店面，品牌 也可以更快速統整訂單及使用者需求。
1. 製皮所網路商店網站。 網路網站模擬
41
2. 製皮所網路商店模擬示意圖。
42
推 Speculative Design. 測 設 計
43
網路商店介面(電腦版) 1
2
網路商店整體風格以簡潔乾淨為主，主色調為品牌標準色 - 皮膚色 及輔助色 - 土黃色。希望網路商店給使用者整潔、清新及高質感的
1. 製皮所網路商店(電腦版)介面。
體驗。
2. 製皮所網路商店(電腦版)模擬示意圖。
44
推 Speculative Design. 測 設 計
45
網路商店介面(手機板) 1
2
為方便使用者隨時隨地都能夠使用服務所建立的手機板網路商店。 手機板的風格與網路版相同，元素簡潔，希望減少使用者產生視覺
1. 製皮所網路商店(手機版)介面。
疲勞。
2. 製皮所網路商店(手機版)模擬示意圖。
46
推 Speculative Design. 測 設 計
47
服務流程影片 2 1
為了方便使用者可以快速了解服務流程所製作的服務流程影片，可 以放在網路商店或廣告中使用。考慮到部分人可能會排斥品牌產品 ，影片元素使用簡單的 ICON 來代替實體物件，淺顯易懂也不會讓 人反感。
1. 服務流程影片分鏡圖。 服務流程影片
2. 服務流程影片示意圖。
48
04 平 Graphic Design. 面 設 第十七屆光影之間 - 瞬影 計
51
躁鬱症資訊視覺化海報
57
攝影社108年下學期期初大會海報
59
攝影社108年下學期人像攝影海報
61
平 Graphic Design. 面 設 計
第十七屆光影之間 - 瞬影
作品簡介
攝影社歷年來都會舉辦的攝影比賽 - 光影之間，2019年的主題 是「瞬影」，希望參賽者能利用相機、手機來捕捉各種存在於我 們周遭的瞬間的影像。
設計理念 1
「瞬影」給我的感覺是由許多線條所組成的畫面，只能看見物體 的框架和影子，就像是海報所呈現的感覺 : 象徵光的線條在物體 中穿梭，捕捉到的卻只有物體的框架和影子。
51
1. 最終海報成品。
平 Graphic Design. 面 設 計
1
3
2 1. FB粉絲頁大頭貼。 2. FB粉絲頁封面長條圖。 3. FB粉絲頁手機板示意圖。
53
54
平 Graphic Design. 面 設 計
1. FB粉絲頁QA圖。為了能讓參賽者在截稿日前能夠再次確認參 1
2
賽規則而製作的QA圖，讓參賽者可以簡單快速的了解規則。 2. FB粉絲頁QA圖示意圖。
55
56
平 Graphic Design. 面 設 計
躁鬱症資訊視覺化海報
作品簡介
躁鬱症的正式名稱為雙相情緒障礙症(Bipolar Affective Disorder)，患者會在情緒高昂的「躁期」及情緒低落的「鬱期」這兩 個狀態中擺盪。 躁鬱症的確切成因還不明確，目前理論傾向於腦部化學物質不平 衡的現象。而當患者出現情緒波動時，情緒就會像坐雲霄飛車一 樣，快速的在高峰與低谷中穿梭，讓旁人看了膽戰心驚。 57
1. 草圖1-用蹺蹺板比喻患者腦中的情緒起伏 : 當「躁」或「鬱」 其中一方的情緒較重，就會表現在患者臉上。 1 4 2 3
5
2. 草圖2-用雲霄飛車的情境形容患者緒起伏極大。 3. 草圖3-結合草圖1和草圖2，呈現出腦中雲霄飛車的概念。 4. 海報插畫角色草圖。 5. 最終海報成品。 58
平 Graphic Design. 面 設 計
攝影社108年下學期期初大會海報
作品簡介 1
攝影社在每學期初都會舉辦期初大會，希望能在不同的學期接觸 到更多喜愛攝影的社員，在大學短短的四年中，留下更多彼此間 記憶的痕跡，讓回憶有更多交集的色彩。
59
1. 最終海報成品。
平 Graphic Design. 面 設 計
攝影社108年下學期人像攝影海報
作品簡介 1
人像攝影不僅是記錄人的生活，而是用相機抓住稍縱即逝的一瞬 間，用最稀鬆平常的方式來傳達模特背後屬於他自己的故事。雜 誌是平時人們最常接觸到人像攝影的紙本媒介，雜誌封面的人像 照也總是會隱含著各式各樣的暗喻，希望讀者可以看到時，就能 被照片中的故事吸引住目光。
61
1. 最終海報成品。
05 攝 Photography. 影 人生色彩
65
重溫舊夢
67
観音百箋
69
城市剪影
71
黑白複數
73
毛孩焦點
75
夜不歸
77
植物 X 幾何
79
攝 Photography. 影
65
作品簡介
人生色彩
人生總是在向前行，只能奢侈的將青春拋下，雖然失去了那時的鮮
第十八屆光影之間-『年華』總獎
豔色彩，但它總能默默的藏在記憶深處，等待重新嶄露的機會。 66
攝 Photography. 影
重溫舊夢 第十八屆光影之間-『年華』單張組佳作
作品簡介
回憶起過往的情景，雖然早已記不清其色彩，但是願未來也能像記 憶一樣地美好。
67
68
観音百箋
作品簡介
求神問籤時，神明指引了一個人生方向，但如何抉擇仍取決 於人，未來不管是好壞命運，都有機會變卦，全看人心是否 有變。等待時機的到來吧，「一切將從最糟開始變好」。
70
攝 Photography. 影
城市剪影 71
18
每天庸庸碌碌的過著平凡的日子，辛苦了一整天，不妨抬頭
作品簡介
看看，或許會發現由建築所構成的不一樣的風景。 72
攝 Photography. 影
黑白複數 73
在色彩繽紛時總是顯得很雜亂的複數個體，進入到只有黑與
作品簡介
白所組成的世界中會變成怎樣呢? 74
攝 Photography. 影
毛孩焦點 75
毛小孩的陪伴總是令人感到開心，牠們的一舉一動總是能成
作品簡介
為眾人的焦點，毛小孩心中的焦點又會是誰呢? 76
攝 Photography. 影
夜不歸
作品簡介
夜晚逗留在城間小路的計程車，是忙於載送客人，還是有什麼不可 告人的任務要去執行呢?
77
78
攝 Photography. 影
79
植物 X 幾何
作品簡介
圓圓的荷葉配上幾顆清透無瑕的露珠，運用各式各樣的幾何圖形來 妝點，使自己變成整個水塘中的主角。
80
浩渺無極 揚帆信風 劉珈維 個人作品集