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