本文從確定目標價值、構建體系、優化交互細節等幾個方面來闡述雅座收銀的體驗優化之路，多角度體現產品的性格：高效、簡潔、可靠。

拓展閱讀

B站雅座收銀POS升級地址： https://www.bilibili.com/video/BV1av4y1M7Gv

雅座收銀 POS 是微盟智慧餐飲業務矩陣中的一款基建產品，主要用于門店的點餐收銀。隨著業務和產品的發展需求，雅座收銀 POS 迫切的需要進行一次體驗優化升級。因此在保證存量客戶的使用習慣前提下，我們將核心營業模塊進行了升級改造。

本文將根據下圖的敘事結構，從確定目標價值、構建設計體系、優化交互細節等幾個方面來闡述雅座收銀的體驗優化之路，多角度體現雅座收銀的產品性格——高效、簡潔、可靠。

背景與目標

1. 項目背景

2021 年由于業務與團隊的迅速擴張，現有的收銀 POS 難以承載持續增加的用戶需求。并且由于歷史問題產品缺乏設計規范，導致整個開發過程中基于此類的問題不斷凸顯出來，而我們的用戶對于產品體驗也有了更高的訴求?；谶@樣的問題現狀，可以直觀感受到問題主要表現在 4 個顯性維度：

1. 「設計維度」：由于產品缺乏基礎設計規范，在迭代過程中，用戶體驗無法保持一致性，用戶操作感受與學習成本會不斷增加。并且沒有前期的設計沉淀，設計側在接新需求的時候要花更多的時間去應對項目。
2. 「研發維度」：基于“設計維度”的規范缺乏問題，直接導致研發側組件代碼碎片化嚴重，存在重復造輪子的情況。并且多數組件并未封裝開發，導致一個彈窗出現在 5 個地方長相都不同，產品的質量難以保證。
3. 「測試維度」：基于前面兩個維度做的不到位，導致測試每次迭代發版都需要重復走查，增加了很多工作量
4. 「產品維度」：前面 3 個維度的問題直接就會導致產品的版本迭代效率低，也會導致用戶需求排期時限不斷拉長，不利于產品的快速成長。

所以通過分析得出，如果基礎的標準化規范以及操作標準，未構建好并有效的落地，前期為了滿足業務快速成長的需求，這樣做看不出大問題。產品進入快速成長階段后，就會發現這樣的問題會嚴重影響到產品的迭代成長。

2. 改版目標

基于以上問題，我們明確當前的改版目標從業務角度出發，要關注兩個點

1. 提升產品一致性
2. 提升用戶體驗度

問題調研

對于一款進入穩定期的 ToB 產品，決定做大規模的專項優化時，首先需要明確待解決的問題類型，即我們上一節說的改版目標，其次針對類型給出解決方案。因此，我們必須弄清楚 3 件事：

1. 是誰在用----------了解用戶
2. 有什么問題-------知己-產品現狀拆解
3. 人家怎么做的-----知彼-競品分析

1. 了解用戶

在項目初期，首先就同產品、運營等伙伴溝通用戶的具體情況，我們了解到用戶構成主要以年輕的女性群體為主，從用戶使用產品時的工作環境、工作狀態、工作情緒 3 個維度來了解實際使用場景，一句話概括：門店服務員在嘈雜的就餐環境中使用產品進行門店運營，并且飯點期間的工作狀態是忙碌而迅速，在此期間的工作情緒也是煩躁、壓力大。

那么針對這些用戶面臨的問題，映射在產品優化里的時候也是我們需要關注的點。

2. 知己--產品拆解

對于產品本身整體框架的拆解以及頁面的梳理分析非常重要，我們在拆解的時候主要圍繞三個維度進行拆解梳理，這樣在問題梳理的時候可以更有側重點的去發現問題。拆解前可以這樣提問：

「交互」是否便捷高效？

「視覺」是否規范一致？

「體驗」是否符合認知？

核心場景

本次優化，我們需要明確重點優化的核心場景鏈路，就是開臺>點餐>結算這個流程。優化的側重點也從這 3 個點切入。

問題歸納

明確了核心場景后，就開始問題梳理。去操作產品的每個步驟，記錄問題點?？梢允求w驗流程、交互細節或者是視覺問題。然后將其記錄到表格當中，方便后期進行問題解決跟蹤。

記錄問題的同時也要思考已知的問題應該如何去優化

視覺層拆解

我們將整個產品視覺層面分別從原子、分子、組件、頁面類型四個維度進行拆解。通過這樣的方式將顏色、字體等基礎規范到彈框、導航、輸入框等組件一一歸納。由此我們對現有的視覺層面的問題基本一目了然，后期優化側重點也基本明確了方向。

3. 知彼--競品分析

前文中我們對于產品的拆解已經完成，明確了問題的核心點。在具體方案設計前，我們可以帶著在自我拆解過程中發現的已知問題，去做競品分析。

競品分析是選取行業內龍頭企業的產品 2-3 個即可，梳理已被市場驗證的頁面結構、操作流程以及場景業態，思考哪些亮點是我們可以借鑒的。

經過針對性的競品分析，我們可以提煉出一些不錯的設計準則或者交互方式運用到我們的優化當中

比如分析過程中發現，常規的終端產品數字按鍵通常為方形，以及桌臺、菜品等卡片設計對采取的信息左對齊的方式，那么在后期優化的過程中就可以代入該方案。

問題匯總

通過以上的問題梳理后，大致的問題已經歸類了出來。這時拉上產品、研發人員一起開會，闡述產品面臨的問題，以及一些解決方案的初步設想。這樣的目的主要是達成團隊的共識，意識到項目體驗優化這件事的價值。

經過整理分析，雅座收銀的主要問題分為 3 大類

問題 1.交互層--效率低

效率低下是 B 端產品要盡量避免的一點。我們在梳理產品的過程中可以發現很多操作就有這樣的問題，最明顯的就是彈框。

很多居中的彈框并不能承載過多的內容，因此在一些高頻操作里就需要去滑動彈窗進行選擇。另外就是很多高頻操作的操作路徑過長。尤其是目前使用的終端機器屏幕很大，如果操作路徑過長，很大程度上就會降低了操作效率。

問題 2.視覺層--層級亂

層級亂主要是信息模塊的劃分過于混亂，這一點在最核心的點餐頁面體現的尤為明顯。總結下就是以下 2 點：

• 多數的信息卡片（桌臺、菜品卡片）布局采用居中對齊的方式，導致各種字段無法合理排列
• 舊有模式通過色塊區分不同信息源，造成了不必要的視覺干擾

問題 3.體驗層--不明確

尼爾森十大設計原則里的第一條--反饋原則，是非常影響使用體驗的一個點，然而在我們現有產品中，很多操作并沒有給予明確的提示反饋。對于用戶來說，使用困惑與學習成本無疑成倍的增加了。

因此，針對以上這些顯性問題，展開了對產品的體驗優化工作。

設計策略

對于現存問題達成一致認可后，團隊又討論定義了雅座收銀的產品性格關鍵詞，用 3 個關鍵詞概括：高效、簡潔、可靠。后期整個產品是優化方向會緊緊圍繞 3 個關鍵詞展開。

• 「高效」設計規范建立、組件封裝開發，更少的滑動操作、更短的操作路徑。
• 「簡潔」信息模塊重新布局、去除不必要的視覺元素，進行視覺降噪提升信息可讀性。
• 「可靠」提升用戶的操作體驗，任何操作反饋明確可知，給予用戶可控感。

設計方案

1. 高效--視覺層

高效的構建主要體現在兩個層面，視覺層+交互層。因此前期構建產品的規范，保持產品一致性是需要首要完成的任務，所以先從基礎規范的構建開始。

色彩規范

雅座的品牌色為口碑橙，顏色上還是沿用了原先的主色調，然后利用 HSB 取值方式，保持 S 和 B 不變，H 的數值為 15 遞增的方式，推導出 24 色帶，然后進一步篩選后我們就可以得到基于品牌色明度、飽和度一致的 16 個輔助色板。

定義出最常用的色彩

原始色彩提取后，可以建立對應的拓展色板。整個產品所有用色都從拓展色板提取，保證了規范的一致性。并且前期優化的時候就可以讓開發給每個顏色定義好相對應的名字（暫時只定義 1、2、6、8 的色值，其他的配色日常設計使用即可），方便開發過程中直接通過名字調用顏色

比如不同的黑色，我們可以取名 Black15 Black25 Black45 等等，使用時直接名字調用即可。

原子理論

為了使產品構建更具備規律可循，雅座收銀 POS 運用了原子理論做設計，采用了 8 為最小模數進行布局設計，所有的模塊、間距、大小遵循 8 的規律進行延展布局，使界面具備動態的韻律感。并且在開發過程中，也遵循 8 的準則進行界面布局，使產品視覺層更具備一致性。在與開發溝通的過程中，也直接告知對方，所有的間距都是基本 8 的倍數設置，降低了溝通成本。

由此，整個產品就像搭積木一樣構建起來。

框架布局

用戶的核心訴求就是迅速的開臺>點餐>結算，因此頁面的信息布局+功能架構上，我們緊緊圍繞高效這個關鍵詞展開優化。

在框架布局方面基本和之前類似，保持了一屏一列、一屏兩列、一屏三列的布局模式。對比原來的布局方式，本次在整體結構的細節上做了更細致的調整。定義好模塊的間距、模塊與模塊之間的距離，8 的增量進行布局。無論界面怎么變化，都是基于這樣的三個框架規范去填充內容。在開臺界面，依舊是保持了一屏一列的模式，整體屬于一塊信息，里面切割成無數的小桌臺卡片。

進入到點餐頁面的時候，就是一屏兩列的布局。整體主要呈現了兩塊信息，購物車+菜品列表的操作模式。

下單成功后，就是常見的一屏三列。呈現了 3 塊信息，從左往右操作步驟遞增的模式。

柵格系統

原先的產品并沒有運用柵格系統，導致在不斷的迭代過程中，整個產品的規范逐漸偏離。在本次優化中，我們一并優化進去。

前面定義的最小原子為 8，我們在構建柵格的時候在 8 的基礎上 8 劃分頁面。邊距和水槽都為 24px?；谶@樣的設計規則，后面的產品迭代優化才能更具備規范性。

2. 高效--交互層

彈框優化

彈框是產品使用過程中出現頻率非常高的一個組件，原先的彈框都采用居中彈框的形式，那么居中彈框最大的問題就是，當前選擇過多的時候，可展示區域是有限的，增加了滑動操作

針對這個問題，我們給出了這樣的設計策略：保持彈窗的操作形式不變，將居中彈框改為側滑彈框，這樣可以最大化的利用屏幕空間，盡可能多的展示可選項，減少滑動操作。

在點餐環節選擇菜品的做法規格等操作時，彈框內的按鈕選擇數量至多可增加 33%以上，最大化的展示可選項數量，提高點餐人員的工作效率。

鍵盤

鍵盤是整個收銀產品中使用頻率非常高的一個組件。

原先的鍵盤都是圓形按鈕，經過競對分析，會發現常規的終端類產品按鍵都為方形。因此保持原先鍵盤的體積不變的前提下，優化后的按鍵可點擊區域增加了 50%，降低誤操作的概率。

并且針對收款環節的操作習慣將數字布局進行重新調整，使其排列順序更加符合收銀場景下的數字排列方式，同時最大化收款按鍵面積，合理規劃收銀鍵盤的布局方式。

輸入表單

在我們原先的產品里還有個問題，就是表格填寫查看的過程中，由于表頭未對齊，整個視覺動線一直在來回切換。

針對這個問題，本次優化的時候就將表頭文字統一進行了右對齊，這樣用戶進行表單填寫查看的時候可以一條直線由上而下的查看，快速定位到填寫內容。

即使填寫的表單內容很多，也能高效的填寫與查看表單內容。

操作路徑

原先產品里多處使用場景當中，組件選擇的都不恰當，直接就導致了整個用戶操作路徑非常的長。

通過下圖我們看到選擇一個訂單狀態，操作路徑基本是貫穿了整個屏幕。因此，我們將原先的居中彈框改為下拉選擇彈框，直接將操作路徑縮短了 50%以上，減少用戶在使用過程中手指移動的距離。

3. 簡潔

左對齊卡片設計

對于原有產品的界面，桌臺和點餐界面的卡片都采用了居中對齊的方式，這樣做直接導致很多信息排不下，并且會出現卡片上下左右四個角都是角標，降低了信息的可讀性。

帶著這樣的問題，在競品分析過程中，我們發現了采用左對齊卡片式設計的方式要優于原有的居中對齊方式。

因此我們將信息歸類，菜品和桌臺類字段居于左側，而角標類標記全部位于卡片的右側。經過這樣的調整優化，整個信息的展示可讀性高于原先的布局方式，并且字段和標簽進行了分類，也不會擁擠在一起。

留白去線視覺降噪

對于不同信息源，原有的處理方式是通過灰色背景的方式來區分，而這樣做的問題是，當信息源過多的時候整個數據列表會失去重點，都是重點=沒有重點。

因此我們采用字號對比、畫面留白等方式進行信息模塊的區分，去除不必要的視覺干擾。

規范金額單位使用

在收銀產品當中，涉及到金額展示的地方非常多。原先的展示規則比較隨意，我們并不能找到金額單位的使用規律。問題集中出現的地方：

1. 部分頁面價格不帶「￥」單位
2. 價格確定到小數點幾位不明確
3. 單位與數字的大小比例關系隨意

因此優化的時候對于金額單位我們也做了總結分類，大致可以分為 3 類，根據出現的類型定義好金額的使用單位。

4. 可靠

容錯&防錯機制

根據尼爾森十大設計原則中對于容錯原則的描述：無論錯誤場景設計的多好看，都不如在第一時間防止用戶發生錯誤；該原則強調，產品需要有防錯機制。

可靠這個特質對于 B 端產品來說是必不可少的。而在分析原先產品問題的時候就發現，產品的容錯和防錯做的不夠到位。因此，我們對于一些輸入環節增加了信息預判，避免用戶輸入完成后才給出錯誤提示，降低用戶誤操作的成本。以及一些輸入的操作，例如標簽、選擇后的優惠券等等，可直接刪除已選標簽，給予用戶一定的容錯能力。

操作可知 反饋明確

1）無論當下操作是在加載中還是加載失敗，第一時間給予用戶明確的反饋，是非常重要的一件事，時刻給用戶一種安全可靠的操作體驗，明確當下的行為以及導致的行為結果。所以在桌臺選擇的處理方式上，我們增加顯示了已選中的桌臺名稱，桌臺信息+執行動作，明確告知用戶當前已選的桌臺以及將要執行的動作。

2）其次就是加載中的按鈕的要給予一個明確狀態。如果點擊后的操作仍在執行中，我們沒有給予反饋，就會使用戶認為點擊無效從而不停的點擊，加重卡頓的情況。

文案描述精準

對于單一操作的確認文案，優化后更加精準。通過”確認 XX”和“暫不 XX”這樣的文案融入到按鈕當中，在執行的時候可以更加明確當前要執行的內容。例如要選擇使用一張優惠券，我們就可以描述為“確認抵扣”或者“暫不抵扣”，從字面理解上來說，也會比單純的：確認、取消“描述更精準。

設計沉淀

1. 規范搭建

在設計過程中，我們搭建了一套雅座收銀 POS 的產品設計組件、并制定了相應的設計規范。保證后期產品迭代的一致性。

2. 開發提效

開發將常用的字號、色彩、圓角等屬性定義好名字，在開發過程中直接通過名字調用構建樣式。即使多人協作的情況下也能盡可能保證樣式的一致性。

3. 宣發創意視頻

由于本次產品更新的點比較多，為了讓商戶以及我們的客服團隊能夠更好更快的理解產品更新點。還額外做了配套的宣發視頻用于介紹。

B站觀看地址： https://www.bilibili.com/video/BV1av4y1M7Gv?share_source=copy_web

上線反饋

產品上線后，從視覺到交互得到了一次全新的提升，對比之前的版本系統性能和流暢度分別提升了 14%和 24%。

上線后來自內部和外部的反饋都是不錯的。對于商戶來說，學習的成本很低。因為在優化的同時大部分保持原有的操作習慣，整體視覺的改版上的反饋也是清爽了很多，上手簡單。

項目小結

1. 流程沉淀

項目做完后，在整個產品優化過程中，無論是前期的問題調研，初步基礎規范樣式構建，還是后期的交互細節優化落地，我們始終都是圍繞著，如何做一款更易用的收銀工具為設計核心，進行產品的優化升級。

整個優化流程看起來好像工作量比較多、比較復雜，其實我們通俗的理解，就好像去醫院看病醫院，一共分為 4 個步驟去理解，查病因>寫病歷>動手術>去復查。

然后針對每個關鍵步驟，拆解出細分的行動計劃，對應到我們整個 B 端產品的優化流程當中逐個擊破。

2. 寫在最后

微盟智慧餐飲的愿景是“數字餐飲，智慧生活”。雅座收銀作為全場景一體化數字化解決方案中非常重要的"根產品"，始終圍繞著如何做一款更易用的收銀工具為核心，讓門店整體運營狀態更高效，同時提升營業人員在工作過程中的使用體驗。助力餐飲企業實現真正的降本增效，而這也是收銀產研團隊一直在共同踐行的目標。

歡迎添加作者的個人微信交流：