Brief Intro of My Works
Yu-Ju Wei
目錄 TWENTY-TWO ‣ HTML, CSS, Actionscript ‣ personal web design
Let’s Go ‣ HTML, CSS, JavaScript, jQuery, php, mySQL, RWD
‣
team work
電影苑 ‣
UI/UX設計
‣
team work
TWENTY-TWO • 網站簡介 • 商標設計 • 色彩計畫 • 字型 • 網站架構 • 企業形象設計手冊展示 • 網站展示
網站簡介 • 中文名稱 ：二十二 • 英文名稱：TWENTY-TWO • 起源：獨立自主的年輕男女 • 目的：塑造品
形象
• 對象：20~35歲的男女
商標設計
商標設計 • 22的羅馬數字「xxii 」 • 令人駐足的服裝品
色彩計畫 •主色
RGB ( 162 , 20 , 74 ) HEX #A2144A
RGB (255,255,255) HEX #FFFFFF
RGB (172,172,172) HEX #ACACAC
RGB (144,144,144) HEX #909090
RGB ( 27 , 29 , 41 ) HEX #1B1D29
•輔色
RGB ( 58 , 44 , 45 ) HEX #3A2C2D
RGB ( 73 , 63 , 57 ) HEX #736357
RGB (209,200,194) HEX #D1C8C2
字型 • 英文 - Century Gothic - Helvetica Neue - Arial • 中文 - Heiti TC（黑體-繁） - Microsoft JhengHei（微軟正黑）
網站架構 22 訂閱電子報 語言 會員 客服 購物袋
新品
男
女
小孩
型錄
品
時裝
時裝
男童
2015春夏
鐘
包款
女童
2014秋冬
鞋類
鞋類
配件
配件
2014春夏
消息
門市
企業形象設計手冊展示 http://issuu.com/loulouplay/docs/cis_light
網站展示 http://140.115.236.72/demo-personal/YD802/web/C1400152/
走吧！Let’s Go！
旅遊規劃網站
大綱
網站緣起
電腦版網站畫面與風格
網站目標
行動版網站畫面與風格
網站服務流程
人力與時程規畫表
前端架構與功能技術
後端架構與功能技術
使用者案例圖
UI Wireframe
行動網站設計圖展示
2
網站緣起 每當工作、課業令人煩悶時，總會想出遊度假，放鬆一下！ 但是沒時間或懶得規畫行程
3
網站目標 幫助使用者規劃專屬的旅遊行程， 讓每位透過本網站規劃行程的使用者 省下至少70%的事前規劃時間
4
網站服務流程 先透過清楚簡單的選項讓使用者初步篩選目的地 再讓使用者選取想去的景點、美食、飯店
等
最後透過專業的規劃師規劃出專屬於使用者的旅遊行程
5
前端&行動端架構與功能技術
6
前端&行動端架構
7
前端&行動端功能技術 編號
網頁
功能
1
首頁
2
會員專區
2.1
規劃中行程
存放正在規劃中的行程資訊。
2.2
已收藏行程
存放已收藏行程資訊。(未訂購)
2.3
已下單行程
存放已訂購行程資訊。
2.3.1
電子票卷
存放優惠卷、電子機票。
2.3.2
行程資訊
存放所有與行程相關的項目。
2.3.3
交通資訊
放置關於行程中有關交通資訊的部份。
2.3.4
服務專員
提供使者緊急連絡的管道。
技術
指導使用者如何使用網站並提供搜尋列方便其 找到想要的地點，另有建議地點與會員使用分 享、各頁面的連結。
8
前端&行動端功能技術
編號
網頁
功能
2.3.5
匯率
連結外部網站顯示目前匯率。
2.3.6
天氣
連結外部網站顯示目前天氣。
2.3.7
旅遊用語
2.3.7.1
購物
常用購物用語資料
2.3.7.2
常用
常用日常用語資料
2.3.7.3
問路
常用問路用語資料
2.4
訂單查詢
現有及過去訂單查詢
2.4.1
行程規劃訂單 行程規劃訂單查詢
2.4.2
代訂訂單
代訂訂單查詢
2.4.2.1
旅行評鑑
回饋單，供顧客旅行結束後填寫，其結果列入 推薦行程的參考
2.5
會員資料維 護/查詢
會員個人資料查詢及維護
2.6
旅遊紅利
旅遊紅利相關說明及查詢
技術
9
前端&行動端功能技術 編號
網頁
功能
3
行程規劃
3.1
清單列表
依照使用者需求所呈現出的選項(有拖曳功能)
3.1.1
建議行程
依照使用者選擇的項目進行建議及行程安排
4
旅遊規劃師
規劃師團隊介紹
5
旅遊分享
使用者旅行心情分享
6
線上客服
提供使用者即時資訊服務
7
幫助中心
7.1
新手上路
協助使用者使用網站
7.2
常見問題
經常發生問題的解決辦法
7.3
流程與收費
使用網站流程&收費方式
8
關於我們
介紹Let’s Go網站
技術
10
後端架構與功能技術
11
後端架構
12
後端架構功能技術 編號
網頁
功能
0
帳號登入
1
會員管理
2
旅遊行程管理
3
旅遊分享管理 旅客留言維護
4
行程項目管理
4.1
景點管理
景點資訊維護(上下架/修改)
4.2
航班管理
機票資訊維護修改
4.3
餐廳管理
景點資訊維護(上下架/修改)
4.4
飯店管理
景點資訊維護(上下架/修改)
5
權限管理
管理人員權限管理
技術
後台系統必須先登入
13
後端架構功能技術 編號
網頁
功能
6
訂單管理
6.1
行程訂單
行程項目訂單處理、查詢、刪除及修改
6.1.1
已完成訂單
已完成付款之訂單
6.1.2
處理中訂單
待完成付款之訂單
6.2
規劃師訂單
行程規劃訂單處理、查詢、刪除及修改
6.2.1
已完成訂單
已完成付款之訂單
6.2.2
處理中訂單
待完成付款之訂單
技術
14
使用者案例
15
使用者案例-前端
16
使用者案例-後端
17
UI Wireframe(Final version)
18
UI Wireframe(Final version)
從左邊首頁中點選 旅遊規劃進到下一頁面
19
UI Wireframe(Final version) 完成選擇項目後， 系統會出現推薦行程， 若沒有行程符合您的需求， 可請規劃師客製化您的行程
20
行動網站設計圖展示
行動網站腳本流程圖 http://issuu.com/loulouplay/docs/prototype
行動網站頁面設計圖 http://issuu.com/loulouplay/docs/userinterface
21
電腦版網站畫面與風格
22
網站設計畫面與風格
23
網站設計畫面與風格
24
網站設計畫面與風格
25
行動版網站畫面與風格
26
行動網站畫面（RWD）
27
行動網站畫面（RWD）
28
人力與時程規劃表
29
人力分配表-前端 工作項目
王雅慧
程慧文
魏禹如
李欣哲
黃聖元
游書宗
程式執行製作 - 前端 會員註冊 ( 前端 ) 會員登入 ( 前端 ) 旅遊規劃 ( 前端 ) 查旅遊規劃師 ( 前端 ) 分享旅遊經驗 ( 前端 ) 瀏覽推薦行程 ( 前端 ) 查看新手上路 ( 前端 ) 查看常見問題 ( 前端 ) 查看流程與收費 (前端 ) 聯絡線上客服 ( 前端 ) 瀏覽關於我們 ( 前端 ) 查看旅遊紅利 ( 前端 ) 會員資料查詢與維護 ( 前端 ) 付款 ( 前端 ) 查詢訂單 ( 前端 ) 規劃中行程查詢 ( 前端 ) 收藏行程查詢 ( 前端 ) 下單行程查詢 ( 前端 ) 顯示電子票券( 前端 ) 查看交通資訊 ( 前端 ) 填寫回饋單 ( 前端 ) 聯絡緊急服務專員 ( 前端 ) 查看匯率 ( 前端 ) 查看天氣 ( 前端 ) 查詢旅遊用語 ( 前端 )
◎ ◎ ◎ ◎ ◎ ◎ ◎
◎ ◎ ◎ ◎
◎ ◎ ◎
◎ ◎ ◎ ◎ ◎ ◎
◎ ◎ ◎ ◎
◎ 30
人力分配表-後端
王雅慧
程慧文
魏禹如
李欣哲
黃聖元
游書宗
◎
◎
程式執行製作 - 後端 員工登入 ( 後端 ) !
◎
權限管理 ( 後端 ) !
◎
旅遊分享管理( 後端 ) !
行程訂單管理 ( 後端 ) !
規劃師訂單管理(後端 ) !
紅利計算與查詢( 後端 ) !
會員資料管理( 後端 ) !
◎
行程審核 ( 後端 ) !
行程管理 (後端 ) !
航班管理 ( 後端 ) !
( 後端 ) !
餐廳管理
景點管理( 後端 ) !
飯店管理 ( 後端 ) !
◎ ◎
◎
◎
◎
◎
◎
◎
◎ ◎
◎ ◎ ◎ ◎
專題文件製作 專題簡報製作
◎
專題文件整合
31
時程規畫表 流程項目
7~13
九月 14~20 21~27
28~4
5~11
十月 12~11 19~25
26~1
2~7
十一月 9~15 16~22 23~29
網站規劃 系統分析 視覺元素設計 網頁設計 資料庫建立 程式撰寫 期中驗收 期末驗收 成果發表 工作期
檢查點
32
網站展示 http://140.115.236.72/demo-projects/yd802/yd802g2 Web
Mobile
33
APP介面設計 電影苑
大綱 • APP簡介 • APP架構 • 版面配置
APP簡介 • APP名稱 – 電影苑
• APP功能 – 即時電影資訊查詢
• 選用系統 – ios – iPhone5S
APP簡介 • WHO – 學生 – 上班族
• WHAT – 最新電影資訊 – 影城資訊 – 電影時刻表
• WHERE – 任何地點 – 只要使用者帶著手機
• WHEN – 任何時間 – 節慶假日使用量增加 – 可能邊移動邊操作
• WHY – 介面有設計感 – 介面直覺簡單易上手 – 占用系統資源少
• HOW – 直接點選icon
APP架構
電影苑 我的最愛
影城查詢
電影查詢
電影時刻 表查詢
版面配置(首頁、我的最愛)
版面配置(影城搜尋)
版面配置(時刻表、電影搜尋1)
版面配置(電影搜尋2)
個人作品
電影苑LOGO與介面設計
APP名稱：電影苑 功能簡述：提供即時的電影資訊查詢服務