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