設計稿 v1 · 待過目

走到飛全站改版設計稿 · 總覽

WO-W2F-REDESIGN-001 · 2026-07-31 · 對標 ArigaGo 設計感 · 文案照現站零改動 · 13 頁單檔自含 HTML

設計稿清單(點卡片開啟)

01
首頁
Hero 層級重排+服務入口卡片化+文章導流
02
車輛介紹
四車款群組卡片化+三欄資訊卡
03
常見問題
18 題 accordion+分類 Tab+關鍵字搜尋
04
文章分類版型
卡片列表+分頁(⚠ 列表內容未經現站核實,見紅旗)
05
文章頁版型 ★痛點
70ch 閱讀寬度+sticky 目錄+清單卡片化
06
機場接送服務頁 ★痛點
41 列價格表加篩選+同區分組+試算工具
07
跨縣市接駁
計價優勢卡+計程車對比+流程卡
08
單/計時包車+多日包車代駕
一頁兩區+sticky 頁內導覽(照現站錨點結構)
09
商務接送
B2B 家族版型+車型卡(錯置卡有標籤)
10
企業長期包車
B2B 家族版型+聯絡表單
11
旅宿業者包車
B2B 家族版型+聯絡表單
12
預約教學
7 步驟數字徽章 accordion+快查 FAQ
13
立即預約
3 步驟+SkyMove 元件佔位框+安心保證
04(文章分類)版型通用最新消息/最新公告/台灣之美;05(文章頁)通用全部文章;06(機場接送)通用 16 個縣市頁。

現站文案紅旗(設計稿照抄未修,待您裁決)

問題等級
06 機場接送「新竹16個鄉鎮市」價格卡工具實際顯示基隆市 7 個行政區的價格——現站在線的資料錯誤,非版型問題資料錯誤
03 常見問題行程異動 Q3 答案出現「飛鴿接送並有權進行棄單」——走到飛站上掛飛鴿品牌名,疑誤植自飛鴿文案品牌誤植
13 立即預約正式站在線掛著佔位假文「以下是為了能夠滿足段落所需的長度而定義的無意義內文…」假文在線
04 文章分類現站分類頁真實來源(/category/news/travel/)未入鏡像、無法核實既有列表內容——設計稿的 12 篇文章清單是依 blog 實際文章新排的示意,非現站既有文案;套用到其他分類前需先抓回真實分類頁核實來源缺失
09 商務接送6 張車型卡兩兩重複;Lexus ES/NX 說明配的是 Ford Kuga 圖(設計稿已逐卡標籤)圖文錯置
02 車輛介紹「乘坐人數:乘坐人數:」重複字;尊爵六人座的適合對象/人數與八人座群組完全相同(六人座寫 1~4 人)內容錯誤
07 跨縣市接駁「立即預約」段落文字與 06 頁「彈性加價服務項目」逐字重複(疑區塊誤植);一處 CTA 原始文案無連結目標區塊誤植
08 包車「包車旅遊加價項目」段落與同頁「計時包車費用」文字逐字重複區塊誤植
12 預約教學Hero 小標寫「Vehicle Introduction」(車輛介紹的英文),與頁面主題不符欄位混用
03 常見問題原文散落 5–7 處孤立未閉合的「**」符號(原站手誤)符號殘留
全站6 頁現站無 H1(設計稿已將既有最大標題升格為語意 H1);85 個圖槽 48 個 alt 為空SEO 體質
以上全部是現站既有問題,依「文案零改動」原則設計稿原樣呈現。要修的話屬文案/資料修正,另立清單處理,不影響版型過目。

設計系統摘要

色彩橘 #F5821F 收斂為「行動色」(CTA/連結/強調);藏藍 #1F2A5A 當結構與標題色取代純黑,品牌感內建於層級
字級clamp() 響應式階梯,手機 375px 基準;價格數字與大標用圓潤展示字型營造年輕感(系統字型回退,零外連)
ArigaGo 手法轉譯留白紀律與字級節奏沿用;45° 裁切線轉譯成呼應 Logo 飛鳥的「衝刺線」母題;表格=品牌色框線+手機轉卡片
互動FAQ accordion、價格表篩選+同區分組、頁內 scroll-spy 導覽、手機漢堡選單——全部內嵌 JS、注入內容跳脫
完整規格見 design-system.md(tokens/元件規格/共用 CSS 全文/驗收清單)。過目方式:手機直接開各 HTML 檔即可(單檔自含);每頁底部有「設計稿 v1」標注列。