UI 手法提案 DEMO

青園盃羽球賽|7 個排版手法對照

參考 champions4good.club 拆解出來的手法,用青園盃現有的內容與色票做成對照。左邊是網站目前的樣子,右邊是提案。

這是獨立的示意頁,正式網站完全沒有更動。看完決定要哪幾個,我再套進去。
01章節換色主題

目前只有白、淺藍、深藍三種底色輪流用;提案是每一章有自己的色溫,全部取自妳的六色色票,不新增顏色。

目前
活動緣起
活動資訊
賽制說明
常見問題
提案
活動緣起
活動資訊
賽制說明
常見問題
02連結 hover 文字上滑替換

目前 hover 只是底線展開;提案是文字整排往上滑走、同一組字從下方遞補上來。

滑鼠移到文字上看效果
03貼紙式微旋轉

標籤全部正正方方排好,看起來就是套版;提案讓每個標籤歪 1–3 度,像實體貼紙貼上去,滑過會轉正。

滑鼠移上去看
目前
男子雙打組混合雙打組16 組完賽全額退款
提案
男子雙打組混合雙打組16 組完賽全額退款
04徽章/膠囊系統

章節的英文小標目前是一行細字,容易被忽略;提案改成膠囊徽章,讓每章開頭有明確的「起點」。

目前

INFORMATION

活動資訊一覽

提案
INFORMATION

活動資訊一覽

05大編號當排版元素

目前編號只是小小的序號;提案把編號放大成排版主角,讓條列有節奏、不像一坨文字。

目前
01

男子雙打組與混合雙打組分開進行比賽

02

各組別均採單淘汰制,依序進行十六強賽、八強賽、準決賽、季殿軍賽及冠亞軍賽

提案
01

男子雙打組與混合雙打組分開進行比賽

02

各組別均採單淘汰制,依序進行十六強賽、八強賽、準決賽、季殿軍賽及冠亞軍賽

06少框線、靠留白分區

參考站整站只有一條細框線,全靠色塊與留白分區。提案把卡片框拿掉,改用細線與留白,畫面會更乾淨。

目前

日期

2026年11月22日

時間

09:30-16:30

地點

大墩羽球館(大慶館)

提案

日期

2026年11月22日

時間

09:30-16:30

地點

大墩羽球館(大慶館)

07章節錨點索引列

頁面很長,目前只能靠上方選單跳。提案在畫面側邊放一排小索引,滑到哪一章就亮哪一個,也能直接點跳。

點格子看選中狀態
目前(只有頂部選單)
提案 A:橫向索引
010203040506 070809101112
提案 B:側邊索引
01 STORY04 INFORMATION08 HOW TO ENTER12 ENTRY FORM