以云臺助手為例,分享B端產品該如何改版?
B端產品功能復雜不像C端產品有個清晰的核心功能點,改版迭代也沒有C端頻繁,所以大部分小伙伴對B端產品設計都有些陌生。而本文剛好以最近云臺助手改版經驗為例,分享B端產品改版歷程。帶大家更好地理解B端產品設計。
一、云臺助手是什么產品?
云臺助手app為蘇寧易購平臺商家及蘇寧供應商提供移動端的辦公平臺。面向蘇寧易購平臺賣家,提供待辦管理、數據查看、訂單管理、退款管理、投訴管理以及消息管理等功能,讓商家在碎片化時間里也能移動處理緊急事務,辦公自由度更高。
二、為什么要改版?
在3.0版本中我們只是單純定義為一個移動辦公工具,隨著商戶數的增長,用戶使用達到一個級別,我們不在只是局限于一個工具產品而是定位為一個服務平臺產品。基于此背景,產品改版正式提上日程,這也正是改版的原始驅動力。
(一)前期分析
1. 頁面分析
1.1 首頁頁面狀況
為什么選用首頁頁面分析?因為首頁是商家處理訂單、查看數據的中心場景,也是商家感知平臺價值的重要“門面”。從設計視角來看,首頁也是APP內體驗范式及視覺風格的核心場景。
目前首頁內容區域分為數據看板和插件合集兩大模塊。有以下幾個問題:
- 內容信息單一,只有數據指標和插件功能入口;
- 數據指標默認展示無規則(數據來源于接口反饋,是什么就是什么,沒有進行數據加工處理);
- 插件數量日益增多,目前已有20+多個,急需做好插件分類;
- 由于前期多個設計師前后參與,造成插件圖標樣式風格不統一,體缺乏品牌感知。
舊版首頁
1.2 詳情頁狀況
詳情頁是商家頻繁操作的核心場景。一個功能對應相關詳情頁面操作,詳情頁框架結構樣式疊砌嚴重,比較混亂,視覺體驗比較差。
舊版詳情頁
2. 競品分析
橫向上我們對功能進行產品體驗分析,縱向上進行競品分析,從而尋找功能差異點和視覺設計方向做指引。
3. 梳理問題,確定改版目標
通過產品體驗和競品分析梳理產品問題,尋找問題解決思路。
通過上面產品問題思路來歸納定義設計目標。分別是優化框架結構、建立品牌感知、打造設計語言。
(二)設計執行
1. 優化框架結構
1.1?優化數據看板指標優先級
前期對首頁工作臺數據看板進行數據分析結果:待辦訂單處理點擊量>今日訂單數據點擊量>昨日訂單數據點擊量。所以優先展示代辦數據,商戶更關心待辦處理信息,待辦信息也是最緊急的信息。我們將待辦處理數據單獨成一模塊,模塊布局在頁面內容頂部以便于用戶第一時間操作處理。
1.2?插件分類
我們將插件分為商品、訂單、財務、營銷、數據、金融六大類,合理的分類便于未來插件功能的管理。
1.3?自定義功能設置
對商家群體不同,我們也進行了功能層面的個性化自定,個性化行為可供用戶使用習慣自定,從而自動化呈現功能。
2. 建立品牌感
2.1?顏色升級
云臺助手一直使用藍色為品牌色,也是比較符合商務穩健氣息。我們發現原版品牌色純度較低,顏色比較陳舊,不夠鮮亮。所以在新改版中使用純度更高的品牌藍,更加簡潔大方、高效果直達。
2.2?圖標統一化
舊版app中,圖標清晰度弱,插件圖標顏色過于豐富。對于服務B類商家,B類特質具有體量感的場景,故在APP圖標的表達上,基于扁平vs寫實、輕盈vs厚實、活潑vs穩重的維度,圖形選定扁平、厚實且帶活潑的設計樣式,塑造B類場景For商家的沉穩略帶活潑。
同時我們定制了一套圖標設計指南:
a.圓角韻律
舊版多彩多色圖標太過花哨影響品牌格調,所以我們重新優化利用單色線性統一端點和圓角來創作細節,顏色上使用品牌藍,圓角的規格推薦采用9px,最常用的分別是 3px、6px、9px。
b.圖形韻律
除了對重復出現的元素進行管理之外,建議考慮圖標在構造上的一致性。
3. 打造設計語言
3.1?卡片化布局設計
云臺助手App里有大量的插件功能及其對應的詳情頁,舊版通欄式設計無法更好的呈現信息,所以我們尋找更合適的布局來組建信息呈現。最終我們選用卡片式設計,它就像一個容器能包容復雜的信息,并能把獨立的信息模塊秩序井然的排列組合, 形成feed流設計。使用卡片設計、大標題進行模塊及內容間區分,減少線條。盡量利用留白,字體大小,字重來分割信息層級。
3.2?單位網格系統
網格單位系統可以讓頁面信息呈現更加美觀和規范。一般UI中網格設計最小單位普遍在4px、6px、8px這三個偶數數值(選用偶數是為了被大多數手機屏幕寬度整除)。
在靈活性上,4px表現最佳,但是頁面易被分割的比較細碎,在設計的時候比較難把控;4px,6px比較適合頁面內容信息較多,布局比較復雜的產品;8px一般的設計場景都能滿足,適合大多數的APP;在選用上,我們根據自身產品實際情況做出選擇,最后選用6px單位作為最小單位基準,6px滿足我們產品復雜的信息結構,同時-盡量和易購主站保持統一。
3.3?卡片內容輕量化
云臺助手App目前功能模式復雜而場景模式很多,新的設計盡可能的做減法,去掉不需要的修飾元素,盡可能凸顯內容本身。使用大卡片、大標題進行模塊及內容間區分,減少線條。盡量利用留白,字體大小,字重來分割信息層級。
在舊版模塊中信息缺乏視覺層次,清晰度也較弱,我們嘗試把商品標題字體改為24px,加粗,這樣看上去比28px標題更加清晰;所有操作功能靠右對齊,如聯系買家、操作按鈕。盡量保持左側視覺重點,右側操作區域。
3.4?內容組件化
產品組件化輸出粗略可以分為基本元素組件和業務模塊組件。
基本元素組件包括按鈕、表單、表格、標簽、模態框等等。產品組件化的最大價值在于可以相對獨立地優化產品中每個不合理的元素/模塊,調整一個組件就能夠覆蓋整個產品相關組件優化,能夠大量節約定制成本,提升產出效率,而且又能夠保證產品相關體驗的統一性。
三、反思
對于B端產品改版,始終以業務為導向,學會收集商戶的意見、挖掘數據和了解競品,進行小幅度快節奏的持續迭代。一款B端產品不要一味追求功能的廣而全,而是要通過具體的分析搭建完整的場景,在我們搭建好的場景之上,給予用戶最完整的功能以及最舒心的用戶體驗。
云臺助手app4.0的改版,代表著設計語言的轉變,從數據直觀展示轉化為基于用戶體驗框架結構升級,再到內容信息組件化及UI控件統一化,最后是產出品牌一個新的拔高點,這一步步都是設計師、用研、產品經理,開發團隊等協同作戰的成果。每一位成員都各有所長地在這個項目中參與與付出。
目前的改版只是開始,后續的工作會繼續前行,工作上的細節還有不足,如其它功能場景還未搭建,但我們已經做好持續優化完善的準備。未來我們將更加緊密地圍繞商戶,提供最好的服務以及真真實實地解決商戶在真實場景下遇到的問題,給予便捷的工作方式和創造更多的利益價值。
作者:陳玲玲? 蘇寧供應鏈平臺研發中心 ,視覺設計師;公眾號:蘇寧設計
本文由 @蘇寧設計 原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
分析的很透徹~
?