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

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

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

買賣家工作臺是什么？

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

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

轉變思維方式：由被動接受到主動提案

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

商業(yè)價值重構三步走：

一、了解定位，轉換視角

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

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

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

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

三、明確關系，構建大圖

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

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

一、挖掘用戶使痛點

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

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

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

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

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

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

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

二、確定設計目標及策略

基于用戶的行為差異及訴求差異，制定不同的設計目標及策略。工作臺結合買賣家做了版本區(qū)分，分為買家版及賣家版
買家版設計目標：讓買家擁有精細化的采銷服務，提高進貨效率

設計策略：

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

賣家版設計目標：幫助商家更好的自我成長，提高自運營能力

設計策略：

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

三、交互階段信息架構細化設計，建立模塊產(chǎn)品化交互設計Guideline

信息架構核心抓手有三：

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

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

舉例：客戶管理模塊

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

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

工作臺中的功能入口眾多，為方便用戶查找及使用，對功能地圖進行優(yōu)化。統(tǒng)一工作場景分類認知與導航分類保持一致，減少界面中分類層級，用戶點擊功能地圖后可進行自定菜單設置，將自己常用的入口釘?shù)阶髠炔藛沃小?br /> 優(yōu)化前：

優(yōu)化后：

四、視覺設計無邊界，尋找核心發(fā)力點

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

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

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

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

賣家版：

風格細節(jié)：

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

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

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

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

2、特色模塊設計，以成長模塊為例

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

1. 模塊是什么？：我的成長
2. 目標&現(xiàn)狀：成長能力得分
3. 怎么做？：成長任務
4. 可獲得什么？：成長權益

對模塊進行劃分：

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

通過商務人物奔跑的形式來表現(xiàn)成長進度，為便于用戶進行成長任務連貫操作設計全鏈路成長插件，提高成長效率。

3、情感化設計：

身份卡片設計：

使用2.5D元素來增加用戶新手操作的實體感受：

五、后臺動效，讓工作臺體驗更流暢

在項目過程中非常感謝成龍、梅郁在設計思路及方法上的引導，感謝團隊中顧佳、蘇林給力的設計支持。

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

作者：金莉

來源：阿里巴巴U一點

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