販賣機觸控螢幕 UI/UX 設計：提升轉換率的介面優化策略

觸控介面是販賣機的「門面」

在智慧販賣機時代，觸控螢幕取代了傳統的按鈕操作，成為消費者與販賣機互動的主要介面。一個好的 UI/UX 設計不只讓操作更順暢，更能直接影響轉換率和客單價。

「販賣機的觸控螢幕就像電商網站的首頁。好的設計能讓消費者多買一件，差的設計讓人連第一件都不想買。」—— 李奇申

---

販賣機 UI 設計原則

原則 1：3 秒內完成選購

消費者在販賣機前的耐心極短。從走到機器前到完成付款，最好不超過 30 秒。

步驟	建議時間	設計要點
瀏覽商品	< 10 秒	商品一覽式呈現
選擇商品	< 5 秒	大按鈕、清楚圖片
確認付款	< 10 秒	一鍵支付
等待出貨	< 5 秒	進度提示

原則 2：大圖大字

販賣機通常放在公共場所，消費者可能站在 1-2 公尺外觀看螢幕。

• 商品圖片：至少 120×120 像素顯示面積
• 商品名稱：至少 24pt 字型
• 價格：至少 32pt 字型，醒目顏色
• 按鈕：最小 60×60mm 觸控區域

原則 3：減少層級

傳統網站可以有多層導航，但販賣機介面應該盡可能扁平：

• 最多 2 層（首頁 → 商品詳情）
• 避免需要「返回」操作
• 所有商品最好在首頁就能看到

原則 4：視覺引導消費

利用視覺設計引導消費者購買高毛利商品：

技巧	說明	效果
黃金位置	螢幕中央偏上放高毛利品	點擊率 +30%
熱銷標記	「人氣NO.1」標籤	轉換率 +20%
限時促銷	倒計時動畫	衝動購買 +15%
組合推薦	「加 10 元升級」	客單價 +25%

---

支付流程最佳化

支付介面設計

支付是最容易流失的環節。龍雲數位的 XDNA 平台支援的支付方式：

支付方式	操作步驟	完成時間
LINE Pay	掃 QR Code → 確認	8 秒
街口支付	掃 QR Code → 確認	8 秒
Apple Pay	靠近 NFC 感應區	3 秒
信用卡	插卡/感應 → 輸入密碼	10 秒
現金	投幣/紙鈔	15 秒

減少支付放棄率

1. 預設最快支付方式：根據地點預設最常用的支付方式
2. QR Code 提前顯示：在商品確認頁就同時顯示 QR Code
3. 支付失敗處理：清楚的錯誤提示和替代方案
4. 免密碼小額支付：500 元以下免輸密碼

---

多語系設計

觀光景點的販賣機需要支援多語系：

• 語言切換按鈕放在螢幕右上角（國際慣例）
• 首次進入時根據時段/地點預設語言
• 所有商品名稱和說明都需要翻譯
• 過敏原警告必須多語系標示

---

龍雲數位的 UI/UX 方案

龍雲數位為不同場景提供客製化的觸控介面方案：

標準版

適合一般場景，簡潔明瞭的商品瀏覽和購買流程。

品牌版

為品牌客戶客製化介面，完全符合品牌 VI 設計規範。

互動版

搭載互動功能：遊戲抽獎、會員積點、AR 體驗等。

---

A/B 測試案例

龍雲數位曾對兩種介面設計進行 A/B 測試：

指標	版本 A（列表式）	版本 B（圖片式）	差異
轉換率	12%	18%	+50%
平均客單價	32 元	38 元	+19%
操作時間	25 秒	18 秒	-28%
放棄率	15%	8%	-47%

結論：大圖片 + 大按鈕 + 簡化流程 = 更高轉換率。

---

常見問題 FAQ

Q：販賣機螢幕多大比較好？

A：一般建議 21-32 吋。太小看不清楚，太大成本過高。常用尺寸是 21.5 吋和 27 吋。

Q：觸控螢幕在戶外容易看不清楚嗎？

A：戶外機型需要使用高亮度螢幕（1000 nits 以上）和防眩光玻璃。龍雲數位提供戶外專用螢幕選項。

---

延伸閱讀

• XDNA IoT 平台技術架構
• 販賣機怎麼賺錢？完整收入指南
• 如何開始販賣機事業
• 智慧販賣機百科
• 龍雲數位企業介紹