首頁是一個(gè)網(wǎng)站的門面，它對于用戶的初印象是非常重要的。本文作者從拆解富昌電子商城出發(fā)，剖析作為電子元器件商城的web首頁要素及其發(fā)揮的“門面”作用，希望能給你帶來一些啟發(fā)。

首頁，是一個(gè)網(wǎng)站的門面，用戶到達(dá)網(wǎng)站首頁——就像顧客到達(dá)一座商場門前——商場的門面是否體現(xiàn)其定位？是否符合顧客預(yù)期？大致有什么類型的商店品牌？是否能滿足顧客的需求？購物路徑指引是否清晰地讓我抵達(dá)想去的門店？……一系列問題都表現(xiàn)了商場的門面對顧客初印象及引導(dǎo)的重要性——就像首頁對用戶的意義一樣。

本文將從拆解富昌電子商城出發(fā)，剖析作為電子元器件商城的web首頁要素及其發(fā)揮的“門面”作用，來給到大家一些首頁設(shè)計(jì)的啟思。

一、富昌電子元器件商城web首頁的整體框架

整體框架與多數(shù)網(wǎng)站一樣，自上而下分為頭部區(qū)、內(nèi)容區(qū)、底部區(qū)。內(nèi)容區(qū)又劃分為了首屏區(qū)和樓層區(qū)兩大模塊，以運(yùn)營策略、商城定位為優(yōu)先級(jí)進(jìn)行內(nèi)容布局。

二、富昌電子元器件商城web首頁要素拆解

1. 頭部區(qū)

富昌首頁的頭部區(qū)高度較高，功能和關(guān)鍵信息相對較多。

• 用戶可以快速切換地區(qū)和語言、BOM功能在2處的呈現(xiàn)（可見BOM是富昌比較關(guān)鍵的功能）、呈現(xiàn)平臺(tái)的聯(lián)系電話、“如遇問題請聯(lián)系客服的按鈕”、“訂單超50美元包郵”，在頭部區(qū)就對用戶進(jìn)行關(guān)鍵溝通。
• 搜索功能有個(gè)小細(xì)節(jié)：下方有目前的熱門搜索詞推薦，實(shí)際上是滿足了沒有明確目的的用戶瀏覽路徑的需求
• 一級(jí)門楣上，富昌設(shè)置了5個(gè)一級(jí)門楣，在短時(shí)記憶容量范圍內(nèi)，用戶認(rèn)知成本相對低。

富昌每個(gè)一級(jí)門楣都有自己的導(dǎo)航，呈現(xiàn)形式根據(jù)二級(jí)導(dǎo)航的關(guān)鍵詞數(shù)量決定，關(guān)鍵詞較多的，比如“PRODUCTS”的二級(jí)門楣都是產(chǎn)品品類詞，采用的是平鋪的縱向?qū)Ш?；其他的關(guān)鍵詞數(shù)量較少，則采用下拉列表式的導(dǎo)航呈現(xiàn)。整體感受上，頭部區(qū)傳達(dá)的信息效率較高。

2. 首屏區(qū)

7張輪播圖中，有4張是某個(gè)品牌的產(chǎn)品宣傳文章，3張是平臺(tái)能力，穿插輪播。

觀察了一下國際電子元器件商城網(wǎng)站首頁（Arrow，Chip1stop，TME），基本是品牌產(chǎn)品宣傳文章+平臺(tái)能力作為輪播圖穿插輪播，輪播數(shù)量在4~8張。

輪播圖右側(cè)區(qū)域是新聞和平臺(tái)優(yōu)勢宣傳，內(nèi)容布局采用左右區(qū)隔的輪播圖+固定模塊的形式，會(huì)讓首屏交互更扁平、輕量，有效提高用戶的體驗(yàn)感。

富昌的前臺(tái)產(chǎn)品分類做的比較好，劃分了三級(jí)，顆粒度由粗到細(xì)，呈現(xiàn)上只呈現(xiàn)一級(jí)分類，二三級(jí)分類只有用戶主動(dòng)移入鼠標(biāo)時(shí)才會(huì)展開。通過產(chǎn)品類目可以讓用戶了解平臺(tái)豐富的產(chǎn)品品類，同時(shí)可以彌補(bǔ)用戶搜索過程中可能出現(xiàn)的不足，便于用戶逐級(jí)查找商品。

這樣的設(shè)計(jì)既展現(xiàn)了平臺(tái)產(chǎn)品的覆蓋面、分類的精細(xì)專業(yè)化，也讓用戶的產(chǎn)品瀏覽有明確精細(xì)的路徑指引。

3. 樓層區(qū)

樓層是常見的展示方式，有利于內(nèi)容聚焦、增強(qiáng)信息層次和秩序，并且相互獨(dú)立的樓層空間方便內(nèi)容的擴(kuò)展。

另外首頁匯集了全平臺(tái)的信息，頁面會(huì)比較長。多屏空間下，客戶的瀏覽量會(huì)逐步降低。結(jié)合樓層錨點(diǎn)，用戶可以快速了解整個(gè)頁面內(nèi)容、定位目標(biāo)樓層，增強(qiáng)底部樓層曝光幾率。

1）產(chǎn)品樓層

富昌的樓層主要都是產(chǎn)品樓層，11個(gè)樓層中有7個(gè)是產(chǎn)品樓層，包括推薦產(chǎn)品、半導(dǎo)體產(chǎn)品、無源器件、機(jī)電產(chǎn)品、連接器、生產(chǎn)產(chǎn)品、開發(fā)工具，樓層間采用藍(lán)白相間的背景顏色做視覺區(qū)隔，3頁輪播，同時(shí)每個(gè)樓層的產(chǎn)品卡片大小、位置不一，給產(chǎn)品有較多較好的曝光。

存疑點(diǎn)：點(diǎn)擊每一個(gè)產(chǎn)品是直接進(jìn)入到型號(hào)詳情頁——我認(rèn)為這樣的方式不妥。

首頁放產(chǎn)品的目的是引導(dǎo)感興趣的用戶進(jìn)一步深度探索，如果點(diǎn)擊首頁產(chǎn)品直接進(jìn)入到具體產(chǎn)品的詳情頁，路徑過深，可能會(huì)導(dǎo)致其他的同類產(chǎn)品失去了應(yīng)有的曝光。

我們可以觀察到，像淘寶，我們點(diǎn)擊首頁的商品進(jìn)入的是一個(gè)頻道頁，包含了包括我們感興趣的商品在內(nèi)的其他很多商品，這樣的做法是為了讓用戶在看自己感興趣的商品的同時(shí)，也可以讓其他商品獲得曝光和關(guān)注。

在首頁放產(chǎn)品的路徑引導(dǎo)上，用戶點(diǎn)擊進(jìn)入的是垂直搜索結(jié)果頁、欄目頁、頻道頁都遠(yuǎn)比直接進(jìn)入目標(biāo)產(chǎn)品詳情頁更合適。

2）合作廠商樓層

富昌有2個(gè)供應(yīng)商展示樓層：

1. 帶品牌Logo的輪播樓層，在第3屏的位置，主要展現(xiàn)的是國際知名廠牌，為了凸顯平臺(tái)合作廠商的實(shí)力和知名度，提高消費(fèi)者對平臺(tái)的信心；
2. 供應(yīng)商索引（目錄）樓層，在第11屏的位置，展現(xiàn)的是平臺(tái)全量的廠牌，為了展現(xiàn)平臺(tái)合作廠牌覆蓋范圍廣。

3）服務(wù)樓層

富昌提供的服務(wù)比較少，主要是3個(gè)方案設(shè)計(jì)以及對應(yīng)的采購服務(wù)，比較重要的采購服務(wù)（商品信息、BOM清單管理功能）已經(jīng)在頭部和上方樓層中得到了很好的曝光，所以整體的服務(wù)樓層比較窄。

我覺得可借鑒之處是，富昌的首頁不堆砌文字，是簡潔的標(biāo)題+圖片的卡片式呈現(xiàn)信息，用戶認(rèn)知成本低。

4）內(nèi)容樓層

富昌以資源來概括提供的內(nèi)容，資源樓層還劃分了一個(gè)二級(jí)導(dǎo)航，包括新聞、活動(dòng)、雜志、新產(chǎn)品信息、科技、行業(yè)趨勢等，樓層內(nèi)容以打包的方式把近期熱點(diǎn)整合在一個(gè)可點(diǎn)擊的卡片內(nèi)，用戶可選擇點(diǎn)擊感興趣的內(nèi)容類型，進(jìn)一步查看自己是否有自己感興趣的內(nèi)容。

同樣的，采用圖片+簡短標(biāo)題的形式，交互扁平輕量化，降低用戶認(rèn)知成本，適合沒有明確目的的游客瀏覽閱讀。

5）亮點(diǎn)：樓層錨點(diǎn)

剛剛有提到，樓層化雖然有利于內(nèi)容聚焦和拓展，但也容易受逐屏流量消耗的影響，導(dǎo)致靠后的樓層沒有得到曝光。

富昌采用樓層錨點(diǎn)導(dǎo)航的形式，主表懸浮時(shí)呈現(xiàn)樓層名稱，點(diǎn)擊則頁面錨定至對應(yīng)樓層，一定程度上既方便了用戶快速定位感興趣的樓層內(nèi)容，也減少了逐屏流量消耗對靠后樓層的影響。

4. 底部區(qū)

底部的亮點(diǎn)：

• 平臺(tái)能力營銷：給瀏覽到底部的用戶，再曝光一次平臺(tái)的優(yōu)勢，首尾呼應(yīng)
• 平臺(tái)郵件營銷訂閱能力：以內(nèi)容為引，定期郵件曝光品牌，保持用戶對平臺(tái)關(guān)注度

三、所以，作為首頁，有哪些目標(biāo)需要達(dá)成？

以商圈和顧客為例，窮舉可能遇到的類型：

將商圈與顧客的關(guān)系，類比首頁與用戶的關(guān)系，首頁承載的目標(biāo)有：

1. 打造平臺(tái)形象，迎合目標(biāo)客群

首頁就像一家商店的門面，一定要精準(zhǔn)體現(xiàn)平臺(tái)的商業(yè)定位，這樣相應(yīng)的客群進(jìn)入首頁，才會(huì)感覺這是一個(gè)適合的購物場所，做進(jìn)一步瀏覽。

以富昌為例，富昌的定位是國際性電子元器件采購平臺(tái)，首先是展現(xiàn)平臺(tái)實(shí)力上，輪播圖呈現(xiàn)合作廠牌文章、合作廠商樓層輪播合作廠牌，展現(xiàn)平臺(tái)的廠商知名度和覆蓋面之廣；產(chǎn)品分類精細(xì)且在頭部呈現(xiàn)，展現(xiàn)平臺(tái)的產(chǎn)品品類覆蓋面廣且分類專業(yè)；其次是體現(xiàn)平臺(tái)采購服務(wù)上，在頭部和底部均針對平臺(tái)產(chǎn)品品質(zhì)、平臺(tái)優(yōu)惠政策、服務(wù)等進(jìn)行營銷和溝通，打造平臺(tái)的實(shí)力以及服務(wù)特色。

2. 流量分發(fā)

流量（即顧客）是互聯(lián)網(wǎng)公司一切業(yè)務(wù)的起點(diǎn)，大部分公司的業(yè)務(wù)都是多元化的（比如富昌有研發(fā)服務(wù)、購買、研討會(huì)等業(yè)務(wù)；攜程有酒店、機(jī)票、旅游等主要業(yè)務(wù)，還有更多的如民宿、火車票、美食等細(xì)分業(yè)務(wù)；京東商城有超市、家電、家居等主要業(yè)務(wù)，以及海量的細(xì)分業(yè)務(wù)；美團(tuán)點(diǎn)評有美食、外賣、生活服務(wù)等業(yè)務(wù)）通過首頁做好流量分發(fā)，給到各業(yè)務(wù)線合理的流量，間接影響了各個(gè)業(yè)務(wù)的營收。

3. 瀏覽路徑引導(dǎo)

首頁日活巨大，背后的用戶群體特征差異巨大，首頁需要為不同訴求的用戶鋪設(shè)合理的瀏覽路徑。

以富昌為例：

以企業(yè)產(chǎn)品生產(chǎn)周期為劃分依據(jù)，處在產(chǎn)品研發(fā)規(guī)劃階段的用戶更傾向于了解行業(yè)趨勢；研發(fā)階段的用戶更傾向于了解某類產(chǎn)品、某些元件的規(guī)格、技術(shù)適用性，更關(guān)注推薦性服務(wù)；小批試生產(chǎn)階段的用戶傾向于使用小批量采購、BOM清單管理服務(wù)；批量生產(chǎn)用戶則關(guān)注批量采購、批量詢價(jià)等服務(wù)。

以用戶觸達(dá)頁面目的為劃分依據(jù)，工具場景下，用戶有明確的使用需求，清楚自己想要提交的服務(wù)、想要獲取的信息；工作場景下，用戶只是進(jìn)來隨便逛逛，看看有什么自己感興趣的信息。

4. 創(chuàng)造直接營收

首頁是流量最大的頁面，尤其是首屏頁面，也是創(chuàng)造直接營收的黃金位置。比如，廣告位、熱門產(chǎn)品陳列、品牌合作、重要活動(dòng)引流，都是創(chuàng)造營收的重要手段，尤其是垂類商城，客群精確，投放廣告的曝光效率可能更高，譬如富昌首頁的輪播圖位置，便可以成為廠商廣告競爭的位置，還有首頁的產(chǎn)品樓層櫥窗，可以擺出由廠商競價(jià)展出商品。

5. 進(jìn)行關(guān)鍵溝通

作為必經(jīng)之處，通過首頁與用戶溝通，觸達(dá)率無疑是最高的。常見的溝通手段，比如首頁彈窗（如新人禮包、重要通知、權(quán)益到賬等），滾動(dòng)信息欄（如淘寶頭條、京東快報(bào)），頂部通欄第一楨，站內(nèi)信，都是常見的溝通點(diǎn)位。同樣的，如何平衡觸達(dá)率和用戶體驗(yàn)，也是個(gè)難題。富昌的關(guān)鍵溝通做的較為舒服，采用首屏滾動(dòng)欄，將平臺(tái)的關(guān)鍵優(yōu)惠政策、反饋路徑都呈現(xiàn)給用戶；在輪播圖區(qū)進(jìn)行關(guān)鍵點(diǎn)營銷，曝光程度高但不影響用戶體驗(yàn)。

四、總結(jié)

從提升體驗(yàn)感的角度出發(fā)，總結(jié)富昌值得借鑒的優(yōu)點(diǎn)為：

• 清晰的一二級(jí)門楣，完成平臺(tái)關(guān)鍵服務(wù)的瀏覽路徑引導(dǎo)，適應(yīng)不同目標(biāo)客群的需求；
• 內(nèi)容樓層化，有較好的信息層次和秩序，內(nèi)容聚焦化；
• 樓層錨點(diǎn)的應(yīng)用，讓用戶可以快速定位樓層，降低首頁逐屏流量消耗對位置靠下的樓層的影響；
• 圖片+簡短標(biāo)題的內(nèi)容呈現(xiàn)樣式，交互輕量化，用戶使用過程的認(rèn)知成本較低。

從產(chǎn)品策略上的可改進(jìn)點(diǎn)包括：

• 產(chǎn)品點(diǎn)擊的路徑不應(yīng)該直接到達(dá)商品詳情頁，而是可以中間經(jīng)過一個(gè)頻道頁（垂直搜索結(jié)果頁），增加其他產(chǎn)品的曝光幾率；
• 首頁內(nèi)容由用戶關(guān)鍵詞進(jìn)行個(gè)性化推薦，一定程度上可以提高內(nèi)容與用戶的相關(guān)性，可以有效提高用戶體驗(yàn)感，同時(shí)也可以進(jìn)一步進(jìn)行殘值轉(zhuǎn)化。