Release · 2026.09.11 · develop

9/11 推版內容

這次把「讓食客更容易做決定、留下回饋、持續回來」的幾條路串起來:新增扭蛋與每日獎勵、問卷與吃什麼流程,也補上地圖探索與後台營運工具。以下用同事實際會看到的畫面與工作流程整理。

01 扭蛋與獎勵

把抽獎從單一入口擴充成可以持續回來玩的獎勵循環;同時讓營運同事可以自己維護獎品與機台規則。

新增食客

全新的扭蛋機體驗

食客可以在不同機台間切換、投入抽獎券、觀看抓取與開獎動畫,最後拿到有等級與稀有度標示的獎勵票券。

兩台機台不同機台可對應不同獎池。
獎品清單先看有哪些獎品,再決定要不要抽。
獎勵票券抽到的結果可被保存與查看。
實際流程:進入扭蛋頁 → 選擇機台 → 查看獎品與機率 → 按下抓取 → 等待動畫結束 → 在結果票券上查看獎品。抽獎券不足時會顯示明確提示,不會送出無效操作。
新增食客

每日登入與簽到獎勵

新增每日獎勵面板與簽到回饋,讓使用者知道今天能拿什麼、下一次回來還有什麼。

使用者會看到:今日是否已領取、目前連續簽到狀態、可領取的獎勵,以及和扭蛋券之間的關聯。領取完成後會有明確回饋,避免重複點擊或以為沒有成功。
新增業務營運

後台扭蛋管理中心

後台新增機台、獎品、抽獎規則、會員紀錄與抽獎紀錄管理,也能先預覽機台畫面再發布。

  • 機台:設定名稱、狀態與對應獎池。
  • 獎品:維護獎品內容、等級、數量與顯示資訊。
  • 紀錄:查看誰抽過、抽到什麼,以及目前的消耗狀況。

這次推版的意義:獎池內容不必每次都靠工程修改,後續活動可以由營運端調整。

02 使用者問卷

把想知道的使用者需求變成產品裡的實際互動,填答結果會回到後台,方便後續整理與決策。

新增食客

分段式問卷填寫流程

新增問卷入口與題目場景,支援單選、多選、文字與條件式題目;填答過程會保留目前進度,送出前也能檢查答案。

實際流程:進入問卷 → 依畫面提示逐題回答 → 使用上一題/下一題移動 → 遇到條件題時只顯示相關問題 → 送出前確認 → 完成後看到提交成功狀態。必填題未完成時,會指出需要補回答的地方。
新增產品營運

後台問卷結果檢視

後台可以查看問卷定義、題目與示例資料,讓團隊先確認呈現與資料結構,再進一步整理回覆。

後台用途:確認目前問卷版本、題目順序與題型是否正確,並檢查食客提交的答案是否能被完整回收。

03 吃什麼 V1

當食客只知道「今天不知道吃什麼」,現在可以交給流程先縮小範圍,再從候選店家裡做決定。

新增食客

用條件篩選候選店家

依照位置、距離、營業狀態與探索條件產生候選,使用者可以查看候選理由、切換下一家,或直接選定店家。

原本要自己在地圖、搜尋與店家頁之間來回比較。
現在先回答需求,再得到一組可以立刻做決定的候選。
實際流程:開啟「吃什麼」→ 選擇想吃的條件 → 確認位置與距離 → 查看候選店家與推薦依據 → 不喜歡可以換一間 → 選定後前往店家頁。篩選條件會跟搜尋與探索使用同一套位置、營業狀態邏輯。
調整食客

結果頁的互動與回饋

候選結果可以重新抽取、查看店家詳情,並記錄這次決策後的回饋,讓之後能知道推薦是否真的有幫上忙。

  • 重新抽取:不必返回上一頁,就能換看下一個候選。
  • 查看店家:保留店家地址、營業狀態與既有內容入口。
  • 回饋記錄:可分辨是採用推薦、跳過,或沒有完成決策。

04 地圖與探索

這次同時調整「看地圖」與「找店家」的入口,讓探索更像是在一張可操作的地圖上完成,而不是只看一串列表。

調整食客

探索頁改成地圖加可拖曳結果面板

地圖成為主要背景,下面的結果面板可以拖曳展開或收起;店家 marker 的點擊區域也重新整理,手機上更容易點到正確店家。

畫面行為:進入探索頁先看目前位置附近的地圖與店家點位;上拉面板可以瀏覽完整結果,下拉可回到地圖視角;點 marker 或結果列會同步選取同一間店,避免地圖與列表停在不同位置。
新增食客

動態頁分類與「更多」入口

新增分類篩選列,分類太多時可以從更多分類面板選擇;同時保留優惠券浮動入口,讓動態頁的探索與領券更順。

使用方式:先在分類列選一個主題;找不到想看的分類時,點「更多」開啟完整清單。選定後動態內容會跟著切換,關閉面板不會遺失目前選擇。
新增食客

動態頁分類、優惠券與每日簽到 icon 設計

動態頁補上三組入口圖示,讓食客瀏覽貼文時,更容易辨認想看的美食分類、找到優惠券,以及進入每日簽到。

  • 分類 icon:小吃、咖啡、早午餐、火鍋等 12 個分類使用各自的 2D 美食插畫,搭配文字標籤;逐款調整圖示比例與位置,讓橫向分類列的視覺大小更一致,也補上「更多」入口圖示。
  • 優惠券 icon:以赤陶色與森林綠的票券插畫搭配「優惠券」文字,放在右下角奶油色浮動按鈕中;透過循環輕晃提示入口,點擊即可查看全站優惠券。
  • 每日簽到 icon:在優惠券上方新增無文字的圓形金幣按鈕,以立體金幣連轉五圈、減速搖晃,再正面停留五秒的循環動畫提示;點擊直接進入每日獎勵分頁。
互動細節:優惠券與每日簽到入口會跟隨底部導覽列收合;離開頁面、App 進入背景或啟用系統「減少動態效果」時,停止提示動畫。
修正食客

地圖可見性與店家排序更符合使用情境

補上公開授權與地圖層級可見性控管;地圖卡優先呈現有封面照的店家,再依貼文與公開評語排序。觀看者遇到沒有紀錄的店家時,會直接看到「查看店家」。

  • 公開地圖才會進入對外的發現與推薦範圍。
  • 有封面照的店家優先,接著比較公開貼文數與公開評語數。
  • 私人或沒有紀錄的店家不再顯示讓人困惑的空白展開列。

05 優惠券與手機驗證

把兩個容易卡住轉換的地方補完整:券匣要知道還能不能領,手機驗證失敗時要知道怎麼繼續。

調整食客

券匣與優惠券入口重新整理

券匣上限調整為五格,新增名額提示;優惠券輪播支援自動切換、手動切換與拖曳,且會尊重系統的減少動態效果設定。

領券前先看到目前已使用幾格,以及還剩幾格可放。
瀏覽中多張券會自動輪播;手指拖曳、打開內容或領券時會暫停。
滿格時:不會只顯示一個無法操作的領取按鈕,而是明確告知券匣已滿,並引導使用者先整理現有券。
修正食客店家

核銷憑證與評語資格更精準

現場使用畫面與使用紀錄分開,降低同一張券被重複出示的風險;評語入口也改成只對實際核銷的那張券開放。

店員現場看到的差異:食客按下「現場使用」才會出現有倒數的使用畫面;離開後再次查看是灰階紀錄,不會看起來像還能重新核銷。評語只會出現在真的完成核銷的券上。
調整食客

手機 OTP 驗證失敗時更容易恢復

新增獨立 OTP 輸入元件、重試與返回流程,並補上診斷資訊,讓使用者知道目前卡在哪一步,而不是只能重新開始。

  • 驗證碼輸入獨立成可重用元件,錯誤狀態更一致。
  • 簡訊延遲或驗證失敗時,可以重新發送或回到上一個流程。
  • 返回原流程後保留必要上下文,減少重新填寫與重來。

06 後台營運

這次也補上後台操作入口,讓獎勵、使用者回饋與問卷資料集中在同一個營運工作區。

新增營運

後台新增獎勵與回饋管理入口

後台首頁與代理路由補上扭蛋管理、評語獎勵與使用者問卷入口,權限與資料操作集中在同一個營運工作區。

  • 扭蛋:管理機台、獎品、規則與抽獎紀錄。
  • 評語獎勵:查看與回饋行為相關的獎勵資料。
  • 問卷:查看問卷定義、題目與收回的回答資料。
調整全站介面

常用元件與畫面狀態統一

同步整理頁首、按鈕、Toast、篩選面板、地圖 marker 與空狀態,讓新功能接進既有 App 時不會各自長成不同的操作方式。

使用者感受到的是:成功、失敗、載入中、沒有資料與已完成等狀態都有對應畫面;按鈕與返回位置也維持一致,降低第一次使用新功能時的摸索成本。

07 元件調整

除了新功能流程,這次也把幾個高頻使用的元件一起整理,讓新舊畫面的操作方式一致,也讓錯誤與完成狀態更容易被理解。

調整食客

按鈕與 Toast 回饋統一

整理主要按鈕的尺寸、層級、文字與載入狀態,並新增一致的 Toast 呈現方式,成功、失敗、提醒與一般訊息不再各自使用不同樣式。

使用者感受到的差異:按下操作後,畫面會用一致的位置與語氣告訴你是否成功;處理中的按鈕不會被連續點擊,失敗時也會保留可理解的下一步。
調整食客

頁首與圖示元件重新整理

統一頁首返回、標題與操作按鈕的排列,也補齊新流程需要的圖示,讓不同頁面之間切換時不會突然換一套控制方式。

  • 返回按鈕與頁面標題維持固定位置。
  • 常用操作使用同一套圖示語意,降低只看圖示時的猜測成本。
  • 窄螢幕與長標題時保留主要操作,不讓標題把按鈕擠掉。
調整食客

優惠券元件的狀態更清楚

重新整理券匣名額卡、券票外框、領券提示、篩選面板與領取完成提示,讓「可領取、已領取、已使用、已滿格」在畫面上有清楚差異。

原本不同優惠券畫面各自顯示狀態,滿格或完成後有時不容易判斷下一步。
現在狀態、操作按鈕與提示文字一起對應,使用者能先知道目前狀態,再決定要領取、查看或整理券匣。
調整食客

吃什麼的篩選與選擇元件拆開整理

將條件篩選、地點選擇、步驟切換與結果互動拆成清楚的元件,讓流程可以在不同畫面重用,也讓每一步都知道自己正在設定什麼。

操作上:先設定條件,再選位置與距離,最後才查看候選;每一步都能返回修改,不需要整個流程重來。
調整食客

動態分類與地圖 marker 的互動範圍改善

分類列新增更多分類面板,地圖 marker 也調整可點擊範圍與選取回饋,手機上更容易點到正確的分類或店家。

為什麼要一起調整:這些元件會出現在多個入口;只修單一頁面容易造成同一個動作在不同地方有不同反應。