Ariel Tong
Home
About
擔任角色
UI/UX設計師
專案時程
2022.11~2023.4
負責項目
需求溝通與規劃
UI/UX設計
RWD靜態切版
會議紀錄整理核對
系統測試
工具/程式語言
＊由於後台系統為公司內部機密，以下展示前台畫面為主。
01
背景介紹
Background
「TalentNXT職場即戰力人才培育計畫」為溫世仁文教基金會自2020年展開的計畫，主要受眾為應屆畢業生及職場新鮮人，邀請具豐富實戰經驗的講師進行傳承，此線上評量系統為量身打造，
乾淨簡約的介面，搭配人性化的細節設計與防呆提示
，提升測驗過程的流暢度。
02
問題&解決方法
Obstacles & Solutions
問題一.
客戶對於整體架構概念模糊，難以想像系統實際畫面
解決方法.
繪製線框稿，協助客戶建構系統架構
前台畫面線框稿
問題二.
客戶與工程師意見分歧，需求與實際可行性相互衝突
解決方法.
整合雙方意見，繪製示意圖，找出既符合需求又最具效益的做法
條列式
可切換篩選條件，操作方便且一目瞭然
卡片式
呈現方式活潑，可一次瀏覽所有類型的測驗卷
測驗列表頁面示意圖的兩種做法
問題三.
系統功能與流程繁雜，內部認知不統一
解決方法.
將複雜的功能流程繪製成手稿圖，協助內部達到合一共識
測驗註記功能流程圖
不同條件下進行測驗顯示的彈窗
問題四.
上線時間急迫，設計與開發時程被壓縮
解決方法.
建立時程甘特圖，採階段性分工模式進行，使多部門有效率地同步工作
專案時程甘特圖
03
主視覺設計
Main Page Design
設計理念
主視覺以CIS色系中的暖橘為主、灰色為輔，各元素與按鈕採圓角設計，畫面
年輕、活潑
，符合此系統的主要使用者--應屆畢業生與職場新鮮人。
04
更多設計細節
Features
Test List
測驗列表
卡片式設計，清楚呈現各測驗目前狀態
專案列表
為使專案資訊更加清楚明瞭，以
板塊式設計
的方式呈現
測驗狀態
使用者可清楚辨別各測驗狀態：
開始測驗、繼續作答、完成測驗
元素設計
為使畫面更活潑，測驗設計為
試卷造型
，背景添加幾何元素作為裝飾
元素設計
為使畫面更活潑，測驗設計為
試卷造型
，背景添加幾何元素作為裝飾
Test
測驗流程
人性化的細節設計，作答過程更加順暢！
作答剩餘時間
顯眼的設計，幫助使用者隨時掌握作答時間
註記功能設計
若有
尚未確定
的答案，輕鬆點選題目前方的星星ICON直接註記
註記題目按鈕
不論作答至何處，點擊右上按鈕查看註記過的題目
問題區塊設計
每個問題以白色背景區塊區隔，方便作答
註記題目按鈕
不論作答至何處，點擊右上按鈕查看註記過的題目
問題區塊設計
每個問題以白色背景區塊區隔，方便作答
註記題目列表
一次瀏覽所有註記題目，也可
取消註記、修改答案
，系統皆會自動儲存
防呆彈窗
為避免
漏題、誤按
等問題，設計防呆小彈窗作提醒
防呆彈窗
為避免
漏題、誤按
等問題，設計防呆小彈窗作提醒
測驗結果
以清新的向量插圖作為主體，同步顯示
完成測驗時間及本次作答時長
05
靜態網站展示
Static Webpage
.png)
