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

B端移動App設(shè)計：

移動化的趨勢

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

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

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

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

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

B 端產(chǎn)品移動化的設(shè)計思路

1. 保持一致

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

「視覺層」

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

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

「交互層」

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

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

「體驗層」

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

2. 聚焦核心

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

「信息重構(gòu)」

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

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

「信息突出」

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

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

3. 保證易用

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

「操作便捷」

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

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

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

「減少輸入」

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

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

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

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

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

4. 個性化

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

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

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

「行為個性化」

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

其他拓展

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

1. 硬件拓展

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

2. 生態(tài)拓展

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

作者：Gtech UED