悠遊卡記名官方網站

以品牌色貫穿空間
為悠遊卡記名服務注入鮮明企業形象

前往觀看作品

專案角色

UI 設計師

執行時間

2019.08 —— 2019.11（ 3 個月）

載體

Web（含 RWD 設計）

專案背景

悠遊卡記名設定與掛失是悠遊卡官網最主要的外部服務連結之一，然而原先記名網站的設計風格與官網的清新形象有不小落差，為了符合官網的新穎視覺感受，以及提供更清楚、高效、友善的記名服務，因此悠遊卡公司決定改版。在不對現行網站程式造成過大變更的前提下，優化動線和翻新視覺。

首頁規劃

原先網站以不同卡種（普通卡 / 學生卡⋯⋯）為分流依據，我們從原點出發，考慮使用者進入網站時的目的，以目的為導向梳理不同的情境後，歸納四種主要功能入口（申請記名 / 變更資料 / 申請展期 / 查詢狀態），並搭配明確的說明文案和 CTA，引導使用者進入正確流程，輔以醒目 Banner 強調記名可獲得的效益。

色彩計畫

悠遊卡標誌由四種厚實鮮豔色組成，分別帶有對應的引申意義，我選擇將其意義轉化，代表四個主要功能，除了以品牌色貫穿空間來強化企業形象、營造活潑有趣氛圍，也能夠幫助使用者透過辨別不同的色彩，更快速找到目標功能。

應用圖標

仿擬悠遊卡吉祥物 BeBe 圓滑的身形和黑框線條，圖標也以「圓潤柔和」為設計語言，採用粗黑輪廓線搭配色彩點綴，透過圖標豐富畫面層次、體現輕盈無負擔的悠遊生活感。

多彩城市意象

首頁的全幅 Banner 以漆上品牌色外牆的城市街景作為基底，展現生機蓬勃、多彩繽紛的都市意象，並加入視覺焦點 —— 悠遊卡靈魂角色 BeBe，強化網站和使用者間的情感連結、傳遞親和力。此外也透過陰影拉高主選單的層級以凸顯重要性，並將位置規劃在螢幕高度 1/2 處方便點擊。

表單優化

原先記名網站的表單沒有目前填寫進度條，填寫欄位也未依性質分類，為了減少使用者在填寫繁雜表單時容易產生的煩躁感，我們在表單上方加入清楚的進度條，使用者可以一眼得知目前的進度、更專注地完成當下的步驟。欄位則拆分為「申請人資訊、身分證資訊、身份資訊」等區塊，從區塊標題就能預期要填寫的欄位項目。

情境插圖

比起純文字，使用者對於具象插圖有較強的感知能力。在表單提交成功和操作教學頁面，我們將段落文字所要傳達的重點概念，以容易理解的插圖形式呈現，藉此提高閱讀效率，也為畫面注入活躍生動的氣息！

響應式網頁

不論大螢幕電腦或者小尺寸手機，都確保視覺面和操作面的一致性、留意易於點擊的觸控範圍，表單頁面採用單欄格式，安排方便瀏覽的直線型閱讀動線。

上一個作品

元盛生醫肌膚檢測 App