文章為58商家通項目設(shè)計總結(jié)，一起來學(xué)習(xí)下。

“58商家通”是基于58同城本地服務(wù)業(yè)務(wù)下商家日常經(jīng)營管理的移動端產(chǎn)品。隨著產(chǎn)品的迭代完善，由1.0版本中基于商機線索建立B與C之間的連接方式，轉(zhuǎn)向2.0版本商家主動經(jīng)營管理線上店鋪的概念。

“線上店鋪”是互聯(lián)網(wǎng)時代商家宣傳推廣、獲取客源、了解用戶需求、掌握行業(yè)資訊等經(jīng)營活動的重要集合場地。原有產(chǎn)品架構(gòu)以消息、電話、帖子等信息連接為主的維度展開，未涉及到“店鋪”這個集合場地的概念。

對此，我們對商業(yè)產(chǎn)品的主要業(yè)務(wù)邏輯進行再梳理，充分了解商家的經(jīng)營流程。決定將原App“我的”個人中心頁面調(diào)整為“店鋪”頁面。結(jié)合PM部門以提升核心功能的使用量的產(chǎn)品目標，歸納整理出需要設(shè)計完成的具體任務(wù)：

1. 有層次的處理功能優(yōu)先級，加強核心功能操作引導(dǎo)；
2. 全新店鋪概念的傳遞；
3. 產(chǎn)品拓展性，及不同身份商家所面臨的功能差異性。

需求拆解?

理清功能優(yōu)先級，確定頁面結(jié)構(gòu)?

劃分功能關(guān)聯(lián)性及優(yōu)先級，結(jié)合產(chǎn)品策略制定的服務(wù)重點，梳理頁面結(jié)構(gòu)。

梳理功能層級：我們打散了所有功能，按屬性及用戶的操作頻率進行分組，分別是獲取客源的高頻操作、新用戶必要完成引導(dǎo)操作、日常維護管理的基礎(chǔ)操作。

完善頁面交互：內(nèi)容上保留了基本的店鋪信息，既可以促進商家信息的完善，也能夠傳遞出它的統(tǒng)領(lǐng)頁面的地位。就像實體店面的招牌一樣。另外考慮產(chǎn)品逐步成長完善，平臺會不斷的推出運營活動來提升商家活躍度，因此首屏核心區(qū)域保留了較為突出運營位。

處理頁面節(jié)奏：從原型呈現(xiàn)來看這是一個功能入口眾多的頁面，為了能夠更好的突出產(chǎn)品戰(zhàn)略方向的重點功能，我們通過調(diào)整布局結(jié)構(gòu)，將商家高頻操作的重點功能變?yōu)闄M向雙卡片式布局，加大功能入口的頁面占比，豐富了頁面節(jié)奏。

傳遞店鋪概念?

新的店鋪概念的傳遞，主要是視覺呈現(xiàn)層面上的思考。

頁面色彩的定調(diào)：設(shè)計之初，同PM和UE部們的伙伴，進行充分的溝通，從不同的角度出發(fā)，對于店鋪概念的理解進行頭腦風(fēng)暴。歸納出相應(yīng)的視覺關(guān)鍵詞：貼近生活、溫暖、好彩頭。

貼近生活：用戶群體特征是生活服務(wù)領(lǐng)域的商家。

溫暖：希望為商家打造生意經(jīng)營的助手管家，而非一款冷冰冰的工具產(chǎn)品。

好彩頭：商家的直觀目的是獲取收益的最大化。希望產(chǎn)品貼合商家生意興隆的心理預(yù)期。

頁面氛圍的渲染：通過圖片抽離顏色的方式，將關(guān)鍵詞可視化，確定了相應(yīng)的主輔色。原型頭部的店鋪信息區(qū)有統(tǒng)領(lǐng)頁面的作用，也奠定了頁面的色彩氛圍。處理上采用大面積的主色漸變，結(jié)合懸浮的同色系圖案，保證不影響文字閱讀的前提下 ，豐富畫面空間感和質(zhì)感。

功能入口的差異化處理：功能入口的處理上主要分為兩個部分，獲取客源：商家使用頻率最高的操作（即前面提到的調(diào)整為橫向卡片布局的部分）。新手引導(dǎo)/日常操作：新用戶必要引導(dǎo)教育和老用戶的日常維護相對低頻的操作功能。

獲取客源部分是商家獲得生意的主動操作功能，并且原型里增加了該功能頁面占比。那么，視覺處理上采用低飽和度較為溫和的色塊手法。沒有用過強的刺激色彩引導(dǎo)點擊。而是照顧到頁面的整體平衡感。

新手引導(dǎo)和日常維護icon的差異化處理?！靶率直匾δ堋币曈X上需要加強引導(dǎo)的部分，手法上采用色塊化的面性圖標，沿用微漸變的方式，來增強視覺沖擊力，并考慮將這一部分操作任務(wù)化，強調(diào)已完成和未完成的狀態(tài)?！叭粘９ぞ卟糠帧惫δ芊N類繁多，但操作優(yōu)先級相對較低。處理時重點考慮模塊的整體感。色彩上將主色飽和度做了適當降低；形式上統(tǒng)一采用3px粗細的線條兩端全圓角；在整體頁面中既不單薄也不過于笨重。

以上，通過不同形式的視覺處理方式，來營造新店鋪的氛圍，以及有層次的處理不同優(yōu)先級的功能入口。實現(xiàn)了設(shè)計需要完成的前兩項任務(wù)。接下來是考慮到商家通用戶群體的多樣性，以及產(chǎn)品后期的可拓展性。

產(chǎn)品拓展性及功能差異性?

商家通本身處于成長階段，產(chǎn)品部門會不時的迸發(fā)出新的功能進行驗證。以及，商家通的用戶群體依據(jù)身份（VIP和非VIP）的不同在功能權(quán)限上有很大的差異性。考慮到這些，我們決定整體設(shè)計采用可自由組合的卡片式布局，實現(xiàn)千人千面的模塊化方案。這樣既保障了不同身份的使用者都能有較好的產(chǎn)品體驗，又為產(chǎn)品隨時調(diào)整策略提供便利，同時也將開發(fā)成本將到最低。

設(shè)計結(jié)果?

店鋪首頁改版上線后各方面數(shù)據(jù)均有不錯的發(fā)展趨勢。PM訴求的核心功能訪客足跡、放心服務(wù)、店鋪動態(tài)等較之前均有大幅度提高。其中，放心服務(wù)帶來直接收入增長3倍多。訪客足跡超出預(yù)期30%多，功能使用率占到50%以上。另外，店鋪基礎(chǔ)信息外漏后，信息完善，Logo上傳等起到了很大的促進作用。為建立商家差異化等級體系起到積極作用。

反思總結(jié)?

不難看出店鋪首頁改版達到可觀的預(yù)期效果，為商家搭建起一個經(jīng)營管理店鋪的基礎(chǔ)線上平臺。但我們也意識到，當商家對于店鋪概念不在陌生時，基礎(chǔ)信息模塊占比將造成空間上的浪費，后期將為戰(zhàn)略級的商家等級體系作出更妥善的設(shè)計。

另外，一個完善的店鋪所要走的路還很長，需要有效的監(jiān)管商家的服務(wù)水平，從平臺的角度出發(fā)獎優(yōu)懲劣，確保優(yōu)質(zhì)商家的權(quán)益得以保證。接下來我們整個團隊將共同努力，不斷的優(yōu)化產(chǎn)品體驗，帶給商家一個好用，易用，不斷提升收益的商家通。

作者：王帥，視覺設(shè)計師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗設(shè)計中心（微信公眾號@58UXD），作者@王帥

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