針對車貸系統進行 UI/UX 與視覺介面設計， 以清楚的頁面版型、資訊層級與一致的視覺呈現， 整理系統各類功能頁面的 UI 介面。 本案包含登入、首頁、列表、表單、訊息、 Popup、報表等介面設計， 並依不同畫面需求進行 Template 與 UI 元件設計， 同時完成 RWD 與 HTML/CSS 前端切版。
PROJECT OVERVIEW
本案以車貸系統介面為設計範圍， 進行 UI/UX、視覺設計與頁面版型整理， 讓不同功能頁面維持一致的視覺呈現。
依不同頁面內容與使用情境， 設計列表、表單、訊息、Popup、報表等介面， 並整理欄位、按鈕、選單及其他 UI 元件的視覺樣式。
同時製作不同畫面尺寸下的 RWD 介面， 並完成 HTML/CSS 前端切版， 將設計稿轉化為可呈現的靜態介面。
PROJECT TYPE｜ UI/UX Design・Visual Design
DESIGN STAGE｜ UI/UX・Visual Design・Template Design・RWD
PROJECT YEAR｜ 2022
EXECUTION｜ UI/UX 設計・視覺設計・美編・Template・RWD・HTML/CSS 前端切版
DESIGN CHALLENGE
車貸系統包含不同類型的功能頁面， 從資料列表、表單填寫到訊息與報表， 每種頁面都有不同的資訊呈現需求。
因此在 UI 設計上， 需要兼顧資訊層級、版面配置與元件視覺， 讓不同頁面在內容不同的情況下， 仍維持一致的介面風格。
本案透過共用的版型與 UI 元件樣式， 整理不同頁面的視覺呈現， 並配合 RWD 與前端切版完成靜態介面。
不同功能頁面需要維持一致的視覺風格。
列表資訊較多，需要清楚的資訊層級與版面配置。
表單欄位需要統一視覺樣式與操作呈現。
訊息、錯誤、提示與 Popup 需要一致的視覺呈現。
不同螢幕尺寸下維持清楚的介面閱讀與呈現。
DESIGN SOLUTION
依不同功能頁面的內容與畫面需求， 進行 UI/UX 與視覺設計， 整理共用版型、UI 元件與介面狀態， 並完成 RWD 與 HTML/CSS 前端切版。
UI LAYOUT
依不同功能頁面整理版面配置、 資訊層級與內容呈現方式。
VISUAL DESIGN
處理色彩、字級、間距、按鈕、 欄位及整體介面視覺呈現。
TEMPLATE
整理列表、表單、訊息、Popup、 報表等常用頁面版型。
UI COMPONENT
設計輸入框、下拉選單、按鈕、 日期選擇器及表單等介面元件。
RWD / HTML CSS
依不同螢幕尺寸進行響應式介面設計， 並完成 HTML/CSS 靜態介面切版。
DESIGN COVERAGE
依不同頁面需求進行 UI/UX、視覺設計與美編， 並以共用版型與元件維持整體介面的一致性。
UI DESIGN
LOGIN → LIST → FORM → MESSAGE → POPUP → REPORT → RWD UI
設計登入畫面的版型與視覺呈現， 建立清楚的操作入口。
整理列表、搜尋與篩選區域， 建立清楚的資訊閱讀層級。
設計表單欄位、輸入框、 下拉選單與相關操作元件。
設計提示、錯誤、確認與 Popup 等不同介面狀態。
整理報表頁面的版面與資料呈現， 維持清楚的視覺層級。
統一按鈕、欄位、選單、 日期選擇器等元件的視覺樣式。
建立不同類型頁面的共用版型， 讓各頁面維持一致的視覺語言。
依不同螢幕尺寸進行響應式介面設計， 並完成 HTML/CSS 前端切版。
PROJECT SERVICES
PROJECT ROLE
亞米負責本案 UI/UX 設計、視覺設計與美編， 包含介面版型、Template、UI 元件與各頁面視覺呈現， 並依不同裝置需求完成 RWD 設計及 HTML/CSS 前端切版。
