2015 ------- Portfolio of Yu Hsuan Lin / 林鈺璇 作品集

Yu H s u a n L i n

PORTFOLIO 2

0

1

6

C ONTENT

06

08

Chapter 00

Chapter 01

ABOUT THE PORTFOLIO

RESUME

11

25

Chapter 02

Chapter 03

ILLUSTRATION PROJECT

VISUALIZATION PROJECT

41 Chapter 04 WEBSITE DESIGN

A STORY A BOUT

57

69

Chapter 05

Chapter 06

APP INTERFACE DESIGN

GRAPHIC DESIGN

79 Chapter 07 CONCEPT DESIGN

87

Chapter 08 P RO GRAMMING & DESIGN

ILLUSTRATION & SKETCH

00

ABOUT THE PORTFOLIO 我 認 為 設 計 與 資 訊 科 技 之 間， 是 相 輔 相 成 的， 程 式 能 夠 幫 助 設 計 變 得 更 精 準， 甚 至 是 加 快 設 計， 而設計能讓艱深的技術轉化為平易近人且美麗的 樣 貌。 因 此， 這 本 作 品 集 的 設 計， 就 是 以 兩 者 的 交 集 為 出 發 點。 我 以 程 式 寫 出 了 一 株 小 樹， 能 夠 隨 機 產 生 不 同 的 樣 貌。 而 它 所 代 表 的 意 涵， 即 是 設 計 與 資 訊 兩 種 領 域 的 火 花， 包 含 了 我 在 兩 種 領 域的成長，如同這本作品集一樣。

Story of the Trees 樹的故事 Type | Programming, Graphic Design Tool | Processing

01

RESUME

林鈺璇，目前在貝殼放大工作，畢業於交通 大學資訊工程學系，喜歡設計，認為資訊與 設計之間，是相輔相成的。多方接觸各種領 域，如：資訊視覺化、人機互動、網頁前端 技 術、 使 用 者 介 面 設 計、app 設 計 等， 熱 衷 於找尋設計與資訊間的平衡點，在數次的比 賽與工作中，嘗試設計與科技之間的合作關 係，喜愛挑戰與學習新的事物。 繪畫則是從小到大的心靈養分，喜歡將日常 生活中的所見所思轉換為圖像，紀錄下生命 中的每一個想法。

Honor 2016

Booking.com Hackathon 台灣文博會

2015

Akatsuki Hackathon CGW 圖學研討會論文 核心科目成績優異

2014

交大健康周海報設計競賽 交大健康周吉祥物設計競賽 Makerthon x NCTU

第三名 受邀展出 第一名 佳作論文獎

第一名 第二名 第二名

Experience 2016

貝殼放大 交大畢業舞會

2015

Akatsuki Hackathon CGW 圖學研討會論文發表 NCTU Plus 交大校園選課心得網頁 IVSA 世界獸醫大會 OPEN HCI 人機互動工作坊

2014

2012

交通大學梅竹後援會 構．創創業營隊 Pan Asia Mun 泛亞模擬聯合國 清交大烏克麗麗社 合歡十年水彩插圖記事本插圖設計 台中女中畢聯會 台中女中畢冊封面設計

UI/UX designer 設計部長 App 美術設計 視覺設計 / 前端設計 整體網站架設 / 設計

行銷部長 行銷部長 設計部 美宣長

美宣長

Illustration Project

02

ILLUSTRATION PROJECT 1 " Fishbowl Man

2 "

Moon Festival

3 "

The Factory

02"1 Fishbowl Man 魚 人 Type | Illustration Year | 2015

魚人，音同愚人，為一系列創作，分 別 為：「 擁 擠 的 等 待 」、「 餵 食 時 間」、「罐頭工廠」、「今天要哪種 口味呢」、「終結」。而其中的第一 幅到第四幅為一個循環，魚人們不自 覺的深陷於循環之中，利用他人、被 他人利用，僵化而死板的運作著每一 天，彷若工廠一般。而最後的「終結」 則意味著在此種制度中消逝的生命。

The Crowded 擁擠的等待

Feeding Time 餵食時間 Keep Walking 走吧

Package House 罐頭工廠

Which flavor would you like today? 今天你要什麼口味 ?

The End 終結

Postcards 系列明信片

02"2 Moon Festival 中秋賀卡插 圖 Type | Illustration Year | 2015

提 到 中 秋， 第 一 個 想 到 的 往 往 是 月 亮、月餅等物件，在這張插畫中，我 將 這 兩 種 物 件 結 合， 讓 月 亮 化 身 月 餅，並加上趣味的對白，使中秋成為 活潑而俏皮的故事。

02"3 The Factory 城市工廠 Type | Illustration Tool | 2015

嘗試以扁平化設計為概念，將城市譬 喻作實驗室，人們以貪婪汙染著這塊 土地，而污染終將回歸於己。

Visualization Project

03

VISUALIZATION PROJECT 1 "

Ripple Visualization

DIVVY

2 "

03"1 Ripple Visualization System 新聞漣漪：新聞事件發展分析及視覺化系統 Type

| Visualization, Programming

Tool

| D3.js, HTML5, CSS3

Author | 林鈺璇、唐千琳、何文琦

資 訊 視 覺 化 是 我 的 大 學 專 題 研 究， 曾 在 Computer Graphic Workshop 上 發 表， 獲 得 佳 作 論 文 獎。 以 漣 漪 連 續 不 斷、 接 連 而起的特性為發想，使用動態方式呈現新聞脈絡，展現一系列 新聞的時間性以及關聯性。此外，這個視覺化系統整合了搜索、 分析、視覺化等步驟，使用者僅需鍵入關鍵字即可建立視覺化 圖像。此研究中，我負責視覺化圖形的設計及動態呈現、介面 程式撰寫，並以網頁方式呈現。

可透過 QRCODE 下載原論文

問題 發想

網路上的新聞大量而繁雜，新舊報導交替頻繁，而這也造成讀 者難以關注特定新聞主題，以及觀察新聞事件爆發的起始點。 再加上新聞網站通常並無對各個新聞事件作有系統的整理，因 此讀者很難從中看到新聞事件發展的脈絡。

關注 重點

時間脈絡

處理 步驟

研究 順序

熱門程度

文章相關性

網頁爬蟲擷 取文章資料

計算文章相 關度

視覺化呈現

互動式堆疊 長條圖

新聞事件分 支視覺化

互動式漣漪型 動態視覺化

第一 階段

互動型分色堆條圖

為最初構想，若想觀看某新聞主題的發展與關 注程度，長條圖為最簡易的方法，因此我們假 定文章時間為 X 軸，文章關注度為 Y 軸，觀 察新聞高峰。並依照和主線新聞的相關度分成 四個區間，四個區間為相近色系，最深、最靠 近時間軸的是主線新聞；反之，顏色越淺表示 越不相關的新聞。上圖的例子為餿水油事件， 可以看出事件剛爆發時有極高的關注度。 然而這階段蒐集的新聞總數頗多，難以比對文 章與文章間的關連；而部分文章和主要新聞的 相關度低，卻有極高的關注度，因為這個發 現，我們假設有分支新聞的存在。

關注度高卻與原關鍵字相關度低的特別現象

第二 階段

新聞分支視覺化

第二階段的靈感來自於第一階段所發 現的奇怪現象，推斷一系列新聞是由 多起事件組成，而這些系列新聞彼此 間又會有交點事件。舉例來說，如上 圖所示，在餿水油事件中具有三種分 支，分支一為藍線（同時也是主線）： 強冠食品，分支二為橘線：郭烈成與 地下工廠，分支三為紫線：維力食品 下架。如此分支交錯的結構，就像捷 運路線一樣，每一則新聞就是一個節 點，而支線與主線的交會點即是轉運 MERS 事件的新聞分支視覺

站，此新聞也是引發其他支線的關鍵

第三 階段

漣漪型動態視覺化

第一 階段

+

熱門程度

第二 階段

+

新聞分支

動態 呈現 時間維度

意象設計 新聞事件的發生往往是連續不斷的，如同雨天的漣 漪一般接連而起，出現之後消失，消失之後又有新 半徑 : 關注度

的波紋出現，而這樣的特性也和新聞事件的發生過 程相似：一個事件出現後又引發了更多新的事件。 每一篇新聞報導即是一個漣漪，會隨著報導日期先 後出現，每個漣漪動畫過後，會在原地留下空心圓， 方便使用者追溯漣漪軌跡。另外，漣漪的擴散大小 為關注程度高低，顏色用以區隔不同新聞支線。

直 線 型 軌跡

圓型軌跡

聚 焦 於 文 章時 間

聚焦於文章相關度

為了記錄消失的漣漪資訊，水平軸代表時間向

如右圖 ( 二 ) 所示，將每一子集的文章總數目

度，越晚發生的漣漪位於越右側，且漣漪位在

轉換為半徑，直接以大圓表示此子集事件的範

不同顏色的新聞線上。如右圖（一）所示，位

圍，隸屬於此集合的文章會在大圓內出現，而

於中間的紅色直線是「主線新聞」的發生軌跡，

這些文章距離大圓圓心的距離，即是各篇文章

而其他顏色的線條及漣漪則是代表「支線新

的「支線相關度」，越靠近圓心的文章相關度

聞」軌跡。另外，漣漪中心的實心小圓是代表

越高。

一系列文章間相關度的高低。

( 上 ) 圖一，漣漪型動態視覺化 - 直線型 ( 下 ) 圖二，漣漪型動態視覺化 - 圓型

可透過 QRCODE 觀看影片

Case Study 1

餿水油

（上）圖一 （中）圖二 （下）圖三

在去年爆發的餿水油事件，具有 完 整 的 事 件 經 過， 因 此 利 用 餿 水油的相關新聞做出視覺化呈現 圖， 根 據 圖 ( 二 )， 可 以 看 出 事 件是在去年九月突然爆發，關注 度增加非常劇烈；從圖（三）則 可以看出他有三條支線：強冠公 司餿水油、老農揭發郭烈成、維 力產品下架。而圖 ( 一 ) 則結合 了以上優點，不但能看出哪篇文 章的關注度高，還可以看出文章 之間的相關度高低。

Case Study 2

死

刑

（上）圖四 （中）圖五 （下）圖六

相較於餿水油，死刑是個長久存 在的議題，根據圖（五），死刑 議題已存在超過五年之久，可以 看出每隔一段時間會出現高峰， 而這些高峰的出現往往是因為重 大刑案的發生，如：鄭捷案、割 喉案…等。另外，從圖（六）可 知道死刑議題可分為三種主題， 分 別 是「 死 刑、 社 會 」、「 支 持 」、「 執 行 死 刑 」。 而 從 圖 （四）可看出而綠色支線集中在 六月五日左右，是因當天執行死 刑之故。

03"2 Divvy Visualization Divvy 視覺化 Type | Visualization, Programming Tool

| D3.js, HTML5, CSS3

Team | 林鈺璇、鄧雅文

Divvy 是一家位於芝加哥的腳特車公司，分享 3000 台腳踏車在全芝加哥市的 300 個腳踏車站。最大特 點是大量的腳踏車、極為鄰近的車站，與三十分鐘 的騎乘限制，每天有四千多次騎乘紀錄。 透過 Divvy 提供的車站以及旅程資料，設計出兩種 視覺化界面。在第一種視覺化界面中，以時間軸的 變動，來觀察每一站男女使用者的比例、出發和到 達的流量；而在第二種介面中，則是以腳踏車使用 次數為出發點，調度最常使用的腳踏車與最少使用 的腳踏車，在此作品中我負責整體程式撰寫。

( 上 ) 圖一，各站車流量與會員資料視覺化 ( 下 ) 圖二，腳踏車使用次數調配視覺化

可透過 QRCODE 觀看 DEMO 影片

時間軸

Visualization Task 1 使用者組成分析 以消費者的組成比例以及車站流量 為視覺化目標，可作為路線規劃等 未來服務之參考。地圖上的實心小 圓半徑即為車流量大小，紅色及綠 色分別代表出站與進站，使用者可 自 由 選 擇 觀 看 進站、出站、綜覽， 使用者可透過上方時間軸以及下方 的月份表，來觀看不同時間點的流 量 變 化。 若 於 地 圖 上 點 選 特 定 車

進站 / 出站 / 綜覽

站，則右方的圓餅圖及長條圖會變 動，及時顯示當地消費者的組成比 例。而下方的曲線圖則顯示這半年 以來的消費者組成人數變動。 月份選擇

地圖 / 車站位置

出站數 進站數

進出站消類者之會員 / 非會員

男女比以及年齡層分布 ( 由小到大向上排列 )

非會員 會員 男性 使用者人數變動曲線

女性

Visualization Task 2 腳踏車使用次數與調度 在 整 理 資 料 的 過 程 中 發 現， 許 多 腳 踏 車 被 騎 乘 的 次 數 極 為 懸 殊， 而 這 可 能 會 造 成 有 些 腳 踏 車 容 易 耗 損， 為 了 平 衡 這 一 點， 讓 工 作 人 員 能 有 系統的調度腳踏車是此視覺化的目 的。 為 了 使 腳 踏 車 的 使 用 次 數 能 夠 不 過 度 偏 頗， 嘗 試 讓 這 前 80 輛 最 多 使 用 次 數 的 腳 踏 車， 與 前 80 輛

建議交換車站間

最 少 使 用 次 數 的 腳 踏 車 互 換 站， 以

距離

達 到 不 會 集 中 在 特 定 幾 站 之 效 果。 在演算上以最近距離之站（從前 80 輛最少使用次數的腳踏車所在站中 挑 選 ） 為 優 先， 而 使 用 次 數 多 的 腳 踏車會較優先進行分配。 以 紅 色 深 到 淺、 藍 色 深 到 淺 分 別 代 表騎乘次數前 80 名的腳踏車與最後 80 名的腳踏車在使用上，可透過點 選路徑來觀看交換車站間的距離。

腳踏車交換建議

月份選擇

前 80 輛 最常使用的車

前 80 輛 最少使用的車

腳踏車 相關資訊

交換車站間 最短路徑

較常用

極常用

極少用

較少用

車站、使用次數

熱門腳踏車所在位置 冷門腳踏車所在位置

Website Design

04

WEBSITE DESIGN 1" Crowdfunding Campaign Module

2"

NCTU Plus

3 "

My Blog

4 "

UI Compenent

42 | Website Design

04"1 Independent Crowdfunding Campaign Page Module

獨立集資網頁模組

Type

| Research, UI design, Visual design

Tool

| Sketch, Javascript, CSS

Problem

Solution

在設計及建置獨立集資網頁時，往往會需要一些

為了解決網頁架設者的問題，於是我設計了一系

必要資訊及元素，如：集資進度調、立刻贊助的

列的獨立集資網頁模組，可讓架設者迅速的選取

引導按鈕、以及詳細回饋方案、專案進度等。但

需要的版型及元素。並且也包含RWD 的元素，

多數的建置者可能缺乏網頁設計經驗、或是不懂

可讓使用者在最快的時間內客製化專屬獨立集資

得架設網頁的技術，而無法設計出一個理想的版

頁面。

型、或是耗費大量時間在設計網頁上。

Website Design

Information Architecture 先評估過各大集資平台的網頁架構，重新定義所有集資網頁上的必要元素，並以這些資訊為基礎進行設計

Wireframe

Header

Content Section

Reward Section

| 43

Desktop

Header

44 | Website Design

High-Fidelity Prototype

Introduction / Content

我創造數種不同的模組與版型，包含 header, progress bar, content section, reward module, timeline, FAQ...等。另外，我也 設計了行動裝置版型，方便使用者轉換。

Mobile Device

Timeline Section Reward Section FAQ Contact

Website Design

Header Module Progress Bar Title and Description

Call to Action Button

Navigation Bar

Progress Bar Slider

Content Module Description (with bullet) Product Image

Description or Article Product Image

Description (with bullet) Product Image

Introduction Product Image

| 45

46 | Website Design

Timeline Module

Update

Category Icon

Reward Module Section Title

Reward Card (for square photo)

Reward Card (for square photo and longer description)

FAQ Module

Website Design

Example Backpaix, Moon Cup, LUNA Lamp 獨立集資頁面範例

| 47

Backer-Founder Official Website 貝殼放大官方網站 Type | Website Design, Interface design, Animation

1

2

Tool | Jquery, HTML5, CSS3

我 工 作 於 群 眾 集 資 公 司， 而 此 次 專 案 就 是 公 司 的 官 網 設 計。 為 了 清 楚 讓 客 戶 了 解 公 司 的 提 案 及 製 作 流 程， 我 以

Idea Advisory

Content Design

生 產 線 的 概 念， 搭 配 公 司 CI， 設 計 了 一 個 可 進 行 互 動 的 Motion Graphic，在這個動畫中，生產線上的每座機台，

3

4

就是專案的一部份流程，例如，第一格的扭蛋機代表點子 的產生與審核，而第二格則代表公司投入製作、第三格則 是 金 流 的 募 集， 只 要 將 頁 面 上 的 燈 泡 丟 入 就 可 以 開 始 動 畫。 在此專案中，我負責動畫設計、介面設計，以及前端程式 撰寫。

Media Promotion

Project launch !

每一座機台都是專案流程的一部份

訪客可將燈泡丟入生產線來開始網頁動畫

成員介紹、專案介紹等頁面設計

04"3 Blog Design 部落格設計 Type | Website Design, Programming Tool | CSS3, Javascript, HTML5, PHP

為了記錄生活以及學習筆記，今年暑 假我架設了一個部落格。有別於網路 上的現成樣式，我將整體介面重新撰 寫，並且針對不同文章類型、圖片大 小而有不同排版設置。整體風格樸素 簡潔，突顯文章區塊。

文章內頁編排

整體部落格排版

App Interface Design

05

APP INTERFACE

1 " PLUSME

2 "

Rolling Pigs

05"1 PLUSME Role Tool Year

| UX Researcher, UI Designer | Research, wireframes, visual design | 2016

Problem 在大學生活中，學生時常遇到課業、人際上的問題，

Design Process Persona & Storyboard

例如：忘記功課死線、找不到課程教室、分組活動時

定義問題和情境

需要找組員等，但通常這些資訊是分散的，需要透過

Define Features

不同平台取得，而校園內的E3平台又太過老舊，已不 太符合學生使用習慣，介面也缺乏妥善設計與規劃。

UI flow & Wireframe Evaluation

進行流程與功能的規劃

Solution 此款APP結合多種功能，與交大智慧校園平台為 基礎，呈現多種資訊：課程基本資訊、課程評 分、功課死線、考試提醒等，更建立能讓學生互 相交流的機制，方便在課堂上聯繫、組隊。

High-fidelity prototype Usability Test

請使用者完成三項任務並計時

Concept Video 使用樂高拍攝短片

Persona Katherine / 19 years old Background

A freshman who majors in engineer but also is interested in literature.

Personality

Jason / 20 years old Background

A sophomore who majors in science and is busy with extracurricular activities.

Personality

Shy, hardworkinig, independent

Energetic, ambitious, friendly

Pain

Pain

She cannot find summaries or experiences about literature classes. Also, she need to finish group assignments, but she does not know anyone in the class.

Storyboard

He participates in many extracurricular activities.

However, as a computer science student, he is usually busy with assigmments and tests, and find it difficult to memorize all of his deadlines.

Wireframes 使用 sketch 及 Illustrator 進行繪製

Evaluate Functions and Flow 先以wireframe 進行一次簡短的測試，讓使用者試 用功能及流程是否順暢，以 POP 做為測試用介面 並一邊記錄一邊進行調整。

High-fidelity Prototype

Loading

Login Page

Main Page: Upcoming Deadlines and Tests

After clicking on an upcoming event, the user is directed to a course reminder

Course Timetable

Course Information

Students' Summaries and Comments on the Class.

Search for classes

Class Member

Member Profile

Chat Room

Usability Test 以滿足度、學習度、效率，三種向度為基準設計一份詳細的問卷，讓受測者先進行三項指定任務，一邊計時，一 邊導引使用者操作。最後，給予使用者問卷進行評分

Task Scenario 1

Task Scenario 2

Task Scenario 3

It is a busy day with 7 classes on the schedule. You want to check your assignment deadlines for your psychology class. Also, you want to make sure when your final-exam is.

You major in literature. You are also interested in business, but you know very few people in the department. You want to learn more about several classes in that department.

You take a course in another department. You don’t know anybody in the class, but the instructor asks you to complete a group assignment.

Students who sit next to you have already established their teams.

Use PLUSME to find out these information. .

Use PLUSME to find out summaries and comments.

Result

Look for potential teammates for your assignment by using PLUSME.

評估後，我發現使用者可以很快的找到即將開始的課程，還有作業死線等資訊，然而，卻不太 容易聯繫課堂上的同學，因為這層資訊位於第三層，不容易尋找，另外，使用者也對聯連繫同 學這項功能有兩極化的評論。

Concept Video 使用樂高來模擬APP 情境，以逐格動畫方式拍攝

05"2 Rolling Pigs 轉 豬 Type

| App Interface Design, Illustration

Team | 陳奕妦、洪祺堡、于尚鑫、林鈺璇

今年暑假，我和幾位同學一起參加了 Akatsuki Hackathon， 在短短兩日之類內製作出了這款手機益智遊戲。遊戲規則相 當簡單，把全部的豬旋轉到顏色相同的轉盤上，就可以晉級 到下一關，旋轉越少次則越高分。在這款遊戲中我擔任遊戲 的美術設計，以鮮明的色調為主，整體氛圍可愛而有朝氣。

遊戲開始畫面、遊戲選單：有星星作為成績紀錄

可透過 QRCODE 下載

遊 戲 規 則 不 複 雜， 只 要 按 下 轉 盤 中 手 指 的 部 分， 豬 就 會 順 時 針 轉 動 到 下 一 個 位 置， 經 過 不 斷 轉 動 的 過 程， 讓 豬 歸位到正確顏色轉盤上即是 遊 戲 規 則， 轉 動 越 少 次 分 數 越 高， 每 一 回 合 結 束 後 會 有 成 績 計 算 畫 面。 另 外， 遊 戲 中 穿 插 故 事 場 景， 豐 富 整 體 遊戲的流暢性。

（左上）遊戲關卡畫面 （右上）破關成績計算畫面 （左下）故事頁面

遊戲中的角色設計、物件設計

Graphic Design

Graphic Design

06

GRAPHIC DESIGN

1 " Association of Circles

2 "

NCTU Graduation Prom

3 "

NCTU Welfare Week

4 "

A Taste of Taipei

5 "

Mei Chu

6 "

Alice in Wonderland

06"1 Association of Circles 圓的聯想 Type | Graphic Design, Graffti Year | 2015

如何將藝術帶入校園？ 今年五月，我參與了一項彩繪人孔蓋的校 園塗鴉計畫，主題是以圓做一系列的聯想 圖像。圓，可以是扁舟滑過的漣漪、有金 魚流連的水缽、亦或是夜晚點亮的燈泡。 我 將 圓 與 現 實 物 件 融 合， 經 過 重 組、 分 解、構成，共設計了八個圖樣，希望讓熙 攘的人們也能行走在藝術之上，為平常的 生活添一分綺想。

06"2 NCTU Graduation Prom 交大畢業舞會 Type | Graphic Design Year | 2016

我擔任交大畢舞的設計部長，並負責整體 的視覺設計及規劃，我將主題 : 歐洲古典 與畢舞標題「俏刻」作結合，以時鐘的意 象來呈現舞會的氛圍，也代表著畢業的時 刻即將來臨，珍重再見、盡情狂歡之意。

Logo 設計

06"3"1 NCTU Welfare Week 別讓青春被菸沒 Type | Graphic Design, Poster Design Prize | 1st place

以「 菸 害 防 治 」 為 主 題， 所 做 的 海 報 設 計，煙霧化為手的意象，纏繞著吸菸者的 脖 子， 隱 喻 著 吸 菸 的 同 時 也 讓 生 命 受 到 威脅，並搭配暗紅色調為背景，透出不安 感，獲交大健康周海報競賽第一名。

06"3"2 NCTU Welfare Week 吉祥物設計 Type | Graphic Design, Mascot Design Prize | 2nd place

以交大吉祥物竹狐 ( 諧音取自竹湖 ) 為主 體，搭配紅色富有朝氣的紅領巾作裝飾， 帶給人溫暖的感受，而手上的小球則代表 健康及關懷。

06"4 A taste of Taipei 淺嚐．台北 Type

| Graphic Design, Poster Design

Client | Pan Asia Mun

大 二 時 我 參 加 了 Pan Asia Mun — 泛 亞 模擬聯合國，擔任設計部的一員，並負責 設計晚宴形象海報－「淺嚐．台北」。晚 宴以台北的美食人文為主題，邀請來自世 界各地的學生一同品嘗。背景如落霞的濃 彩，飛入了城市未亮的燈火，漸次點燃了 屬於夜幕的繁華。臺北是無色的玻璃杯， 卻映染百變的光景。以「佳釀」作為主題， 彷彿將馥郁香醇的氣息，倒灌入魔性的夜 臺北，一場盛宴正悄然開始。

06"5 Mei Chu 梅竹系列 Type | Graphic Design Year | 2015

梅 竹 賽 是 清 交 兩 校 的 經 典 賽 事， 在 賽 場 上的熱血吶喊，是不容錯過的大學青春。 因 對 梅 竹 賽 的 嚮 往， 我 加 入 梅 竹 後 援 會 並 擔 任 行 銷 部 長， 負 責 設 計 與 宣 傳 大 小 事， 整 體 設 計 以 鮮 明 的 色 彩 以 及 交 大 吉 祥 物 － 狐 狸 為 主， 營 造 一 種 蓄 勢 待 發 的 氣魄，期望能迎向勝利。

Concept Design

07

CONCEPT DESIGN 1 " Portable Nursery

07"1 Portable Nursery 行動育嬰室 Type | Concept Design, Product Design Year | 2014

目 前 因 為 育 嬰 室 尚 未 相 當 普 及， 在 公 共 空 間 中， 新 手 父 母 往 往 難 以 在 舒 適 乾 淨 的 空 間 中 幫 寶 寶 換 尿 布。 為 了 解 決 這 項 問 題， 構 思 出 了 行 動 育 嬰 包 這 項 產 品， 平 時 是 個 側 背 包， 換 尿 布 時 可 以 展 開 成 一 張 小 床。 此 外， 還 結 合 了 哺 乳 遮 罩 的 功 能， 讓 父 母 除 了 可 以 即 時 為 寶 寶 換 尿 布外，也能在有遮蔽物的情況下哺乳。 這是我在交大應用藝術所修介面設計時 的 作 品， 以 小 組 為 單 位， 我 負 責 包 款 部 份 的 設 計、 整 體 的 模 型 渲 染 及 海 報 最 終 排版。

Problem

問題發想

＋

＋

換尿布是新手父母的一大罩門，大多需要在一塊平坦的空間上更換，而在外出 時刻，育嬰室是最為妥當的場所。然而目前育嬰室的普及率並不高，父母轉而 到一般廁所更換尿布，但公共空間中的清潔往往令人堪憂。

Concept

產品概念

使用者定位

新手 媽媽

功能性

外觀

空間

乾淨

哺乳

攜帶 方便

摺疊 收納

柔軟

隱密

尿布包

小床

棉墊

遮罩

手提包

Function

功能分析

平常與一般包包無異

遮罩

魔鬼氈

鈕扣

哺乳時具有遮蔽性

遮罩可以拆解

Illustration & Sketch

08

ILLUSTRATION & SKETCH

Rotten 糜爛的色彩

Is your liver still there?

Spring 你的出現如春天 般短暫

躲在水族箱後 冷眼旁觀世界

The story is still being written.