2
CON T E N T S
03
ABOUT ME
UI/UX & WEB DESIGN
43
05
GRAPHIC DESIGN
PRODUCT DESIGN
63
3
ABOUT ME
1
李 Li, Shi-Hsuan
國立臺灣科技大學
思 萱
National Taiwan Univerity of Science and Technolory tel / + 8 8 6 - 9 1 0 - 0 4 0 4 2 6
創意設計系 - 主修工業設計
ma i l / y ef un1 2 3 @g m ai l . c o m
D e sig n U n d e r g r a d u a t e Ho n o r s P r o g r a m
whc ha t / y ef un1 2 3
- I n d u st r ia l D e sig n
2
SKILLS
UI/UX DESIGN
WEB DESIGN
User Research
Wordpress
Sketch 3
Html
Flinto
CSS
Illustrator Photoshop Indesign
INDUSTRIAL DESIGN
AfterEffects Final Cut Pro
Cinema 4D
Keynote
Rhino ProEngineer Keyshot Lightroom
3
EXHIBITIONS
EXPERIENCES
2015 台 灣科大設計週 - 忐 忑 子 女 作 品 參 展
B e h an c e Po r t f o l i o R e vi e w i n T ai w an
產 品設計作品
策展行政組
ProE 建模作品
UXSD 用戶體驗 x 服務設計 工作坊 金獎 清華大學產品開發合作專案 台灣科大設計週 - 忐忑子女 講座組 J o n k e r Mal ac c a A n d r o i d A p p 開 發 介面設計、視覺設計
2013 你 有什麼毛病展 參展
創獸營營隊 宣服組組長與晚會展場佈置
台 灣科大設計週 - 誰 管 明 天 主 題 展 參 展
台灣創意母體 - 校園化裝競賽
河 方台北
特殊材質獎
所 有格 - 字型展 參 展
班刊 - 八分之一 編輯
4
5
UI/UX & WEB DESIGN
6
JONKER MALACCA 2014 Gap Time for Dream chasers in Asia 國 際 體 驗 學 習 計 畫， 此 專 案 為 開 發 一 款 介 紹 馬六甲當地文化街的旅遊指南 App，幫助馬六甲申請上世界文化遺產，此 App 已贈與世界文化遺產局。 點我下載 共同參與 / 陳柏全、黃致嘉 ` 負責 / 資料收集、攝影、介面設計、視覺設計 7
掃描下載試用 8
01
Jonker Malacca UI/UX Design
兩大類別深度探索 每個類別裡介紹的店 家 都 是 當 地 學 校 推 薦 與 認 定 的 ， 收 納 M a t e r i a l 式 設 計 讓 介 面 簡 潔 明 瞭 。
9
店家介紹
相片集
Google Map 導航
10
01
Jonker Malacca UI Design
店家導航 第四項功能為所有店家在地圖上的確切位置，可以 選擇類 別 ， 或 者 全 部 顯 示 ， 讓 使 用 者 一 目 了 然 。
11
App GUI
LOGO
+ #b5495b
+ 地標
Jonker Malacca
COLORS #b5495b
#E6E6E6
#545859
主色取自馬六甲最常 出 現 的 紅 磚 牆 顏 色 ，希 望 讓 使 用 者 能 有 身 歷 其 境 的 感 受 。
ICONS
12
高中歷史課活動 App，透過劇本懶人包進行課間臨時趣味活動， 提高學生的專注力與學習動機，創造師生間雙向且良好的互動。
U X S D W o r k s h o p 2 015 . 0 5 用戶體驗 X 服務設計 X 創新
金獎
金獎 共同參與 / 林子虹、王亦方、湯士賢、吳宜芳、李佳軒 參與分工 / 使用者經驗研究、介面設計、視覺設計
13
「嗨！歷史」
HiStory
14
02
HiStory UI/UX Design
User Experience Research
議題
1
2
訪談
深度訪談 15 位學生及 4 位老師 二次訪談受訪者
高中生
反 正 都 是 要 背 ，那 回 家 背 就 好 了 。」
高中老師
單向教學無法引起學生動機。 文 科 在 學 習 上 須 大 量 的 記 憶， 繁 瑣 的 細 節 令 許 多 高 中 生 頭 痛， 以 歷 史 為 例， 年 代 與 人 物 交 織 而 成 的 歷 史 事 件，平鋪直述的教學 無 法 引 起 學 生 興 趣 。 因 此， 如 何 提 供 師 生 在 歷 史 課 上 有 更 良 好 的 互 動 及 學 習成效是我們想探討 的 主 題 。
15
「歷史課就是在睡覺，
「升學壓力與創新教學間的平衡 是相當困難的事。」
設計方向
1
促進師生間雙向互動
3
2
師生皆不需花太多時間準備活動
課程緊湊，無法花太多時間活動
上課前
4
上課中
預習進度
老師
簡單預習和複習，提升學生能力
下課後 複習進度
隨機抽取演員
老師課前推播本週進度
下課後學生進行經典題填 答，成績回傳給老師
學生
我們將 app 的使用過程分為三個主要脈絡，上課前、課中和課後，從課前老師可以透過推 播功能傳送本週進度或通知給學生進行預習的動作。然後在課中可以藉由剛剛介紹的三種 模式進 行 創 新 式 的 趣 味 教 學 ，到 課 後 學生 可 以 填 答 與 課 程 有 關 的 經 典 例 題 進 行 複 習 的 動 作 。
16
02
HiStory UI/UX Design
登入
班級管理
App Flow 課前
選擇進度
選擇教材
課中
課後評量
課後
17
課前推播
抽選學生
學生端通知
劇本提詞機
18
02
HiStory UI/UX Design
Prototype ht t ps :/ / m ar v el app. c o m / 57i 1bg
班級進度與廣播系統 一個老師會同時教 許 多 班 級 ， 橫 跨 不 同 年 級 ， 老 師 登 入 後 ， 所 有 班 級 和 進 度 便 能 一 目 了 然 。 透過廣播系統，老 師 能 讓 學 生 預 先 知 道 上 課 內 容 並 事 先 預 習 ， 上 課 時 學 生 較 能 快 速 進 入 課 程 。
19
快速活動 / 隨機抽取 抽 出 學 生 進 行 三 到 五 分 鐘 的 活 動， 幫 助 學 生 快 速 進 入 主 題， 快 速 簡 短 的 活 動 不 佔 用 教 學 時 間，讓學生學習獨立思 考 。
20
02
HiStory UI/UX Design
提詞劇本 被 抽 選 到 的 學 生 要 照 著 簡 短 的 劇 本， 利用提詞功能即興演戲。
21
歷屆考題測驗 課程結束後出現此範圍得考古題，讓學生快速瞭解 大考出題方向、幫助記憶。
22
02
HiStory UI/UX Design
App GUI LOGO
數字：Heti LT
1234567890 ICONS
23
COLORS
#50E3C2
#E8E8E8
#B8E986
#9B9B9B
？
？
24
「 共 創 展 覽 新 體 驗 」
wheee 是一套展場導覽的服務，利用 iBeacon 傳遞訊號，創造自動化室內 導航，加入打卡的行為模式，讓使用者擁有最獨特的展覽體驗。 共同參與 / 謝佳紜、張子晏、李泓其 參與分工 / 使用者經驗研究、概念發想、介面設計
25
26
03
wheee UI/UX Design
議題 新一代設計展對大部 分 設 計 系 學 生 是 讓 展 品 商 品 化 的 機 會 ，對 各 廠 商 也 是 個 發 掘 新 人 的 場 域 ， 但是不同學生與廠商 的 需 求 卻 不 盡 相 同 ， 且 展 場 充 滿 大 量 的 雜 訊 。
w h e e e 是 一 套 展 場 導 覽 的 服 務， 利 用 i B e a co n 傳 遞 訊 號， 創 造 自 動 化 室 內 導 航 ， 加 入 打 卡 的行為模式，讓使用 者 擁 有 最 獨 特 的 展 覽 體 驗 。
族群
27
目標族群為 會 接 觸 設 計 ， 以 及 會 看 展 的 人 。
NAVIGATE
室內導航定位 標 注 目 標 學 校， 進 行 導 航 定 位 ， 當 指 針 相疊，即可往目標方 向 行 動 。
白色指針為手機指向， 藍色 為 標 的 方 向 。
轉動 手 機 到 兩 者 相 疊 。
28
03
wheee UI/UX Design
作品導覽 在 作 者 忙 碌 時 聽 解 說 ，並 能 夠 隨 時 喜 愛 收 藏 ，或 者 GUIDANCE
29
打 卡 記 錄 ，第 一 次 收 藏 或 紀 錄 都 會跳 出 通 知 提 示 。
喜愛列表 呈現簡化作品資訊
展開記錄內容
收藏紀錄列表 卡片式模擬紀錄便條
記事本 在 展 場 中 隨 時 記 錄 下 喜 愛 的 作 品 與感 想 ，在 未 來 一 NOTE
次追蹤，不分散社群宣傳。 30
03
wheee UI/UX Design
App GUI LOGO
COLORS
#FF5756
#FFFFFA
#233E66
#FFF358
#FB82FB
#D8D8D8
w h e e；( v t . ) 使 興 奮 ，使 激 動；( i n t . )（ 表 示 高 興 、
LOGOTYPE
激動等）喲，啊；(vi.) 發出尖叫聲 發現好作品時發出 whee 興奮的聲音。
ICONS
31
Navigation Bar
像怪獸小手的圖像
Wheee
AM
%
Tab Bar
32
HUNTIT 「 搭 乘 台 北 捷 運 尋 找 寶 藏！」 外地遊客到了台北常需要不斷上網搜尋景點和交通，而台北捷客除了 通勤或固定的景點以外還能去哪呢？ 捷運藏寶冒險 App，幫助外地旅客遊台北，也讓在地台北人發掘捷運 新去處，當小海盜成長的同時，旅人們也將擁有更多台北口袋名單。
2 015 台 科 設 計 週 展 出
33
34
04
Huntit UI/UX Design
議題 台 北 捷 運 尖 峰 時 期 塞 滿 上 下 班 的 民 眾， 但 其 他 時 段 搭乘的比例卻相當低，除了通勤方便之外，期望透 過其他方式吸引民眾 使 用 大 眾 運 輸 。 許多長期居住臺北的人經常抱怨不知道能去哪裡， 網路上的旅遊地圖多是給外來旅客的景點推薦，對 於臺北人而言沒有吸引力，對於外地的旅客更是需 要知道捷運能到達的 旅 遊 景 點 。
35
36
04
Huntit UI/UX Design
概念 遊戲化旅遊資訊，利用尋找藏寶地圖，並以對戰獲得領地 的 方 式， 激 起 玩 家 的 好 勝 心 ; 與 店 家 結 合， 使 獲 勝 者 能 夠 得到優惠券等實體獎品，增進玩家對戰慾望。
等級提升後裝備也升級，
從小水手到大海盜。
01 選 擇 一 個 尋 找 任 務 的 篩 選 方 式 三個篩選任務的方式，自由選擇，由左至右： 地點緣盡 / 時間快結束的 / 獲得獎勵多寡 最右邊的則是特別通知。
02 選 擇 一 個 任 務 進 行 對 戰 當玩家的等級越高，便能看見星星數越高的任務， 星星是每次拿到的獎勵，能夠換取獎勵。
37
。
03 進 行 對 戰 !
04 獲 勝 ！
規 則 一 / 找 到 照 片 上 的 店 家， 定 位 後 解
獲得餐廳折價券以及
鎖進入對 戰
悠遊卡加值點數
規則二 / 三 戰 兩 勝 38
05
39
XL 維力盃 Web Design
共同參與 / 魏廷恩、林逸晟 參與分工 / 企劃討論、介面設計、Coding
為了行銷維力炸醬麵 XL 大碗滿意，舉辦維力盃三分鐘影片大賽， 網友可以在等泡麵的三分鐘觀看影片，看完後即可投票。
40
06
BikeMap Web Design
BikeM ap 讓自行車族 能 夠 參 考 推 薦 路 線 ，選 擇 訓 練 或 是 休 閒 ，並 利 用 網 站 連 結 的 Go o g l e M a p 安排路線，規劃時程 ， 更 能 揪 團 一 同 騎 乘 自 行 車 。 BikeM ap 還有團購頁 面 ， 有 推 薦 的 運 動 裝 備 ， 也 能與 他 人 一 同 團 購 享 優 惠 。 41
42
43
GRAPHIC DESIGN
44
07
45
CIS-PON PON Graphic Design
pon pon
PON PON 企業識別設計 共同創作 / 謝佳紜、童筱絜
46
07
CIS-PON PON Graphic Design
PON PON PON PON 為老字號天然沐浴乳，主打異國浪漫以及活力、健康的 企業識別，使用後能夠擁有清爽、溫潤的膚質，有清新的氣味，讓人 感覺物超所值，主打追求主流文化的青壯年人口。
47
#5AB0B9
#CA5757
#C9E0E7
#ABC358
異國浪漫
活力
清新
健康
pon pon
pon pon pon pon
PON PON 沐浴乳
48
07
CIS-PON PON Graphic Design
PON PON EDM / Poster
49
50
07
51
CIS-PON PON Graphic Design
PON PON Web Design
52
08
Stickers-Dessert Graphic Design
DESSERTS 小確幸 App 貼圖設計
53
54
55
56
09
Cards Graphic Design
小確幸 App 新居落成卡 / 萬用卡設計 為小確幸 App 設計的卡片，用簡單的插圖讓大家想起兒時寄卡片的樂趣。
57
58
10
Infographic Graphic Design
台灣食物浪費程度資訊圖表 食 物 浪 費 在 許 多 國 家 都 是 非 常 重 要 的 議 題， 希 望 能 透 過 資 訊 圖 表 喚 起 大 眾 對 於 少 量 少 取 的 意 識 ， 並 且 用 廚 餘 10 1 做 為 主 視 覺， 吸 引 大 眾 好 奇 。
59
60
11
Posters Graphic Design
01
02
01 創意自行海報 02 AIESEC 說明會海報
61
62
63
PRODUCT DESIGN
64
65
「除了陪伴，更是守護」 LOOKOUT 利用佩戴在寵物狗身上的電子項圈，在家中長輩發 生意外倒地時，用應用程式及時通知家屬，防止悲劇的發生。 LOOKOUT 讓最好的幫手協助家人的照護！
L O O KO U T 共同參與 / 謝佳紜、莊雅琪、闕子淵 參與分工 / 使用者經驗研究、概念發想、產品設計、影片剪接
66
12
LOOKOUT Product Design
研 究 顯 示，6 5 歲 以 上 老 人 意 外 死 亡 的 原 因 中 ， 跌 倒 高
動機
居第二 。 許 多 情 況 下， 跌 倒 不 會 在 第 一 時 間 致 命 ， 往 往 是 因 為 行動受 限 且 周 遭 無 人 造 成 遺 憾 。 老人對於自身配戴偵測跌倒的穿戴式裝置接受度不 高，認 為 有 損 自 尊 。
67
透 過 寵 物「 幫 忙 」 配 帶 穿 戴 式 裝 置， 取 代
目標
在 老 人 身 上 裝 置 偵 測 器， 在 老 人 跌 倒 不 能 自救時，發出求救訊號。
設計項目
智慧項圈
App
寵 物 與 主 人 日 常 相 處 時 ，若 智 慧 項 圈 偵 測 到 寵 物 出 現 異 常 行 為 模 式 ，就 有 可 能 是 主 人 發 生 意 外 ，應 用 程 式 便會發送警訊給緊急聯絡人或醫務人員。
68
12
LOOKOUT Product Design
狗狗行為模式研究 測 試 時， 我 們 會 到 狗 狗 看 不 見 的 地 方 降 低 他 們 的 警 戒 心， 再 讓 受 測 主 人 假 裝 突 然 倒 地 ， 研 究 發 現 狗 狗 會產生特定的低頭繞 圈 行 為 模 式 。
69
我 們 將 電 子 系 同 學 焊 接 好 的 電 路 板 縫 在 較 柔 軟 的 帆 布 中 ，做 成 一 個 簡 易 的 項 圈 進行產品測試。
電子項圈設計內容 老人跌倒時透過人體紅外線模組與六軸感測器判斷 / 發出警示聲響 / 關閉警報按鈕 / 傳輸警訊
70
12
LOOKOUT Product Design
登入畫面
輸 入 ID 號 碼
輸入 ID 號碼登錄 第 一 次 使 用 LOOKOUT A PP 時 ， 需 要 輸 入 項 圈 手 冊 上 的 ID 號 碼 ， 應 用 程 式 會 將 輸入同組號碼的使用 者 建 立 在 同 個 群 組 。
71
放上寵物照片
新增狗狗和主人的檔案
設定主人檔案
設定主人檔案
首頁
群組展開
依照狗狗分家庭群組 使用者可以同時加入不同群組，讓使用者除了自家的寵物和親 人外，還能同時關心在遠方的親人們。 每個群組的右上角會顯示項圈當下的電量，讓使用者輕鬆關注 項圈狀況。
72
12
LOOKOUT Product Design
警報器介 面
二度確認
緊急聯絡人收到通知
項 圈 偵 測 到 跌 倒 警 示 後， 經 過 3 0 秒 觸 發 手 機 警 報， 若 老 人 沒 事， 能 自 行 將 警 報 器 關 閉 ， 手 機 仍 會 再 度 跳出光箱詢問是 否 要 關 閉 ， 但 若 老 人 沒 關 閉 警 報， 應 用 程 式 便 會 撥 打 電 話 給 親 人 或 救 護 專 線 。
73
除了陪伴，更是守護 Look Out !
74
75
面對面，看見使用者內心的長相 做出直指人心的好設計
76