桃園機場無障礙網站
專案時程
2025/4-7
專案角色
UI/UX 設計
團隊人數
1PM、1 Designer
負責項目
UI/UX、工程交付
桃園國際機場官網在完成改版設計後，我們進一步以官網設計的基底為出發點，打造符合無障礙網頁標章規範的專屬網站。此次無障礙網站延續機場官網的資訊架構與設計精神，同時強化可讀性、操作便利性與輔助工具支援，讓不同需求的使用者都能無障礙地獲取資訊與使用服務。
專案背景
在桃園機場官網改版完成後，我們延伸既有設計，打造符合台灣無障礙網頁標章規範的網站。
此專案目標是讓不同需求的使用者，都能輕鬆、平等地獲取機場相關資訊，同時兼顧視覺一致性與無障礙規範，最終提供更友善的數位服務體驗。
桃園機場官網首頁
現況分析
設計目標
根據現況分析，網站在文字可讀性、視覺對比與整體一致性上仍有優化空間。
將以提升使用體驗為核心，確保網站不僅符合無障礙標準，也能維持官網的風格建立統一的視覺規範。
1
調整字級、字距與段落排版，確保文字在不同裝置上皆易於閱讀，並提供舒適的瀏覽體驗，降低使用者在資訊理解上的負擔。
2
依照無障礙 AA 標準檢測並優化網站色彩配置，使文字與背景之間的對比度足夠，讓所有使用者都能清楚辨識資訊，提升無障礙體驗。
3
建立統一的設計規範，涵蓋顏色、字體、按鈕與元件樣式，確保不同頁面與功能間的設計一致，提升後續維護效率。
設計成果
強化分頁入口的可辨識性與互動回饋
重新設計了按鈕的結構與互動狀態。透過更明確的輪廓、背景色與色彩對比，讓入口在介面中能立即被識別為可操作元素。
加入按鈕底色與邊框：將文字＋ icon 明確轉換成可操作元件
提升色彩對比：分頁入口與背景對比提升至 AA 標準以上
增加 Hover 動效：利用背景改變來強化互動回饋
提升對比與區塊結構，讓航班資訊一目了然
雙數列加入更明顯的底色，使每一行的分界更易辨識，使用者能快速追蹤資訊而不會在視線移動時迷失。
此外，在展開更多內容的區塊中加入清晰的邊框，強化區塊的結構層次，讓資訊群組更明確。同時刪除多餘的小裝飾元素，使整體版面更乾淨、聚焦於資訊本體。
雙數列使用底色區分：提升航班資訊的行間辨識度
提高文字與背景的對比度：符合 AA 標準，提高可讀性
展開區塊加入邊框：使群組更清晰，資訊層級更易理解
重新整理資訊層級，建立更一致的介面結構
在原本的航班抵達資訊頁中，文字層級不明確、區塊樣式不一致，加上資訊排列較分散，導致使用者在閱讀時需要額外辨識內容位置。這對高齡者、低視力者或依賴語音朗讀的使用者而言，尤其容易造成理解負擔。
統一資訊卡片樣式：以一致的留白、字級與結構呈現航班關鍵資訊，讓使用者更容易掃描並理解不同區塊的內容。
提升文字階層與行距可讀性：強化標題、副標與內容的視覺差異，提高行距與對比度，使低視力使用者能更輕鬆閱讀。
改善圖示與文字的語意化設計：統一 icon 風格並搭配完整文字敘述，讓語音輔助工具能正確解析，同時降低僅靠圖示辨識的難度。
設計系統
學習與反思
在這次無障礙網站的設計過程中，我一開始對無障礙規範不太熟悉，因此前期花了大量時間查找資料、參考國內具有無障礙標章的網站，逐步理解不同使用者在操作上的限制與需求。隨著專案推進，我從以往以視覺美感為主的思考方式，轉為更加注重色彩對比、資訊層級、互動提示等會直接影響可用性的細節。
在這過程中我也發現，美感與無障礙之間的平衡並不容易，要兼顧美觀、品牌調性與易讀性，需要更多經驗與判斷。因此這次專案不僅加深了我對無障礙設計的理解，也提醒我未來需要持續練習如何在視覺與無障礙之間取得更好的平衡，讓設計真正兼具友善與質感。
