Project Concept

9Bar 旨在打破傳統圖資 App 的冰冷感，重新定義城市夜生活的探索邏輯。在本專案中，我們針對「深夜低光源」使用情境，研發了極致的深色模式（Dark Mode）視覺系統。透過琥珀金與深夜藍的對比配置，我們不只在地圖上精準呈現全台酒吧點位，更整合了「酒精路跑」與「品酒會」的票券核銷閉環，讓使用者從搜尋、訂位到現場兌換，皆能在一個沉浸式的介面中流暢完成

Functional Features

為了處理複雜的圖資數據與高頻率的線下核銷，我們建構了高度組件化的前端架構：

動態地圖探索與熱點偵測：在地圖前端實作了 Hotspot (熱點) 與 Event (活動) 雙軌標記系統。Pins 組件能根據商家即時狀態動態切換視覺權重，並搭配 Bottom Sheet 浮層設計，確保使用者在不跳轉頁面的情況下，即可完成 80% 的資訊檢索

高安全性金物流與票券匣：深度整合藍新金流前端驗證流程，並開發「多態數位票券」模組。針對酒精路跑、單場品酒會及店家優惠券提供不同的視覺呈現與 QR Code 核銷介面，將金融交易的嚴肅感轉化為高品質的收藏體驗

極致篩選與空狀態引導：針對 30 種以上的氛圍標籤（如：安靜、DJ、威士忌專門）設計了高反應速度的篩選器。並在無搜尋結果時，透過琥珀色調的幽默感文案，優雅地緩解使用者挫折感

Project Info

Services : 介面設計 / Figma 前端開發 / 支付與票券流程設計

Date : 2026.01.10

Keyword : 地圖UI、深色美學、酒精路跑、QRCODE核銷、SaaS產品原型

Deep Dive

1. 深夜美學下的色彩心理學：琥珀金的引導力

在酒吧環境中，使用者的瞳孔處於放大狀態。我們捨棄了純白高亮區塊，改以琥珀金作為全局 CTA 顏色。此色彩配置主要是為了呼應品牌 CI 的本色，建立強烈且一致的品牌識別度；同時在功能面上，琥珀色也能完美聯覺威士忌酒液與夜晚燈光的色澤，並在深色底色中產生強大的視覺引導力，導引用戶完成「購買門票」與「掃碼核銷」等關鍵動作

2. 複雜數據的「視覺降噪」技術

9Bar 涉及大量的資訊：店家類型、地址、營業時間、當前活動、甚至是多種支付方式。我們在 Figma 中實作了嚴謹的層級規範，利用背景與細膩的描邊，將資訊區分為「地圖層」、「浮層卡片」與「功能操作層」，讓介面在大資訊量下依然保持呼吸感

3. 酒精路跑：跨店核銷的用戶旅程

這是我在前端設計中最核心的創新。酒精路跑通行證必須同時處理「多店適用」與「單店已核銷」的狀態。我們設計了一套線下友善的票券介面，讓使用者能方便點擊出票券，並在點擊「使用」時自動彈出商家專屬的掃描介面，大幅縮短結帳櫃檯的等待時間