設(shè)計(jì)實(shí)戰(zhàn)案例！談?wù)劸W(wǎng)易嚴(yán)選企業(yè)購(gòu)的交互設(shè)計(jì)

網(wǎng)易UEDC – 柴蒙：企業(yè)采購(gòu)是現(xiàn)今市場(chǎng)經(jīng)濟(jì)下一種最重要最主流的采購(gòu)情勢(shì)，其特點(diǎn)是大批量采購(gòu)商品。傳統(tǒng)的企業(yè)采購(gòu)體例不可避免地會(huì)帶來(lái)如回扣、服從低、采購(gòu)過(guò)程不透明等諸多題目。

現(xiàn)今的主流電商網(wǎng)站或品牌在知足廣大消耗者的同時(shí)，都細(xì)分出企業(yè)采購(gòu)的特別場(chǎng)景——設(shè)立企業(yè)采購(gòu)網(wǎng)站，如天貓、京東、小米等。因?yàn)楦骷译娚痰亩ㄎ徊煌?，在網(wǎng)站設(shè)計(jì)的體現(xiàn)與邏輯架構(gòu)也不盡雷同。

建立企業(yè)采購(gòu)網(wǎng)站這種細(xì)分運(yùn)營(yíng)，正是“信息傳遞要正確”的體現(xiàn)，能為C端和B端的用戶(hù)都帶來(lái)最友愛(ài)的體驗(yàn)。必要細(xì)致的是企業(yè)采購(gòu)并不是面向廣大通俗用戶(hù)的，由于它的需求與使用場(chǎng)景比較特別，例如企業(yè)采購(gòu)的商品數(shù)量大、訂單金額大，還有會(huì)涉及到一些梯度扣頭、分期付款、代下單等等采購(gòu)的營(yíng)業(yè)流程。

那么，如何設(shè)計(jì)網(wǎng)易嚴(yán)選企業(yè)購(gòu)的網(wǎng)站呢？可以與網(wǎng)易嚴(yán)選主站設(shè)計(jì)的一樣嗎？照舊有所區(qū)別呢？

讓我們回到原點(diǎn)去看這個(gè)題目。

一. 解析使用場(chǎng)景

用戶(hù)是誰(shuí)？使用環(huán)境如何？

企業(yè)采購(gòu)人員（背后是他們的老板）。

正是由于我們的用戶(hù)會(huì)在上班時(shí)間，在辦公室使用電腦來(lái)完成他們的采購(gòu)工作，所以網(wǎng)易嚴(yán)選企業(yè)購(gòu)優(yōu)先做了網(wǎng)站，而不是APP。

用戶(hù)的目標(biāo)是什么？他們盼望如何？

我們通過(guò)訪談了解到企業(yè)采購(gòu)人員盼望可以高效地買(mǎi)到性?xún)r(jià)比高的商品。這些商品可能是給企業(yè)員工發(fā)的獎(jiǎng)品福利，可能是奉送給客戶(hù)的禮品，也可能是采購(gòu)給企業(yè)員工日常使用的辦公用品等等。

分外是企業(yè)采購(gòu)如許的大宗訂單，若是能用較少的成本，獲得員工的寫(xiě)意、客戶(hù)的認(rèn)可、老板的贊賞，還進(jìn)步了采購(gòu)人員的工作服從，同時(shí)避免了可能存在的回扣等題目，對(duì)于企業(yè)來(lái)說(shuō)是十分有利的。

我們?cè)趺礊橛脩?hù)提供他們想要的服務(wù)？

企業(yè)采購(gòu)一樣平常商品數(shù)量大、訂單金額大，還有會(huì)涉及到一些梯度扣頭、分批付款、代下單等特別營(yíng)業(yè)流程，我們將結(jié)合這些營(yíng)業(yè)流程提供流暢購(gòu)物體驗(yàn)，使得用戶(hù)在采購(gòu)商品的過(guò)程中是愉悅并且高效的。

二. 確立設(shè)計(jì)目標(biāo)

通過(guò)歸納用戶(hù)群和我們自身的特征，并與營(yíng)業(yè)目標(biāo)相結(jié)合，得出網(wǎng)易嚴(yán)選企業(yè)購(gòu)的設(shè)計(jì)目標(biāo)，下文將針對(duì)網(wǎng)易嚴(yán)選企業(yè)購(gòu)主頁(yè)設(shè)計(jì)進(jìn)行探究：

如何確保用戶(hù)快速知道如何使用網(wǎng)站？

即看一眼就能曉暢這個(gè)網(wǎng)站有什么商品、怎么去購(gòu)買(mǎi)，也可以快速找到他們想去的地方，比如欣賞某一類(lèi)商品、搜索某個(gè)商品、或者去申請(qǐng)企業(yè)認(rèn)證。就像iPhone老用戶(hù)換iPhone8的時(shí)候，不再必要閱讀它的說(shuō)明書(shū)就可以下載APP并使用它們。

所以網(wǎng)易嚴(yán)選企業(yè)購(gòu)的網(wǎng)站在設(shè)計(jì)上必要吻合用戶(hù)風(fēng)俗與認(rèn)知：與網(wǎng)易嚴(yán)選及其他主流電商網(wǎng)站，有相似的地方，但也存在一些差異（將在下文細(xì)述）。

如何向用戶(hù)傳遞品牌特色：“好的生活，沒(méi)那么貴”？

通過(guò)網(wǎng)站清晰的信息架構(gòu)、使用高質(zhì)量的商品圖片、UI設(shè)計(jì)凸起品質(zhì)感、網(wǎng)頁(yè)的通透留白、來(lái)表現(xiàn)這種細(xì)膩、實(shí)用的感覺(jué)。同時(shí)在主頁(yè)的每個(gè)商品下凸起制造商信息或是商品描述，作為賣(mài)點(diǎn)露出，再次強(qiáng)調(diào)了商品的高質(zhì)量。

△ 列表商品坑位

怎樣進(jìn)步轉(zhuǎn)化率?

轉(zhuǎn)化率重要有兩個(gè)指標(biāo)，一是申請(qǐng)企業(yè)認(rèn)證；二是下單采購(gòu)。

企業(yè)認(rèn)證是企業(yè)采購(gòu)必不可少的一個(gè)緊張環(huán)節(jié)，因?yàn)槠髽I(yè)認(rèn)證必要填寫(xiě)較多的信息，諸如企業(yè)業(yè)務(wù)執(zhí)照號(hào)等一系列企業(yè)相干信息，門(mén)檻相對(duì)較高，那么如何促進(jìn)用戶(hù)自動(dòng)去完成申請(qǐng)認(rèn)證呢？

此處在設(shè)計(jì)上通過(guò)利益點(diǎn)去吸引用戶(hù)一步步完成資料提交與購(gòu)買(mǎi)：

1.在用戶(hù)未登錄時(shí)，會(huì)在首頁(yè)的商品坑位下方展示“登錄查看企業(yè)扣頭 ” 來(lái)吸引用戶(hù)登錄；在用戶(hù)登錄后，若未申請(qǐng)企業(yè)認(rèn)證的，會(huì)表現(xiàn) “認(rèn)證后查看企業(yè)扣頭 ” ；在通過(guò)企業(yè)認(rèn)證后，則表現(xiàn) “企業(yè)專(zhuān)享X折起 ” 。

△ 首頁(yè)商品坑位

2.在版頭右側(cè)的輔助信息模塊上的黃色按鈕文案：”提交企業(yè)信息”也會(huì)隨著認(rèn)證狀況的改變而轉(zhuǎn)變，而且它與企業(yè)購(gòu)的營(yíng)業(yè)特色介紹放在一路，更能刺激用戶(hù)去申請(qǐng)認(rèn)證。

△ 導(dǎo)航-輔助信息模塊

在用戶(hù)通過(guò)企業(yè)認(rèn)證后，通過(guò)高質(zhì)量的商品和較高的性?xún)r(jià)比吸引用戶(hù)現(xiàn)實(shí)下單，就網(wǎng)頁(yè)的指導(dǎo)來(lái)說(shuō)，從商品詳情的設(shè)計(jì)、首頁(yè)的場(chǎng)景分類(lèi)的運(yùn)營(yíng)、精選熱賣(mài)的指導(dǎo)去增長(zhǎng)轉(zhuǎn)化率。

三. 表現(xiàn)交互設(shè)計(jì)的價(jià)值

主頁(yè)的設(shè)計(jì)對(duì)于網(wǎng)站來(lái)說(shuō)至關(guān)緊張，由于它不僅僅是一個(gè)入口，它更是讓用戶(hù)看到本身正在探求的東西。在主頁(yè)設(shè)計(jì)之中，首屏的設(shè)計(jì)尤為緊張，而導(dǎo)航又是首屏里的緊張?jiān)刂弧?/p>

信息架構(gòu)

在主頁(yè)的信息架構(gòu)上來(lái)說(shuō)，網(wǎng)站主頁(yè)信息架構(gòu)簡(jiǎn)潔清晰：頁(yè)面的頭部是導(dǎo)航，其中包括搜索、采購(gòu)清單、一級(jí)類(lèi)目+經(jīng)典商品、場(chǎng)景分類(lèi)。網(wǎng)頁(yè)中間是banner廣告位，往下是各類(lèi)商品保舉：如精選熱賣(mài)、場(chǎng)景分類(lèi)、類(lèi)目分類(lèi)；底部是合作企業(yè)的露出與嚴(yán)選企業(yè)采購(gòu)網(wǎng)站的相干介紹。

△ 信息架構(gòu)示意圖

網(wǎng)易嚴(yán)選企業(yè)購(gòu)主頁(yè)頭部的導(dǎo)航設(shè)計(jì)充分展示了網(wǎng)站的結(jié)構(gòu)；中部的banner廣告位與各類(lèi)分類(lèi)入口，則為營(yíng)業(yè)方保留了較大的擴(kuò)展性，方便對(duì)某些商品進(jìn)行露出、營(yíng)銷(xiāo)；底部用細(xì)致的網(wǎng)易嚴(yán)選營(yíng)業(yè)相干介紹來(lái)結(jié)束網(wǎng)頁(yè)，再次強(qiáng)調(diào)了品牌性，營(yíng)造可相信的安全感。

導(dǎo)航設(shè)計(jì)

把導(dǎo)航放在標(biāo)準(zhǔn)的位置——網(wǎng)頁(yè)頂部，可以讓我們快速定位、不必辛苦，標(biāo)準(zhǔn)化的表面讓我們更容易把它們與別的東西區(qū)分開(kāi)來(lái)。網(wǎng)站導(dǎo)航通過(guò)詳細(xì)化網(wǎng)站的條理結(jié)構(gòu)補(bǔ)償了這種缺失的空間感，營(yíng)造出某種位置的感覺(jué)。

網(wǎng)易嚴(yán)選企業(yè)購(gòu)的導(dǎo)航條構(gòu)成為：網(wǎng)站LOGO、類(lèi)目、和實(shí)用工具（搜索、采購(gòu)清單、在線(xiàn)留言）、分類(lèi)快速入口、網(wǎng)站特色露出。

△ 導(dǎo)航結(jié)構(gòu)示意圖

縱領(lǐng)導(dǎo)航將一級(jí)類(lèi)目和該類(lèi)目下的典型商品一路展示在最外層，使企業(yè)采購(gòu)人員可以?huà)咭谎劬椭肋@里大致有哪些商品。

橫領(lǐng)導(dǎo)航展示場(chǎng)景分類(lèi)的快捷入口，相稱(chēng)于是為用戶(hù)提前創(chuàng)建好了適用于不同場(chǎng)景的購(gòu)物清單，以此指導(dǎo)用戶(hù)、幫助他們快速找到某些用途的商品。

另外，在頭部的搜索入口可以幫助用戶(hù)快速找到想要探求的商品，而將一樣平常的購(gòu)物車(chē)命名為采購(gòu)清單也更貼近營(yíng)業(yè)。其次，輔助信息的模塊中露出用戶(hù)信息與網(wǎng)站特色可以再次強(qiáng)調(diào)品牌性。

△  網(wǎng)易嚴(yán)選企業(yè)購(gòu)、網(wǎng)易嚴(yán)選

網(wǎng)易嚴(yán)選企業(yè)購(gòu)在導(dǎo)航的設(shè)計(jì)上嚴(yán)選主站略有不同，企業(yè)采購(gòu)站必要看重服從，但嚴(yán)選主站的用戶(hù)是廣大消耗者，逛的特征更強(qiáng)一些、商品也更多。因此在導(dǎo)航上只展示一級(jí)類(lèi)目，必要hover去觸發(fā)二級(jí)類(lèi)目的展示，這種漸進(jìn)式地指導(dǎo)，更能吸引用戶(hù)去逛網(wǎng)站，去到處看看有什么驚喜，以此增長(zhǎng)更多的商品露出與轉(zhuǎn)化。

網(wǎng)易嚴(yán)選的商品重要分為居家、餐廚、配件、服裝、洗護(hù)、嬰童、雜貨、飲食、志趣這九大類(lèi)目，共包含1000余種商品。其中適合企業(yè)采購(gòu)的商品種類(lèi)相對(duì)較少，也是嚴(yán)選企業(yè)購(gòu)的類(lèi)目導(dǎo)航設(shè)計(jì)得比較淺的緣故原由之一。

迎接關(guān)注作者「網(wǎng)易UEDC」的微信公眾號(hào)：