“在互聯(lián)網(wǎng)公司中，設(shè)計(jì)師搞事伙伴主要有產(chǎn)品經(jīng)理、運(yùn)營(yíng)、技術(shù)，常規(guī)合作流程為產(chǎn)品、運(yùn)營(yíng)輸入需求，設(shè)計(jì)師以自身的美感品位創(chuàng)意才華巧技……輸出設(shè)計(jì)方案，如果方案有一些撩撥用戶的特效和細(xì)節(jié)，可能還得端上星巴克求技術(shù)哥哥幫忙實(shí)現(xiàn)。在這種習(xí)以為常的合作流程中，我們既難以決定需求的有無，也缺乏驅(qū)動(dòng)下游技術(shù)的抓手，角色較被動(dòng)。本文以挑貨的改版，談設(shè)計(jì)思維破局及特色價(jià)值建立的一次過程。

01/

業(yè)務(wù)概況

在1688業(yè)務(wù)大盤中，老挑貨是長(zhǎng)圖文為主的市場(chǎng)，買家通過看平臺(tái)精選的長(zhǎng)圖文內(nèi)容找貨。隨著業(yè)務(wù)的蓬勃，挑貨變?yōu)榛�于買賣家關(guān)系的導(dǎo)購(gòu)市場(chǎng)，買家通過看與其有關(guān)系的商家上新、活動(dòng)、直播、爆款等動(dòng)態(tài)來找貨。

由于挑貨業(yè)務(wù)定位和欄目?jī)?nèi)容較老版都發(fā)生了變化，故設(shè)計(jì)上對(duì)不同類型內(nèi)容做差異化處理，讓買家認(rèn)知到各類型的商家動(dòng)態(tài)都在挑貨。

新挑貨上線后，UV 較之前翻倍，多項(xiàng)關(guān)鍵業(yè)務(wù)指標(biāo)也都超出預(yù)期。這為商家主動(dòng)在挑貨發(fā)內(nèi)容提供了動(dòng)力，也吸引了平臺(tái)橫向業(yè)務(wù)積極與挑貨合作。

02/

破的意識(shí)

如果設(shè)計(jì)師把角色定位為完成上游產(chǎn)品、運(yùn)營(yíng)需求的資源，那么在新挑貨表現(xiàn)尚可的情況下，接下來要做的需求可以預(yù)見：基于現(xiàn)有卡片，改造一份增加商家文案后的卡片；根據(jù)橫向業(yè)務(wù)輸入的需求，基于已有的卡片樣式，繼續(xù)新增卡片類型。

踮起腳看，如果這會(huì)兒設(shè)計(jì)師選擇被動(dòng)等上游提需求，不主動(dòng)做點(diǎn)不同，挑貨將迎來三層「泥潭式」的重。

1. 第一重，用戶將負(fù)擔(dān)不必要的閱讀成本

目前卡片已有5種類型，卡片加入商家文案后，信息層級(jí)將更臃腫，卡片類型預(yù)計(jì)到10種。橫向業(yè)務(wù)不定期的需求輸入，卡片類型還將持續(xù)增加。而看線上數(shù)據(jù)，用戶基于內(nèi)容類型做篩選的點(diǎn)擊占比極低，反映出內(nèi)容卡片做的差異化表達(dá)，為用戶帶來的價(jià)值并不大，反而增加了閱讀負(fù)擔(dān)。

2. 第二重，內(nèi)部協(xié)作流程長(zhǎng)，資源投入大

橫向業(yè)務(wù)輸入需求到挑貨的產(chǎn)品和運(yùn)營(yíng)，產(chǎn)品經(jīng)理和運(yùn)營(yíng)要和橫向業(yè)務(wù)磨，類似于商家「鎮(zhèn)店之寶」、「私密商品」、「優(yōu)惠券」等內(nèi)容是否要在挑貨做。上游業(yè)務(wù)磨清楚后，召集橫向業(yè)務(wù)的產(chǎn)品經(jīng)理、運(yùn)營(yíng)、挑貨的設(shè)計(jì)、技術(shù)開需求評(píng)審會(huì)，設(shè)計(jì)排期出方案，之后設(shè)計(jì)評(píng)審再技術(shù)排期，開發(fā)完成后上線——而這個(gè)流程，還只是新增一種內(nèi)容卡片。

3. 第三重，技術(shù)基于業(yè)務(wù)邏輯開發(fā)，卡片類型越多，性能越難保障

挑貨2.0改版時(shí)，技術(shù)對(duì)五種卡片單獨(dú)進(jìn)行開發(fā)，后續(xù)每新增一種卡片類型，都需投資源新開發(fā)。且卡片類型越多，頁(yè)面加載速度越慢。挑貨幀率一度在46徘徊，用戶瀏覽挑貨時(shí)，已經(jīng)感受到明顯的卡頓，若繼續(xù)新增卡片類型，挑貨可能會(huì)卡得讓用戶不愛這個(gè)老關(guān)系市場(chǎng)。

注：幀率為幀的位圖圖像連續(xù)出現(xiàn)在顯示器上的頻率（速率），指一秒內(nèi)的刷新頻率，在線上場(chǎng)景中，60是較完美狀態(tài)，低于50用戶將感受到卡頓。

局面將很「泥潭」，設(shè)計(jì)師如何來破？

設(shè)計(jì)師開始給自己加戲，為需求方代言，給自己提需求了。

4. 盤點(diǎn)卡片內(nèi)容層級(jí)

由于內(nèi)容類型做了差異化表達(dá)，不同內(nèi)容卡片上，相同信息層級(jí)也分出多個(gè)樣式，且業(yè)務(wù)即將新增商家文案及優(yōu)惠券，這將使卡片多出更多信息層級(jí)及樣式。

卡片內(nèi)容如圖所示：

5. 重理信息框架

盤點(diǎn)卡片信息層級(jí)及優(yōu)先級(jí)，以內(nèi)容來源+內(nèi)容描述+內(nèi)容來收口。

盤點(diǎn)信息后，基于內(nèi)容來源+內(nèi)容描述+內(nèi)容的邏輯做信息的刪減融合。

       +內(nèi)容來源區(qū)：在商家信息基礎(chǔ)上+內(nèi)容發(fā)布時(shí)間+買賣家關(guān)系描述字段；

       +內(nèi)容描述區(qū)：將活動(dòng)描述和商家文案融合，簡(jiǎn)化活動(dòng)類型及時(shí)間描述，使之適配于所有內(nèi)容卡片；

       +內(nèi)容區(qū)：內(nèi)容區(qū)圖片展示從4種收口為2種。

6. 基于視覺框架組裝卡片的設(shè)計(jì)

將收口后的信息層級(jí)抽象為視覺框架，并列出框架內(nèi)的具體內(nèi)容�；�于此框架進(jìn)行開發(fā)，可靈活組裝出各類型動(dòng)態(tài)，而非之前以單張卡片為單位進(jìn)行設(shè)計(jì)及開發(fā)。同時(shí)，這種基于框架組裝生成卡片的方式，也為承接未來的業(yè)務(wù)需求留足了擴(kuò)展性。

       +「需求盡管來，都可以用新的信息框架組裝。」

       +「假設(shè)有組不出來的特殊需求呢？」

       +「…新增框架」

以上只是設(shè)計(jì)師給自己加的戲，還得游說上下游的搞事伙伴，把戲落實(shí)進(jìn)用戶的屏幕。

先搞定上游，和產(chǎn)品經(jīng)理及運(yùn)營(yíng)重點(diǎn)講「三重泥潭」的第一重和第二重，同時(shí)把以上思考及方案作推銷，產(chǎn)品經(jīng)理及運(yùn)營(yíng)聽完很認(rèn)同，收下方案。

再搞定下游（當(dāng)然也可以等產(chǎn)品經(jīng)理和運(yùn)營(yíng)去向技術(shù)提需求，但我沒這樣做），和技術(shù)哥哥們聊，重點(diǎn)講了三重泥潭的第一重和第三重，同時(shí)把以上思考及方案作推銷，技術(shù)哥哥聽完很感動(dòng)，因?yàn)橹鞴芙o他的核心業(yè)務(wù)指標(biāo)是，把挑貨徘徊在45的幀率提上去，新的框架設(shè)計(jì)思路，利于提高挑貨的性能。

技術(shù)基于新的信息框架進(jìn)行開發(fā)，靈活組裝成多款內(nèi)容卡片，產(chǎn)品經(jīng)理和運(yùn)營(yíng)也可以基于這種輕量級(jí)卡片，靈活地和橫向業(yè)務(wù)合作。當(dāng)然，最大的價(jià)值是為用戶帶來了更簡(jiǎn)潔流暢的內(nèi)容呈現(xiàn)。

03/

如何立？

破的事情做了。從設(shè)計(jì)師的角色里踮起腳預(yù)見問題，主動(dòng)給出解決方案并推動(dòng)落地了，但設(shè)計(jì)師的特色價(jià)值又立在哪里呢？比如手機(jī)淘寶的「微淘」，也是用戶關(guān)注店鋪，集中看內(nèi)容的場(chǎng)景，如何立出1688挑貨和微淘的區(qū)別呢？

1688和淘寶的區(qū)別是 B 和 C 的區(qū)別，具體 BC間的差異，各位可移步《從買家差異看B類&C類電商體驗(yàn)設(shè)計(jì)創(chuàng)新》，本文僅拎出1688的挑貨與手機(jī)淘寶的微淘間細(xì)節(jié)點(diǎn)的不一樣（并不拎出微淘和挑貨間有什么不一樣）。

設(shè)計(jì)思維要立挑貨區(qū)別于微淘的B類特色了！

1. 以日歷立「商機(jī)盡在掌握」的B類特色

C類買家逛微淘主要找個(gè)人感興趣的，而逛挑貨的「買家」很可能是商人，他們是要從挑貨中，挑出好貨批發(fā)回去做生意賺錢。對(duì)來挑貨的B類買家而言，挑貨是基于老關(guān)系找商機(jī)、鎖定商機(jī)的重要陣地。此外，挑貨里的店鋪活動(dòng)、伙拼、直播等動(dòng)態(tài)有時(shí)間范圍，也支持買家通過「設(shè)置提醒」鎖定商機(jī)。

所以在欄目的頭部設(shè)計(jì)上，選擇了日歷的形式，承載每日上新和買家「設(shè)置提醒」鎖定好的商機(jī)，內(nèi)容篩選及內(nèi)容卡片的「設(shè)置提醒」也都以日歷icon 聯(lián)動(dòng)表達(dá)，營(yíng)造挑貨欄目「我的商機(jī)盡在掌握」的場(chǎng)景特色。

2. 基于B類特點(diǎn)的商家名稱備注功能

做 B類買家線下調(diào)研時(shí)，我們發(fā)現(xiàn)買家逛1688，很難通過商家名定位和識(shí)別「這是哪位供應(yīng)商」，什么原因呢？

不同于淘寶短且易記的店鋪名，1688的商家/公司名常有一二十個(gè)字，買家很難記�。】戳艘埠茈y認(rèn)出這是哪家供應(yīng)商來著？

此外，買家想采購(gòu)時(shí)，有時(shí)候也會(huì)習(xí)慣加微信或直接電話聯(lián)系商家。挑貨作為1688基于關(guān)系的市場(chǎng)，讓買家準(zhǔn)確定位出動(dòng)態(tài)來自于哪個(gè)商家，太重要了。所以我們希望支持 B類買家備注商家名稱、電話、權(quán)益說明等內(nèi)容，讓買家通過備注商家信息及關(guān)系描述字段準(zhǔn)確識(shí)別并定位商家，讓買家對(duì)挑貨這一老關(guān)系場(chǎng)有更強(qiáng)的感知。

3. 私密商品增強(qiáng)表達(dá)

通常來說，C類用戶在淘寶上買了好東西，會(huì)想分享給自己的親朋好友。而B類買家在1688發(fā)現(xiàn)了好東西，是要批發(fā)回去賺錢的，巴不得除了他就沒更多人知道，所以 B類市場(chǎng)，有做私密的空間。在挑貨這種基于老關(guān)系的市場(chǎng)，商家愿意為頭部買家透露私密商品，為了讓買家不辜負(fù)商家對(duì)他敞開的私密，我們對(duì)挑貨「私密商品」進(jìn)行了增強(qiáng)表達(dá)，加入撩撥用戶的特效和細(xì)節(jié)。

4. 改版結(jié)果

通過「破」和「立」的這一系列動(dòng)作，助力增強(qiáng)了挑貨這一基于關(guān)系的市場(chǎng)在買家端的心智感知；技術(shù)基于新的信息框架開發(fā)，挑貨的幀率從之前的45.69提升至54.36，用戶瀏覽不再感覺到技術(shù)原因的卡頓；引導(dǎo)進(jìn)店UV及引導(dǎo)進(jìn)店率等關(guān)鍵業(yè)務(wù)指標(biāo)也有一定提升。

結(jié)語(yǔ)

以上就是挑貨改版過程中，個(gè)人設(shè)計(jì)思維「破」和「立」的運(yùn)用，希望對(duì)大家有益處。最后想起一位哲人曾說的 「世上沒有白走的路，每一步都算數(shù)」，想分享自己初入職時(shí)遇到過兩個(gè)小事：

運(yùn)營(yíng)提需求，要在一個(gè)并不貼合用戶預(yù)期的場(chǎng)景里「加個(gè)吸人眼球的banner」，當(dāng)時(shí)求助主管，他莞爾一笑「這里流量大，運(yùn)營(yíng)只是想有做運(yùn)營(yíng)的空間，不一定是 banner，有很多開鑿運(yùn)營(yíng)空間的方式啊�！刮阴�醐灌頂，輸出了更利于做運(yùn)營(yíng)的其他方案，運(yùn)營(yíng)同學(xué)看到方案后驚嘆「你你你，你太懂用戶了，設(shè)計(jì)得真好！」

另一次評(píng)審，技術(shù)挑戰(zhàn)設(shè)計(jì)的某處細(xì)節(jié)，評(píng)審后我沮喪我懊惱，主管又莞爾一笑，「設(shè)計(jì)可以的，不用太在意他說的，他不是覺得這里設(shè)計(jì)得不好，而是因?yàn)殚_發(fā)起來成本比較大」。

寫這篇總結(jié)前，并沒有認(rèn)為這兩個(gè)事對(duì)自己有什么影響，寫到這里才忽然意識(shí)到，也許第一個(gè)事情告訴我，設(shè)計(jì)思維可以破局，第二個(gè)事情告訴我，設(shè)計(jì)思維可以立穩(wěn)價(jià)值。感謝各位閱讀，希望讀本文不是「白走的路」，未來能「算數(shù)」。

作者：阿里巴巴_B2B_UED，公眾號(hào)：阿里巴巴UED