在移動互聯網的高速發展的今天，我們如何才能讓 B 端產品在移動化時能更好的滿足用戶訴求與期望呢？本篇文章小編將以「門店通 – 汽配門店管理系統」作為案例，分析并總結B端產品移動化的設計思路。

B端移動App設計：

移動化的趨勢

隨著移動場景趨于常態，To B 服務不再局限于桌面設備，越來越多的服務供應商投入移動場景的賽道中。這其中一方面是基于人們上網習慣的改變，根據艾瑞咨詢 2021 年中國綜合移動辦公平臺行業研究報告指出，截止 2021 年 6 月，國內手機網民規模為 10.07 億，占全體網民的 99.6%，用戶習慣一定程度上驅動著服務廠商從桌面端向移動端的轉移；另一方面是傳統的桌面場景受固定工作地點、時間的限制，難以滿足用戶高效率辦公、協同的訴求，而移動化既能滿足用戶輕量化、隨時隨地進行業務操作的訴求，也能幫助企業降本提效。

拆解 To B 服務的工作場景

B 端產品的最終目的是滿足用戶的日常工作管理需求，幫助企業提高工作效率、降低使用成本、維護數據安全。盡管不同的 B 端產品所服務的行業、使用對象各不相同，但從工作流程的角度，大致可以拆解為兩大類場景：即「查看」「處理」。「查看」是了解信息，提取可用數據，一般會通過圖表、表格、面板等形式展示數據，多數產品偏向更垂直或更專業的數據模型。「處理」則是以解決業務流程和問題為目的的操作，常見的增、刪、改、查等。無論何種行業、職位、權限的用戶都離不開這兩大場景。以汽配門店的日常經營為例，門店管理者通常會關注經營層面的數據，而員工則關心當前的生產信息，綜合信息后，管理者和員工需要做出決策對門店的經營、生產等業務進行操作。

定義 B 端產品移動化

桌面端的優勢在于屏幕的輸出效率、鍵鼠的輸入效率對于數據、報表的瀏覽以及處理專業復雜的工作來說都更加友好；而移動端的優勢在于不受固定辦公地點、時間、設備數量的限制，在移動辦公場景時很有優勢。隨著移動互聯網和移動應用在功能、設計、體驗等方面的日漸成熟和易用，人們會越發習慣于使用移動設備完成目標，解決需求。基于 B 端產品，移動化更多的是以輕量的體驗來滿足以“用戶” 為中心，聚焦在「查看」 與 「處理」 的場景中。而不是為了處理和解決各種涉及權限、多重驗證確認、操作復雜、報表繁雜的工作。

B 端產品移動化的設計思路

1. 保持一致

一致性并不是簡單的把交互框架和視覺風格直接照搬統一，實際上要對齊的是兩種使用場景的體驗，這中間要調和的是小屏幕和大屏幕的矛盾，觸控操作和鍵鼠操作的矛盾，兩種不同心智模型的矛盾，以下將從視覺層、交互層、體驗層三個維度來論述一致性的思路。

「視覺層」

在進行移動化設計時，首先要保證品牌的統一性。Logo、字體、品牌色甚至是文案的措辭規范都需要嚴格保持一致。保證品牌的統一性，有助于塑造品牌形象，增強用戶對產品的信任。

在視覺風格上，門店通主要以黃色為主的品牌基調在移動化設計上保持延續。我們在嘗試色彩方案的過程中，設計策略就是對于常用的業務組件使用純白、淺灰打底，配合使用黃色或延伸色作為局部點綴。同時在部分頁面保留了大色塊背景的使用，突出品牌調性的同時，增強對比度，保證信息的易讀性。此外與功能業務相關的圖標在移動端上保留，在不影響識別的前提下大大降低了設計成本。

「交互層」

Jakob Nielsen 于 1994 年提出的十大可用性原則中，其中一條原則 Consistency and standards（一致性和標準化原則）是這樣定義的，「同一用語、功能、操作保持一致」。在此基礎上，多端的設計也同樣適用，即各端在相同場景下的操作應該出現同樣的結果。對于復雜的桌面場景與靈活的移動場景兩者而言，在關鍵的節點采用一致性的設計原則尤為重要；

十大可用性原則：

雖然門店通的訂單流程因涉及到管理模式的不同而相對復雜，但無論是在 WEB 端還是移動端，基礎訂單流程均按照「開單 > 施工 > 完工 > 質檢 > 結算」這一路徑運轉，員工僅需要在不同節點進行相應操作即可；移動端受限于屏幕顯示，通常需要更聚焦于訂單的關鍵信息和狀態，在移動化設計時，會把非必要的訂單信息進行弱化或省略，同狀態場景下，文案、業務功能的操作與 WEB 端保持一致。

「體驗層」

雖然我們追求多端統一的用戶體驗，但各端的操作場景差別很大，用戶已經在不同的平臺已經形成了不同的操作習慣。通過對比門店通 WEB 端和移動端的界面，雖然在頁面結構上兩端并不一致，但各自也都符合所在平臺用戶的操作習慣。以導航為例，在顯示區域足夠大的 WEB 端，側邊導航結構能確保所有的層級菜單都可以平鋪出來，對用戶在功能的選擇上更加直觀。移動化設計時需要遵循不同操作系統的規范，小屏幕更需要將信息進行聚焦，「更多」界面的設計是通過對功能項歸類的方式與 WEB 端統一。

2. 聚焦核心

移動化不是一味的照搬 WEB 端的功能和內容，而是要了解移動場景下使用者的關鍵訴求是什么，聚焦核心功能點進行設計，再由此擴展至其他次級功能。對于信息展示與布局，我們從以下 2 個維度進行思考：

「信息重構」

WEB 端有足夠的屏幕空間把所有的內容展示給用戶，而多數情況下，移動場景下的用戶很少主動瀏覽一屏以外的信息。對于移動化設計來說，核心內容必須保證用戶在一屏內可以看到。由此，我們需要控制單個頁面內的信息量。對核心流程影響不大的一些字段或單位，可以嘗試在流程中弱化，或通過一定的交互成本顯示；如果必要字段很多，也可以嘗試使用步驟條對界面進行分步操作；

在門店通表單類的錄入場景中，我們通常做法是將非必要字段隱藏在「更多信息」中。一方面避免因表單過多需要用戶滑動查看并給用戶造成的視覺焦慮，另一方面，減少非必要信息帶來的干擾，簡化了錄入流程，在移動場景下，保證使用者更快速地完成操作。

「信息突出」

在論述信息重構的時候提到需要控制移動端頁面的信息量。但只是頁面信息量少就可以了嗎？事實上除了對信息進行篩選外，還需要思考信息的展示形式。用戶更關注的信息，可以通過字號、字體顏色等樣式差異，讓信息有更明顯的優先層級；

通常訂單詳情頁承載了很多業務上必要的信息。在 WEB 端，因為足夠的屏幕空間，大部分的信息(當然個別重要字段和內容也會標記特殊樣式)基本上都是平鋪狀態展示。而在移動化設計的時候是需要考慮區分信息的主次層級，聚焦在用戶所關心的訂單狀態、金額等信息上，通過強化這些字段來減少用戶的獲取成本。

3. 保證易用

在進行移動化設計時，我們需要載入用戶的使用思維當中，通過合適的設計引導用戶，使其在移動場景下時擁有和 WEB 端一致的高效體驗，并克服種種“特殊”狀況。例如：極端場景的包容、異常狀態的反饋等等…為了實現這個目標，我們從以下思路來進行思考：

「操作便捷」

Steven Hoober 在《移動應用界面設計》書中例舉了用戶多種握持移動設備的方式，并通過一系列研究指出，當用戶單手操作手機時，頁面的底部和中部是最適合操作的的區域，所以，需要盡量將最重要的 UI 控件放在其拇指可觸及的范圍內；

此外，他還表明，無論是閱讀或內容互動，移動用戶更喜歡垂直居中的信息布局。

考慮到用戶的使用場景和移動辦公的需要，在移動化設計時，盡可能的應用這一原則，將頁面的主次要操作或重要內容置于頁面底部或單手握持設備時操作方便的中間區域。

「減少輸入」

移動設備的按鍵較小，與桌面設備通過鍵鼠輸入相比，太長的信息輸入會導致用戶體驗不佳且反饋效果也更差。在進行移動化設計時需要時刻思考「能否減少輸入?」。

很多場景下我們給用戶提供了新建/編輯的權限。在用戶通過移動設備錄入信息時，考慮到當下的場景，我們盡可能的去減少虛擬鍵盤的輸入頻次，取而代之的是使用滑塊、步進器、選擇器等組件；同時對于部分表單，當用戶開始輸入關鍵詞后，系統能判斷并給出合理的建議等，以此來減少觸控輸入帶來的不便。

「及時響應和反饋」

Robert B Miller 在《人機對話的響應時間》書中指出，「對于由用戶操作直接觸發的反饋，理想的響應時間應該控制在 100 毫秒內」。當用戶執行完操作后，系統未能及時甚至沒有給出相應的反饋提示，就會給用戶帶來疑惑（現實模型與心智模型沖突），讓用戶不能確定自己的操作是否被執行、執行是否成功等等。另外在移動場景下，因通信不暢而未能及時加載出內容或頁面跳轉，容易使用戶產生焦慮情緒；這其中的任何一個環節都有可能影響到產品的用戶體驗。

在移動化的設計過程中，我們主要以過渡反饋和結果反饋為主。過渡反饋即通過常見的過渡組件給予用戶反饋，例如會在內容完成加載之前在界面中展示一個「框架」(骨架屏)，讓用戶從心理上感到加載速度的提升，從而減少他們的焦慮感；結果反饋即告知用戶的操作結果，考慮到門店通業務流程中的各個節點的順利銜接，對于每一關鍵節點操作的反饋需要通過 Toast 進行提示或 Dialog 彈出框對用戶進行二次確認。

4. 個性化

通常在同一門店存在多個移動設備、并依據角色的不同分發多個賬戶。在移動化設計時需要考慮個人的需求場景，去思考用戶所在意哪些內容的展示，可以是根據權限進行內容上的區分，也可以是結合算法進行個性化內容的展示，或者是用戶根據自己的使用習慣進行的個性化配置，以確保能為用戶提供他們最關心的內容，提升用戶體驗。

「內容個性化」

門店通移動端首頁的數據面板會根據角色的權限不同，所看到數據指標也有所差異。門店管理者可以查看當日的經營數據(往往是涉及收支金額等相關數據)，可通過點擊事件進入相應報表，以了解近期門店的經營、收支狀況；而普通員工則只能看到當日門店的生產數據；另外，員工可以在個人頁獲取并查詢自己近期服務數據的匯總，并了解一個周期內自己所獲得的績效和工資情況。

「行為個性化」

門店通為付費門店提供了 8 個大類，超過 62 項的細分服務。首頁功能入口作為曝光度最高的區域之一，我們將這一塊區域的配置權限開放給了用戶。不同職能的員工因工種、角色的不同，日常高頻次使用的功能也不一樣。用戶可依據自己的工作習慣，編輯首頁的功能入口(九宮格)，以提升工作效率。

其他拓展

移動化除了需要滿足用戶靈活辦公的使用需求，還要思考如何在產品設計上充分發揮移動端的特性和優勢，來補充桌面場景不足的用戶體驗。以下是門店通在保證業務需求的前提下，對部分功能進行移動化特性的探索：

1. 硬件拓展

移動化設計需要更多的和硬件特性結合起來，充分利用移動設備的硬件基礎，例如錄音、拍照、錄視頻、藍牙、wifi、LBS、NFC、GPS、重力感應、push 推送、定位精度等等，來打破桌面端工作場景相對固定的限制。汽配門店的日常經營需要通過照片、視頻等流媒體介質，記錄業務流程的每一個節點。使用移動設備，店員可以直接通過設備拍照并上傳接車、施工等節點過程；或是掃描車牌快速識別顧客車輛信息，這些都一定程度上拓展了應用場景，彌補了桌面場景的不足。

2. 生態拓展

移動生態可以是硬件產品、也可以是關聯的第三方應用。結合生態能做到很好的場景聯動。常見的例如使用硬件系統自帶的推送機制，將重要的信息推送給門店，員工無需啟動 App 也能實時的收到重要的信息與訂單更新；也可以通過連接打印機，讓顧客在設備上簽字并快速打印結算單據等等...或者是利用第三方應用(例如微信)生態將顧客的保養提醒發送至顧客；也可以是顧客可以通過小程序實時查看車輛目前的施工進程等等。

歡迎關注作者微信公眾號：「Gtech UED」