網頁開發
遊戲設計
技能專長
Html / Css / RWD
Javascript / jQuery
Vue.js
Sass
PHP / MySQL
Git版控
Figma
Adobe illustrator
Adobe photoshop
Adobe indesign
工作經驗
• 2023.8 - 仍在職 / 宏達國際電子 / 網頁前端工程師
• 2022.1 - 2023.02 / 五桐號飲料店 / 正職組長
• 2020/設計實習生/螞蟻帝國
證照/獲獎
• 2021 放視大賞 遊戲類-PC遊戲 組 Mirror xd 入圍
• Adobe 2017 Photoshop cc
• 中華民國技術士證（視覺傳達設 計）丙級
網頁開發2023 Thursday 個人網頁製作專題
• 獨立完成流程設計、版面設計、網站編譯、功能描寫， 用時1.5個月
• 使用技術：使用JavaScript / jQuery製作圖片輪播、 區域切換、滾輪滑動判斷。
• 使用套件：swiper輪播效果、AOS動畫效果
使用技術
• Html / Css / RWD
• Javascript / jQuery
• Swiper套件、AOS套件
Wireframe
Mockup
Brainstem
網頁開發 2023
張序亞 莊雅郡 蕭涵言 陳釮瀚
陳妍羚 詹于弘 簡明歆
7人小組開發，用時約2個月，從零開
始前端網頁製作以及後端資料庫建立、
前後端資料串接...等等。
我的分工內容：
會員登入、會員註冊、忘記密碼、會
員中心、購物車結帳，頁面切版及功
能執行、資料庫串接。
使用技術：
資料格式驗證、後台資料庫串接、API
串接、LocalStorage資料抓取、使用
Vue.js框架、Axios套件
結案簡報(請點我)
網站架構 SiteMap
前台架構
後台架構
ERModle
使用技術
Frontend Backend
• Html / Css / RWD
• Javascript / jQuery
• Sass
• Vue
• Swiper套件
• Figma
• PHP
• MySQL
• AJAX
Version Control
• Git版控
• Sourcetree
• Github
團隊分工內容
陳妍羚
我負責的頁面及功能
購物車結帳
• 判斷購物車有無商品，若無商品跳
出提示確認後跳轉首頁
• 商品資訊存放於LocalStorage抓 取內容渲染於頁面上
• 商品移除且將商品從LocalStorage 移除
• 商品優惠券_
1. 判斷是否登入會員
2.判斷使用者會員是否有商品券
3.新增優惠券功能與資料庫記錄
3.優惠券形式
a.折扣現金判斷是否有達使用金額
b.折扣打折計算折扣金額
• 結帳按鈕判斷是否已登入會員，若
未登入跳出提醒確認後跳轉登入頁
• 信用卡表單簡易驗證，輸入特殊字
元及日期不符合，跳出通知提醒
• 商品結帳，資料庫新增訂單資訊、 會員遊戲庫
會員登入、會員註冊、忘記密碼
• 會員登入資料與資料庫比對，成功 後將登入資訊存入PHP session
• 會員註冊填寫表格驗證，提示儲存 格內容格式，確認註冊將資料傳入 資料庫
• 忘記密碼使用PHP Mail發送驗證 碼到信箱，通過後更新新密碼至資 料庫
會員中心
• 會員資料_
1.會員資料axios抓取PHP session會員登入資訊，再發送 API取得會員資料渲染內容
2. 會員資料修改，頭貼上傳至資料 夾中，修改格資料判斷，儲存將資 料Update至資料庫
• 訂單記錄_
1.取得會員訂單記錄訂單詳細內容
2. 首次開啟網頁展開第一筆資料， 手風琴式開合，點擊第二筆關閉其 他筆預覽
• 遊戲庫_
1.「新增評論」可填寫評論以及給 評價星等，評論過的商品則不會顯 示新增評論按鈕
2.開始遊戲按鈕亂數更新遊戲時長 即成就數量，上次遊玩時間紀錄點 擊時的時間
• 會員優惠券_
1.渲染會員所擁有的優惠券及內容
3.新增優惠券功能與資料庫記錄
Uber Driver
UI/UX設計 2020
陳妍羚 簡伯諺 李佳穎 戴詩婷 劉楷民
專案目的
• 能讓使用者增添更多趣味性
• 改變風格樣式，吸引年輕使用者使用
• 增加使用者點開APP的意願
• 解決APP接單不易的問題
問題陳述
• APP內缺乏交流性，無法和其他使用者交流
• 等待接單時過於無聊
• 常導致騎車快，車禍狀況多
• 接單不易
人物誌Persona
年齡:21歲 職業:學生(大三) 性別:男生
交往狀態:單身 個性:外向、活潑、愛斤斤計較
興趣:玩電腦遊戲、吃美食、賺錢
目標:
• 母胎單身的我想把時間放在打工上才不會浪費人生
• 想選擇自由彈性的工作，才能不影響到課業
• 想透過工作多認識其他人，增加自己的交友圈
阿軒目前是一個大學三年級的學生，就讀電影系，夢想成為電影的導演，因為家境的關 係，所以生活費需要靠自己打工來賺取，所以從高中開始就去過很多地方打工，但因為 上課時間及課業壓力，所以常常讓他需要換工作，最近他發現了一個新的工作，叫外送 員，這個工作非常的適合他，因為他可以自己選擇自己想上班的時間，自由度非常高， 但常常因為在等客人或是等餐的時候很無聊，找不到打發時間的東西，或是因為客人常 常不來取餐感到困擾。
競品分析 Conpetitive Product Analysis
如何能有機會做到更好
1. 找不到路 ➡ 送餐時+論壇(分享小路…)
2.騎快車，出很多車禍 ➡ 寵物孵蛋系統(配合時數限制孵蛋，超過限速即無法孵蛋)
3.等待接單，空等很無聊 ➡ 等待接單時+寵物系統(打發時間)
4.接單不易 ➡ 新增可以顯示區域內的接單量系統，讓外送員可以知道單較多的地點。
顧客旅程地圖 User Journey Map
同理心地圖 Empathy Map
服務設計藍圖 Service Design Blueprint
風格樣式設計
根據情緒版我們決定製作一款能吸引年輕人具有新穎感覺的視覺風格，只要色
調以黑、綠為主，黑色是因為考量到使用者需要在黑夜裡長時間使用使用黑色
較能護眼不會感到刺眼，而綠色是根據Uber eats主要以綠色為主色我們也 想呼應綠色看起來比較年輕坦率，而我們也取用了「科技」裡漸層霓虹的感覺 使用了漸層色使得風格更加年輕許多。
Portfolio 2025
LOGO文字使用斜體不但有速度感也有年輕的感覺，與我們外送員的目標很
符合，內文字則屬用黑體，易讀性較高也會使畫面比較整齊。
Uber Driver
icon design
Rotation -30
＃666767 ➡#040000
Rotation -30 Blur 5.4 R45 G45 B45 #2d2d2d
Mockup
螞蟻帝國-電子互動看板設計
UI/UX 設計 2020
陳妍羚 郭芳岑 林育芳
商場內的電子看板複合企業介紹、商品介
紹、營業項目介紹和能與顧客互動的小遊 戲，配合店家目標客群、消費族群習慣設計
出適合螞蟻帝國的商店電子互動看板。
團隊分工
陳妍羚
UX分析
Wirefream
部分UI設計
Prototype測試
郭芳岑
風格樣式設計
主要UI設計
Mockup
林育芳
首頁icon設計
部分UI設計
Wirefream
使用Adobe xd製作 Wirefream，在前期作業與業主討論分頁內容及使用動
態Prototype展示更能體驗使用者感受，也方便日後與組員討論UI設計內 容。
Mockup
＊因涉及商業內容及智慧財產權，故只展示部分介面設計內容。ㄒ
記脹人
UI/UX 設計 2019
陳妍羚 宋芷誼 廖文蔚 楊冬雪 朱妤婷 林子維
透過問卷分析使用者經驗，改善後製作一款
通用於男女老少通用的記帳APP，劃分遊 戲和實用功能的綜合型APP，就算是不喜
歡有遊戲類型的人也可以使用此程式 ，達 到符合各類使用者需求。
分析結果
標準色
icon design
UI設計 2018 時光膠囊
時光匆匆，歲月如梭，在這世界是時間每分每秒不斷地 流逝，
而我們又能記得幾分快樂幾分憂愁。「時光膠囊」不僅僅可以 每天紀錄你的日記更是你每天的健康守護者，並加入了 轉蛋增 加生活樂趣，一起來收集吧!
設計理念
• 鼓勵使用者多運動來獲得獎勵
• 收集成套扭蛋獲取成就
Logo設計
• 換取「時光膠囊」能寫下信件，設定寄出的時間與對象，不只能 跟朋友間互動，也能給未來的自己。 Font：海派腔調滾實體
標準色
icon design
Law of cell
手機遊戲設計 2020
線上完整企劃書 陳妍羚 許國彬 高筱婷 簡琮育 吳憶嫺 謝尚逸
「Law of cell」是一款卡牌類型的手機遊戲，遊戲中主角是 個超級病毒，以為自己來到了世外桃源，殊不知是被關在實驗 室的培養皿裡面。後來科學家開始不斷嘗試要用藥物來殺死他 時，他不得不抵抗這些不速之客......。
遊戲玩法
卡牌介紹
風格樣式設計 APP icon & logo
遊戲美術（實際遊戲畫面）
主畫面
遊戲操作畫面
遊戲結算畫面
遊戲設定畫面
關卡選擇頁面
PC遊戲設計 2021 Mirror xd
陳妍羚 許國彬 高筱婷 簡琮育
吳憶嫺 謝尚逸
《鏡中世界Mirror xd》是一款利用
畫面切換的2D惡搞解謎遊戲。腦洞大
開的關卡設計與充滿嘲諷的劇情對話，
絕對讓你沈迷其中!
入圍：
線上完整企劃書
遊戲介紹
簡單的遊戲機制，加上了傳奇迷 因、經典遊戲與電腦作業系統等
元素。此外，遊戲還加入了現實 與虛擬世界的概念，需要善用道
具，穿梭在兩個世界中來突破關 卡。
在遊戲中，玩家將扮演某電腦的使用者，拯救被木馬程式綁架的密碼。
期許能帶給玩家獨特的遊戲體驗，並且勾起過去有關電腦、電玩與網 路帶給我們的美好回憶。
《 Mirror xd 》 Logo
遊戲規格
遊戲名稱:Mirror xd
遊戲類型:2D / 解謎 / 惡搞
遊戲平台:PC(Windows)
遊戲人數:單人
操作方式:滑鼠
遊戲分級:保護級
遊戲長度:一章節約 20-30 min，共二個章節。
遊戲玩法
「 純滑鼠控制 」：透過滑鼠的點擊和拖曳，達到與場景上的互動效 果。利用點擊取得場景上的物件、並利用滑鼠的點擊或拖曳觸發破 關條件。
團隊分工
企劃構思、遊戲介面設計、
陳妍羚
高筱婷
遊戲icon道具設計、文宣 周邊設計、展場佈置、企劃 書製作
遊戲場景設計、遊戲icon 道具設計、文宣周邊設計、 展場佈置、遊戲角色設計、 粉專經營
簡琮育
許國彬
主要企劃構思、關卡設計、 對話腳本設計、遊戲動畫設 計、遊戲角色設計、宣傳片 製作、音樂音效製作
吳憶嫺
企劃構思、程式編寫、音樂 音效製作
主要企劃構思、主要程式編 寫、遊戲特效
謝尚逸
程式編寫、遊戲特效
遊戲美術（實際遊戲畫面）
Portfolio
Chen,Yan-Ling
UI/UX Design Game Design
