裝進口袋的手持點餐系統。

起點是可靠性。有一天,一家店的櫃台 POS 當機了一整天,大約 60 萬美元的款項收不進來。公司的優先順序從此很清楚:盡快讓手持 POS 上線,讓任何一家餐廳都不再只靠一台機器。

但手持 POS 還得解決另一個天天發生、不是偶發的問題。服務生在桌邊用紙筆記下點單,走回櫃台輸入,再走回桌邊確認。高峰期這些來回累積起來:拖慢廚房、限制翻台、也更容易出錯。Mobile POS 要解決的正是這兩件事 —— 讓點餐和結帳發生在桌邊,並在櫃台停擺時依然能運作。

Mobile POS 的用戶是受過培訓的餐廳服務生,但工作環境是高壓的:站著、環境吵、客人直視、單手持機。

他們在一張桌子的工作有固定順序:帶位、點餐、客製化、上菜節奏、送進廚房、上菜、拆單結帳、結束桌次。在 Mobile POS 之前,每一步都得回櫃台的 POS 按一下。其中五步 —— 輸入點單、客製化、上菜節奏、送進廚房、結帳 —— 發生在客人還在等的時候,所以服務生得在服務到一半時離開桌邊。三趟路就是從這裡來的。

因為用戶受過訓練,設計目標就不是「第一眼看懂」,而是靠肌肉記憶盲操作、高峰期不出錯。這允許比消費級產品更高的資訊密度,但對一致性的要求也嚴苛得多:控制項和主要按鈕在每個畫面都要在同一個位置。

需求是「做成手機版」。真正的問題是:桌機的十七個功能裡,哪些該進兩個月的 MVP?兩種研究回答了這個問題。

• 實地觀察 —— 我到真實門店看服務生工作。最常聽到的抱怨都是「我不在我的桌邊」的某種版本。我也觀察他們怎麼拿設備:左手拿、右手拇指按、整班站著
• 功能盤點 —— 把桌機 POS 的完整功能清單逐一過一遍,標出每個功能實際發生的地方:桌邊,還是櫃台

兩邊放在一起,答案很清楚。服務生要的不是一台縮小的 POS,而是少走幾趟路。

點餐、結帳、訂單歷史、會員卡搬上手機,一步直達。訂位、候位、員工管理和庫存刻意留在櫃台桌機上。

有些功能被切成兩半。桌台管理是最清楚的例子:編輯桌位平面圖是經理的工作,做一次就好,所以留在桌機。看全場狀況 —— 哪桌幾點入座、哪桌坐太久、哪桌是空的 —— 是服務生每隔幾分鐘就要做的事,所以搬上手機,做成按狀態上色的鳥瞰圖。

代價是第一版不夠完整。但 Mobile POS 的定位從來不是取代桌機,而是把值得隨身攜帶的那部分做到極致 —— 這個範圍在畫第一張畫面之前,就和產品經理與工程團隊談定了。

桌機不能直接縮小塞進手機:按鈕會太小,而且服務生是單手操作。所以在畫任何畫面之前,我先寫下原則。每一條都對應現場看到的一件事。

規則定好之後,幾十個畫面的移植就不再需要爭論。每一個都變成「套用原則」。

Mobile POS 有一個桌機永遠不會面對的時刻:結帳時,設備會轉向顧客。一秒之內,用戶就變了 —— 從受過訓練的員工,變成從沒看過這個畫面的人,而且是在服務生站在身旁的情境下選小費、簽名。

因此員工側介面追求資訊密度與效率,而顧客面向的小費與支付畫面刻意做到極簡、金額清晰。顧客一猶豫,所有人都尷尬 —— 這幾個畫面經過的評審輪數,比任何其他畫面都多。

辦公軟體假設你會把開始的事做完,餐廳現場從來不給你這個機會:點單點到一半,隔壁桌招手、廚房叫人、顧客改主意。因此所有核心流程都要能安全中斷、隨時恢復 —— 未送出的訂單保留所有已輸入的內容,服務生回來就從中斷處繼續,而不是從頭再來。

整個 app 是黑、白、灰。在忙碌的餐廳裡,顏色必須有意義,所以它只出現在兩個地方:

• 桌台狀態 —— 空桌、用餐中、超時各有一個狀態色。服務生掃一眼讀完全場,不必逐桌閱讀
• 菜品品類 —— 在上百道菜的按鈕網格裡,每個品類有自己的顏色。「找菜」從逐個閱讀變成掃視定位:先鎖顏色,再讀菜名

底下還有一條規則:可以點的都是實心色塊;純文字只是資訊。數字鍵盤從線框改成色塊,就是這個原因。服務生永遠不用猜哪個是按鈕。

系統裡其他地方我都在減少步驟,只有兩個操作多加了一步。作廢(Void)和折扣(Discount)會讓餐廳損失金錢,而作廢無法復原 —— 所以兩者都需要經理 PIN 碼。

這是唯一一處刻意打破「最短路徑」原則的地方。到處都要快,除了出錯要賠錢的地方。

這個專案唯一一次真正的意見分歧,是在地基上。我提議用 Material Design 3:服務生學習曲線短,設計也能更快。工程團隊反對 —— 餐飲科技是很深的垂直領域,有大量客製流程,通用組件套不上。

我們沒有繼續爭論,而是找真實的服務生做了一天的 A/B 測試,比較任務完成率、速度和信心。服務生學 Material 3 比較快。但工程團隊也說對了:有些餐廳的操作模式在 Material 裡根本不存在。所以我們保留 Material 的結構與 token,只在餐廳需要的地方自己做組件。

這就成了組件化的設計系統:

• 組件變體:按鈕、輸入框、彈窗、列表項的 Variant 體系,覆蓋尺寸、狀態與使用場景
• 語義化色彩 token:Light / Dark 雙主題共用同一套組件結構,不用維護兩套設計檔
• 交互規範內建於組件:每個新畫面自動繼承原則

頁面設計從「逐頁繪製」變成「組裝組件」,設計與工程之間有了單一可信來源。