文章以買賣家工作臺(tái)首頁(yè)設(shè)計(jì)為例，來(lái)介紹下電商網(wǎng)站后臺(tái)首頁(yè)的整體設(shè)計(jì)思路。

電商網(wǎng)站一般分為前臺(tái)導(dǎo)購(gòu)及后臺(tái)管理兩方面，通常由買家及賣家兩種角色組成。大部分的工作是在后臺(tái)完成，涉及到各類管理系統(tǒng)，保障日常工作順利運(yùn)行。

后臺(tái)產(chǎn)品設(shè)計(jì)因其邏輯復(fù)雜、業(yè)務(wù)繁多、專業(yè)性強(qiáng)具有較大挑戰(zhàn)性，在很多情況下設(shè)計(jì)師的發(fā)揮受到較大限制。尤其是B類后臺(tái)產(chǎn)品的設(shè)計(jì)需要對(duì)公司業(yè)務(wù)擁有更全方位的認(rèn)識(shí)，加大了其設(shè)計(jì)難度。做為設(shè)計(jì)師如何重新定義后臺(tái)商業(yè)價(jià)值？如何進(jìn)行產(chǎn)品化設(shè)計(jì)思考？下面以買賣家工作臺(tái)首頁(yè)設(shè)計(jì)為例，來(lái)介紹下整體設(shè)計(jì)思路。

買賣家工作臺(tái)是什么？

買賣家工作臺(tái)是基于1688大數(shù)據(jù)為企業(yè)提供生意決策、日常工作管理的中小企業(yè)操作管理后臺(tái)。

設(shè)計(jì)之前：思考在最前方，與業(yè)務(wù)一起確定產(chǎn)品方向

轉(zhuǎn)變思維方式：由被動(dòng)接受到主動(dòng)提案

做為體驗(yàn)設(shè)計(jì)師需要對(duì)整個(gè)產(chǎn)品負(fù)責(zé)，在產(chǎn)品改造前期提前與PD對(duì)焦思路，全鏈路思考主動(dòng)提出對(duì)產(chǎn)品的整體想法，而非到某項(xiàng)交互功能再介入，或者是某個(gè)頁(yè)面視覺表現(xiàn)再進(jìn)行。對(duì)焦的過程中也發(fā)現(xiàn)項(xiàng)目的諸多難點(diǎn)：涉及B2B所有業(yè)務(wù)，風(fēng)險(xiǎn)大，影響范圍廣。為保證產(chǎn)品方向的準(zhǔn)確性需要與業(yè)務(wù)方進(jìn)行多次溝通討論及產(chǎn)品匯報(bào)。 產(chǎn)品方向確定基本流程： 思路對(duì)焦——方案討論——方案設(shè)計(jì)——產(chǎn)品匯報(bào)——確定方向。

商業(yè)價(jià)值重構(gòu)三步走：

一、了解定位，轉(zhuǎn)換視角

1、了解產(chǎn)品整體定位： 在進(jìn)行商業(yè)價(jià)值重構(gòu)前充分了解產(chǎn)品定位。以工作臺(tái)為例，今年1688針對(duì)B2B市場(chǎng)提出了人、貨、場(chǎng)的戰(zhàn)略。人：幫助引流，貨：提升品質(zhì)，場(chǎng)：提升能力，做為1688用戶的核心工作場(chǎng)景-工作臺(tái)成為重要場(chǎng)景之一，需要結(jié)合新戰(zhàn)略進(jìn)行全新升級(jí)，加強(qiáng)人在后臺(tái)場(chǎng)中的匹配效率。

2、從業(yè)務(wù)視角轉(zhuǎn)變?yōu)橛脩粢暯牵涸谠O(shè)計(jì)對(duì)焦過程發(fā)現(xiàn)，現(xiàn)有版本融入了較多內(nèi)部運(yùn)營(yíng)工作邏輯，體現(xiàn)各個(gè)部門的利益及立場(chǎng)。比如網(wǎng)站多了一塊新業(yè)務(wù)需要向用戶推廣，就會(huì)在后臺(tái)中增加一個(gè)介紹版塊讓用戶區(qū)體驗(yàn)，缺少用戶去體驗(yàn)功能的場(chǎng)景及動(dòng)機(jī)。偏向一個(gè)流量分發(fā)為中心的核心陣地。業(yè)務(wù)視角展現(xiàn)在用戶層面比較難理解。做為B類用戶更多的是從做生意的角度來(lái)使用后臺(tái)，需要做一層轉(zhuǎn)化才能到達(dá)認(rèn)知，一定程度上影響了用戶的使用效率。因此需要翻譯成用戶能理解的產(chǎn)品表達(dá)。

二、統(tǒng)一戰(zhàn)線，建立目標(biāo)

與產(chǎn)品、運(yùn)營(yíng)統(tǒng)一戰(zhàn)線，建立目標(biāo)。將一個(gè)流量分發(fā)為中心的核心陣地打造成以用戶服務(wù)為中心的產(chǎn)品。

三、明確關(guān)系，構(gòu)建大圖

明確商業(yè)價(jià)值的構(gòu)成者，做為平臺(tái)一共有三方：平臺(tái)方、買方及賣方。完整的商業(yè)價(jià)值構(gòu)建需要聯(lián)動(dòng)三方一起共進(jìn)。工作臺(tái)以阿里大數(shù)據(jù)為中心，網(wǎng)站平臺(tái)小二通過行業(yè)市場(chǎng)來(lái)服務(wù)我們的買家，同時(shí)通過商家培育體系來(lái)服務(wù)我們的賣家?guī)椭碳页砷L(zhǎng)，商家通過自我成長(zhǎng)提升自身運(yùn)營(yíng)能力來(lái)服務(wù)好買家，構(gòu)建出穩(wěn)固的鐵三角服務(wù)生態(tài)大圖。通過建立價(jià)值生態(tài)場(chǎng)景，幫助業(yè)務(wù)打通上下游市場(chǎng)，讓小二更好的服務(wù)買家，促使商家自運(yùn)營(yíng)。

明確商業(yè)價(jià)值后，進(jìn)行產(chǎn)品化設(shè)計(jì)

一、挖掘用戶使痛點(diǎn)

1、定性：采用敏捷式共建用研，在有限制時(shí)間內(nèi)，獲得豐富有效信息

首先談下用研方式，傳統(tǒng)的用研從制定訪談?dòng)?jì)劃、問卷設(shè)計(jì)、用戶邀約、執(zhí)行調(diào)研、分析數(shù)據(jù)到撰寫報(bào)告，整個(gè)過程基本由用研同學(xué)獨(dú)立完成，在項(xiàng)目時(shí)間比較緊張的情況下會(huì)受到限制。因此我們采用了敏捷式共建用研，在臨時(shí)機(jī)動(dòng)的情況下獲取用戶痛點(diǎn)的方式，有幾個(gè)小tips可供參考：

A、項(xiàng)目組共建用研：打破流程限制，在與用研同學(xué)確定好調(diào)研提綱后，發(fā)動(dòng)項(xiàng)目組的成員運(yùn)營(yíng)、開發(fā)、測(cè)試等共同參與調(diào)研；B、靈活邀約客戶：借助園區(qū)商家活動(dòng)、會(huì)議等在中間抽取時(shí)間機(jī)動(dòng)調(diào)研，在中午休息時(shí)間就訪談了近15位客戶；
C、訪談結(jié)果及時(shí)產(chǎn)出：后項(xiàng)目組成員當(dāng)即進(jìn)行調(diào)研總結(jié)及改進(jìn)建議，大大提高了訪談的輸出效率，也提高了項(xiàng)目成員的對(duì)于用戶的整體感知。用戶調(diào)研不在于形式，在于是否通過有效方式得到想要的信息.優(yōu)勢(shì)：用戶量大，意愿大，調(diào)研成本低 風(fēng)險(xiǎn)：目標(biāo)用戶不穩(wěn)定、用戶經(jīng)營(yíng)狀態(tài)感知偏弱。

定性調(diào)研發(fā)現(xiàn)：

買家：主要工作行為是采購(gòu)管理和銷售管理，小買家不會(huì)進(jìn)行進(jìn)銷存管理，進(jìn)銷存管理工具不能同步1688信息，查看物流不方便、不能看到銷售數(shù)據(jù)情況，交易過的公司公司使用量低等情況。

賣家：主要使用群體為公司操作員基本每天都會(huì)進(jìn)入后臺(tái)操作，主要操作行為查看店鋪數(shù)據(jù)、進(jìn)行交易訂單管理、商品管理、店鋪管理、營(yíng)銷活動(dòng)管理。核心關(guān)注曝光、訪客及轉(zhuǎn)化情況。調(diào)研中發(fā)現(xiàn)用戶在后臺(tái)操作的目標(biāo)感模糊，例如用戶反饋：剛開了店鋪，后面要怎么弄，完全沒方向！別人都是怎么做的，沒有引導(dǎo)性；購(gòu)買誠(chéng)信通僅為了標(biāo)識(shí)，無(wú)線上行為不知道要怎么做？沒有把線下用戶拉到線上等問題。

2、定量：通過數(shù)據(jù)分析發(fā)現(xiàn)用戶使用都比較集中，部分模塊使用率較低，有效信息少；長(zhǎng)尾效應(yīng)明顯，交易鏈路為買賣家高頻行為，抓手欠缺。

二、確定設(shè)計(jì)目標(biāo)及策略

基于用戶的行為差異及訴求差異，制定不同的設(shè)計(jì)目標(biāo)及策略。工作臺(tái)結(jié)合買賣家做了版本區(qū)分，分為買家版及賣家版
買家版設(shè)計(jì)目標(biāo)：讓買家擁有精細(xì)化的采銷服務(wù)，提高進(jìn)貨效率

設(shè)計(jì)策略：

1. 精簡(jiǎn)化：信息架構(gòu)場(chǎng)景化，內(nèi)容模塊調(diào)整；
2. 數(shù)據(jù)化、個(gè)性化：通過用戶行為數(shù)據(jù)、關(guān)系數(shù)據(jù)提供個(gè)性化服務(wù)，接入第三方服務(wù)滿足買家下游需求；
3. 互動(dòng)性：平臺(tái)與買家、買家與賣家間的互動(dòng)，進(jìn)行服務(wù)觸達(dá)，關(guān)系顯性化，從而促進(jìn)商業(yè)價(jià)值最大化。

賣家版設(shè)計(jì)目標(biāo)：幫助商家更好的自我成長(zhǎng)，提高自運(yùn)營(yíng)能力

設(shè)計(jì)策略：

1. 精簡(jiǎn)化：信息架構(gòu)場(chǎng)景化，快捷入口調(diào)整；
2. 數(shù)據(jù)化自運(yùn)營(yíng)：分類管理，結(jié)合用研中了解的用戶核心場(chǎng)景：管交易、管店、管貨、管客及管活動(dòng)進(jìn)行模塊分類；
3. 賣家生命周期管理：建立用戶成長(zhǎng)激勵(lì)體系，通過用戶進(jìn)階分層明確成長(zhǎng)目標(biāo)，促使用戶成長(zhǎng)。 策略圖：

三、交互階段信息架構(gòu)細(xì)化設(shè)計(jì)，建立模塊產(chǎn)品化交互設(shè)計(jì)Guideline

信息架構(gòu)核心抓手有三：

1. 導(dǎo)航分類場(chǎng)景化：以賣家版為例，在導(dǎo)航區(qū)域核心體現(xiàn)賣家四大工作場(chǎng)景：管交易、管店、管貨、管客及管活動(dòng)。
2. 內(nèi)容場(chǎng)景數(shù)據(jù)導(dǎo)向化：中間內(nèi)容區(qū)域以總體成長(zhǎng)情況和場(chǎng)景數(shù)據(jù)情況進(jìn)行導(dǎo)向性設(shè)計(jì)，提供數(shù)據(jù)分析及行動(dòng)操作。明確用戶核心關(guān)注內(nèi)容及操作。

3.模塊設(shè)計(jì)產(chǎn)品化：建立模塊交互設(shè)計(jì)Guideline 為保障后續(xù)新增模塊價(jià)值傳遞的統(tǒng)一性，建立模塊產(chǎn)品化交互設(shè)計(jì)Guideline。 對(duì)所有模塊進(jìn)行了功能分類，主要分為兩種： 1、任務(wù)服務(wù)模塊： 任務(wù)服務(wù)模塊設(shè)計(jì)需要明確：模塊是什么？（業(yè)務(wù)視角轉(zhuǎn)為用戶視角）目標(biāo)&現(xiàn)狀，怎么做及可獲得什么服務(wù)。 2、消息模塊：傳遞服務(wù)是什么？怎么做？

舉例：客戶管理模塊

1. 模塊是什么？：店鋪客戶管理
2. 目標(biāo)&現(xiàn)狀：店鋪的訪客、潛在客戶、成交客戶及流失客戶情況
3. 怎么做？：進(jìn)行客戶召回
4. 可獲得什么？：客戶數(shù)量增加，客戶管理類工具

交互設(shè)計(jì)微創(chuàng)新：功能地圖設(shè)計(jì)

工作臺(tái)中的功能入口眾多，為方便用戶查找及使用，對(duì)功能地圖進(jìn)行優(yōu)化。統(tǒng)一工作場(chǎng)景分類認(rèn)知與導(dǎo)航分類保持一致，減少界面中分類層級(jí)，用戶點(diǎn)擊功能地圖后可進(jìn)行自定菜單設(shè)置，將自己常用的入口釘?shù)阶髠?cè)菜單中。
優(yōu)化前：

優(yōu)化后：

四、視覺設(shè)計(jì)無(wú)邊界，尋找核心發(fā)力點(diǎn)

通常一個(gè)產(chǎn)品進(jìn)入視覺設(shè)計(jì)就開始YY各種品牌元素及表現(xiàn)感知方面的設(shè)計(jì)，而作為后臺(tái)產(chǎn)品因其偏重操作，在視覺設(shè)計(jì)前，需要宏觀的進(jìn)行再思考，用戶通過感知可以帶來(lái)什么價(jià)值？在工作臺(tái)視覺設(shè)計(jì)前進(jìn)行了進(jìn)行感知升級(jí)思考，建立感知升級(jí)閉環(huán)貫穿在整個(gè)視覺設(shè)計(jì)環(huán)節(jié)，閉環(huán)全圖：

視覺設(shè)計(jì)核心發(fā)力點(diǎn)提?。?在對(duì)整體閉環(huán)有一定認(rèn)知后，進(jìn)行感知定位通過與項(xiàng)目組成員共建提取工作臺(tái)感知云標(biāo)簽，提取感知關(guān)鍵詞：簡(jiǎn)單、清晰及高效。在視覺層面主要通過風(fēng)格定義、特色模塊設(shè)計(jì)及情感化設(shè)計(jì)來(lái)發(fā)力。

1、風(fēng)格定義：對(duì)B2B供應(yīng)鏈管理類后臺(tái)從顏色、圖標(biāo)、控件、模塊等方面進(jìn)行視覺層面競(jìng)品分析，同時(shí)了解時(shí)下主流產(chǎn)品設(shè)計(jì)趨勢(shì)如微軟、facebook，IOS11最新視覺風(fēng)格。發(fā)現(xiàn)以下特點(diǎn)：

• 形：去裝飾，以內(nèi)容為中心，去掉了多余的裝飾元素
• 色：少顏色，通過大小對(duì)比來(lái)突出主體，減少顏色
• 質(zhì)：扁平化設(shè)計(jì)，微漸變
• 構(gòu)：減線條，弱化線條分割，通過留白來(lái)區(qū)分空間，輕劃分：巧用投影做區(qū)塊劃分 綜合以上分析進(jìn)行風(fēng)格定義設(shè)計(jì)
  買家版：

賣家版：

風(fēng)格細(xì)節(jié)：

導(dǎo)航優(yōu)化：為保障用戶認(rèn)知的統(tǒng)一性，沿用了老版本中買家橙色，賣家藍(lán)色的顏色特征。導(dǎo)航設(shè)計(jì)中縮減了顏色在導(dǎo)航中的比重，通過版本字體來(lái)區(qū)分。簡(jiǎn)化老版本中當(dāng)前狀態(tài)的框選樣式，通過TAB短線來(lái)表示當(dāng)前狀態(tài)。

內(nèi)容再設(shè)計(jì)：老版本中代辦模塊信息內(nèi)容密集識(shí)別困難，操作性較低，通過信息名片卡片式設(shè)計(jì)待辦歸類整理，突出核心內(nèi)容

化繁為簡(jiǎn)：現(xiàn)有頁(yè)面中模塊很多用線條來(lái)區(qū)分，信息量比較多的情況下，頁(yè)面相對(duì)復(fù)雜，因此弱化線條分割，通過留白來(lái)區(qū)分空間

圖標(biāo)設(shè)計(jì)：對(duì)后臺(tái)產(chǎn)品中的圖標(biāo)進(jìn)行了功能分類：說明性圖標(biāo)、權(quán)益性圖標(biāo)。后臺(tái)圖標(biāo)設(shè)計(jì)需要控制其表現(xiàn)力度，因此在設(shè)計(jì)上通過局部細(xì)節(jié)點(diǎn)綴來(lái)表現(xiàn)。權(quán)益類圖標(biāo)與前臺(tái)門洞類做區(qū)分，減少顏色運(yùn)用，結(jié)合買賣身份做橙、藍(lán)底色區(qū)分，使用簡(jiǎn)易面狀的形式來(lái)凸顯特征。

2、特色模塊設(shè)計(jì)，以成長(zhǎng)模塊為例

模塊設(shè)計(jì)背景：根據(jù)商家在平臺(tái)的七項(xiàng)能力，統(tǒng)一分層體系，促進(jìn)商家自運(yùn)營(yíng)，從而為買家提供優(yōu)質(zhì)貨源和采購(gòu)體驗(yàn)
設(shè)計(jì)方向：為幫助商家在平臺(tái)更好的成長(zhǎng)，全鏈路思考用戶成長(zhǎng)環(huán)節(jié)。在工作臺(tái)中的透?jìng)髦?，使用商?wù)跑的方式來(lái)激勵(lì)用戶，并給予成長(zhǎng)引導(dǎo) 基于模塊設(shè)計(jì)Guideline明確：

1. 模塊是什么？：我的成長(zhǎng)
2. 目標(biāo)&現(xiàn)狀：成長(zhǎng)能力得分
3. 怎么做？：成長(zhǎng)任務(wù)
4. 可獲得什么？：成長(zhǎng)權(quán)益

對(duì)模塊進(jìn)行劃分：

成長(zhǎng)感知定位，主要通過兩方面，提取物像特征，提取表現(xiàn)形式

通過商務(wù)人物奔跑的形式來(lái)表現(xiàn)成長(zhǎng)進(jìn)度，為便于用戶進(jìn)行成長(zhǎng)任務(wù)連貫操作設(shè)計(jì)全鏈路成長(zhǎng)插件，提高成長(zhǎng)效率。

3、情感化設(shè)計(jì)：

身份卡片設(shè)計(jì)：

使用2.5D元素來(lái)增加用戶新手操作的實(shí)體感受：

五、后臺(tái)動(dòng)效，讓工作臺(tái)體驗(yàn)更流暢

在項(xiàng)目過程中非常感謝成龍、梅郁在設(shè)計(jì)思路及方法上的引導(dǎo)，感謝團(tuán)隊(duì)中顧佳、蘇林給力的設(shè)計(jì)支持。

產(chǎn)品化設(shè)計(jì)任重道遠(yuǎn)，是一個(gè)不斷優(yōu)化迭代的過程，還需要聯(lián)合各方力量一起合力，共同改進(jìn)。在新形勢(shì)下，設(shè)計(jì)師已不在是接需求的資源方，而是產(chǎn)品共同的締造者。需要利用一切能夠改善產(chǎn)品的方式，用我們的全部智慧和能力，為我們的用戶服務(wù)。

作者：金莉

來(lái)源：阿里巴巴U一點(diǎn)

題圖來(lái)自PEXELS，基于CC0協(xié)議