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

移動(dòng)化的趨勢(shì)

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

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

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

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

桌面端的優(yōu)勢(shì)在于屏幕的輸出效率、鍵鼠的輸入效率對(duì)于數(shù)據(jù)、報(bào)表的瀏覽以及處理專(zhuān)業(yè)復(fù)雜的工作來(lái)說(shuō)都更加友好；而移動(dòng)端的優(yōu)勢(shì)在于不受固定辦公地點(diǎn)、時(shí)間、設(shè)備數(shù)量的限制，在移動(dòng)辦公場(chǎng)景時(shí)很有優(yōu)勢(shì)。隨著移動(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)來(lái)滿(mǎn)足以“用戶(hù)” 為中心，聚焦在「查看」 與 「處理」 的場(chǎng)景中。而不是為了處理和解決各種涉及權(quán)限、多重驗(yàn)證確認(rèn)、操作復(fù)雜、報(bào)表繁雜的工作。

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

1. 保持一致

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

「視覺(jué)層」

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

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

「交互層」

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

雖然門(mén)店通的訂單流程因涉及到管理模式的不同而相對(duì)復(fù)雜，但無(wú)論是在 WEB 端還是移動(dòng)端，基礎(chǔ)訂單流程均按照「開(kāi)單 > 施工 > 完工 > 質(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)場(chǎng)景下，文案、業(yè)務(wù)功能的操作與 WEB 端保持一致。

「體驗(yàn)層」

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

2. 聚焦核心

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

「信息重構(gòu)」

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

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

「信息突出」

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

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

3. 保證易用

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

「操作便捷」

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

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

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

「減少輸入」

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

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

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

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

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

4. 個(gè)性化

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

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

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

「行為個(gè)性化」

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

其他拓展

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

1. 硬件拓展

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

2. 生態(tài)拓展

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