D1CHOICE SHOP 悠遊卡官方唯一授權

🎨 D1CHOICE SHOP 官方網站・設計提案 

一、 視覺與品牌調性：清新暖感 ✕ 故事載體

D1CHOICE 賣的不是卡片，而是「留住每個重要回憶與獨特的感動」。

• 色彩計畫（Color Palette）：
• 主色（70%）： 採用純淨奶油白或溫柔燕麥色作為大面積背景，讓聯名插畫家繽紛的角色色彩、或是用戶上傳的日常照片成為主角，背景不喧賓奪主。
• 點綴色（10%）： 採用帶有生活感、高彩度的「文青芥末黃」或「初戀蜜桃粉」，用於「開始製作」、「加入購物車」等重要 CTA 按鈕，營造活潑、令人想動手創作的期待感。
• 視覺風格（Visual Style）：
• 圓角與微陰影（Card Design）： 整體 UI 元件採用大圓角設計，呼應「悠遊卡」本身的卡片弧度與插畫角色的軟萌感。
• 生活情境感（Lifestyle）： 減少單純的產品白底照，改用大量「手握客製卡嗶進捷運站」、「掛在質感包包上的聯名卡」等第一人稱視角（POV）的生活情境照。

二、 首頁 UI 佈局：雙大核心分流（Dual-Gateway）

進站的客戶通常分為兩類：「想自己上傳照片客製的人」與「想買插畫家聯名款的人」。

• 區塊 1：Hero Section（沉浸式創作 banner）
• 主視覺用高質感的動態滾動（Marquee），一邊展示豐富的插畫 IP 角色，一邊展示各種生活照片（寵物、畢業照、情侶照）縮小放進悠遊卡框的動畫，並搭配核心標語：「將你的珍貴回憶，變成每天隨身帶走的風景。」
• 區塊 2：直覺式雙分流卡片
• 【左側卡片：1 分鐘開始個性化客製】：點擊直接進入「上傳照片、簡易排版、去背加字」的流程。
• 【右側卡片：嚴選插畫家與品牌館】：以插畫家 IP 大頭貼作為直覺入口，一鍵進入小田月所、Corgiyolk 的世界。

三、 核心特色功能設計（UX & Feature Highlights）

1. 打造「所見即所得」的線上客製模擬器（客製化 UX 核心）

傳統的客製流程要到 LINE 傳照片、對稿，效率較低。 

• 設計： 在網站內建一個精準的「卡片即時預覽畫布（Live Canvas）」。
• UX 互動細節：
• 使用者選定「普通卡」或「造型卡」後，畫面會出現 1:1 的虛擬悠遊卡。
• 使用者可直接拖放照片，利用網站內建的 「一鍵智能去背」、「多款限定相框套用（如畢業季、雙11節慶）」、「添加文字與調整底色」。
• 滑鼠移動時，虛擬卡片會隨著光影產生擬真的「亮面反射感」，讓用戶在下單前就能完全確認成品外觀，降低認知落差。

2. 「插畫家宇宙」故事化品牌專區（文創特色）

D1CHOICE 擁有許多優質創作者，設計上必須彰顯他們的品牌靈感。

• 設計： 每個插畫家專區頂部，都規劃成「迷你故事館」。例如介紹小田月所如何把台南虱目魚文化轉化為療癒角色。
• UX 效果： 讓消費者買的不是一張普通的交通卡，而是一個「有故事、有溫度」的實體陪伴，提升文創商品的溢價價值與收藏吸引力。

3. 一目了然的「企業/團體客製」商務專區（B2B 特色）

除了個人客製，悠遊卡也是極佳的「門禁識別證、活動贈品、企業禮品」。

• 設計： 設立獨立的「團體客製專區」，擺脫繁雜表單，設計成簡潔的「4 步驟流程圖」與「快速採購計算機」。
• UX 效果： 企業採購只要輸入「預計訂製張數（50張以上）」，系統自動提供對應的優惠折讓與專人諮詢按鈕，加速商務導流。 

四、 交易與信任感建立：官方授權背書

• 正版授權信任章（Official Badge）： 許多人害怕買到非官方、無法加值的假卡。因此在頁尾（Footer）及結帳頁面，必須醒目設計 「悠遊卡股份有限公司官方授權定製平台」 的精緻標章，建立絕對的消費安全感。
• 極簡化付款整合： 將台灣在地常用的「悠遊付 EasyWallet」 付款選項圖示與信用卡、ATM 圖示並列於首頁底部與購物車，強調支付的便利性。