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

網(wǎng)易UEDC – 柴蒙：企業(yè)采購是現(xiàn)今市場經(jīng)濟(jì)下一種最主要最主流的采購形式，其特點(diǎn)是大批量采購商品。傳統(tǒng)的企業(yè)采購方式不可避免地會(huì)帶來如回扣、效率低、采購過程不透明等諸多問題。

現(xiàn)今的主流電商網(wǎng)站或品牌在滿足廣大消費(fèi)者的同時(shí)，都細(xì)分出企業(yè)采購的特殊場景——設(shè)立企業(yè)采購網(wǎng)站，如天貓、京東、小米等。由于各家電商的定位不同，在網(wǎng)站設(shè)計(jì)的表現(xiàn)與邏輯架構(gòu)也不盡相同。

建立企業(yè)采購網(wǎng)站這種細(xì)分運(yùn)營，正是“信息傳遞要準(zhǔn)確”的表現(xiàn)，能為C端和B端的用戶都帶來最友好的體驗(yàn)。需要注意的是企業(yè)采購并不是面向廣大普通用戶的，因?yàn)樗男枨笈c使用場景比較特殊，例如企業(yè)采購的商品數(shù)量大、訂單金額大，還有會(huì)涉及到一些梯度折扣、分期付款、代下單等等采購的業(yè)務(wù)流程。

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

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

一. 解析使用場景

用戶是誰？使用環(huán)境如何？

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

正是因?yàn)槲覀兊挠脩魰?huì)在上班時(shí)間，在辦公室使用電腦來完成他們的采購工作，所以網(wǎng)易嚴(yán)選企業(yè)購優(yōu)先做了網(wǎng)站，而不是APP。

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

我們通過訪談了解到企業(yè)采購人員希望可以高效地買到性價(jià)比高的商品。這些商品可能是給企業(yè)員工發(fā)的獎(jiǎng)品福利，可能是贈(zèng)送給客戶的禮品，也可能是采購給企業(yè)員工日常使用的辦公用品等等。

特別是企業(yè)采購這樣的大宗訂單，若是能用較少的成本，獲得員工的滿意、客戶的認(rèn)可、老板的贊賞，還提高了采購人員的工作效率，同時(shí)避免了可能存在的回扣等問題，對(duì)于企業(yè)來說是十分有利的。

我們?cè)趺礊橛脩籼峁┧麄兿胍姆?wù)？

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

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

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

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

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

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

如何向用戶傳遞品牌特色：“好的生活，沒那么貴”？

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

△ 列表商品坑位

怎樣提高轉(zhuǎn)化率?

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

企業(yè)認(rèn)證是企業(yè)采購必不可少的一個(gè)重要環(huán)節(jié)，由于企業(yè)認(rèn)證需要填寫較多的信息，諸如企業(yè)營業(yè)執(zhí)照號(hào)等一系列企業(yè)相關(guān)信息，門檻相對(duì)較高，那么如何促進(jìn)用戶主動(dòng)去完成申請(qǐng)認(rèn)證呢？

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

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

△ 首頁商品坑位

2.在版頭右側(cè)的輔助信息模塊上的黃色按鈕文案：”提交企業(yè)信息”也會(huì)隨著認(rèn)證狀態(tài)的改變而變化，而且它與企業(yè)購的業(yè)務(wù)特色介紹放在一起，更能刺激用戶去申請(qǐng)認(rèn)證。

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

在用戶通過企業(yè)認(rèn)證后，通過高質(zhì)量的商品和較高的性價(jià)比吸引用戶實(shí)際下單，就頁面的引導(dǎo)來說，從商品詳情的設(shè)計(jì)、首頁的場景分類的運(yùn)營、精選熱賣的引導(dǎo)去增加轉(zhuǎn)化率。

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

主頁的設(shè)計(jì)對(duì)于網(wǎng)站來說至關(guān)重要，因?yàn)樗粌H僅是一個(gè)入口，它更是讓用戶看到自己正在尋找的東西。在主頁設(shè)計(jì)之中，首屏的設(shè)計(jì)尤為重要，而導(dǎo)航又是首屏里的重要元素之一。

信息架構(gòu)

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

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

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

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

把導(dǎo)航放在標(biāo)準(zhǔn)的位置——頁面頂部，可以讓我們快速定位、不必費(fèi)力，標(biāo)準(zhǔn)化的外觀讓我們更容易把它們與別的東西區(qū)分開來。網(wǎng)站導(dǎo)航通過具體化網(wǎng)站的層次結(jié)構(gòu)補(bǔ)償了這種缺失的空間感，營造出某種位置的感覺。

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

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

縱向?qū)Ш綄⒁患?jí)類目和該類目下的典型商品一起展示在最外層，使企業(yè)采購人員可以掃一眼就知道這里大致有哪些商品。

橫向?qū)Ш秸故緢鼍胺诸惖目旖萑肟冢喈?dāng)于是為用戶提前創(chuàng)建好了適用于不同場景的購物清單，以此引導(dǎo)用戶、幫助他們快速找到某些用途的商品。

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

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

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

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

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

「經(jīng)驗(yàn)分享！如何打造成功的電商網(wǎng)站」

• 《新人手冊(cè)！聊聊關(guān)于電商設(shè)計(jì)的那些事兒》
• 《這7個(gè)趨勢，也許是2017年電商用戶體驗(yàn)設(shè)計(jì)的關(guān)鍵》
• 《超贊！高大上的電商網(wǎng)站案例集合》
• 《提升電子商務(wù)網(wǎng)站易用性的10個(gè)注意事項(xiàng)》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com