在移動(dòng)互聯(lián)網(wǎng)的高速發(fā)展的今天，我們?nèi)绾尾拍茏?B 端產(chǎn)品在移動(dòng)化時(shí)能更好的滿足用戶訴求與期望呢？本篇文章小編將以「門店通 – 汽配門店管理系統(tǒng)」作為案例，分析并總結(jié)B端產(chǎn)品移動(dòng)化的設(shè)計(jì)思路。

B端移動(dòng)App設(shè)計(jì)：

移動(dòng)化的趨勢

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

拆解 To B 服務(wù)的工作場景

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

定義 B 端產(chǎn)品移動(dòng)化

桌面端的優(yōu)勢在于屏幕的輸出效率、鍵鼠的輸入效率對于數(shù)據(jù)、報(bào)表的瀏覽以及處理專業(yè)復(fù)雜的工作來說都更加友好；而移動(dòng)端的優(yōu)勢在于不受固定辦公地點(diǎn)、時(shí)間、設(shè)備數(shù)量的限制，在移動(dòng)辦公場景時(shí)很有優(yōu)勢。隨著移動(dòng)互聯(lián)網(wǎng)和移動(dòng)應(yīng)用在功能、設(shè)計(jì)、體驗(yàn)等方面的日漸成熟和易用，人們會(huì)越發(fā)習(xí)慣于使用移動(dòng)設(shè)備完成目標(biāo)，解決需求。基于 B 端產(chǎn)品，移動(dòng)化更多的是以輕量的體驗(yàn)來滿足以"用戶" 為中心，聚焦在「查看」 與 「處理」 的場景中。而不是為了處理和解決各種涉及權(quán)限、多重驗(yàn)證確認(rèn)、操作復(fù)雜、報(bào)表繁雜的工作。

B 端產(chǎn)品移動(dòng)化的設(shè)計(jì)思路

1. 保持一致

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

「視覺層」

在進(jìn)行移動(dòng)化設(shè)計(jì)時(shí)，首先要保證品牌的統(tǒng)一性。Logo、字體、品牌色甚至是文案的措辭規(guī)范都需要嚴(yán)格保持一致。保證品牌的統(tǒng)一性，有助于塑造品牌形象，增強(qiáng)用戶對產(chǎn)品的信任。

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

「交互層」

Jakob Nielsen 于 1994 年提出的十大可用性原則中，其中一條原則 Consistency and standards（一致性和標(biāo)準(zhǔn)化原則）是這樣定義的，「同一用語、功能、操作保持一致」。在此基礎(chǔ)上，多端的設(shè)計(jì)也同樣適用，即各端在相同場景下的操作應(yīng)該出現(xiàn)同樣的結(jié)果。對于復(fù)雜的桌面場景與靈活的移動(dòng)場景兩者而言，在關(guān)鍵的節(jié)點(diǎn)采用一致性的設(shè)計(jì)原則尤為重要；

雖然門店通的訂單流程因涉及到管理模式的不同而相對復(fù)雜，但無論是在 WEB 端還是移動(dòng)端，基礎(chǔ)訂單流程均按照「開單 > 施工 > 完工 > 質(zhì)檢 > 結(jié)算」這一路徑運(yùn)轉(zhuǎn)，員工僅需要在不同節(jié)點(diǎn)進(jìn)行相應(yīng)操作即可；移動(dòng)端受限于屏幕顯示，通常需要更聚焦于訂單的關(guān)鍵信息和狀態(tài)，在移動(dòng)化設(shè)計(jì)時(shí)，會(huì)把非必要的訂單信息進(jìn)行弱化或省略，同狀態(tài)場景下，文案、業(yè)務(wù)功能的操作與 WEB 端保持一致。

「體驗(yàn)層」

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

2. 聚焦核心

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

「信息重構(gòu)」

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

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

「信息突出」

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

通常訂單詳情頁承載了很多業(yè)務(wù)上必要的信息。在 WEB 端，因?yàn)樽銐虻钠聊豢臻g，大部分的信息(當(dāng)然個(gè)別重要字段和內(nèi)容也會(huì)標(biāo)記特殊樣式)基本上都是平鋪狀態(tài)展示。而在移動(dòng)化設(shè)計(jì)的時(shí)候是需要考慮區(qū)分信息的主次層級，聚焦在用戶所關(guān)心的訂單狀態(tài)、金額等信息上，通過強(qiáng)化這些字段來減少用戶的獲取成本。

3. 保證易用

在進(jìn)行移動(dòng)化設(shè)計(jì)時(shí)，我們需要載入用戶的使用思維當(dāng)中，通過合適的設(shè)計(jì)引導(dǎo)用戶，使其在移動(dòng)場景下時(shí)擁有和 WEB 端一致的高效體驗(yàn)，并克服種種"特殊"狀況。例如：極端場景的包容、異常狀態(tài)的反饋等等…為了實(shí)現(xiàn)這個(gè)目標(biāo)，我們從以下思路來進(jìn)行思考：

「操作便捷」

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

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

考慮到用戶的使用場景和移動(dòng)辦公的需要，在移動(dòng)化設(shè)計(jì)時(shí)，盡可能的應(yīng)用這一原則，將頁面的主次要操作或重要內(nèi)容置于頁面底部或單手握持設(shè)備時(shí)操作方便的中間區(qū)域。

「減少輸入」

移動(dòng)設(shè)備的按鍵較小，與桌面設(shè)備通過鍵鼠輸入相比，太長的信息輸入會(huì)導(dǎo)致用戶體驗(yàn)不佳且反饋效果也更差。在進(jìn)行移動(dòng)化設(shè)計(jì)時(shí)需要時(shí)刻思考「能否減少輸入?」。

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

「及時(shí)響應(yīng)和反饋」

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

在移動(dòng)化的設(shè)計(jì)過程中，我們主要以過渡反饋和結(jié)果反饋為主。過渡反饋即通過常見的過渡組件給予用戶反饋，例如會(huì)在內(nèi)容完成加載之前在界面中展示一個(gè)「框架」(骨架屏)，讓用戶從心理上感到加載速度的提升，從而減少他們的焦慮感；結(jié)果反饋即告知用戶的操作結(jié)果，考慮到門店通業(yè)務(wù)流程中的各個(gè)節(jié)點(diǎn)的順利銜接，對于每一關(guān)鍵節(jié)點(diǎn)操作的反饋需要通過 Toast 進(jìn)行提示或 Dialog 彈出框?qū)τ脩暨M(jìn)行二次確認(rèn)。

4. 個(gè)性化

通常在同一門店存在多個(gè)移動(dòng)設(shè)備、并依據(jù)角色的不同分發(fā)多個(gè)賬戶。在移動(dòng)化設(shè)計(jì)時(shí)需要考慮個(gè)人的需求場景，去思考用戶所在意哪些內(nèi)容的展示，可以是根據(jù)權(quán)限進(jìn)行內(nèi)容上的區(qū)分，也可以是結(jié)合算法進(jìn)行個(gè)性化內(nèi)容的展示，或者是用戶根據(jù)自己的使用習(xí)慣進(jìn)行的個(gè)性化配置，以確保能為用戶提供他們最關(guān)心的內(nèi)容，提升用戶體驗(yàn)。

「內(nèi)容個(gè)性化」

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

「行為個(gè)性化」

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

其他拓展

移動(dòng)化除了需要滿足用戶靈活辦公的使用需求，還要思考如何在產(chǎn)品設(shè)計(jì)上充分發(fā)揮移動(dòng)端的特性和優(yōu)勢，來補(bǔ)充桌面場景不足的用戶體驗(yàn)。以下是門店通在保證業(yè)務(wù)需求的前提下，對部分功能進(jìn)行移動(dòng)化特性的探索：

1. 硬件拓展

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

2. 生態(tài)拓展

移動(dòng)生態(tài)可以是硬件產(chǎn)品、也可以是關(guān)聯(lián)的第三方應(yīng)用。結(jié)合生態(tài)能做到很好的場景聯(lián)動(dòng)。常見的例如使用硬件系統(tǒng)自帶的推送機(jī)制，將重要的信息推送給門店，員工無需啟動(dòng) App 也能實(shí)時(shí)的收到重要的信息與訂單更新；也可以通過連接打印機(jī)，讓顧客在設(shè)備上簽字并快速打印結(jié)算單據(jù)等等…或者是利用第三方應(yīng)用(例如微信)生態(tài)將顧客的保養(yǎng)提醒發(fā)送至顧客；也可以是顧客可以通過小程序?qū)崟r(shí)查看車輛目前的施工進(jìn)程等等。

作者：Gtech UED