2016 - 2019
Portfolio 游子瑩 / Yu, Tzu-Ying +886 937-522-963 melody20223@gmail.com
游子瑩 / Yu, Tzu-Ying +886 937-522-963
melody20223@gmail.com No.3-5, Malin Rd., Jiaoxi Township, Yilan County 262, Taiwan
- 2019’S PORTFOLIO
Contents Resume
03
Digital Product Design
05
Product Design
45
01 UDM 02 GruPO 03 TESAS
01 conveX
01
07 19 33
47
Contents
02
- 2019’S PORTFOLIO
Resume Profile
游子瑩 Yu, Tzu-Ying +886 937522963 melody20223@gmail.com Education
國立高雄師範大學 工業設計學系
NKNU Department of Industrial Design
國立蘭陽女子高級中學 LYGSH
Language
中文 臺語
03
英文 德文
Resume
Work Experience 職稱 / 公司 / 地點 工作內容
研究設計師 / 多邊圓工作室 / 臺北,臺灣
2017, 08 - 2019, 12
設計實習生 / IOH / 臺北,臺灣
2016, 06 - 2017, 07
國科會研究助理 / 高師 / 高雄,臺灣
2015, 12 - 2016, 10
UX UI、研究、建模、室內施工圖 圖文編輯、網頁設計
圖文基礎與實務課程教學助理 / 高師 / 高雄,臺灣
2016, 2-6
Award
臺北設計獎
2017, 9
新一代設計金點新秀獎
2017, 6
台南智慧城市黑客松
2017, 2
校內候車亭設計
2016, 3
評審推薦獎
工業產品組金點新秀獎 第三名 第二名
Software
3D Modeling Adobe UX UI Tools
Knowledge of html, css 04
- 2019’S PORTFOLIO
Digital Product Design 01 UDM 02 GruPO 03 TESAS
05
07 19 33
Digital Product Design
06
- 2019’S PORTFOLIO
07
UDM 201804 - 201806
01
UDM
Branding - User Interface UDM 全名 Urban Diversity and Mobility，主要與臺灣政府及國際學 術單位合作產出相關研究，專注於討論城市的議題，利用不同的活動 及研究產出或是數據相關的呈現，讓使用者了解城市的發展，並提出 各種思考角度及實踐。期望藉由整體的品牌規劃到網站的設計，都可 以緊扣城市發展相關議題。
Design Process
INSPIRATION
CONCEPT
EXTENTION
WEBSITE DEMO
MOBILE DEMO
Project at in-co studio Client : UDM 多樣性城市科技研究中心 Delivery : Branding, Business card, Website Design : 游子瑩 Program : Kevin Luo 08
- 2019’S PORTFOLIO
INSPIRATION 觀察都市規劃的經典大城市發現，每個城市的各有特色的樣貌，例如棋盤式的 舊金山、由中心向外擴張的舊城巴黎、沿著水道而生的阿穆斯特丹等，將之以 Nolli Map 呈現，會發現每個地圖儼然已成為該城市的代表標誌。 Google Map
San Francisco
許多新規劃的城市以棋盤式 排列聞名，例如舊金山
Paris
歐洲等早期開發的城市多為 中心為主向外發展的放射狀
Amsterdam
阿姆斯特丹因城市沿著河道 為生，呈現特別的城市樣貌
09
Nolli Map
UDM 201804 - 201806
CONCEPT 汲取這樣的靈感，我們規劃出 6x6 的方格，藉由 延伸、壓縮、增加、減少，去創造出更多不同的 標誌。 Ex
10
- 2019’S PORTFOLIO
EXTENSION Icons Favicon
Research
News
Contact
簡易區塊道路，讓 icon 再 縮小時還是容易辨識
以相等大小的形狀顯示消 息、新聞的均值性
Business Card
因應客戶要求，直向中文版面搭配橫向英文 版面的設計，將資訊放置在「 城市的區塊 」 之中，以「 街道 」做為資訊區隔。
11
以同心的樣子，顯示不斷 探索核心的研究精神
包圍外圈，如正需要尋找 其中的一塊。
UDM 201804 - 201806
Web Layout & Web Structure
以相同概念出發，以切割方式呈現，呈現網站不同頁面的不同階層。越深入網頁畫面 越多切割，搭配網頁互動更清楚呈現視覺概念。 Landing Page
Homepage
Research
News and Events
Articles
Content
Contact
Content
12
- 2019’S PORTFOLIO
WEBSITE DEMO Color Scheme Main Color Black #000000
RGB 0, 0, 0 White #FFFFFF RGB 255, 255, 255
Auxiliary color Grey #606060 RGB 96, 96, 96
13
UDM 201804 - 201806
Landing page
Homepage
14
- 2019’S PORTFOLIO
Research
15
UDM 201804 - 201806
News & Events
Contact
16
- 2019’S PORTFOLIO
MOBILE DEMO
17
UDM 201804 - 201806
18
- 2019’S PORTFOLIO
19
GruPO 201906 - 201808
02
GruPO
Campaign Page Design 近年網路知識傳播方式也越來越豐富，影音儼然成為我們生活中不可 或缺的一部分。除了娛樂之虞，也是新型態的職涯目標，未來發展不 可限量。順應 5G 時代的到來，來享享科技重新思考使用習慣，推出 GruPO 全新的影音 APP，希望顛覆現有的影音、社群平台。 這個案子主要作為 APP 發佈前的推廣頁面，我們以快速簡易明暸的 一頁式型態呈現，配合視覺、色彩、圖說等方式，期待引發更多使用 者的興趣。
Design Process
CONCEPT
MOODBOARD
PROTOTYPE
GUIDELINE
USER INTERFACE
Project at in-co studio Client : 來享享科技 Delivery : UX / UI Designer : 游子瑩
20
- 2019’S PORTFOLIO
CONCEPT 為了說服大量的影音使用者去使用、嘗試新的產品， 提出以下目標達到之關鍵步驟。
1
吸引影音使用族群
2
點出現有使用痛點
$
3
清楚、簡易說明特色
4
讓使用者主動聯絡
C L I C K !
21
GruPO 201906 - 201808
MOODBOARD Keyword
Color
Playful
Vivid
Active
Gradient
Adventure
Young
22
- 2019’S PORTFOLIO
PROTOTYPE
Wireframe Draft
分鏡圖
為了讓使用者更清楚了解使用流程，我們以 Motion Graphic 的方式說明。
23
GruPO 201906 - 201808
GUIDELINE Color Scheme Main Color
Auxiliary color Gold #FFD655 RGB 255, 214, 85
Grey #606060 RGB 96, 96, 96
White #FFFFFF RGB 255, 255, 255
Icons
強調創團體驗
以集思的樣子凸顯創 團帶來的效益
說明提供之協助
團隊除提供使用者發 揮平台，初期更提供 宣傳、拍攝的服務
榮譽創始會員
為了快速吸引大量 使用者，元老會員 具有更多優勢
24
- 2019’S PORTFOLIO
USER INTERFACE Responsive Web Page Design
被電線桿擋住的反光鏡
25
GruPO 201906 - 201808
Navigator
Section 1
背景以活潑的 .GIF 凸顯特色、 功能、活動
Section 2
進入深入說明前，快速以幾句話直接點出使 用者痛點
26
- 2019’S PORTFOLIO
27
GruPO 201906 - 201808
Navigator
Section 3
搭配 Motion Graphic 說明幾項特色
Motion Graphic
Section 4
以 icon 顯示，快速明瞭讓使用者了解特色
重複按鈕，強調加入
28
- 2019’S PORTFOLIO
29
GruPO 201906 - 201808
Navigator
Section 5
以資料填寫的方式，直接在網頁吸引會員
Section 6
互動式地圖 + 聯絡資訊
30
- 2019’S PORTFOLIO
USER INTERFACE Responsive Mobile Page Demo
手機版也以響應式網頁方式製作，以一頁式滾動呈現為主。
31
GruPO 201906 - 201808
32
- 2019’S PORTFOLIO
33
TESAS 201812 - 201903
03
TESAS
Taiwan Economic Society Analysis System 面對人口總數減少、高齡少子化，及城鄉發展落差不均等問題，行政 院積極推動「 地方創生政策 」，透過適當的資料分析與統計方法，期 待帶動人口的成長、青年返鄉及發展地方特色產業。
藉由這個網站系統，除了希望向使用者說明地方創生之外，也希望可 以透過資料庫的整理，讓更多政府、民間團體或個人都利用這些資料 創造更多附加價值。
Design Process
EMPATHIZE
VISION
PROTOTYPE
USER INTERFACE
Project at in-co studio Client : 國家發展委員會 Delivery : UX / UI Design : 游子瑩 Program : Kevin Luo 34
- 2019’S PORTFOLIO
EMPATHIZE 日本地方創生由來 日本生育率下降人口減少
＋
大量人口往城市移動
因此日本提出「 地方消滅 論」 ，預測未來鄉村會因 為人口太少導致滅村
35
地方創生誕生
因此日本政府希望利用政策鼓 勵民眾返鄉，振興鄉村文化
TESAS 201812 - 201903
VISION 臺灣地方創生
臺灣在 2019 針對三大元素提出地方創生目標，目標復甦鄉村的人口、經濟、產業等， 也創造多元就業機會。
人
場域
產業
吸引城市人口回流
活化鄉村空間腹地
復甦鄉村經濟、平衡 各項產業發展
36
- 2019’S PORTFOLIO
PROTOTYPE
37
TESAS 201812 - 201903
USER INTERFACE Color Scheme Main Color Gold #DEB859 RGB 222, 184, 89
Light Gold - 2 #FFFAED RGB 255, 250, 237
Light Gold - 1 #FFF3D6 RGB 255, 243, 214 Auxiliary Color Black #000000 RGB 0, 0, 0
White #FFFFFF RGB 255, 255, 255
Web Structure
重點頁面將於後頁呈現。 地方創生入口
首頁 關於 TESAS
地方創生資料庫
更多
線上教學 常見問題 如何使用 相關網站 資料來源 聯絡我們 38
- 2019’S PORTFOLIO
首頁
Section 1
在第一部分破題，快速讓使用者了 解這個系統的主要工具。
Section 2
藉由不同使用者案例調查並整理， 一個個步驟帶領使用者使用網站。
Section 3
在訪問的過程中發現政府單位與民 間單位之間，時常有遺漏的消息、 活動、政策，導致沒有利用資源。 因此在此整合活動及消息，讓彼此 可以在此互相告知。
39
TESAS 201812 - 201903
關於 TESAS
Section 1
羅列出資料庫裡，政府收集 及分類出的 12 大類項目。
Section 2
再次提醒使用者使用方式。
Section 3
藉由不同使用者身份案例分 享，搭配網站功能提示，讓 使用者更了解如何利用這個 工具幫助自己。
40
- 2019’S PORTFOLIO
地方創生資料庫
地方創生資料庫為 TESAS 網站最主要工具，國發會整合所有數據於此，這個部 分的使用流程更是重要，我們將之分成兩個部分： 「 初步瀏覽 」 、 「 深入主題 」 。
初步瀏覽
在初步瀏覽階段，利用 User Flow 工具幫助設計流程，我們利用儀表板的總數據 瀏覽，希望使用者在深入運用工具前先得到一些提示，幫助數據利用之發想。
User Flow
定位
當開啟自動定位功能時，網站會自動 定位，或手動選取地圖位置。 儀表板
將版面切割成多層，上方切換可深入 了解不同主題，而儀表板為總相關數 據之瀏覽。 瀏覽初步資料
快速陳列各主題重要數據，使用者得 以快速了解該區域現況，期待引發更 多數據利用的想像。 41
TESAS 201812 - 201903
42
- 2019’S PORTFOLIO
地方創生資料庫
地方創生資料庫為 TESAS 網站最主要工具，國發會整合所有數據於此，這個部
分的使用流程更是重要，我們將之分成兩個部分： 「 初步瀏覽 」 、 「 深入主題 」 。
深入主題
深入主題之後，因應龐大的資料分類，版面將切得更細。在使用功能上也需要更 加著墨，期待使用者可以有更多的資料使用方式，因此也將資料運用加入互動之 中，讓使用者可以在網站上快速得到比較、分析。
User Flow
深入主題討論
以「 人口 」為例，將可細分為更多主題，將之列 在左欄，並將資料顯示於右欄。 熱度圖功能
藉由互動，將欲比較之主題加入地圖中，縮小儀 表板可以檢視全區該主題之熱度圖比較。 下載功能
43
當需要數據佐證時，可利用下載功能，直接下載 已整理好的數據。
TESAS 201812 - 201903
44
- 2019’S PORTFOLIO
Product Design
01 conveX
45
47
Product Design
46
- 2019’S PORTFOLIO
47
conveX 201606 - 201705
01
conveX
Social Product Design
conveX 是個以台灣社區巷道空間特性切入的實驗性設施設計。
從問題切入，以在地生活經驗分析發現密集住家形式、人車共道行為 與高速搶快通行等特性。並重新設計適用於台灣巷道空間的安全設施， 達到友善城市、美感空間、機能性使用等必要元素。
Design Process
OBSERVATION
RESEARCH
PROBLEM
STATEMENT
IDEATION
DESIGN
Graduation Project
新一代 - 產品組金點新秀獎 入選後浪來襲 - 新生代設計師聯展 台北設計獎 - 評審推薦獎 Designer : 阮呂承安 / 游子瑩
48
- 2019’S PORTFOLIO
OBSERVATION 我們的巷道文化
因應亞洲台灣等地區的密集式居住文化與複雜的交通組成， 因而產生了一個獨有的巷弄事故現象。
生活環境造成的交通問題
狹小巷道 - 安全死角 - 人車混道
我們的城市狹小且壅塞，行人騎士住家都是共用同一個狹窄 的空間，日常為了搶快，騎士時常穿越社區巷弄爭取時間， 也在許多安全死角的巷道交叉路口間造成了事故。
因此巷弄交叉口成為了此計畫最主要的研究議題，而提升巷 道使用者的安全及改善巷弄交通秩序，則是我們的目標。
49
conveX 201606 - 201705
50
- 2019’S PORTFOLIO
RESEARCH 研究巷弄彎道交叉口事故
發現肇事主因包括三種 : 駕駛違規或未注意，交叉口安全設備的 不良及人車混道的路權判斷。
研究用路者經驗
典型社區巷弄間使用者包括 : 行人、自行車騎士、機車騎士及汽 車駕駛，其中機車騎士最容易於巷弄間發生事故，而人與自行車 騎士屬於最弱勢群。
私人交通載具比較
比較道路優先權與巷道威脅性與訊息的主被動性，可見圖如下， 又在台灣的通勤族，依舊高達七成的比例選擇使用私人載具。 被動
主動
道路優先權
巷道威脅性
觀察巷弄設施
目前非號誌巷弄交叉口，街道視距窄，在舊式設施裡沒有特別根 據灣道路口做有效的訊息提示的設備規劃，使用上訊息不主動， 設置位置不友善，更不易察覺。
51
conveX 201606 - 201705
PROBLEM STATEMENT 非號誌化路口設施問題
台灣的交通設施規定，八米以下道路為非號誌化路口，並不 設置紅綠燈，改以反光鏡、停讓標誌或其他警告標誌代替。 然而這些非號誌化警示存在許多問題，例如以下： 缺乏直覺性的方向指示 肇事時諸多特殊情形難以判別 交通設施被雜亂的街景覆蓋
被電線桿擋住的反光鏡
52
- 2019’S PORTFOLIO
IDEATION 因應非號誌化路口交通設施設置規範，我們創造一個全新的產品， 期望解決現有巷道交通問題。
號誌化路口交通設施
直覺指示 主動給予指示
非號誌化路口交通設施 被動判斷 缺乏方向指示
停
53
讓
conveX 201606 - 201705
1
2
3
提示直覺化
在號誌化路口，紅綠燈給予我們直接的指示， 然而非號誌化路口缺乏這樣的設施。
? ?
訊息主動化
使用者容易忽略被動的訊息，即使設置許多 警示標誌仍然容易發生事故。
符合常見路口類型需求 T 字路口 / 主次幹道
1
? ?
十字路口
2
?
彎道路口
3
54
- 2019’S PORTFOLIO
DESIGN 藉由立面紋理反射車燈 ， 藉由 大面積反射形成圖騰 ， 提醒死 角的用路人。
55
conveX 201606 - 201705
Concept
structure
reflection
direction pattern
Scenario Diagram !
!!!
56
- 2019’S PORTFOLIO
Product Feature
單片結構
幾何紋路立面 Geometry structure surface
環
填充支
材 Expoxy filler
內嵌式螺絲鎖定 11 screws only / per piece 底盤 Bottom plate
57
conveX 201606 - 201705
因應不同路口需求變化
58
- 2019’S PORTFOLIO
59
conveX 201606 - 201705
60
- 2019’S PORTFOLIO
Award
新一代 - 產品組金點新秀獎 入選後浪來襲 - 新生代設計師聯展 台北設計獎 - 評審推薦獎 2017.05.18 臺灣臺北世貿中心 新一代設計展 ( Young Pin Designers' Exhibition )
2017.06.20 - 08.06 臺灣臺北松菸 - 臺灣設計館 TD Museum 後浪來襲 - 新生代設計師聯展
61
conveX 201606 - 201705
展覽海報
62
- 2019’S PORTFOLIO
More Information
由下面連結觀看更多細節
Cïtyee Design
conveX - Social product design Cïtyee - Social design program
63
conveX 201606 - 201705
64
游子瑩 / Yu, Tzu-Ying +886 937-522-963
melody20223@gmail.com No.3-5, Malin Rd., Jiaoxi Township, Yilan County 262, Taiwan