起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識電商工作后臺首頁的商業價值重構與產品化設計
文章以買賣家工作臺首頁設計為例，來介紹下電商網站后臺首頁的整體設計思路。
電商網站一般分為前臺導購及后臺管理兩方面，通常由買家及賣家兩種角色組成。大部分的工作是在后臺完成，涉及到各類管理系統，保障日常工作順利運行。
后臺產品設計因其邏輯復雜、業務繁多、專業性強具有較大挑戰性，在很多情況下設計師的發揮受到較大限制。尤其是B類后臺產品的設計需要對公司業務擁有更全方位的認識，加大了其設計難度。做為設計師如何重新定義后臺商業價值？如何進行產品化設計思考？下面以買賣家工作臺首頁設計為例，來介紹下整體設計思路。
買賣家工作臺是什么？
買賣家工作臺是基于1688大數據為企業提供生意決策、日常工作管理的中小企業操作管理后臺。
設計之前：思考在最前方，與業務一起確定產品方向
轉變思維方式：由被動接受到主動提案
做為體驗設計師需要對整個產品負責，在產品改造前期提前與PD對焦思路，全鏈路思考主動提出對產品的整體想法，而非到某項交互功能再介入，或者是某個頁面視覺表現再進行。對焦的過程中也發現項目的諸多難點：涉及B2B所有業務，風險大，影響范圍廣。為保證產品方向的準確性需要與業務方進行多次溝通討論及產品匯報。 產品方向確定基本流程： 思路對焦——方案討論——方案設計——產品匯報——確定方向。
商業價值重構三步走：
一、了解定位，轉換視角
1、了解產品整體定位： 在進行商業價值重構前充分了解產品定位。以工作臺為例，今年1688針對B2B市場提出了人、貨、場的戰略。人：幫助引流，貨：提升品質，場：提升能力，做為1688用戶的核心工作場景-工作臺成為重要場景之一，需要結合新戰略進行全新升級，加強人在后臺場中的匹配效率。
2、從業務視角轉變為用戶視角：在設計對焦過程發現，現有版本融入了較多內部運營工作邏輯，體現各個部門的利益及立場。比如網站多了一塊新業務需要向用戶推廣，就會在后臺中增加一個介紹版塊讓用戶區體驗，缺少用戶去體驗功能的場景及動機。偏向一個流量分發為中心的核心陣地。業務視角展現在用戶層面比較難理解。做為B類用戶更多的是從做生意的角度來使用后臺，需要做一層轉化才能到達認知，一定程度上影響了用戶的使用效率。因此需要翻譯成用戶能理解的產品表達。
二、統一戰線，建立目標
與產品、運營統一戰線，建立目標。將一個流量分發為中心的核心陣地打造成以用戶服務為中心的產品。
三、明確關系，構建大圖
明確商業價值的構成者，做為平臺一共有三方：平臺方、買方及賣方。完整的商業價值構建需要聯動三方一起共進。工作臺以阿里大數據為中心，網站平臺小二通過行業市場來服務我們的買家，同時通過商家培育體系來服務我們的賣家幫助商家成長，商家通過自我成長提升自身運營能力來服務好買家，構建出穩固的鐵三角服務生態大圖。通過建立價值生態場景，幫助業務打通上下游市場，讓小二更好的服務買家，促使商家自運營。
明確商業價值后，進行產品化設計
一、挖掘用戶使痛點
1、定性：采用敏捷式共建用研，在有限制時間內，獲得豐富有效信息
首先談下用研方式，傳統的用研從制定訪談計劃、問卷設計、用戶邀約、執行調研、分析數據到撰寫報告，整個過程基本由用研同學獨立完成，在項目時間比較緊張的情況下會受到限制。因此我們采用了敏捷式共建用研，在臨時機動的情況下獲取用戶痛點的方式，有幾個小tips可供參考：
A、項目組共建用研：打破流程限制，在與用研同學確定好調研提綱后，發動項目組的成員運營、開發、測試等共同參與調研；B、靈活邀約客戶：借助園區商家活動、會議等在中間抽取時間機動調研，在中午休息時間就訪談了近15位客戶；
C、訪談結果及時產出：后項目組成員當即進行調研總結及改進建議，大大提高了訪談的輸出效率，也提高了項目成員的對于用戶的整體感知。用戶調研不在于形式，在于是否通過有效方式得到想要的信息.優勢：用戶量大，意愿大，調研成本低 風險：目標用戶不穩定、用戶經營狀態感知偏弱。
定性調研發現：
買家：主要工作行為是采購管理和銷售管理，小買家不會進行進銷存管理，進銷存管理工具不能同步1688信息，查看物流不方便、不能看到銷售數據情況，交易過的公司公司使用量低等情況。
賣家：主要使用群體為公司操作員基本每天都會進入后臺操作，主要操作行為查看店鋪數據、進行交易訂單管理、商品管理、店鋪管理、營銷活動管理。核心關注曝光、訪客及轉化情況。調研中發現用戶在后臺操作的目標感模糊，例如用戶反饋：剛開了店鋪，后面要怎么弄，完全沒方向！別人都是怎么做的，沒有引導性；購買誠信通僅為了標識，無線上行為不知道要怎么做？沒有把線下用戶拉到線上等問題。
2、定量：通過數據分析發現用戶使用都比較集中，部分模塊使用率較低，有效信息少；長尾效應明顯，交易鏈路為買賣家高頻行為，抓手欠缺。
二、確定設計目標及策略
基于用戶的行為差異及訴求差異，制定不同的設計目標及策略。工作臺結合買賣家做了版本區分，分為買家版及賣家版
買家版設計目標：讓買家擁有精細化的采銷服務，提高進貨效率
設計策略：
- 精簡化：信息架構場景化，內容模塊調整；
- 數據化、個性化：通過用戶行為數據、關系數據提供個性化服務，接入第三方服務滿足買家下游需求；
- 互動性：平臺與買家、買家與賣家間的互動，進行服務觸達，關系顯性化，從而促進商業價值最大化。
賣家版設計目標：幫助商家更好的自我成長，提高自運營能力
設計策略：
- 精簡化：信息架構場景化，快捷入口調整；
- 數據化自運營：分類管理，結合用研中了解的用戶核心場景：管交易、管店、管貨、管客及管活動進行模塊分類；
- 賣家生命周期管理：建立用戶成長激勵體系，通過用戶進階分層明確成長目標，促使用戶成長。 策略圖：
三、交互階段信息架構細化設計，建立模塊產品化交互設計Guideline
信息架構核心抓手有三：
- 導航分類場景化：以賣家版為例，在導航區域核心體現賣家四大工作場景：管交易、管店、管貨、管客及管活動。
- 內容場景數據導向化：中間內容區域以總體成長情況和場景數據情況進行導向性設計，提供數據分析及行動操作。明確用戶核心關注內容及操作。
3.模塊設計產品化：建立模塊交互設計Guideline 為保障后續新增模塊價值傳遞的統一性，建立模塊產品化交互設計Guideline。 對所有模塊進行了功能分類，主要分為兩種： 1、任務服務模塊： 任務服務模塊設計需要明確：模塊是什么？（業務視角轉為用戶視角）目標&現狀，怎么做及可獲得什么服務。 2、消息模塊：傳遞服務是什么？怎么做？
舉例：客戶管理模塊
- 模塊是什么？：店鋪客戶管理
- 目標&現狀：店鋪的訪客、潛在客戶、成交客戶及流失客戶情況
- 怎么做？：進行客戶召回
- 可獲得什么？：客戶數量增加，客戶管理類工具
交互設計微創新：功能地圖設計
工作臺中的功能入口眾多，為方便用戶查找及使用，對功能地圖進行優化。統一工作場景分類認知與導航分類保持一致，減少界面中分類層級，用戶點擊功能地圖后可進行自定菜單設置，將自己常用的入口釘到左側菜單中。
優化前：
優化后：
四、視覺設計無邊界，尋找核心發力點
通常一個產品進入視覺設計就開始YY各種品牌元素及表現感知方面的設計，而作為后臺產品因其偏重操作，在視覺設計前，需要宏觀的進行再思考，用戶通過感知可以帶來什么價值？在工作臺視覺設計前進行了進行感知升級思考，建立感知升級閉環貫穿在整個視覺設計環節，閉環全圖：
視覺設計核心發力點提?。?在對整體閉環有一定認知后，進行感知定位通過與項目組成員共建提取工作臺感知云標簽，提取感知關鍵詞：簡單、清晰及高效。在視覺層面主要通過風格定義、特色模塊設計及情感化設計來發力。
1、風格定義：對B2B供應鏈管理類后臺從顏色、圖標、控件、模塊等方面進行視覺層面競品分析，同時了解時下主流產品設計趨勢如微軟、facebook，IOS11最新視覺風格。發現以下特點：
- 形：去裝飾，以內容為中心，去掉了多余的裝飾元素
- 色：少顏色，通過大小對比來突出主體，減少顏色
- 質：扁平化設計，微漸變
- 構：減線條，弱化線條分割，通過留白來區分空間，輕劃分：巧用投影做區塊劃分 綜合以上分析進行風格定義設計
買家版：
賣家版：
風格細節：
導航優化：為保障用戶認知的統一性，沿用了老版本中買家橙色，賣家藍色的顏色特征。導航設計中縮減了顏色在導航中的比重，通過版本字體來區分。簡化老版本中當前狀態的框選樣式，通過TAB短線來表示當前狀態。
內容再設計：老版本中代辦模塊信息內容密集識別困難，操作性較低，通過信息名片卡片式設計待辦歸類整理，突出核心內容
化繁為簡：現有頁面中模塊很多用線條來區分，信息量比較多的情況下，頁面相對復雜，因此弱化線條分割，通過留白來區分空間
圖標設計：對后臺產品中的圖標進行了功能分類：說明性圖標、權益性圖標。后臺圖標設計需要控制其表現力度，因此在設計上通過局部細節點綴來表現。權益類圖標與前臺門洞類做區分，減少顏色運用，結合買賣身份做橙、藍底色區分，使用簡易面狀的形式來凸顯特征。
2、特色模塊設計，以成長模塊為例
模塊設計背景：根據商家在平臺的七項能力，統一分層體系，促進商家自運營，從而為買家提供優質貨源和采購體驗
設計方向：為幫助商家在平臺更好的成長，全鏈路思考用戶成長環節。在工作臺中的透傳中，使用商務跑的方式來激勵用戶，并給予成長引導 基于模塊設計Guideline明確：
- 模塊是什么？：我的成長
- 目標&現狀：成長能力得分
- 怎么做？：成長任務
- 可獲得什么？：成長權益
對模塊進行劃分：
成長感知定位，主要通過兩方面，提取物像特征，提取表現形式
通過商務人物奔跑的形式來表現成長進度，為便于用戶進行成長任務連貫操作設計全鏈路成長插件，提高成長效率。
3、情感化設計：
身份卡片設計：
使用2.5D元素來增加用戶新手操作的實體感受：
五、后臺動效，讓工作臺體驗更流暢
在項目過程中非常感謝成龍、梅郁在設計思路及方法上的引導，感謝團隊中顧佳、蘇林給力的設計支持。
產品化設計任重道遠，是一個不斷優化迭代的過程，還需要聯合各方力量一起合力，共同改進。在新形勢下，設計師已不在是接需求的資源方，而是產品共同的締造者。需要利用一切能夠改善產品的方式，用我們的全部智慧和能力，為我們的用戶服務。
作者：金莉
來源：阿里巴巴U一點
題圖來自PEXELS，基于CC0協議
很棒
??
好贊啊！
說的非常好。