本文從確定目標(biāo)價值、構(gòu)建體系、優(yōu)化交互細(xì)節(jié)等幾個方面來闡述雅座收銀的體驗(yàn)優(yōu)化之路，多角度體現(xiàn)產(chǎn)品的性格：高效、簡潔、可靠。

拓展閱讀

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

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

本文將根據(jù)下圖的敘事結(jié)構(gòu)，從確定目標(biāo)價值、構(gòu)建設(shè)計(jì)體系、優(yōu)化交互細(xì)節(jié)等幾個方面來闡述雅座收銀的體驗(yàn)優(yōu)化之路，多角度體現(xiàn)雅座收銀的產(chǎn)品性格——高效、簡潔、可靠。

背景與目標(biāo)

1. 項(xiàng)目背景

2021 年由于業(yè)務(wù)與團(tuán)隊(duì)的迅速擴(kuò)張，現(xiàn)有的收銀 POS 難以承載持續(xù)增加的用戶需求。并且由于歷史問題產(chǎn)品缺乏設(shè)計(jì)規(guī)范，導(dǎo)致整個開發(fā)過程中基于此類的問題不斷凸顯出來，而我們的用戶對于產(chǎn)品體驗(yàn)也有了更高的訴求?；谶@樣的問題現(xiàn)狀，可以直觀感受到問題主要表現(xiàn)在 4 個顯性維度：

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

所以通過分析得出，如果基礎(chǔ)的標(biāo)準(zhǔn)化規(guī)范以及操作標(biāo)準(zhǔn)，未構(gòu)建好并有效的落地，前期為了滿足業(yè)務(wù)快速成長的需求，這樣做看不出大問題。產(chǎn)品進(jìn)入快速成長階段后，就會發(fā)現(xiàn)這樣的問題會嚴(yán)重影響到產(chǎn)品的迭代成長。

2. 改版目標(biāo)

基于以上問題，我們明確當(dāng)前的改版目標(biāo)從業(yè)務(wù)角度出發(fā)，要關(guān)注兩個點(diǎn)

1. 提升產(chǎn)品一致性
2. 提升用戶體驗(yàn)度

問題調(diào)研

對于一款進(jìn)入穩(wěn)定期的 ToB 產(chǎn)品，決定做大規(guī)模的專項(xiàng)優(yōu)化時，首先需要明確待解決的問題類型，即我們上一節(jié)說的改版目標(biāo)，其次針對類型給出解決方案。因此，我們必須弄清楚 3 件事：

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

1. 了解用戶

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

那么針對這些用戶面臨的問題，映射在產(chǎn)品優(yōu)化里的時候也是我們需要關(guān)注的點(diǎn)。

2. 知己--產(chǎn)品拆解

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

「交互」是否便捷高效？

「視覺」是否規(guī)范一致？

「體驗(yàn)」是否符合認(rèn)知？

核心場景

本次優(yōu)化，我們需要明確重點(diǎn)優(yōu)化的核心場景鏈路，就是開臺>點(diǎn)餐>結(jié)算這個流程。優(yōu)化的側(cè)重點(diǎn)也從這 3 個點(diǎn)切入。

問題歸納

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

記錄問題的同時也要思考已知的問題應(yīng)該如何去優(yōu)化

視覺層拆解

我們將整個產(chǎn)品視覺層面分別從原子、分子、組件、頁面類型四個維度進(jìn)行拆解。通過這樣的方式將顏色、字體等基礎(chǔ)規(guī)范到彈框、導(dǎo)航、輸入框等組件一一歸納。由此我們對現(xiàn)有的視覺層面的問題基本一目了然，后期優(yōu)化側(cè)重點(diǎn)也基本明確了方向。

3. 知彼--競品分析

前文中我們對于產(chǎn)品的拆解已經(jīng)完成，明確了問題的核心點(diǎn)。在具體方案設(shè)計(jì)前，我們可以帶著在自我拆解過程中發(fā)現(xiàn)的已知問題，去做競品分析。

競品分析是選取行業(yè)內(nèi)龍頭企業(yè)的產(chǎn)品 2-3 個即可，梳理已被市場驗(yàn)證的頁面結(jié)構(gòu)、操作流程以及場景業(yè)態(tài)，思考哪些亮點(diǎn)是我們可以借鑒的。

經(jīng)過針對性的競品分析，我們可以提煉出一些不錯的設(shè)計(jì)準(zhǔn)則或者交互方式運(yùn)用到我們的優(yōu)化當(dāng)中

比如分析過程中發(fā)現(xiàn)，常規(guī)的終端產(chǎn)品數(shù)字按鍵通常為方形，以及桌臺、菜品等卡片設(shè)計(jì)對采取的信息左對齊的方式，那么在后期優(yōu)化的過程中就可以代入該方案。

問題匯總

通過以上的問題梳理后，大致的問題已經(jīng)歸類了出來。這時拉上產(chǎn)品、研發(fā)人員一起開會，闡述產(chǎn)品面臨的問題，以及一些解決方案的初步設(shè)想。這樣的目的主要是達(dá)成團(tuán)隊(duì)的共識，意識到項(xiàng)目體驗(yàn)優(yōu)化這件事的價值。

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

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

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

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

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

層級亂主要是信息模塊的劃分過于混亂，這一點(diǎn)在最核心的點(diǎn)餐頁面體現(xiàn)的尤為明顯?？偨Y(jié)下就是以下 2 點(diǎn)：

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

問題 3.體驗(yàn)層--不明確

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

因此，針對以上這些顯性問題，展開了對產(chǎn)品的體驗(yàn)優(yōu)化工作。

設(shè)計(jì)策略

對于現(xiàn)存問題達(dá)成一致認(rèn)可后，團(tuán)隊(duì)又討論定義了雅座收銀的產(chǎn)品性格關(guān)鍵詞，用 3 個關(guān)鍵詞概括：高效、簡潔、可靠。后期整個產(chǎn)品是優(yōu)化方向會緊緊圍繞 3 個關(guān)鍵詞展開。

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

設(shè)計(jì)方案

1. 高效--視覺層

高效的構(gòu)建主要體現(xiàn)在兩個層面，視覺層+交互層。因此前期構(gòu)建產(chǎn)品的規(guī)范，保持產(chǎn)品一致性是需要首要完成的任務(wù)，所以先從基礎(chǔ)規(guī)范的構(gòu)建開始。

色彩規(guī)范

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

定義出最常用的色彩

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

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

原子理論

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

由此，整個產(chǎn)品就像搭積木一樣構(gòu)建起來。

框架布局

用戶的核心訴求就是迅速的開臺>點(diǎn)餐>結(jié)算，因此頁面的信息布局+功能架構(gòu)上，我們緊緊圍繞高效這個關(guān)鍵詞展開優(yōu)化。

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

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

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

柵格系統(tǒng)

原先的產(chǎn)品并沒有運(yùn)用柵格系統(tǒng)，導(dǎo)致在不斷的迭代過程中，整個產(chǎn)品的規(guī)范逐漸偏離。在本次優(yōu)化中，我們一并優(yōu)化進(jìn)去。

前面定義的最小原子為 8，我們在構(gòu)建柵格的時候在 8 的基礎(chǔ)上 8 劃分頁面。邊距和水槽都為 24px。基于這樣的設(shè)計(jì)規(guī)則，后面的產(chǎn)品迭代優(yōu)化才能更具備規(guī)范性。

2. 高效--交互層

彈框優(yōu)化

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

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

在點(diǎn)餐環(huán)節(jié)選擇菜品的做法規(guī)格等操作時，彈框內(nèi)的按鈕選擇數(shù)量至多可增加 33%以上，最大化的展示可選項(xiàng)數(shù)量，提高點(diǎn)餐人員的工作效率。

鍵盤

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

原先的鍵盤都是圓形按鈕，經(jīng)過競對分析，會發(fā)現(xiàn)常規(guī)的終端類產(chǎn)品按鍵都為方形。因此保持原先鍵盤的體積不變的前提下，優(yōu)化后的按鍵可點(diǎn)擊區(qū)域增加了 50%，降低誤操作的概率。

并且針對收款環(huán)節(jié)的操作習(xí)慣將數(shù)字布局進(jìn)行重新調(diào)整，使其排列順序更加符合收銀場景下的數(shù)字排列方式，同時最大化收款按鍵面積，合理規(guī)劃收銀鍵盤的布局方式。

輸入表單

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

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

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

操作路徑

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

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

3. 簡潔

左對齊卡片設(shè)計(jì)

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

帶著這樣的問題，在競品分析過程中，我們發(fā)現(xiàn)了采用左對齊卡片式設(shè)計(jì)的方式要優(yōu)于原有的居中對齊方式。

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

留白去線視覺降噪

對于不同信息源，原有的處理方式是通過灰色背景的方式來區(qū)分，而這樣做的問題是，當(dāng)信息源過多的時候整個數(shù)據(jù)列表會失去重點(diǎn)，都是重點(diǎn)=沒有重點(diǎn)。

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

規(guī)范金額單位使用

在收銀產(chǎn)品當(dāng)中，涉及到金額展示的地方非常多。原先的展示規(guī)則比較隨意，我們并不能找到金額單位的使用規(guī)律。問題集中出現(xiàn)的地方：

1. 部分頁面價格不帶「￥」單位
2. 價格確定到小數(shù)點(diǎn)幾位不明確
3. 單位與數(shù)字的大小比例關(guān)系隨意

因此優(yōu)化的時候?qū)τ诮痤~單位我們也做了總結(jié)分類，大致可以分為 3 類，根據(jù)出現(xiàn)的類型定義好金額的使用單位。

4. 可靠

容錯&防錯機(jī)制

根據(jù)尼爾森十大設(shè)計(jì)原則中對于容錯原則的描述：無論錯誤場景設(shè)計(jì)的多好看，都不如在第一時間防止用戶發(fā)生錯誤；該原則強(qiáng)調(diào)，產(chǎn)品需要有防錯機(jī)制。

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

操作可知 反饋明確

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

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

文案描述精準(zhǔn)

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

設(shè)計(jì)沉淀

1. 規(guī)范搭建

在設(shè)計(jì)過程中，我們搭建了一套雅座收銀 POS 的產(chǎn)品設(shè)計(jì)組件、并制定了相應(yīng)的設(shè)計(jì)規(guī)范。保證后期產(chǎn)品迭代的一致性。

2. 開發(fā)提效

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

3. 宣發(fā)創(chuàng)意視頻

由于本次產(chǎn)品更新的點(diǎn)比較多，為了讓商戶以及我們的客服團(tuán)隊(duì)能夠更好更快的理解產(chǎn)品更新點(diǎn)。還額外做了配套的宣發(fā)視頻用于介紹。

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

上線反饋

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

上線后來自內(nèi)部和外部的反饋都是不錯的。對于商戶來說，學(xué)習(xí)的成本很低。因?yàn)樵趦?yōu)化的同時大部分保持原有的操作習(xí)慣，整體視覺的改版上的反饋也是清爽了很多，上手簡單。

項(xiàng)目小結(jié)

1. 流程沉淀

項(xiàng)目做完后，在整個產(chǎn)品優(yōu)化過程中，無論是前期的問題調(diào)研，初步基礎(chǔ)規(guī)范樣式構(gòu)建，還是后期的交互細(xì)節(jié)優(yōu)化落地，我們始終都是圍繞著，如何做一款更易用的收銀工具為設(shè)計(jì)核心，進(jìn)行產(chǎn)品的優(yōu)化升級。

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

然后針對每個關(guān)鍵步驟，拆解出細(xì)分的行動計(jì)劃，對應(yīng)到我們整個 B 端產(chǎn)品的優(yōu)化流程當(dāng)中逐個擊破。

2. 寫在最后

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

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