“從確定目標價值、構建體系、優(yōu)化交互細節(jié)等幾個方面來闡述雅座收銀的體驗優(yōu)化之路，多角度體現產品的性格--高效、簡潔、可靠”
→B站雅座收銀POS升級地址：https://www.bilibili.com/video/BV1av4y1M7Gv?share_source=copy_web
雅座收銀POS是微盟智慧餐飲業(yè)務矩陣中的一款基建產品，主要用于門店的點餐收銀。隨著業(yè)務和產品的發(fā)展需求，雅座收銀POS迫切的需要進行一次體驗優(yōu)化升級。因此在保證存量客戶的使用習慣前提下，我們將核心營業(yè)模塊進行了升級改造。
本文將根據下圖的敘事結構，從確定目標價值、構建設計體系、優(yōu)化交互細節(jié)等幾個方面來闡述雅座收銀的體驗優(yōu)化之路，多角度體現雅座收銀的產品性格--高效、簡潔、可靠。
2021年由于業(yè)務與團隊的迅速擴張，現有的收銀POS難以承載持續(xù)增加的用戶需求。并且由于歷史問題產品缺乏設計規(guī)范，導致整個開發(fā)過程中基于此類的問題不斷凸顯出來，而我們的用戶對于產品體驗也有了更高的訴求?；谶@樣的問題現狀，可以直觀感受到問題主要表現在4個顯性維度：
【設計維度】：由于產品缺乏基礎設計規(guī)范，在迭代過程中，用戶體驗無法保持一致性，用戶操作感受與學習成本會不斷增加。并且沒有前期的設計沉淀，設計側在接新需求的時候要花更多的時間去應對項目。
【研發(fā)維度】：基于“設計維度”的規(guī)范缺乏問題，直接導致研發(fā)側組件代碼碎片化嚴重，存在重復造輪子的情況。并且多數組件并未封裝開發(fā)，導致一個彈窗出現在5個地方長相都不同，產品的質量難以保證。
【測試維度】：基于前面兩個維度做的不到位，導致測試每次迭代發(fā)版都需要重復走查，增加了很多工作量
【產品維度】：前面3個維度的問題直接就會導致產品的版本迭代效率低，也會導致用戶需求排期時限不斷拉長，不利于產品的快速成長。
所以通過分析得出，如果基礎的標準化規(guī)范以及操作標準，未構建好并有效的落地，前期為了滿足業(yè)務快速成長的需求，這樣做看不出大問題。產品進入快速成長階段后，就會發(fā)現這樣的問題會嚴重影響到產品的迭代成長。
基于以上問題，我們明確當前的改版目標從業(yè)務角度出發(fā)，要關注兩個點
對于一款進入穩(wěn)定期的ToB 產品，決定做大規(guī)模的專項優(yōu)化時，首要需要明確待解決的問題類型，即我們上文說的改版目標，其次針對類型給出解決方案。因此，我們必須弄清楚3件事
在項目初期，首先就同產品、運營等伙伴溝通用戶的具體情況，我們了解到用戶構成主要以年輕的女性群體為主，從用戶使用產品時的工作環(huán)境、工作狀態(tài)、工作情緒3個維度來了解實際使用場景，一句話概括：
門店服務員在嘈雜的就餐環(huán)境中使用產品進行門店運營，并且飯點期間的工作狀態(tài)是忙碌而迅速，在此期間的工作情緒也是煩躁、壓力大。
那么針對這些用戶面臨的問題，映射在產品優(yōu)化里的時候也是我們需要關注的點。
對于產品本身整體框架的拆解以及頁面的梳理分析非常重要，我們在拆解的時候主要圍繞三個維度進行拆解梳理，這樣在問題梳理的時候可以更有側重點的去發(fā)現問題。拆解前可以這樣提問：
【交互】是否便捷高效？
【視覺】是否規(guī)范一致？
【體驗】是否符合認知？
本次優(yōu)化，我們需要明確重點優(yōu)化的核心場景鏈路，就是開臺>點餐>結算這個流程。優(yōu)化的側重點也從這3個點切入。
明確了核心場景后，就開始問題梳理。去操作產品的每個步驟，記錄問題點?？梢允求w驗流程、交互細節(jié)或者是視覺問題。然后將其記錄到表格當中，方便后期進行問題解決跟蹤。
記錄問題的同時也要思考已知的問題應該如何去優(yōu)化。
我們將整個產品視覺層面分別從原子、分子、組件、頁面類型四個維度進行拆解。通過這樣的方式將顏色、字體等基礎規(guī)范到彈框、導航、輸入框等組件一一歸納。由此我們對現有的視覺層面的問題基本一目了然，后期優(yōu)化側重點也基本明確了方向。
前文中我們對于產品的拆解已經完成，明確了問題的核心點。在具體方案設計前，我們可以帶著在自我拆解過程中發(fā)現的已知問題，去做競品分析。
競品分析是選取行業(yè)內龍頭企業(yè)的產品2-3個即可，梳理已被市場驗證的頁面結構、操作流程以及場景業(yè)態(tài)，思考哪些亮點是我們可以借鑒的。
經過針對性的競品分析，我們可以提煉出一些不錯的設計準則或者交互方式運用到我們的優(yōu)化當中
比如分析過程中發(fā)現，常規(guī)的終端產品數字按鍵通常為方形，以及桌臺、菜品等卡片設計對采取的信息左對齊的方式，那么在后期優(yōu)化的過程中就可以代入該方案。
通過以上的問題梳理后，大致的問題已經歸類了出來。這時拉上產品、研發(fā)人員一起開會，闡述產品面臨的問題，以及一些解決方案的初步設想。這樣的目的主要是達成團隊的共識，意識到項目體驗優(yōu)化這件事的價值。
經過整理分析，雅座收銀的主要問題分為3大類
效率低下是B端產品要盡量避免的一點。我們在梳理產品的過程中可以發(fā)現很多操作就有這樣的問題，最明顯的就是彈框。
很多居中的彈框并不能承載過多的內容，因此在一些高頻操作里就需要去滑動彈窗進行選擇。另外就是很多高頻操作的操作路徑過長。尤其是目前使用的終端機器屏幕很大，如果操作路徑過長 很大程度上就會降低了操作效率。
層級亂主要是信息模塊的劃分過于混亂，這一點在最核心的點餐頁面體現的尤為明顯?？偨Y下就是以下幾點
1.多數的信息卡片（桌臺、菜品卡片）布局采用居中對齊的方式，導致各種字段無法合理排列
2.舊有模式通過色塊區(qū)分不同信息源，造成了不必要的視覺干擾
尼爾森十大設計原則里的第一條--反饋原則，是非常影響使用體驗的一個點，然而在我們現有產品中，很多操作并沒有給予明確的提示反饋。對于用戶來說，使用困惑與學習成本無疑成倍的增加了。
因此，針對以上這些 顯性問題，展開了對產品的體驗優(yōu)化工作。
對于現存問題達成一致認可后，團隊又討論定義了雅座收銀的產品性格關鍵詞，用3個關鍵詞概括：高效、簡潔、可靠。后期整個產品是優(yōu)化方向會緊緊圍繞3個關鍵詞展開。
【高效】設計規(guī)范建立、組件封裝開發(fā)，更少的滑動操作、更短的操作路徑。
【簡潔】信息模塊重新布局、去除不必要的視覺元素，進行視覺降噪提升信息可讀性。
【可靠】提升用戶的操作體驗，任何操作反饋明確可知，給予用戶可控感。
高效的構建主要體現在兩個層面，視覺層+交互層。因此前期構建產品的規(guī)范，保持產品一致性是需要首要完成的任務，所以先從基礎規(guī)范的構建開始。
雅座的品牌色為口碑橙，顏色上還是沿用了原先的主色調，然后利用HSB取值方式，保持S和B不變，H的數值為15遞增的方式，推導出24色帶，然后進一步篩選后我們就可以得到基于品牌色明度、飽和度一致的16個輔助色板。
定義出最常用的色彩 
原始色彩提取后，可以建立對應的拓展色板。整個產品所有用色都從拓展色板提取，保證了規(guī)范的一致性。并且前期優(yōu)化的時候就可以讓開發(fā)給每個顏色定義好相對應的名字（暫時只定義1、2、6、8的色值，其他的配色日常設計使用即可），方便開發(fā)過程中直接通過名字調用顏色
比如不同的黑色，我們可以取名Black15 Black25 Black45等等，使用時直接名字調用即可。
為了使產品構建更具備規(guī)律可循，雅座收銀POS運用了原子理論做設計，采用了8為最小模數進行布局設計，所有的模塊、間距、大小遵循8的規(guī)律進行延展布局，使界面具備動態(tài)的韻律感。
并且在開發(fā)過程中，也遵循8的準則進行界面布局，使產品視覺層更具備一致性。在與開發(fā)溝通的過程中，也直接告知對方，所有的間距都是基本8的倍數設置，降低了溝通成本。
由此，整個產品就像搭積木一樣構建起來。
框架布局
用戶的核心訴求就是迅速的開臺>點餐>結算，因此頁面的信息布局+功能架構上，我們緊緊圍繞高效這個關鍵詞展開優(yōu)化。
在框架布局方面基本和之前類似，保持了一屏一列、一屏兩列、一屏三列的布局模式。對比原來的布局方式，本次在整體結構的細節(jié)上做了更細致的調整。定義好模塊的間距、模塊與模塊之間的距離，8的增量進行布局。
無論界面怎么變化，都是基于這樣的三個框架規(guī)范去填充內容。
在開臺界面，依舊是保持了一屏一列的模式，整體屬于一塊信息，里面切割成無數的小桌臺卡片
進入到點餐頁面的時候，就是一屏兩列的布局。整體主要呈現了兩塊信息，購物車+菜品列表的操作模式。
下單成功后，就是常見的一屏三列。呈現了3塊信息，從左往右操作步驟遞增的模式。
原先的產品并沒有運用柵格系統(tǒng)，導致在不斷的迭代過程中，整個產品的規(guī)范逐漸偏離。在本次優(yōu)化中，我們一并優(yōu)化進去。
前面定義的最小原子為8，我們在構建柵格的時候在8的基礎上8劃分頁面。邊距和水槽都為24px?；谶@樣的設計規(guī)則，后面的產品迭代優(yōu)化才能更具備規(guī)范性。
彈框是產品使用過程中出現頻率非常高的一個組件，原先的彈框都采用居中彈框的形式，那么居中彈框最大的問題就是，當前選擇過多的時候，可展示區(qū)域是有限的，增加了滑動操作。
針對這個問題，我們給出了這樣的設計策略：保持彈窗的操作形式不變，將居中彈框改為側滑彈框，這樣可以最大化的利用屏幕空間，盡可能多的展示可選項，減少滑動操作。
在點餐環(huán)節(jié)選擇菜品的做法規(guī)格等操作時，彈框內的按鈕選擇數量至多可增加33%以上，最大化的展示可選項數量，提高點餐人員的工作效率。
鍵盤是整個收銀產品中使用頻率非常高的一個組件。
原先的鍵盤都是圓形按鈕，經過競對分析，會發(fā)現常規(guī)的終端類產品按鍵都為方形。因此保持原先鍵盤的體積不變的前提下，優(yōu)化后的按鍵可點擊區(qū)域增加了50%，降低誤操作的概率。
并且針對收款環(huán)節(jié)的操作習慣將數字布局進行重新調整，使其排列順序更加符合收銀場景下的數字排列方式，同時最大化收款按鍵面積，合理規(guī)劃收銀鍵盤的布局方式。
在我們原先的產品里還有個問題，就是表格填寫查看的過程中，由于表頭未對齊，整個視覺動線一直在來回切換。
針對這個問題，本次優(yōu)化的時候就將表頭文字統(tǒng)一進行了右對齊，這樣用戶進行表單填寫查看的時候可以一條直線由上而下的查看，快速定位到填寫內容
即使填寫的表單內容很多，也能高效的填寫與查看表單內容。
對于原有產品的界面，桌臺和點餐界面的卡片都采用了居中對齊的方式，這樣做直接導致很多信息排不下，并且會出現卡片上下左右四個角都是角標，降低了信息的可讀性。
帶著這樣的問題，在競品分析過程中，我們發(fā)現了采用左對齊卡片式設計的方式要優(yōu)于原有的居中對齊方式。
因此我們將信息歸類，菜品和桌臺類字段居于左側，而角標類標記全部位于卡片的右側。經過這樣的調整優(yōu)化，整個信息的展示可讀性高于原先的布局方式，并且字段和標簽進行了分類，也不會擁擠在一起。
留白去線 視覺降噪
對于不同信息源，原有的處理方式是通過灰色背景的方式來區(qū)分，而這樣做的問題是，當信息源過多的時候整個數據列表會失去重點，都是重點=沒有重點。
因此我們采用字號對比、畫面留白等方式進行信息模塊的區(qū)分，去除不必要的視覺干擾。
規(guī)范金額單位使用
在收銀產品當中，涉及到金額展示的地方非常多。原先的展示規(guī)則比較隨意，我們并不能找到金額單位的使用規(guī)律。問題集中出現的地方：
1.部分頁面價格不帶【￥】單位
2.價格確定到小數點幾位不明確
3.單位與數字的大小比例關系隨意 
因此優(yōu)化的時候對于金額單位我們也做了總結分類，大致可以分為3類，根據出現的類型定義好金額的使用單位。
根據尼爾森十大設計原則中對于容錯原則的描述：無論錯誤場景設計的多好看，都不如在第一時間防止用戶發(fā)生錯誤；該原則強調，產品需要有防錯機制。
可靠這個特質對于B端產品來說是必不可少的。而在分析原先產品問題的時候就發(fā)現，產品的容錯和防錯做的不夠到位。
因此，我們對于一些輸入環(huán)節(jié)增加了信息預判，避免用戶輸入完成后才給出錯誤提示，降低用戶誤操作的成本。以及一些輸入的操作，例如標簽、選擇后的優(yōu)惠券等等，可直接刪除已選標簽，給予用戶一定的容錯能力。
1）無論當下操作是在加載中還是加載失敗，第一時間予用戶明確的反饋，是非常重要的一件事，時刻給用戶一種安全可靠的操作體驗，明確當下的行為以及導致的行為結果。
所以在桌臺選擇的處理方式上，我們增加顯示了已選中的桌臺名稱，桌臺信息+執(zhí)行動作，明確告知用戶當前已選的桌臺以及將要執(zhí)行的動作
2）其次就是加載中的按鈕的要給予一個明確狀態(tài)。如果點擊后的操作仍在執(zhí)行中，我們沒有給予反饋，就會使用戶認為點擊無效從而不停的點擊，加重卡頓的情況。
文案描述精準
對于單一操作的確認文案，優(yōu)化后更加精準。通過”確認XX”和“暫不XX”這樣的文案融入到按鈕當中，在執(zhí)行的時候可以更加明確當前要執(zhí)行的內容。
例如要選擇使用一張優(yōu)惠券，我們就可以描述為“確認抵扣”或者“暫不抵扣”，從字面理解上來說，也會比單純的：確認、取消“描述更精準。
在設計過程中，我們搭建了一套雅座收銀POS的產品設計組件、并制定了相應的設計規(guī)范。保證后期產品迭代的一致性。
開發(fā)將常用的字號、色彩、圓角等屬性定義好名字，在開發(fā)過程中直接通過名字調用構建樣式。即使多人協(xié)作的情況下也能盡可能保證樣式的一致性。
由于本次產品更新的點比較多，為了讓商戶以及我們的客服團隊能夠更好更快的理解產品更新點。還額外做了配套的宣發(fā)視頻用于介紹。
→B站雅座收銀POS升級地址：https://www.bilibili.com/video/BV1av4y1M7Gv?share_source=copy_web
△ 雅座收銀POS升級視頻
產品上線后，從視覺到交互得到了一次全新的提升，對比之前的版本系統(tǒng)性能和流暢度分別提升了14%和24%。
上線后來自內部和外部的反饋都是不錯的。
對于商戶來說，學習的成本很低。因為在優(yōu)化的同時大部分保持原有的操作習慣，整體視覺的改版上的反饋也是清爽了很多，上手簡單。
項目做完后，在整個產品優(yōu)化過程中，無論是前期的問題調研，初步基礎規(guī)范樣式構建，還是后期的交互細節(jié)優(yōu)化落地，我們始終都是圍繞著，如何做一款更易用的收銀工具為設計核心，進行產品的優(yōu)化升級。
整個優(yōu)化流程看起來好像工作量比較多、比較復雜，其實我們通俗的理解，就好像去醫(yī)院看病醫(yī)院，一共分為4個步驟去理解，查病因>寫病歷>動手術>去復查。
然后針對每個關鍵步驟，拆解出細分的行動計劃，對應到我們整個B端產品的優(yōu)化流程當中逐個擊破。
微盟智慧餐飲的愿景是“數字餐飲，智慧生活”。
雅座收銀作為全場景一體化數字化解決方案中非常重要的"根產品"，始終圍繞著如何做一款更易用的收銀工具為核心，讓門店整體運營狀態(tài)更高效，同時提升營業(yè)人員在工作過程中的使用體驗。助力餐飲企業(yè)實現真正的降本增效，而這也是收銀產研團隊一直在共同踐行的目標。
Powered by Froala Editor
ToB Design！
4
作品
21
粉絲
21
關注
分享能獲取更多贊？
大牛，別默默的看了，快登錄幫我點評一下吧！:)
登錄 立即注冊