PORT FOLIO CAI SYUAN LIN
01 2 個人簡介
互動設計
品牌形象 識別設計
03－12
13－ 54
55－ 7 4
45
視覺設計
產品設計
攝影
7 5 －88
89－ 96
97－ 106
0
Personal Profile 個人介紹與分析/ 個人履歷表 S.W.O.T分析 周邊設計/
LOGO Design Business Card
基本資料 姓名/
林采萱 LIN, CAI-SYUAN
性別/
女
英文名/ 出生日期/ 手機/
Email/
Sherr y
1999 年 4 月 26 日 (+886)905579373
caisyuan9926@gmail.com
電話/
(+886)2-2225-5251
自我介紹
林采萱畢業於台北市的大同大學媒體設計學系互動媒體設計組 。 她對於UI/UX設計 、 品牌形 象識別設計 、 平面/版面設計非常感興趣也較擅長 ， 除此之外 ， 也懂動態影片製作 、 基本的 網站架設及互動遊戲 、 裝置開發 。 她常使用Adobe Photoshop 、 Illustrator 、 After
Effects 、 Unity等電腦軟體做設計及專案 ， 也具有批判性思維 ， 了解多種設計方法 。 她也期
望未來可以接觸更多軟體 、 設計方法 、 不同的設計師及不同領域的人 ， 以提升自我的能力 、
認識不同的事物 。 她是個又感性又理性 、 很喜歡思考 、 認真 、 努力且細心的人 ， 擅長運用這 些個人特質到設計和行政處事上 ， 她也喜歡學習新事物 ， 勇於接受挑戰及建議 ， 積極參與設 計競賽 ， 如iF DESIGN Talent Award 、 台灣國際學生創意設計大賽…等 。 她空閒之餘喜歡
追劇 、 看電影 ， 並紀錄觀後感以訓練觀察 、 思考及表達能力 ， 除此之外 ， 也喜歡逛街 、 打羽 05 6
毛球和滑滑板等戶外活動 。
學歷
2021-目前
2017-2021
經歷
大同大學媒體設計學系研究所（ 預計2023年7月畢業 ）
大同大學媒體設計學系互動媒 體設計組
2021
入圍
2021放視大賞行動應用類軟體內容組 、 軟體內容創意企劃組
2020
擔任
畢業製作籌備委員會
實習
2017 2015 2007
總召
* 帶 領 同 學 籌 備 畢 業 製 作 及 舉 辦展覽、發表活動，並擔任規劃、系上與同學之間溝通與協 調的角色
科技部《 災害引導之智慧動態圖像符號指標系統 》設計研究
擔任
華碩ASUS《 ProArt StudioBook夢想應援計畫 》贊助創作者
參與 擔任
2018
數位設計部
參與
擔任 2019
深擊設計有限公司
通過 通過 擔任 獲得
VR程式編寫
* 製 作 V R 互 動 體 驗，體 驗 火 災 發生時，如何依照智慧動態圖像指示逃生以降低災害風險
108年第2學期
副班代
* 協 助 導 師、班 代 處 理 班 級 事 務
教育部《 探索水生生物的祕密世界 》計畫
AR程式編寫/介面設計
* 配 合 國 小 四 年 級 自 然 科 課 本 所開發互動教學的AR AP P、立體書教學道具
媒體設計系系學會
總務
* 負 責 校 外 活 動 保 險，協 助 系 上收費
iPAS經濟部產業人才能力鑑定 - 色彩規劃管理師 ( 色彩計畫 ) GEPT全民英語能力檢定
中級
初級
* 由 中 華 民 國 教 育 部 核 准 財 團 法人語言訓練測驗中心辦理的英文能力測驗
錦和高中吉他社
美宣長
* 負 責 社 團 周 邊 製 作 與 編 排、展演舞台佈置、印刷廠商接洽，並擔任老師與幹部之間溝通 與協調之橋梁
第25屆日月潭國際萬人泳渡嘉年華證書
007 6
思想周全
心思細膩且觀察細微
容易想太多
做事認真盡責
對於關係相處、行為很敏感
遇事堅強面對，抗壓性高
對事情執著，容易鑽牛角尖
善良且善解人意，可理解不同想法
個性慢熱，對不熟的人和環境較被動
完美主義者，自我要求高
技術所知廣泛但不深入
待人真誠，讓人覺得好相處、放心
無工作經驗
時間管理有效率
學習意願高且學習能力佳
S W
O 有英、日、韓文基礎
大環境競爭激烈，競爭者來自世界
所交付的事情完整度高
網路資源豐富，假資訊多，須具備
環境資源豐富 家人的支持
年輕就是本錢
互動產業未來可看性高
07
T
各地
判斷事物的能力
互動科技發展迅速，須常關注新資 訊及有豐富的想法
08
個人LOGO設計/ M y LOGO | 2020
由中英譯名字的字母Ｃ和Ｓ作為發想，Ｓ的結尾筆畫緊扣著Ｃ， 名字中的Ｃ和Ｓ都代表著我，密不可分。
配色選用彩度較高的玫紅色，玫紅色給人較可愛、熱情、自信
的感覺，也代表著內心和情緒豐富的自己，也藉此表現出平時 較內斂的自己。
CMYK =（ 0, 0, 0, 0 ）
CMYK =（ 0, 0, 0, 100 ）
CMYK =（ 7, 6, 11, 0 ）
CMYK =（ 25, 90, 41, 0 ）
CMYK =（ 0, 0, 0, 0 ）
CMYK =（ 0, 0, 0, 100 ）
CMYK =（ 0, 0, 0, 0 ）
CMYK =（ 0, 0, 0, 100 ）
CMYK =（ 3, 13, 60, 0 ）
CMYK =（ 0, 23, 70, 0 ）
CMYK =（ 0, 3, 3, 20 ）
CMYK =（ 0, 3, 3, 28 ）
CMYK =（ 0, 0, 0, 100 ）
CMYK =（ 6, 18, 60, 0 ） CMYK =（ 3, 8, 40, 0 ）
09
CMYK =（ 0, 0, 0, 0 ）
CMYK =（ 12, 30, 80, 0 ） CMYK =（ 0, 12, 60, 0 ）
CMYK =（ 25, 90, 41, 0 ）
CMYK =（ 0, 0, 0, 28 ） CMYK =（ 0, 0, 0, 15 ）
CMYK =（ 7, 6, 11, 0 ）
CMYK =（ 0, 0, 0, 45 ） CMYK =（ 0, 0, 0, 15 ）
198.1px 188.6px
182.5px 181.9px
175.0px 172.7px 171.9px
165.1px
159.1px 158.3px 149.4px 148.7px 139.7px 129.9px 120.3px 107.4px 97.5px 96.8px 88.0px 87.0px
63.7px 54.0px 44.1px
23.0px
16.1px
2.8px
20.1px 21.3px 23.1px 24.2px 38.7px 41.5px 44.4px 47.4px 50.5px 66.4px 69.0px 71.9px 76.6px 84.2px 86.7px 86.9px 89.0px 89.6px 91.7px
106.4px 109.1px 112.1px 115.2px 118.2px 135.4px 138.4px 140.9px 143.9px 158.3px 161.1px 164.1px 167.2px 170.1px 187.5px 190.2px
（ L , a* ,b* ）=（ 94, 0, 5 ） （ L , a* ,b* ）=（ 46, 57, 8 ） 10
個人名片設計/
B usi nes s Card | 2020
由LOGO的主色調為名片的背景色，資訊部分則是由LOGO輔助 色為背景色以凸顯個人資訊，並藉由LOGO簡易的組合變換以 清楚呈現個人LOGO及名字。
11
12
1
Interaction Design 商品概念/
qualis智能藥袋 互動裝置/ 富甦
互動APP/
探索水生生物的祕密世界 A R Kindergarten Life 互動繪本
X
品牌LOGO設計/
B RA N D LO GO | 2019
品牌以quality（ 品質 ）、qualia（ 感質 ）做為出發點，不管是在
健康方面或其他方面，所做出的商品、系統、服務 . . . 等都是為 了更有品質，不管是對人的健康、生活品質、環境品質 . . . 等都 是；也希望所推出的服務能關照到使用者的心理、感受方面。 15
X
字型規劃｜
將現有藥袋「 標楷體 」 、 「 新細明體 」換成「 思源黑體 」 ，統一字型且文字樣 式較方正。
內文規劃｜
將標題與內文之間的標點符號刪除，並善用顏色及字體粗細區隔。 舊 標楷體： 標楷體 標楷體： 新細明體
新 思源黑體
思源黑體
色彩設計｜
沿用現有藥袋基本的綠色，以及重要資訊的紅色，並於資訊層級做基本綠色 的色調變化，圖片及外部資訊等做些微的色彩變化。 ( L*, a* ,b* ) = ( 53, -46, 29 )
( L* , a* , b* ) = ( 4 5 , 5 6 , 3 6 )
( L*, a* ,b* ) = ( 63, -26, 18 )
( L* , a* , b* ) = ( 3 1 , 1 , 1 )
( L*, a* ,b* ) = ( 73, -32, 26 )
( L* , a* , b* ) = ( 1 0 0 , 0 , 0 )
16
Smart Medicine Pack
The smart medicine pack is mainly provided for patients with chronic diseases. It is a touchable panel made up of flexible bent AMOLED, and it clearly shows medications and reminders.
Advantages of AMOLED Has a certain degree of flexibility. Hard to be damaged than the traditional panel, LCD, with glass substrate.
The flexible bent panel will replace traditional paper products and the current panel as the most practical used type.
17
18
02 01
Take The Haved Set Up Medicine Pack
Patient Visit / Revisit The Hospital
03
Take And Use The Medicine Pack
Recycle Drugs / Manage The Medicine Pack
Info.
Show usages of medication and suggestions about illness 19
Remind to take the medicine on time
Remind the time for revisiting the hospital and preparation
Recycling the unused drugs when the bag recycling
20
互動流程
病人
看病
取藥
病人家屬 了解病況
醫生
設定病況
開藥 給藥
設定 用藥規則
追蹤藥量
補藥通知
藥劑師
醫院
醫院主管
21
設定 醫院ＩＤ
管理藥袋
設定 病人ＩＤ
接收病歷
追蹤 藥物流動
追蹤藥量
補藥通知
分
回診
身
明日建議
戶 戶
名
提醒用藥
總結一天
用
忘記用藥
推薦病期 需補充食品
用
按時用藥
追蹤病況 發現異狀
追蹤病況
即時照顧 追蹤病況
確認病況 &用藥情況
藥物使用諮詢
回收藥袋
回收藥物
追蹤用藥情況
重整藥袋
監察病況
監察業務
22
生
堅
類
病 期 建 議 照 護 建 議
雞 香 、鴨 柿 菇、 、鵝 忌 酒 子、 竹 口 筍 、蝦 、 糯 芒果 、 食 豆 、蟹 米 品 、 、 、水 類 、 花 甜 梨 茄 枝 食 子 、 、 蚵 蛋
肉
況
產
狀
海
人
類
菜
果
水
他
其
病
看
品
帶 物
需
診
文
黃 小
科
骨
27
12
資 訊 醫 院 資 訊
醫
尿
病 人 狀 況
小 慧
調
病 期
狀 況
建 議
師
藥
醫
劑
Ａ 棟 Ｃ 32
訊
李
體
提 供 身
」， 以
室
診
看
師
回 13 診 ： 25 資
文
醫 師 回 資 診 料 前 兩 袋 週 回 、 需 診 未 至 服 提 醫 用 院 醒 「 之 藥 抽 品 血 、 驗
訊
藥
資
查
檢
日 期 診 /時 科 間 醫 別 10 師 8
回
診
看
25
男
同
師
照
54
小
師
境
環
養 降溫 要 點
保
狀
況
病 期 建 議 照 護 建 議 看
診
資
訊 醫
院
資
訊
大
大 醫
學
醫
取
消
患
43
52 12
翻 拍 身 患 背 部 處 理
施
減
免
起
避
一
可
勿 指責 行 壓力 動 陪 管理 伴
勿
者
驗
者
de
RC o
患
Q 證
袋 驗
藥 入
者 輸
患 分
描 身
掃
院
證
身
分
驗
運
證
少 自 己 心 予 的指 靈 過 責 陪 動 多壓 、 批 、 伴 每 復 力， 判 健 每 2小 食 與語 品 環 抬 2小 時 可 氣 一 臥 高 物 境降 時 彈 患 床 一 次， 品 性 溫 肢 調 代 護 、 次， 夜 防 換 整 間 理 止 夜 成 開 則 腫 間 分 清 冷氣 脹 則 3~ 除 4 ， 3 阻 或局 若 ~4 小 居 時 礙 有 家 空 部涼 血 小時 一 次 間 管 環 雜 敷 堵 一次 境 物 塞 、 狀 增 況 加 時 照 則 明 放 、 平 固 定 物 品 位 置
07
12
3C
個 人 資 料 病 床 歷號 號
體
師
藥
醫
核
訊
生
先
媒
慧
覆
學
李
資
小 翰
李
看 期/ 歲 診 時 藥 科別 間 號 10 骨 811 17 方 71 科 醫 看 黃 52 16 小 師 診 ： 領
處
日
性 名 年 別 齡
姓
護 檸 建 香 檬、 議 蕉 橘 補 果 、牛 子 、 、 看 充 橄 奶、 芭 診 食 樂 欖 資 油 豆漿 、 品 訊 開 番 、 菠 、蛤 茄 避 冷氣 、 菜 免 、 蠣、 奇 香 或局 醫 異 皮 奇 料 院 異 毛豆 果 膚 、 部涼 運 資 、 果 色 訊 動 護 、 、牛 花 素 敷 木 理 肉 椰菜 、 對 瓜 化 牆 、 、雞 、 學 壁 高 香 上 運 性 菜 肉、 麗 爬 ，將 去 動 菜 、 。 角 手 酪 豬肉 復 質 ， 掌 梨 健 成 手 平 分 放 掌 掌置 於 不 牆 動 於牆 上 ， ， 緩 邊， 利 Ta 慢 門 用 的 手肘 手 台 tu 轉 門 診時 伸 指 動 彎曲 北 ng 直 頭 領 診時 間 身 的 藥 上 ，將 市 體 至9 U 力 ， 號 間 現 至 0度 上 中 ni 量 再 手舉 另 場 慢 急 下 午 一 ，上 山 ve 至 將手 至 慢 診 掛號 側 r 週 90 夜 午 舉 最高 區 si 。 手臂 一 度 服 間 週 高 開 的 貼 中 ty 。 ， 一 ～ 務 05 手 。 位 週 週 掛 山 M 時 心 置 一 ～ 六 00 ：4 向 。 ： 0起 間 ～ 週五 就 號專 北 ad 內 08 00 i 週 醫 抽 ， ： 健 路 a ～ 五 諮 線 13 掛 再 00 24 號 用 康諮 詢 三 Ho 將 ～ （ 17 ：0 ： 號 前 藥 0 ： 1 0 詢 0 段 sp 碼 2： 0 （ 2） 諮 00 ～ 單 it 1 0 詢 4 2 0 ～ 6 ， （ 2 ） 24 0 0 al 07 8 20 ：0 22 服 （ 02 0 ： 號 ： 務 02 ）22 49 - 060 45 30 7 4 0 ）2 電 依 序 24 9 - 0 088 話 辦 8 - 9 088 理 轉 21 掛 轉 分機 1 號 院 分 （ 9 資 （ 無 機1 訊 掛 11 08 號 ： 1 服 00 （ 務 ～ 0 ） 8： 1 00 7： 00 ～ ） 17 ： 病 00 人 ）
素 維 生素 Ｃ 生 素 Ｂ1 Ｅ 2
維
維
23
註 冊
忘 記 入
登
登 料 ？
入
資 取 得 登 入 資 料
取 消
確 定 此 定
除
確
移 患
曉
增
茗 者 ？
林
新 患
A
K
明
M
阿
者
林
E
小 翰
管 理 患
B B E YO E QU U QU AL R I A L T L IF IA Y E B E T T E
李
R
者
The smart medicine pack solves current problems, like unclear presentations of medications, and too much information about the illness to remember.
24
商業模式
主要營運項目 ‧ 智能藥袋 ‧ APP/網站系統 ‧ 系統維護、問題解決
主要資源
價值定位 ‧ ‧ ‧ ‧ ‧ ‧ ‧ ‧ ‧
新穎的 性能績效 客製化 設計 品牌 把事情做好 風險逆轉 可達性 使用者體驗
‧ ‧ ‧ ‧
硬體（藥袋）製作 軟體、系統製作 人力資源 知識資源 ‧ 藥物、病症專業數據 ‧ 醫院、病人數據 ‧ 專利、版權 ‧ 行銷資產 ‧ 品牌行銷 ‧ 商品、系統行銷 ‧ 客戶關係
費用結構 驅動方式 ‧ 成本驅動 ‧ 價值驅動
25
客戶關係 動機 ‧ 維繫舊客（慢性病病人） ‧ 獲取新客（自費）
方式 ‧ ‧ ‧ ‧
個人化協作 用戶諮詢 社群 共同創作
收入金流 成本項目 ‧ 人力成本 ‧ 藥袋製作成本 ‧ APP製作成本 ‧ 系統維護成本 ‧ 行銷成本
‧ 藥袋銷售 ‧ 使用者付費 ‧ 廣告收費 ‧ 租賃收費
客戶族群 ‧ ‧ ‧ ‧ ‧ ‧
慢性病病人 病人家屬 醫生 藥劑師 醫院主管 醫院
通路 ‧ 醫院 ‧ 藥局 ‧ 品牌銷售
獲利模式
成
花 費 、 耗 損
本
QUALIS
慢性病病人
‧ 人力成本 ‧ 藥袋製作成本 ‧ APP製作成本 ‧ 系統維護成本 ‧ 行銷成本
‧ 看病時的附加 費用 ‧ 健保費 ‧ 自費
病人家屬
藥劑師
醫院主管
醫院院方 ‧ 藥袋買賣
Ｘ
Ｘ
Ｘ
Ｘ
Ｘ
‧ 藥袋資料設定 ‧ 病歷 ‧ 病況指示 ‧ 建議事項
‧ 藥袋資料設定 ‧ 藥物資訊 ‧ 配藥數 ‧ 用法、用量 ‧ 藥袋回收
Ｘ
Ｘ
Ｘ
Ｘ
‧ 用藥上更直覺 ‧ 貼身照護
‧ 追蹤病人病況 ‧ 心理較安心
‧ 追蹤用藥情況 ‧ 追蹤病人基本 身體狀況
‧ 勞力成本
實 ‧ 製作時間成本 質
醫生
Ｘ
‧ 藥袋管理 ‧ 數據維護
Ｘ
‧ 藥袋銷售
金 ‧ 使用者付費 ‧ 廣告收費
錢 ‧ 租賃收費
Ｘ
Ｘ
獲 益
‧ 品牌知名度
實 ‧ 商品知名度 質
‧ 追蹤用藥情況 ‧ 監察病人狀況 ‧ 追蹤病人基本 ‧ 監察醫生/藥劑 身體狀況 師業務狀況 ‧藥物管理系統化 ‧ 追蹤內存藥量 ‧ 追蹤藥物流動
‧藥物管理系統化 ‧ 追蹤內存藥量 ‧ 追蹤藥物流動 ‧病歷管理
26
27
富甦
互動裝置
富民生態公園過去是人人都厭惡的水溝 ， 有著
濃厚的異味及許多蚊蟲 ; 藉由里長和居民一點一 滴地改善環境 ， 從清潔到美化環境 ， 從種植樹 木與花草到培養適合居住於生態區的生物 ， 讓
這個生態公園逐漸完整 ， 也讓生態獲得重新甦 醒的機會 。
富甦讓使用者體驗公園的演變過程 ， 以及萬物 慢慢甦醒的狀態 。
程式撰寫/ 裝置規劃/ 裝置製作/
主題發想與討論/
林采萱 、 陳宣諠 、 洪瑾彤 陳怡靜 林采萱 、 陳怡靜 、 洪瑾彤 、 陳宣諠 、 許致榕 林采萱 、 陳怡靜 、 洪瑾彤 、 陳宣諠 、 許致榕
28
富甦LOGO設計/ Fu Su LOGO | 2019
以作品名稱「 富甦 」作為標準字LOGO設計，主要以線條及些微 色塊拼湊而成，呈現裝置整體風格，成熟、簡約、意識，並加 入富錦街的特色，樹、葉子、綠色的元素，以點綴線條。
22x
56x X
色彩應用
29
X
草地
濕壁
草叢 竹林
#335133
#3a2715
#407736
#5c3d21
#607d4e
#6f6636
涼亭
#638633
#755132
#90ad28
#9a8086
#72af57
#b8aea0
#c6d579
#aeb0be
#d0d889
#c5c3d2
土 步道
水流
樹木
#cbc360
#cbcacd
#b08d5a
#f6f0f5
#998267
#d2ebf3
#8d6154
#434e9f
#7f432b
#d16587
石頭步道 樹穴
花圃
30
照
旋
肩
部
病
期
建
議
肩
病
人
狀
況
區域環境介紹
路 民 權 東
敦
塔
悠
富 錦 街
化
富民生態公園
北
路
路
民 生 東 路
台北市松山區民生社區｜
富錦街巷弄一帶，大多是老舊的四層樓公寓，社區內約有二十五座公園，被 綠樹 和 樹蔭 包圍著，隨著時間、氣候的變化，讓城市街道有不一樣的感受。
富民生態公園｜
１９９９年規劃，由水溝加蓋、美化後所形成的生態公園，也是台灣第一座生態公園。由於 居民大部分來自中南部，因此公園刻意佈置成竹林步道的自然風貌。
「 綠樹多的 優 缺 點 」
31
1. 2. 3. 4.
優點
美化環境 提供環境庇護 減少噪音 心理作用
1. 2. 3. 4.
缺點
落葉多 蚊蟲多 樹木生長問題 樹木維護及保 存問題
富錦街街道
富民生態公園
32
裝置模型/
M OD EL OF INSTALL ATIO N | 2 0 1 9
採用「 富民 生 態 公 園 」實 際 分 區 ， 並 以 接 近 真 實 物 件 為 模型風格 ； 模 型 主 要 採 用 並 分 為 五 大 區 塊 ， 竹 林 步 道 、
濕壁生態 、 水 中 生 態 觀 察 區 、 水 生 植 物 區 、 濕 地 植 物 區 、 水溝 。
8
3
4 12
1
7
9
10
2
12
12 12 12
12
12 12 12 12 12 12 12
8
5
12
11
12
12
12
12
1
1
12
12
7
1
1 12
12
1 12
12
12
5
長x寬x高 = 80x35x12
7
12
7
平面圖
7
12 12 12 12
6
公分
區塊與物件介紹 1.
水溝區
4.
竹林
７.
樹木種植區
１０.
3.
竹林步道
6.
土底
９.
石頭步道
１２.
2.
33
濕壁生態區
5.
水生植物區
８.
涼亭
１１.
花圃
草地區
草叢（ 濕地植物區 ）
模型配件
（ 底 下 裝 有 R F I D感 測 器 ）
RFID-RC522
５個 樹 木 種 植區
９顆 可 種 植 樹木
（ 底 下 裝 有 R F I D感 測 貼 片 ）
３種 水 流 變化 （ L E D燈 條）
34
互動方式
選擇一棵樹
選擇其一種植區
放入種植區
燈光/音效回饋
回饋結果 變數一/
1. １種回饋 ， 蟲鳴鳥叫之音效播放 / 特色區域燈 光顯現
2. 水流燈條變化 - 不流動
特色區域燈光 竹林步道 濕壁生態 生態池
35
蟲鳴鳥叫音效 蟬
綠繡眼 麻雀
澤蛙
莫氏樹蛙 台北樹蛙
變數二/
1. ３種回饋 ， 蟲鳴鳥叫之音效播放 / 特色區域燈 光顯現
2. 水流燈條變化 - 些微且慢速流動
變數三/
1. ５種回饋 ， 蟲鳴鳥叫之音效播放 / 特色區域燈 光顯現
2. 水流燈條變化 - 大量且快速流動
36
程式編寫 /
PR OGR A MMING SYSTEM | 2 0 1 9
使用Un ity 及 Ard uino兩 種軟 體 編 寫 程 式 ， A rd u i n o 負 責 LE D燈條之 變 化 撰 寫 、 R F I D 感 測 之 簡 易 設 定 ， 並 控 制 s e n so r之變 化 ， 回 傳 變 數 至 U n i t y ； U n i t y 負 責 串 聯
Ard u in o 之程 式 、 編 寫 變 數 、 播 放 音 效 ， 並 且 接 收 與 回 傳變數至A rd uino 。
讀取RF I D感應貼片之數值
（ 判別９顆樹各自的身分 ， 以執行不同變數 ）
37
控制LE D燈之明滅
（ 根 據 R F I D 貼 片 感 應 與 否 ， 控 制 L ED 燈 明 滅 ）
控制 L E D 燈 條之顏色 、 亮度 、 形式
（ 根 據 R F I D貼 片 感 應 之 數 量 多 寡 ， 控 制 L ED 燈 條之亮度及形式 ）
控制聲音播放之開關
（ 根 據 對 應 的 RFI D 貼 片 感 應與否 ， 控制聲音之播放與暫停 ）
38
39
探索水生生物的祕密世界
AR APP
結合AR技術及立體書的互動輔助教材 ， 提供不 同形式的學習工具 ， 便於學習及觀察教課書無
法提供的細節 ， 以配合課本教材及教師教學 。
程式撰寫/ 美術製作/ 3D建模製作/ 旁白錄製/ 立體書製作/
林采萱 林芷瑄 吳媜瑩 、 吳易璉 王新宇 古蕙甄 、 劉芷昀
40
立 體書介紹/
P OP-UP BOOK | 2019
3D立體書結合 A R 技 術 ， 提 高 閱 讀 的 旨 趣 。
以 圖卡或立 體 書 啟 動 AR 資訊 ， 使 用 者 與 立 體 書 及 A R 內 容 做 互動應用 ， 以 達 到 數 位 內 容 及 實 體 物 件 的 虛 實 整 合 ， 提 升學習的 認 知 層 次。
41
P1. 認識水域－８種水域
P4. 認識植物－４種
P2. 水域小小生物員
P5. 認識魚的構造
P3. 認識池塘植物
P6. 認識水中生物
42
APP 介 紹 《 探索水生生物的祕密世界 》AR互動輔助教材是利用有趣的媒體工具 ， 以配 合課本教材及教師教學 。
學生可以在實際環境中看到各類不易觀察的細節 ， 可以更有真實感地學習水 生生物的知識 。
從遊玩的過程中 ， 輕鬆地了解水生生物的世界 並更有效率地完成學習 。 43
第一頁 內容介紹 第二頁 功能設定 起始畫面
第三頁 AR鏡頭
小測驗 第四頁
操作說明 第五頁
第六頁
44
遊戲設計/
G AM E D ES IGN | 2019
除了與立體書 的 互 動 ， 於行 動 裝 置 上 A R配 合 立 體 書 偵 測 畫面的互動也 將 會 影 響 整體 情 緒 的 走 向 ， 除 此 之 外 ， 互
動方式必須符 合 目 標 客 群的 思 維 及 使 用 習 慣 ， 避 免 過 於繁 複 、 複雜 ， 但 又 保 有 互 動 豐 富 、 多 元 性 。
45
Normal
Happy
Excited
Confused
46
47
Kindergarten Life
互動繪本APP
藉由手機 / 平板等數位裝置的應用配合 ， 打造 出適合學齡前兒童的互動繪本 ， 並藉由使用者
在使用 、 閱讀繪本的過程中 ， 學習語言及生活 中的基本小知識 。
主程式策畫/ 介面規劃/ 遊戲程式/ 美術製作/ 動畫製作/ 國、臺語配音/ 主題發想與討論/
林采萱 林采萱 林鈺泰 趙穎欣 陳宣諠 林采萱 、 陳宣諠 、 林鈺泰 林采萱 、 陳宣諠 、 林鈺泰 、 趙穎欣 48
目標客群 前運思期 － 直覺階段
( Preoperational Period ) － ( Intuitive substage )
這個階段的孩童有對立及直覺式的思考 ， 憑直覺或
自身過往的經驗來直線推理 ， 繪本需要一個明確 、 單一的主題來突顯概念 ， 讓孩童更容易理解 。
不一樣的互動模式 ， 更能投入繪本世界 。
４－７歲 學 齡 前 兒 童
預期目標
事物擬人化 ， 將感情投入進去 ， 與他們對話 。
設計方向
多元化
互動性
教育性
參與度 趣味性
49
習慣用過往經驗來推理 ， 並使用直線思維 。
教育 場景
貼近目標客群生活圈 ， 較好融入故事
動畫
故事性的動畫能讓記憶更深刻
擬人化動物角色
容易產生共鳴感及融入角色
故事設定/
STOR Y SE TTING | 2019
以 現實的 場 景 為 基 礎 ， 場 景 結 構 避 免 偏 離 現 實 太 多 ， 讓
人 抽離故 事 ， 產 生 彆 扭 ； 幼 稚 園 是 目 標 客 群 主 要 頻 繁 活 動 的地方 ， 所 以 場 景 將 取 用 幼 稚 園 活 動 地 點 。
開頭
場景 原因
原因
問題
解決
結局
操場
餐廳
球卡在樹上
不敢溜溜滑梯
便祕
環境髒亂
問題
上課不專心，把球打 到樹上去
曾有不好的經驗，害 怕滑下去
飲食不均衡，少吃蔬 果
亂丟垃圾，未做好回 收分類
解決
搖晃樹木，讓球掉下
引 導 動 物 們 溜 滑梯
餐盤指定的位子添入 正確分類的食物
幫忙回收分類 50
APP 介 紹 《 Kindergarten Life 》數位互動繪本是利用媒體工具 ， 以傳遞及教導生活上 的小知識 。
使用者可以藉由繪本動畫 、 互動遊玩的過程中 ， 輕鬆了解生活知識 ， 並有效 率地完成學習 ； 繪本搭配國語及閩南語的模式 ， 讓使用者可以從繪本中學習 台灣的母語 。 51
起始畫面
前導動畫
主選單
轉場動畫
遊戲前導動畫
遊戲前導動畫
遊戲前導動畫
遊戲前導動畫
遊戲 - 均 衡 飲食
遊戲 - 種樹
遊戲 - 溜滑梯
遊戲 - 垃圾分類
遊 戲 結 尾 動畫
遊戲結尾動畫
遊戲結尾動畫
遊戲結尾動畫
遊戲完成
結尾動畫
52
遊戲設計/
G AM E D ES IGN | 2019
互動繪本除了 故 事 本 身 ， 遊 戲 互 動 體 驗 也 會 影 響 整 體 情緒 的走向 ， 除 此 之 外 ， 互 動 方 式 也 必 須 符 合 目 標 客 群 的 思
維及使用習慣 ， 避 免 過 於繁 複 、 複 雜 ， 甚 至 提 供 互 動 提 示以供參考 。
53
Normal
Happy
Excited
Confused
54
2
Brand Identity
品牌形象識別設計/ So2 搜餓私房小菜 包裝設計/ Sashitsu
巧克力系列脆餅
品牌名稱
搜餓 期望簡單融入料理 輕鬆烹調在餐點中扮演多元的角色
品牌理念 品牌理念
輕鬆生活 ， 簡單品嘗
天然健康 色味俱佳
簡單料理
融入生活 用心實在
韓式風味 傳承好味
品牌DNA
Product 產品
Price 價格
Place 通路
Promotion 推廣
韓式泡菜
零售 $100~170
實體店面
廣告宣傳
涼拌海帶絲
精緻禮盒 $600~700
APP訂購
會員價
韓式雜菜
批發商
涼拌海帶芽 小魚乾
醃製蘿蔔 57
美味可口
禮盒 $150~220
年節禮盒 $600~700
網站
合作餐廳 FB
客人口碑 促銷活動 FB評價
樣品試吃
品 牌形象識別手冊/
B RA ND ID E NTITY MANUAL | 2 0 2 0
為品牌打造專屬的形象識別設計，規劃出設計及商品可運用之 基本系統、應用系統，並製作成冊，讓接手設計及製作的其他 設計師、製造商等依循手冊內所訂定之規範。
58
標誌與標準字發展/ DEV ELOPMENT | 2020
品牌標誌與標準字之發展過程，從一開始偏西式且較適用於糕 點，接著往韓式古典窗櫺、甕、韓國國旗等發展，到最後結合
韓式料理常有攪拌之意象及甕、餐盤等，以強調呈現韓式及料 理。
59
60
品牌LOGO設計/
B R A ND LO GO | 2020
標誌外型發展自盛裝泡菜的甕、小菜碟，以及甕中的食物和攪 拌食材之意象。
10x 6.5x
9x
21x 8x
2x 1.5x
9.5x
1x
27.5x
61
單色稿
複合式燙金
燙金
燙銀
品牌標準字設計/
BR AN D TYP O G R AP H Y | 2 0 2 0
標準字設計融入韓式筷子，細長且銳利的元素，並以斷開筆畫 的方式，以表達洗鍊雅緻的感覺。
53x 8x
47x
5x
1x
1x
62
品牌色彩設計/
B R A ND CO LOR | 2020
品牌主要識別標準色為紅、藍、黑，發展源於韓國國旗的色彩
做運用搭配；輔助色源自於食物色彩，紅、橘、黃參考自泡菜， 墨綠參考自海帶芽，海鮮藍參考自小魚乾。
品牌標準色 透明度
100%
70%
30%
PANTONE 654 C C/ 100 M/ 86 Y/ 28 K/ 0 #003D82 PANTONE 7626 C C/ 26 M/ 95 Y/ 100 K/ 0 #CB291E
PANTONE Neutral Black C C/ 0 M/ 0 Y/ 0 K/ 100 #231815
品牌輔助色
PANTONE 7540 C C/ 0 M/ 0 Y/ 0 K/ 85 #4C4948
PANTONE 282 C C/ 100 M/ 90 Y/ 13 K/ 68 #041E42 PANTONE 574 C C/ 56 M/ 22 Y/ 98 K/ 72 #4E5B31 PANTONE 7627 CP C/ 0 M/ 95 Y/ 84 K/ 26 #A73539 PANTONE 7413 C C/ 1 M/ 60 Y/ 98 K/ 4 #DC8633
63
PANTONE P 4-13 C C/ 0 M/ 5 Y/ 62 K/ 9 #E8D476
輔助圖形設計/
BR AN D LO G O | 2 0 2 0
倒入醬汁而濺出的圖像與標準色結合元素延伸輔助圖形。
設計應用時請特別注意整體尺寸、比例、圖形之密度、標準色 數值等等之規範。
64
品牌名片設計/
B usi nes s Card | 2020
由LOGO的主色調為名片的背景色，資訊部分則是由LOGO輔助 色為背景色以凸顯個人資訊，並藉由LOGO簡易的組合變換以 清楚呈現個人LOGO及名字。
65
訂購單設計/
O rd e r M e nu | 2 0 2 0
品牌主要以網路行銷及團體訂購， 結合全新的形象識別與設計 規劃，為品牌設計出專屬的訂購單。
66
手提紙盒
67
購物袋
品牌LOGO設計/ 品牌標準字設計/ 品牌色彩配置/ 輔助圖形製作/ 基本組合規劃/ 應用字體規劃/
陳怡靜 洪瑾彤 陳怡靜 洪瑾彤 、 陳怡靜 林采萱 林采萱
名片、菜單、標籤貼紙製作/ 手提袋、禮盒製作/ 網站製作/ 識別手冊製作/ 主題發想、製作與討論/
陳怡靜 洪瑾彤 陳婕恩 林采萱 洪瑾彤 、 陳婕恩 、 陳怡靜 、 林采萱 68
Sashitsu Catch Quality, Catch You.
品牌介紹 Quality + Detail = Circle
SIMPLE 簡單
QUALITY 品質
簡單中看見我們的質感與細節
Sashitsu DETAIL 細節
獨享
品牌產品定位
視覺形象定位
女
便利
柔和
在職
單身
7 6 5 4 3 2 1 0
不注重外表
不拘小節 嗜鹹
小家庭
嗜甜
注重外表
69
. Ca ou tch Quality, Catch Y
目標族群定位
愛買
細節控
WARMTH 溫暖
節省
男
學生
分享
美味 趣味 互動
7 6 5 4 3 2 1 0
環保
簡單 質感 精緻
可愛 溫暖
7 6 5 4 3 2 1 0
精緻 高雅
清新 簡潔
親切 摩登
品牌吉祥物設計/
BR AN D M AS COT | 2 0 1 9
Sashitsu主要販賣商品為巧克力脆餅，其後續也將推出不同口
味的系列脆餅；以可愛、親切為主要風格，打造出代表不同口
味的吉祥物，以供後續行銷及數位互動包裝製作上的角色設定 所使用。
巧克力口味
牛奶口味
抹茶口味
香草口味
紅莓口味
70
標準字發展 參考字型 Century Gothic
Sashitsu
手稿草圖
第一版精稿
第二版精稿
確稿 Ca
品牌LOGO設計/
B RA ND LOGO | 2019
品牌以quality（ 品質 ）、simple（ 簡單 ）、detail（ 細節 ）、
warmth（ 溫暖 ）做為出發點，並希望所傳達的視覺形象既可愛 又不失高雅，保有摩登感，讓人覺得有質感但平易近人以符合 商品定位及售價。 71
tch
ou Quality, Catch Y
.
Ca
tch
ou Quality, Catch Y
.
( L* , a* ,b* ) = ( 79, 16, 57 )
( L* , a* , b* ) = ( 3 1 , 4 7 , 2 8 )
( L* , a* ,b* ) = ( 95, 0, 5 )
( L* , a* , b* ) = ( 3 0 , 5 , 6 )
色彩應用
Ca tch
Ca
tch
o Quality, Catch Y
o Quality, Catch Y
u.
Ca
u.
Ca
tch
o Quality, Catch Y
tch
o Quality, Catch Y
u.
u.
72
包裝視覺設計
. Ca tch You Quality, Catch
■品名：巧克力脆餅 ■成分：麺粉、代可可脂牛奶巧克 力水滴(棕櫚仁油、蔗糖、乳糖、乳粉、可可粉、可可脂 、大豆卵碳脂、脂肪酸甘油酯、脂肪酸蔗糖酯、香料)、 植物油(棕櫚油、大豆油)、蔗糖、膨脹剛(碳酸氨銨、碳酸 氫鈉)果糖食盟、可可粉、香料、大豆卵磷脂 ※奶素 ■過 敏原：本產品含有麩質之穀物(麺粉)、堅果(可可豆、大豆 (大豆卵磷脂) ■本產品生產製程廠房，其設備或生產管線 有處理可可豆、花生類及其製品 ■淨重：180公克 ■保存 期限：12個月(係指未開封狀態且正常條件保存) ■有效日 期：標示於包裝上(西元年/月/日) ■負責廠商/製造廠商： 成偉食品股份有限公司 地址：台中市梧棲區自立一街178 號 電話:(04)26303131 ■消費者專線:0809-026699 ■http ://www.trikofoods.com.tw ■原產地：台灣 ■保存方法 ：開封後儘早食用，避免直接日照，置於陰涼乾燥處。
營養標示
CHOCOL AT E GRANU L E
73
每份
每100公克
152大卡 1.3公克 7.1公克 4.8公克 0公克 20.7公克 11.6公克 86毫克
507大卡 4.3 公克 23.72公克 16.1公克 0公克 69.0公克 38.7公克 288毫克
台灣 製造
2020.01.20
巧克力脆餅
熱量 蛋白質 脂肪 飽和脂肪 反式脂肪 碳水化合物 糖 鈉
有效日期(西元年/月/日) (YYYY/MM/DD)
每一份量30公克 本包裝含6份
品牌LOGO設計/ 包裝視覺設計/ 包裝結構設計/ 吉祥物視覺設計/ 主題發想與討論/
林采萱 林采萱 洪瑾彤 蔡子祺 林采萱 、 洪瑾彤 、 蔡子棋 、 許致榕 74
3
Visual Design 編輯手冊/ 士外淘園 海報/
DRUG 居住的意象
77
士外淘園
編輯手冊
《 士外淘園 》想挖掘出士林區更多元的玩法 ，
不僅只局限於士林夜市 ， 希望藉由手冊讓各個 年齡層的人們都能在士林找到紓解壓力的好去 處。
手冊製作/ 主視覺製作/ 周邊製作/ 形象影片製作/ 主題發想與討論/
林采萱 、 林鈺泰 、 黃靖涵 洪瑾彤 、 蔡子祺 洪瑾彤 、 蔡子祺 陳怡靜 林采萱 、 洪瑾彤 、 蔡子祺 、 陳怡靜 、 林鈺泰 、 黃靖涵 78
士外淘園LOGO設計/
Sh i hli n Playg round LOGO | 2 0 1 9
以現實的場景 為 基 礎 ， 場 景 結 構 避 免 偏 離 現 實 太 多 ， 讓
人抽離故事 ， 產 生 彆 扭 ； 幼 稚 園 是 目 標 客 群 主 要 頻 繁 活 動的地方 ， 所 以 場 景 將 取 用 幼 稚 園 活 動 地 點 。
X
79
( L* , a* ,b* ) = ( 77, 4, 55 )
( L* , a* , b* ) = ( 6 3 , 3 0 , 4 2 )
( L* , a* ,b* ) = ( 63, 18, 57 )
( L* , a* , b* ) = ( 5 2 , 2 8 , 3 7 )
( L* , a* ,b* ) = ( 75, -16, 52 )
( L* , a* , b* ) = ( 6 3 , - 8 , 2 8 )
( L* , a* ,b* ) = ( 65, -28, 39 )
( L* , a* , b* ) = ( 5 2 , - 2 5 , - 1 4 )
X
X
X
( L* , a* ,b* ) = ( 67, 30, 9 )
( L* , a* , b* ) = ( 3 3 , 2 5 , - 3 6 )
( L* , a* ,b* ) = ( 78, 3, 69 )
( L* , a* , b* ) = ( 5 5 , - 2 5 , - 1 3 )
( L* , a* ,b* ) = ( 94, -2, 6 )
80
手冊與周邊商品/
B R OC HUR E AND MERCH A NDI S E | 2 0 1 9
手冊提供讓各個年齡層的人們都能在士林找到紓解 壓力的好去處 。
81
布貼
身高尺
卡貼
拍立得裝飾貼
82
DRUG
A B US E o r M E D I C AT I O N
drug跟medication直譯都是藥物的意思 ， 分別在於medication為「 治療性
的藥劑或藥品 」、 drug通常為「 麻醉劑 、 迷幻劑 、 興奮劑等藥物 」， 而drug 大多是會使人心智麻木 ， 不當使用的話可能會上癮 ， 也因此通常帶有貶義的 意思 。
不同的藥物在正當使用下對人體或疾病有心理 、 生裡或精神上的幫助 ， 但若 是過度濫用則會造成負擔甚至是傷害 。
SYRINGE 針筒
83
GUMMY BEAR 小熊軟糖
BRAIN 大腦
CARDIOLOGY 心臟
SYRINGE製作/ CARDIOLOGY製作/ BRAIN製作/ GUMMY BEAR製作/ 主題發想與討論/
林采萱 許致榕 洪瑾彤 林采萱 、 許致榕 、 洪瑾彤 林采萱 、 許致榕 、 洪瑾彤
84
DRUG
A B US E o r M E D I C AT I O N
drug跟medication直譯都是藥物的意思 ， 分別在於medication為「 治療性 的藥劑或藥品 」、 drug通常為「 麻醉劑 、 迷幻劑 、 興奮劑等藥物 」， 而
drug大多是會使人心智麻木 ， 不當使用的話可能會上癮 ， 也因此通常帶有貶 義的意思 。 不同的藥物在正當使用下對人體或疾病有心理 、 生裡或精神上的 幫助 ， 但若是過度濫用則會造成負擔甚至是傷害 。
針筒/
SYR I N G E | 2 0 1 8
針筒一般做為醫療使用 ， 但也常被用來做
不當使用 ， 像是吸毒傳遞的媒介 ， 同時也 代表著管制藥物的使用 ； 若是醫療上正當
使用 ， 對人體或疾病會有一定的幫助 ， 若 是錯誤濫用 ， 則會對身體造成負擔甚至是 傷害 。
MADE BY
83
林采萱
小 熊軟糖/
GU MMY B EAR | 20 1 8
小熊 軟 糖 是 多 數 人的 童 年 回 憶 ， 軟 糖 的 記
憶是 甜 甜 的 、 幸 福的 ； 日 後 卻 被 當 成 毒 梟 運毒 、 藏 毒 的 媒 介 ， 讓 小 熊 軟 糖 不 再 是 記 憶中 單 純 帶 給 人 們幸 福 的 樣 子 。 MADE BY
林采萱 、 許致榕 、 洪瑾彤
84
大腦/
BR AI N | 2 0 1 8
大腦意味著人們的思維 ， 針頭代表著藥物
流通的管道 ，晃影就像卻乏正確用藥的意識
及使用藥物後的暈眩感 。管制藥物的好壞完 全取決於我們如何使用 。 MADE BY
85
洪瑾彤
心臟/
CAR D I O LO G Y | 2 0 1 8
心臟是維繫生命的源頭 ， 亦是心靈的依靠 ； 注射針意味著藥物醫治人們的病痛 ， 然而 ， 不當的使用也會對人體造成傷害 。 MADE BY
許致榕
SYRINGE製作/ CARDIOLOGY製作/ BRAIN製作/ GUMMY BEAR製作/ 主題發想與討論/
林采萱 許致榕 洪瑾彤 林采萱 、 許致榕 、 洪瑾彤 林采萱 、 許致榕 、 洪瑾彤
86
居住的意象
城市意象
內容述說的是自己家周遭的環境 ， 從小到大觀察到
的環境變遷 ， 這個環境特殊的地方 ， 以及只屬於這 個地方的特色故事 ， 還有一些生活在這裡的心得 。
風格｜
整體文字、編排的調性、加工方式及挑選紙質會偏向柔和且貼近大自然，較符合 這個環境氛圍，以及這個地方會有的民俗活動等。
編排｜
以主副標題為視覺重點，運用拉長的線條框住，視覺上有延長的效果；內文則分
段落並延著主副標題的輪廓排序；圓圈等圖像則是讓畫面更豐富、更有生命力的 主要元素之一。
紙質｜
挑選的紙質為「白棉絮」 ，可以看到一些些微的棉絮，讓紙本身更有有機、原生的 視覺效果。
87
88
4
Product Design 燈具/
餘光點點 磁力裝置 光河 木製燈具
91
光河
木製燈具
燈具主要分三個部分 - 燈座 、 燈罩 、 燈蓋 。
以日式 、 台式傳統木拉門或窗花 ， 作為燈罩的
延伸發展 ； 藉由光的照明 、 燈罩花紋的投射 ， 映照出如星河的光影 ， 在黑暗的夜裡 ， 被柔和 且溫暖的光影擁抱 。
92
尺寸規格圖/
DIM EN ST IONAL DRAW ING | 2 0 1 9
93
94
餘光點點/
M AGNET IC K INETIC | 2018
由壓克力板 材 、 玻 璃 紙 、 螺 絲 、 棉 線 、L ED 燈 、 數 多 個 磁鐵 ， 完成 此 作 品 。
應用磁鐵「 同 性 相 斥 」的原 理 ， 取 代 黏 著 劑 的 黏 合 ； 也
應用了「 異 性 相 吸 」， 讓 壓 克 力 片 各 自 排 斥 、 轉 動 ； 在
轉動片轉動 時 ， 藉 由 L E D 燈 的 照 明 、 壓 克 力 板 的 透 明 度 、 以及玻璃紙 的 交 錯 顏 色 ， 照 出 如 好 天 氣 時 樹 蔭 下 樹 葉 飄 動 的光影般 。
異性相吸
同性相斥 手撥動轉動片
95
96
5
Photo graphy 色彩與物件/ 圖釘 刷具 手機與配件 靜物攝影/
皮革手拿包 布鞋 香水
色彩與物件
藉由背景色紙與物件的搭配 ， 拍攝出撞色的效
果 ； 製造出空間感消失 ， 有如使用不同張照片 合成 。
PHOTOGRAPGER DATE 99
林采萱 2018. 0 5 . 1 9
100
PHOTOGRAPGER DATE 101
林采萱 2018. 0 5 . 1 9
PHOTOGRAPGER DATE
林采萱 2020.04.15
靜物攝影
打造出不同的氛圍 ， 使靜態物品帶出不同感受 ， 讓商品不只是靜態物品 ， 而是能傳達東西的媒 介 ； 並拍攝出物品本身的美與細節 。
PHOTOGRAPGER DATE 103
林采萱 、 李 育 綺 、 劉 珈 維 、 魏 劭 庭 2019. 0 6 . 0 3
104
PHOTOGRAPGER DATE 105
林采萱 、 李 育 綺 、 劉 珈 維 、 魏 劭 庭 2019. 0 5 . 1 6
PHOTOGRAPGER DATE
林采萱 、 李育綺 、 劉珈維 、 魏劭庭 2019.05.24
106
THANK YOU.