13% Learning at google searching engine.
25% User Interface Design.
20% Be good at communication and
SKILLS 13%
team working.
User Experience Design.
2% Front-end languages.
27% Digital drawing skills.
我在使用者介面設計(User Interface) 工作中，多擔任視覺設計、使用流程設計； 使用者經驗設計(User Experience) 方面擅長的則是介面設計、需求與產品功能分析、 使用者流程調查，亦做過使用者角色設定(任務單)、使用者測試。 聯絡方式 手機：0988-224-142 e-mail：fern.hsu@gmail.com
ICON 與頁面 UI 設計
#Calculator 計算機
App —Flingy voting #Voteing 功能與版面設計 投票前→投票後
社交類型 App—Flingy voting 即時二擇一功能為主要特色，並可在好友、追蹤對象、自己的投票貼文上留言、收 藏、表示喜歡與分享，點擊上方 Navigation Bar 的 F 字樣 LOGO，則會彈出使用者、 好友等等資訊。
#Player 撥放器 UI 設計
影片撥放
ICON 與頁面 UI 設計 #Settings 功能頁面 #Switch 開關設計
#Header 設計
#Checkout 付款頁面
ICON 與頁面 UI 設計 #Sign up 註冊功能頁面設計 #Sign in 登入功能頁面設計 Sign up 註冊
Sign in 登入
可用合作的社交軟體帳號註冊，或另設一個帳號；若已有帳號則按下送出勾勾旁的 "Already a member"，就會跳至登入頁面。
#404 錯誤頁面 - 可互動
按下 " 手 " 工程師小人會站起來，也可從錯誤頁面搜尋網頁其他內容、或回到上一 層。
App —HitoFun 晚鳥訂房 花更少的錢，得到相同的享受 “沒有低價，只有更多低價” 我們幫助消費者爭取最低價，幫助業者出售未售出之當日空房 臨時起意，嘗鮮，突發狀況，需要找尋旅館，歡迎使用。 #UI Flow
和工程師討論版型與動畫的一些過程圖
# 導覽頁
# 開始頁面
# 主頁面
# 設定
# 篩選資料
# 地圖檢視附近旅館
—飯店資訊
飯店附屬設備— 五日當地天氣—
飯店地圖—
開啟 Google map 導航— 旅館聯絡資訊— —360 度全景檢視房間
—房間照片
—價錢資訊 HitoFun 訂房 App 的設計一樣注重易用性原則，同 時傳遞大量資訊，飯店資訊頁面我選擇以長條方式呈 現，App 使用對象可以輕易地用手滑出許多資訊，更 方便的檢視大量資料。
# 登入流程
# 錯誤訊息
# 使用者評價
# 訂房結果頁面
# 使用者帳號
HitoFun 訂 房 App 在 蘋 果商店與 Google Play 皆 可下載
互動觀景窗系統
為機場設計的互動裝置—互動式觀景窗。 以松山機場為對象，此系統以智慧型玻璃為載具，具有完善的機場導航、商店情報、 即時航班座位查詢系統以外，還有塗鴉、拍照系統，可與塗鴉自拍後分享，另外最 具特色的是「夜景模式」—漆黑的夜裡，大片的玻璃上降下雪花、泡泡或者其他特 效，帶給候機者及觀景臺使用者羅曼蒂克的感受與驚喜，是個營造松山機場的特色 的互動式導覽系統。
UI Design
Functional Map
Paper Mockup 紙模型測試與問題點分析
測試流程： 製作紙模型→設計任務單→分派任務給使用者→觀察記錄使用模式→修改 Wireframe。
JK3066 跑步機介面設計 JK3066-Treadmill #Start Page 起始頁面
#Bluetooth Link 藍芽連接
#Safety Mode 安全模式
#Lunch 啟動頁面
#Results Settlement 成績結算頁面
JK3066 商用電跑設計重點：
以商用為目的，能夠讓使用者清楚快速的辨認與選擇自己的目標，開始執行
設定運動項目；卡牌、圖像化的運動目標 (Workouts)，與清楚的訓練強度標誌，滾 輪狀的數字選擇，清楚的按鈕配置，都是增加易用性的關鍵。 # 運動目標卡牌 12 種 (workouts)
#Workouts 運動目標項目 ( 用手拖曳轉動 )
JK3066 跑步機介面設計 # 運動強度五階層
#Videoplay 影片播放介面 # 跑步介面 / 數值 / 功能
# 坡度、速度與時間倒數圖表
此軟體運行於 Android 系統，螢幕尺寸 1366*768 像素。
App —Healthy Dreamer
# 運動項目設計
此 App 可於 Google Play 下載。
LOGO 設計
100
b*
100
75
L*
50
-100
-50
0
0
50
100
a*
50
25
-50 0 -100
0
25
50
75
100
C*
設計理念 箱子由六個面構成，以箱 子多面的結構呈現跨領域的意 象，在其中兩個面配上黃色與 草綠是代表創意思考（黃）與 和諧溝通（草綠），打開的箱 子是「意想不到(surprise)」 的概念。希望這個圖樣帶給大 眾清新又有創意的感受。
設計理念 使用有襯線的字營造設計 感，並套用漸層的橘色以營造 散發光芒的樣貌，代表思考創 意時的腦力激盪；學系名稱下 方的校名加上左右兩個三角形 形成卷軸狀，而卷軸是數位產 品介面裡皆能見得的設計，以 表示「媒體設計」這個較為抽 100
b*
象的概念；而相較於大同公司
100
75
L*
50
-100
-50
0
0
50
100
a*
的紅色，大同大學的代表色為
50
綠色是橫捲軸之所以配為綠色
25
-50 0 -100
0
25
50
C*
75
100
的原因。
新一代設計展網頁、FACEBOOK 宣傳照 平面設計
新一代設計展—網頁、Facebook 宣傳照
平面設計
新一代設計展—網頁、Facebook 宣傳照