Brand Identity Guidelines
阿玩旅遊
Wanna VEGTour
把素食旅遊的焦慮，
換成真正可以放鬆的旅程。
阿玩旅遊是來自台灣的素食旅遊品牌，為素食者——尤其是家裡的長輩—— 設計每一段安心的旅程。這一頁是我們的品牌識別指南， 提供行銷夥伴、媒體、合作單位與 AI 代理使用。
品牌標誌
Logo
標誌由書法筆意的「阿玩旅遊」與一片小小的葉子組成——葉子是素食的心意，也是旅途裡的一口新鮮空氣。
↑ 實際顯示為最小尺寸
請避免這樣使用
需要標誌原始檔，請來信 service@wannavegtour.com 索取。
色彩
Color
顏色來自一杯茶的時間：米色的紙、棕色的茶湯、和午後斜進來的一道金光。這次微調只做一件事：加入「玄墨」——介面裡最深的字（大標與數字），讓層級的最上面再定一階。
奶油米
#faf8f3
全站的底，像一張溫潤的米色紙
玄墨
#221e17
最深的字：大標題、價格與時間的數字
墨棕
#4a4036
標題與重要的字
茶棕
#726a5e
內文的顏色，溫和耐讀
鎏金
#caa965
只作裝飾：大標、細框、點綴
深金棕
#8a6a2f
金色的「字」與按鈕——要讀的金一律用它
誰可以站在誰上面每一格都是實測對比值
| 文字 × 底色 | 對比 | 判定 | 用途 |
|---|---|---|---|
| 玄墨 × 奶油米 | 15.6:1 | AAA | 大標、價格、時刻數字 |
| 墨棕 × 奶油米 | 9.5:1 | AAA | 標題、重點句 |
| 茶棕 × 奶油米 | 5:1 | AA | 內文、說明 |
| 深金棕 × 奶油米 | 4.7:1 | AA | 金色文字、連結、外框鈕 |
| 鎏金 × 奶油米 | 2.1:1 | ✕ 不可當字 | 僅限 24px+ 大標／細框／裝飾線 |
| 鎏金 × 墨棕（深色底） | 4.5:1 | AA | 深色底上的眉標與金色小字 |
| 淡金 × 墨棕（深色底） | 6.5:1 | AA | 深色底上要更醒目的金色文字 |
| 深金棕 × 墨棕（深色底） | 2:1 | ✕ 不可當字 | 深色底禁用——改用鎏金或淡金 |
不變的約定：鎏金只作裝飾。所有要閱讀的文字一律深金棕（4.7:1）以上。我們的旅客有許多是長輩——每一個字都要讓他們讀得清楚。唯一的方向對調：在墨棕深色底上，深金棕會沉進背景（2:1），眉標與金色小字改用鎏金（4.5:1）或淡金（6.5:1）。
色彩的比例一個畫面裡的配方
金色一多，畫面就從「溫潤」變「俗氣」；狀態色一多，就沒有人知道哪裡才是重點。LINE 綠是客人的老朋友，僅用於 LINE 相關按鈕，屬品牌例外。
字體與閱讀性
Typography & Readability
字級不是美學偏好，是實證數字：針對 57–70 歲讀者的手機研究顯示，中文密集閱讀要 13pt（約 17px）起才舒服。所以我們的內文從 17px 起跳——比業界慣例高半階，這半階就是我們對長輩的體貼。
標題字・Noto Serif TC（思源宋體）
阿玩旅遊
永久的回憶，從安心的一餐開始。
內文字・Noto Sans TC（思源黑體）
每一餐都替您確認過，每一間飯店都有人先去住過。 行程表上寫得清清楚楚：幾點集合、走多少路、哪裡可以坐下來喝杯茶。 您只需要帶著期待出門，其他的，交給阿玩。
字級階
閱讀性規則
| 規則 | 數值 | 為什麼 |
|---|---|---|
| 行高 | 內文 1.7–1.8／標題 1.3–1.4 | WCAG 建議 1.5 起；中文筆畫密，再放鬆一點 |
| 行寬 | 中文每行 ≤ 40 字；手機約 18–22 字 | WCAG 1.4.8 對中日韓文的明文規定 |
| 字重 | 最細 400；不用 100–300 | 細字在高齡視力下會「糊掉」 |
| 數字 | 等寬（tabular）＋千分位 | 價格、日期、時刻要能直向對齊、一眼讀對位數 |
| 英文裝飾 | 11px、字距 +0.14em、只當眉標 | 英文對主客群無資訊，是質感的香料不是主菜 |
版面與格線
Layout & Grid
所有間距都踩在 8 的節奏上（小處允許 4）。節奏一致，畫面自然安靜；到處都是特例，畫面就開始吵。
| 位置 | 數值 |
|---|---|
| 手機頁邊距 | 16–20px（全站統一取 20） |
| 卡片內距 | 16px（緊湊）／20px（標準） |
| 卡片之間 | 14–16px |
| 區塊之間（章節呼吸） | 手機 64px／桌面 96px |
| 觸控目標 | 一般可點列 ≥48px、主要按鈕 52–56px、絕對下限 44px；相鄰可點物間隔 ≥8px |
| 一屏原則 | 每一屏先講重點：標題→關鍵資訊→行動，其餘往下收 |
圖片
Imagery
照片是我們最大的說服力，規矩只有三條：比例有定式、壓字要墊底、主體要看得見。
照片上放字：一定要墊漸層
中國港澳・八天七夜
銀杏紅楓限定・妥樂古銀杏村
文字區底部墊「透明 → 72% 深棕黑」的漸層，覆蓋高度約照片下半 50–62%；墊完後白字對比要達 4.5:1。禁止把字直接放在亮部照片上——雪景、沙灘、天空都是字的天敵。
| 規則 | 內容 |
|---|---|
| 最小顯示尺寸 | 卡片縮圖短邊 ≥160px；小於它就別放圖，用留白 |
| 主體位置 | 人物與地標放中上 2/3，避開會被漸層與文字蓋住的下緣 |
| 一張圖一件事 | 資訊不可只存在於圖片裡（長輩看不清、AI 讀不到）；圖片必附一句話說明（alt） |
攝影風格
Photography
自然光、旅途中的人、食物的俯拍、開闊的地景——像家人相簿裡最好看的那幾張，真實，而且看得見溫度。
線與面
Lines & Surfaces
線有三種粗細、角有四種圓法、影子只有兩層。超出這些選項，就是在發明新方言。
框線三級
髮絲線・1px・16%結構分隔：列與列、章與章
互動邊界・1.5px・深金棕外框按鈕、可點卡片的邊
焦點框・2px＋3px 位移鍵盤操作時的落點，永遠看得見
圓角四階
8px（小標籤）・12px（輸入框）・16px（卡片）・膠囊（按鈕，一律膠囊）。同一元件家族用同一階，不混。
陰影兩層
浮起（卡片預設狀態）・懸浮（底部固定列等提升的元素）。陰影是空氣不是妝——畫面上同時最多一種懸浮。
圖示
Icons
只用細線條圖示（筆畫 1.5–1.6、圓端點），全站同一套（lucide）。絕不使用 emoji——它在不同手機上長得不一樣，而且會讓畫面顯得隨便。圖示永遠配文字，不單獨扛意義。
搜尋
搜尋列、搜尋按鈕
出發日期
出發梯次、行事曆選擇
集合地點
集合地點、地圖導引
航班
航班資訊、票卡中的路線
LINE 客服
LINE 客服入口、候補聯繫
會員
會員登入、個人資料
所有行程
所有行程、探索入口
前往
列表項目的前往箭頭
元件語彙
Components
我們的介面說一種方言：票券。出發日期是機票、報名是登機、候補是排隊——隱喻一致，長輩不用學新東西。
票卡 Ticket —— 出發梯次的唯一容器
解剖：日期 21px 玄墨等寬數字｜虛線航線＋飛機（鎏金）｜穿孔虛線分隔票根｜價格深金棕。狀態徽章永遠在價格右側。
狀態徽章 Status —— 只說三句話
松綠＝放心、琥珀＝快一點、灰棕＝轉向 LINE 候補。額滿永遠給出路，不是句點。
細列報名欄 Slim Bar —— 未選日期時的底欄
高度 ≤72px；按鈕是「帶路」（點了捲到日期區），不是「禁止」。選好日期後才展開成完整報名欄。
CTA 行動設計
Calls to Action
一屏只有一個主角。主要行動用實心深金棕膠囊，次要用外框，LINE 相關用 LINE 綠——三種以外不發明。
| 規則 | 內容 |
|---|---|
| 尺寸 | 高 52–56px（次要 46px 起）；手機主 CTA 全寬、放拇指區（畫面下半） |
| 文案 | 動詞開頭、說結果：「選擇本行程」「加入 LINE 候補」；禁止「點此」「了解更多」 |
| 回饋 | 按下 100ms 內要有反應（按壓變深）；送出後按鈕自己說「已送出」 |
| 一屏一主角 | 同一畫面僅一顆實心主 CTA；其餘降級為外框或文字連結 |
✕ 禁止：假按鈕
請先選擇上方的出發日期長得像按鈕卻不能按——長輩會反覆點然後怪自己。條件不足時，把按鈕變成「帶路」：
✓ 正確：帶路按鈕
選擇出發日期同一個位置、同一顆按鈕，變成可以按的下一步（點了捲到日期區）。
語氣與文案
Voice & Tone
我們的語氣是「安心的引導」：像一位熟門熟路的朋友在前面帶路，告訴你下一步，從不催促、不製造焦慮。
○ 這樣說
「下一步：填寫報名資料」
✕ 不這樣說
「立即搶購！」
告訴旅客下一步是什麼，而不是催促
○ 這樣說
「本團已額滿——加入 LINE 候補，有名額時第一時間通知您」
✕ 不這樣說
「售完不補，錯過再等一年！」
額滿也要留一條安心的路
○ 這樣說
「集合時間是早上八點半，不趕，慢慢來」
✕ 不這樣說
「請務必準時！逾時不候！」
把規則說成照顧，而不是警告
文案格式格式是替讀者省力氣。同一種資訊，全站只有一種寫法。
| 資訊 | 唯一寫法 | 禁止 |
|---|---|---|
| 價格 | NT$ 46,900（千分位、等寬數字） | 46900 元、NT$46900 |
| 日期 | 9/8（二）；區間 11/03 – 11/10 | 2026-09-08、9月8號 |
| 時刻 | 08:00（24 時制） | 上午 8 點、8:00AM |
| 跨日抵達 | 隔日凌晨 00:35 抵台，並寫出實際日期「9/20（日）」 | 00:35 (+1) |
| 轉機 | 香港轉機・等待 1 小時 05 分（不出關、跟著領隊走） | 只列兩段航班不說關係 |
| 名額 | 尚有名額／即將額滿・剩 N 位／已額滿・可候補 | 售完、Sold Out、搶購一空 |
語氣沿用現行規範的三組對照：告訴旅客下一步、額滿留一條路、把規則說成照顧。
長輩友善守則
Designing for Seniors
這一章的每個數字都有研究出處——它們不是偏好，是底線。
| 守則 | 數值 | 依據 |
|---|---|---|
| 觸控目標 | 列 ≥48px、主鈕 52–56px、下限 44px、間隔 ≥8px | WCAG 2.5.5/2.5.8；高齡實測 ≥10mm 起、15.9mm 最佳；高齡誤觸率為年輕人 4 倍 |
| 中文內文 | 17px 起（密集閱讀）；輔助字下限 14px | 57–70 歲手機字級系統性回顧：中文密集閱讀 13pt≈17px |
| 對比 | 內文 4.5:1 起、盡量朝 7:1 | WCAG AA／AAA；高齡水晶體黃化使低對比更吃虧 |
| 可點的要像可點的 | 清楚邊界（框線或底色），不用純手勢 | 132 篇研究系統性回顧：清楚邊界＋避免模糊元素 |
| 下拉與滑桿 | 能不用就不用；改用攤平的選項 | NN/g 高齡研究：對動作控制退化者特別困難 |
| 輪播 | 自動輪播 ≥7 秒、觸碰即停、給大箭頭 | NN/g：移動中的內容對長輩即消失的內容 |
| 表單 | 一步一件事；輸入框字 ≥16px；標籤在框上方 | 認知負荷研究＋iOS 聚焦縮放行為 |
| 容錯 | 錯誤訊息說「怎麼修好」；重要操作可反悔 | 系統性回顧：容錯介面顯著降低挫折感 |
出處：WCAG 2.5.8 ・ W3C 觸控研究彙整 ・ 高齡手機字級 SLR ・ Age-friendly Design 系統性回顧（132 篇） ・ NN/g 高齡使用者報告（87 條準則）
觸控目標絕對下限 44px；一般可點列 ≥48px；主要按鈕 52–56px。
應用示例
In Use
把標誌、色彩、字體和語氣放在一起，會長成這個樣子。以下為示意，實際樣式以官網為準。
韓國慶州・古都五日
台中出發・全程蔬食
NT$ 49,900 起
出發
9/12（六）
回程
9/16（三）
- 1確認訂單
- 2填寫資料
- 3完成報名
給 AI 代理
For AI Agents
這份規範同時是給 AI 的工作手冊。規範只有一份真本——網頁、純文字、數值檔三種面貌都從同一份資料產生，改一處、三處同步。
| 出口 | 給誰 | 內容 |
|---|---|---|
https://wannavegtour.com/design-system | 人 | 本頁：敘事＋示例 |
https://wannavegtour.com/design-system/guide.md | AI 代理 | 全部規則的純文字版：條列＋「屬性：值」，一次讀取全部入腦 |
https://wannavegtour.com/design-system/tokens.json | AI／設計工具 | 色彩（含可用底色與對比值）、字級階、間距階、圓角、陰影的純數值 |
任何 AI 產出物（行銷圖、kiosk 畫面、文案）在動手前，先讀 guide.md；拿精確數值找 tokens.json。遇到規範沒寫的情況：選更安靜的那個做法，並回報讓規範補上。
聯絡我們
Contact
媒體採訪、品牌合作，或需要標誌原始檔與更高解析度的照片，都歡迎與我們聯繫。
- 地址
- 408 臺中市南屯區豐樂里
文心南路 39 號
本頁內容歡迎媒體與合作夥伴引用；對外使用品牌素材前，請先來信與我們確認。 需要標誌原始檔，來信即寄。
