T i n a Wa n g ’s p o r tf o l i o 2 0 1 6
Tina Wang’s
P o r tf o l i o 2 0 1 6
Index About me 2
UI/Layout 3
Wireframe 9
We b 11
Business card 15
I l l u s t r a ti o n 17
LOGO 21
「 About me 」。
汪子菁
Tina Wang
Date of birth
1991/01/15
Hometown
Kaohsiung
kke2580@hotmail.com
Skill Ai
Ps
Painter
Wireframe
Layout
I l l u s t r a ti o n
1 9 9 1 年，出生於高雄， 畢業於世新大學數位多媒 體設計學系遊戲組，曾任 職行銷公司設計助理兼行 政，以及軟體公司 UI/UX Designer。
從生活中學習， 從學習中成長， 在成長過程中， 發掘、探索－ 更多的 自己。
Page 3
「 UI/Layout 」。
Name／PIC_百貨APP (統一資訊) Ty p e s ／ A P P Project concept/ 與統一企業合作專案(持續進行中)，將百貨繁多、複雜的功能全數精簡收在APP，供消費者隨時下載 使用，並且可以一手掌握百貨所有優惠資訊、專櫃介紹及賣場平面圖等，結合Beacon廣泛運用，達 到及時推播訊息、餐廳訂位、小孩防走失等便民服務，讓消費者可以更舒適且悠遊自在地逛百貨！
Page 5
Page 7
Name／統聯客運訂票系統 Ty p e s ／ A P P Project concept/ 與統一企業合作專案(尚未上架)，專為統聯客運訂製專屬APP訂票系統，以統聯客運的代表色 ＂綠＂色做許多風格的嘗試，簡化繁雜的訂票程序，用快速且易上手的方式讓使用者可以隨時 隨地訂到滿意的搭車時段。
Name／愛台玩星級旅館 Ty p e s ／ A P P Project concept/ 由交通部觀光局指導，並與綾川創意行銷一同執行之專案，介紹台灣知名的優質旅館。 G o o g l e P l a y 商 店 ： h t t p s : / / p l a y. g o o g l e . c o m / s t o r e / a p p s / d e tails?id=com.wethink.itaiwan.hotel&hl=zh_TW
Page 9
「 Wireframe 」。 310x552
是否折抵停車時數
註冊會員＆會員卡 前往 返回 子畫面 註解
0.0a 網路設定alert
【開啟網路連線】 文案內容★:
請先開啟網路連線，
A.有任何一必填欄位未填寫→popup提示訊息[貼心
使用「App名稱」的
提醒]"所有欄位皆必填，請正確輸入"
便利服務！ 取消
B.[生日]錯誤→popup提示訊息[貼心提醒]"輸入的生
跳出＂0.0a 網路設定alert＂
日有誤，請重新輸入"
設定
文案內容★:
C.[手機]格式錯誤→popup提示訊息[貼心提醒]"輸入
A.有任何一必填欄位未填寫→"所有欄位皆必填，請正確輸入"
的手機有誤，請重新輸入"
返回＂1.0 主畫面(首頁)＂
B.[舊密碼][新密碼][再次輸入新密碼]格式錯誤(非6-8碼英數字)→"輸入密碼格式須為6-8碼英數字，請重新輸入"
D.[身分證號]格式錯誤→popup提示訊息[貼心提醒]"
點選【確定】，停留在修改密碼頁面
輸入的身分證號有誤，請重新輸入"
進入首頁(顯示預設圖)
離開app進入裝置的網路設定
廣告圖片(包含首頁&會員卡-訪客)
成功送出資料alert
資料錯誤alert
編輯基本資料
編輯基本資料
tina@wethink.com.tw
帳號
tina@wethink.com.tw
生日
2001/01/01
生日
2001/01/01
手機
0912XXX456
手機
0912XXX456
A123XXXXXX
身分證號
貼心提醒
已成功修改
0.0b 版本更新檢查
Tina Wang
姓名
姓名
生日
0912XXX456
手機
A123XXXXXX
身分證號 1234567890
Tina Wang
系統自行判斷有錯誤的欄位
Point
並顯示告知使用者
舊密碼
．．．．．．．．
新密碼
．．．．．．．．
再次輸入新密碼
．．．．．．．．
→修改密碼
須連線查看
【會員登出】
．．．．．．．．
舊密碼
新密碼
．．．．．．．．
新密碼
再次輸入新密碼 【修改密碼】 ．．．．．．．．
．．．．．．．． ．．．．．．．． ．．．．．．．． 貼心提醒
再次輸入新密碼
顯示密碼文字
確定要登出會員嗎?
系統需判斷新舊密碼是否再儲存前一致 若不一致將無法儲存
tina@wethink.com.tw
帳號
舊密碼
1234567890
顯示密碼文字
修改密碼
tina@wethink.com.tw
帳號
User Name
顯示密碼文字
已成功修改
文案內容★
確定
確定
2,548
Point
停留此頁
確定
確定
修改密碼
會員卡
tina@wethink.com.tw
帳號
Tina Wang
姓名
1.7.1.1a.1b登出alert
修改密碼
tina@wethink.com.tw 帳號不可更改 2001/01/01
帳號
User Name
A123XXXXXX
文案內容★
1.7.1a.1a.1a.1修改密碼
編輯基本資料
會員卡
帳號
身分證號
1.7.1a.1a.1a編輯基本資料
1.7.1a.1b 會員卡(會員)-無網路
取消
2016/12/31 due 確定
返回至”1.0 主畫面(首頁)”
所有欄位不可為空
LOGO
中友百貨
點數專區
連至＂1.7.1a.1a 會員卡(會員)＂
發票明細
Chung Yo Department Store
取消
儲存
取消
發票明細
儲存
取消
【版本更新提醒】
贈品兌換
「App名稱」已有新版本，
儲存
取消
儲存
Splash page
取消
儲存
連至＂1.7.1a.1a 會員卡(會員)＂
停車服務
立即更新
儲存
停車服務
請立即前往更新。
取消
取消
贈品兌換
若有資料變動將會出現Alert視窗 若無，則直接跳回”1.7.1.1a 會員卡(會員)”
進入首頁(當天開啟 只檢查1次，其他開啟則 Apple store/Play store 不檢查）
DM底圖： 1.若查無資料或與Server同步
無網路
失敗就呈現預設圖
1.若從”1.0 主畫面(首頁)”連結，則返回至那頁 2.若從”1.8a 停車服務(空位查詢)-會員”連結，則導回至那頁
2.若於後台有設定連結則APP 點擊圖片時將以in-app
0.0c Splash Page
1.0 主畫面(首頁)
browser開啟連結內容(須有關 閉按鈕可關閉in-app browser)
1.7. 會員卡(訪客)
1.7.1a 會員登入
會員卡
LOGO 中友百貨公司
1.7.1a.1a 會員卡(會員)
會員登入
1.9a 發票明細-無紀錄
會員卡
LOGO
中友百貨 Chung Yo Department Store
2、消費累積紅利點數
忘記密碼
有網路
1234567890
日發票！
無消費紀錄
B. 非百貨發票→掃描失敗，請重新再試！ C. 重複補登發票→此張發票已補登過，請
本月尚無消費紀錄，
2,548
Point
5、卡友周慶可獨享購物禮遇
點擊下方＂補登發票＂即可線上補登。
補登其他發票！
現在立即加入，還可獲得100點
會員卡
會員模式 (有網路)
會員手機條碼使用時機 1、結帳時出示「會員手機條碼」累計消費
點數專區
登入
2、預約兌換贈品後，出示「會員手機條碼」領取贈品
連至＂1.10b.1a 點數專區＂
電子禮券折抵條碼使用時機
註冊會員
1、於消費時出示「消費折抵條碼」可直接折抵消費金額
立即登入或申辦
取消
補登發票
連至＂1.8c 停車服務(空位查詢)-訪客＂
停車服務
連至＂1.8a 停車服務(空位查詢)-會員＂
1.9b 發票明細-有紀錄 若已有登入紀錄，下次進入會員卡將直接 連至＂1.7.1a.1a 會員卡(會員)＂
1.7.1a.1c.1a新密碼已寄送至信箱
1.7.1a.1c.1b欄位未填或格式錯誤
1.7.1a.1d 重發驗證信
1.7.1a.1d.1 驗證信已寄送至信箱
3-4月
6-7月
忘記密碼
註冊會員
忘記密碼
忘記密碼
重發驗證信
須為email格式
密碼
須為6-8碼英數字
2.會員註冊時，應提供完整詳實且正確的個人資料，事後 如有變更時，請隨時於線上更新。
【重發驗證信】
再次輸入密碼
【忘記密碼】
3.會員如以信用卡支付款項，您同意本公司得對您從事信 用徵詢，且本網站得要求您以其他支付工具支付款項。如 有冒用他人信用卡資料取得本站任何產品，因屬犯罪行為
西元年/月/日
生日
4.若因會員填寫資料錯誤而產生任何糾紛，在任何情況下
手機須檢查是否為10碼數字， 且必須為09開頭。請彈出數字鍵盤
手機
，會員不得要求任何賠償。 5.會員如有發生下列情形，東南旅遊網保留終止會員資格 及使用各項服務資格之權利：
請輸入帳號 密碼重設郵件 請輸入之前設定的電子郵件信箱(即帳號)
已寄至您的
．公布或傳送任何不實、不雅、不法、毀謗、威脅、猥褻
請輸入帳號 請輸入之前設定的電子郵件信箱(即帳號)
送出
送出
送出
送出
已兌換
是否折抵停車時數
已折抵
品項與金額
2,000 元
中友百貨－總館
送出
補登發票
addidas 風衣外套
x1
addidas 運動長褲
x1
合計：
．從事違法廣告或販賣不良商品行為。
停留＂1.7.1a.1c忘記密碼＂
連至＂1.7.1a 會員登入＂
我已閱讀並同意權益條款
店別和館別非必有的欄位， 若無資料則欄位自動隱藏， 不須為隱藏欄位留空間
2,000 元
YJ-12345678
3F ABC Mark
或侵害他人智慧財產權之文字、圖片。 ．意圖入侵或破壞本網站各項服務及系統。
3F ABC Mark
是否兌換贈品
2,000 元
2015.04.03
確定
確定
A館
櫃位
YJ-12345678
3F ABC Mark
信箱確認，
帳號開通後即可登入
確定 姓名
忠孝店
館別
消費金額
中友百貨－總館
請至您的電子郵件
請輸入之前設定的電子郵件信箱(即帳號)
請至您的電子郵件信箱確認
身分證號
店別
2,000 元
中友百貨－總館 2015.04.03
驗證信已寄至 請輸入帳號 您的電子郵件信箱，
請輸入帳號 請輸入之前設定的 電子郵件信箱(即帳號)
請輸入之前設定的電子郵件信箱(即帳號)
電子郵件信箱，
．提供不實之個人資料或資料有任何誤導之嫌的訊息。 ．使用偽冒或非法取得的信用卡號進行交易。
【忘記密碼】
請輸入帳號 請輸入之前設定的電子郵件信箱(即帳號)
，本站必訴諸法律，以維護公平交易之原則。
2015.04.03 16:54
YJ-12345678
3F ABC Mark 有消費紀錄
連至＂1.9a.1 補登發票＂
YJ-12345678
2,000 元
中友百貨－總館
重發驗證信
2015.04.03
帳號
7-8月
YJ-12345678
3F ABC Mark 權益條款
意接受本約定書之所有內容。
連至＂1.9b 發票明細-有紀錄＂
查看明細
4-5月
2015.04.03
定代理人閱讀、瞭解並同意本約定書之所有內容。當您使 用或繼續使用，即視同您的法定代理人已閱讀、瞭解並同
1.9b.1 查看明細
發票明細 1-2月
1.7.1a.1c忘記密碼
重試
贈品兌換
顯示會員權益條款文案(文案寫死於APP中)
1.7.1a.1b註冊會員
關閉
請將發票明細上的條碼對準框內紅色掃描線
發票明細
1.7.1b(版型參考 ”0.0a 網路設定alert”)
無網路
停車服務
1.會員需為20歲以上之自然人，若未滿20歲，應請您的法
A. 非當日發票→掃描失敗，僅提供補登當
已成功補登，可查看發票明細
重發驗證信
4、線上直接兌換電子禮券與紅利點數
1.7.1a.1b.1權益條款
補登失敗! 異常系
2.2點擊[從相簿選取]會開啟手
Password
密碼
1、享有停車優惠 3、省下周慶時排隊換紙本禮券與贈品的時間
補登發票
補登成功!
機相簿
結(廣告圖片)
加入會員好處
1.9a.1.1b 補登失敗
補登發票
7-8月
相機
帳號
片一樣會以in app browser開啟該連
訪客模式
6-7月
2.1點擊[開啟相機]會開啟手機
3. Banner若後台有設定連結點擊圖
※DM底圖
1.9a.1.1a 補登成功
補登發票
4-5月
相機]與[從相簿選取]
秒換下一張)，手動滑動時則不輪播
Splash page
3-4月
2.點擊大頭照跳出選單[開啟
2.廣告Banner會自動循環輪播(每一
EDM
1-2月
照片時，顯示預設圖
User Name
示預設圖片
1.9a.1 補登發票
發票明細 1.第一次進入此頁面或未上傳
1.抓取網路廣告Banner圖片失敗，顯
1,100 元 900 元 2,000 元
結帳方式：信用卡
．違反交易規定、消費者保護法、公平交易法或其他中華 民國法律規定。 6.會員如涉有不法行為者，除應由會員本身自負法律責任 外，東南旅遊網也將主動配合主管機關調查處理，若因此
重新填寫
送出
受有損害或支出費用，會員應負擔損害賠償責任。
連至＂1.10.1c 贈品總覽＂(所有贈品項目，該會員不一定能兌換)
使用者點下[送出]時， 程式須判斷所有欄位是否正確輸入
重新整理button
1.10a贈品兌換-電子禮券 亦可下拉頁面重整
1.10a.1a我的電子券
可兌換贈品
註冊成功alert
重新填寫alert 註冊會員
註冊會員
電子禮券
註冊會員
12
須為email格式
帳號
須為email格式
帳號
須為email格式
密碼
須為6-8碼英數字 【註冊成功】
密碼
須為6-8碼英數字
密碼
須為6-8碼英數字
再次輸入密碼
已成功註冊 帳號開通郵件 西元年/月/日 已寄至您的
生日
電子郵件信箱中
手機
請至電子郵件信箱確
身分證號
取消
姓名
確定 註冊資料全數刪除
歡慶百貨周年慶全館 消費滿萬送千 電子贈品禮券 x 2,000元 兌換截止日期 2016/1/1
忠孝店/A館/3F A8 剩餘 12
歡慶百貨周年慶全館 消費滿萬送千
西元年/月/日 文案內容★
手機
(依不同的情況如下)
身分證號
兌換截止日期 2016/1/1
復興店/化妝品
生日
剩餘 12
確定
系統自行判斷有錯誤的欄位 並顯示告知使用者 ex:密碼須為6-8碼英數字 姓名必填....諸如此類
忠孝店/C館/美食街 剩餘 12
姓名
我已閱讀並同意權益條款
電子商品禮券 字數超過兩行 則以...顯示(truncate)
領取日期：2015/12/15
電子商品禮券
消費館別：A館
折抵消費
消費店別：忠孝店
領取日期：2015/12/15 消費店別：無限定
05:00
-1,500 元
餘額 已過期
0元
超市 消費日期：2016/1/1
條碼五分鐘即過期
-
200 元
消費日期：2015/11/10
+1,500 元
消費金額：15,000
櫃位
線上兌換
需要重新進入此頁面取得消費條碼
消費金額：299
FNAC
關閉
兌換截止日期 2016/1/1
我已閱讀並同意權益條款
我的電子券
條碼剩餘有效時間
消費金額：1,800
使用期限：2016/02/31
消費館別：無限定
無印良品 消費日期：2016/2/1
消費館別：A館
電子商品禮券
請出示條碼以進行消費折抵
使用明細
餘額 1,200元
使用期限：2016/02/31
電子贈品禮券 x 2,000元
300元
領取日期：2015/12/15 消費店別：忠孝店
領取日期：2015/12/15
我的電子券 餘額
使用期限：2016/02/31
折抵消費
消費館別：A館
兌換截止日期 2016/1/1
歡慶百貨周年慶全館 消費滿萬送千
300元
消費店別：忠孝店
電子商品禮券
1.10a.1a.1b折抵消費
電子券使用明細 餘額
使用期限：2016/02/31
歡慶百貨周年慶全館 消費滿萬送千
電子贈品禮券 x 2,000元 中正店/3F A8
我已閱讀並同意權益條款
1.10a.1a.1a電子券使用明細
我的電子券 其他贈品
電子贈品禮券 x 2,000元
貼心提醒
確定要將資料清除嗎?
手機
身分證號
確定
姓名
店別&館別非必填項目 若無資料將自動隱藏 不留空白處
再次輸入密碼
貼心提醒 西元年/月/日
生日
紅利點數 剩餘
帳號
再次輸入密碼
連至＂1.0 主畫面(首頁)＂
輸入格式錯誤alert
消費日期：2016/09/08
+
500 元
消費金額：5,000
重新填寫
送出
重新填寫
送出
重新填寫
送出
1.10b.1a.1a點數專區-累點明細查詢
1.10a.1a.1a.1點數明細
Name／PIC_百貨APP_註冊會員及會員卡_Wireframe其一 Ty p e s ／ W i r e f r a m e Project concept/ 在設計PIC百貨APP前，為規畫及安排產品動線是否符合消費者之使用習慣，繪製wireframe流程 並與SA、RD、PM與客戶經過不斷的討論與改良後，才能將產品更加優化並完整呈現產品的特色。
Page 11
「 We b 」 。
Page 13
Page 15
「 Business card 」。
WETHINK
SOFTWARE INC
汪子菁 Tina
W Email:tina@wethink.com.tw
巍新軟體
WE THINK SOFTWARE INC
汪子菁 設計 Email:tina@wethink.com.tw
T:02-2947-8228 ext.808 F:02-2946-7373
新北市永和區民權路53號7樓709室 統一編號:53186504
新北市永和區民權路53號7樓709室 統一編號:53186504
T:02-2947-8228#808 F:02-2946-7373
W
W
巍新軟體
WETHINK SOFTWARE INC
WE THINK SOFTWARE INC
汪子菁 Tina
na @ 2- wet 29 hi nk F: 47 02 -8 .co m -2 22 94 8# .tw 8 673 08 73
汪子菁
T: 0
T:02-2947-8228#808
Em
Email:tina@wethink.com.tw
ai l:t i
設計
F:02-2946-7373 新北市永和區民權路53號7樓709室 統一編號:53186504
新北市永和區民權路53號7樓709室 統一編號:53186504
Page 17
「 I l l u s t r a ti o n 」 。
Page 19
Name／2015聖誕小卡 T y p e s ／ I l l u s t r a ti o n Project concept/ 2015聖誕佳節小卡，溫馨的色調加上Ｑ版的聖誕老人，應用許 多聖誕節常見的小物件搭配，提升整體卡片的活潑度。
Page 21
「 LOGO 」。
W E T H I N K
WETHINK
N a m e ／ W e t h i n k S o ft w a r e I n c . ( 巍 新 軟 體 ) Ty p e s ／ L O G O Project concept/ 以巍新(wethink)中的”W”和”T”作為發想，串聯這兩個英文字母，且注入「 軟體」、「資訊」、「物聯網」等概念，外框加入圓形相輔相成，將原本只有文字 的LOGO更圓滑更加深印象，塑造公司專業又不失創意的整體形象。
Copyright Š Tina Wang(TZ U CHING WANG) All rights reserved