大學生適性化學習系統

清華大學教育研究所「適性化學習環境之效益評估」研究計畫使用的系統

負責任務

UI HTML CSS

專案時間

2021.10

問題

1. 網站主色系明度低，給人厚重、暗淡無趣的感覺

目標

網站主要導向為測驗網站及提供測驗結果相關資訊，文字的易讀性為首頁任務

業主交付舊版的大學生適性化學習系統，我的任務是翻新整個系統的UI，再運用css語言完成。

引導使用者，快速了解測驗題目及資訊

在不改變網頁架構下，重新設計 UI

2. 無使用圓角設計，讓整體看起來較剛硬、沒有溫度

3. 資訊無系統化的整理，閱讀起來相當吃力

設計原則

用黃色作為輔助，讓人更專注

次要色

主要色

藍色給人冷靜、寧靜的感覺，
使用者可以更穩的操作此系統

Before

Noto Sans TC

將原本散落資訊改為收合式，整體看起來較整齊，使用者可以點擊自己想看的標題，內容會向下延展

After

大四時因參與《深入淺出 UI/UX》資訊管理系研習活動，得知系上學姊正找人協助優化國立清華大學教育研究所「大學生適性化學習系統」的網站介面，和該系所助理面談後獨自接下這份專案工作。
‍
本次負責工作為重新設計該網站UI，在資源有限且不能更動網頁架構下進行網頁優化。為提供更好的使用者體驗，除了大量與該系所相關研究人員溝通，也進一步了解該網頁主要功能性目的，是以文字為主要導向的測驗平台，為使測驗過程流暢、清晰，我也更深入的了解關於「文字層級」的區分方式，依照內容文字重要性做區分，更改職涯探索、升學相關、系統功能等流程細項的文字層級介面，在這整個過程中能被信任並賦予專案更動執行權是很寶貴的一次經驗。