首頁是一個網站的門面，它對于使用者的初印象是非常重要的。本文作者從拆解富昌電子商城出發，剖析作為電子元器件商城的web首頁要素及其發揮的“門面”作用，希望能給你帶來一些啟發。
首頁，是一個網站的門面，使用者到達網站首頁——就像顧客到達一座商場門前——商場的門面是否展現其定位？是否符合顧客預期？大緻有什麼類型的商店品牌？是否能滿足顧客的需求？購物路徑指引是否清晰地讓我抵達想去的門店？……一系列問題都表現了商場的門面對顧客初印象及引導的重要性——就像首頁對使用者的意義一樣。
本文将從拆解富昌電子商城出發，剖析作為電子元器件商城的web首頁要素及其發揮的“門面”作用，來給到大家一些首頁設計的啟思。
一、富昌電子元器件商城web首頁的整體架構
整體架構與多數網站一樣，自上而下分為頭部區、内容區、底部區。内容區又劃分為了首屏區和樓層區兩大子產品，以營運政策、商城定位為優先級進行内容布局。
二、富昌電子元器件商城web首頁要素拆解
1. 頭部區
富昌首頁的頭部區高度較高，功能和關鍵資訊相對較多。
- 使用者可以快速切換地區和語言、BOM功能在2處的呈現（可見BOM是富昌比較關鍵的功能）、呈現平台的聯系電話、“如遇問題請聯系客服的按鈕”、“訂單超50美元包郵”，在頭部區就對使用者進行關鍵溝通。
- 搜尋功能有個小細節：下方有目前的熱門搜尋詞推薦，實際上是滿足了沒有明确目的的使用者浏覽路徑的需求
- 一級門楣上，富昌設定了5個一級門楣，在短時記憶容量範圍内，使用者認知成本相對低。
富昌每個一級門楣都有自己的導航，呈現形式根據二級導航的關鍵詞數量決定，關鍵詞較多的，比如“PRODUCTS”的二級門楣都是産品品類詞，采用的是平鋪的縱向導航；其他的關鍵詞數量較少，則采用下拉清單式的導航呈現。整體感受上，頭部區傳達的資訊效率較高。
2. 首屏區
7張輪播圖中，有4張是某個品牌的産品宣傳文章，3張是平台能力，穿插輪播。
觀察了一下國際電子元器件商城網站首頁（Arrow，Chip1stop，TME），基本是品牌産品宣傳文章+平台能力作為輪播圖穿插輪播，輪播數量在4~8張。
輪播圖右側區域是新聞和平台優勢宣傳，内容布局采用左右區隔的輪播圖+固定子產品的形式，會讓首屏互動更扁平、輕量，有效提高使用者的體驗感。
富昌的前台産品分類做的比較好，劃分了三級，顆粒度由粗到細，呈現上隻呈現一級分類，二三級分類隻有使用者主動移入滑鼠時才會展開。通過産品類目可以讓使用者了解平台豐富的産品品類，同時可以彌補使用者搜尋過程中可能出現的不足，便于使用者逐級查找商品。
這樣的設計既展現了平台産品的覆寫面、分類的精細專業化，也讓使用者的産品浏覽有明确精細的路徑指引。
3. 樓層區
樓層是常見的展示方式，有利于内容聚焦、增強資訊層次和秩序，并且互相獨立的樓層空間友善内容的擴充。
另外首頁彙集了全平台的資訊，頁面會比較長。多屏空間下，客戶的浏覽量會逐漸降低。結合樓層錨點，使用者可以快速了解整個頁面内容、定位目标樓層，增強底部樓層曝光幾率。
1）産品樓層
富昌的樓層主要都是産品樓層，11個樓層中有7個是産品樓層，包括推薦産品、半導體産品、無源器件、機電産品、連接配接器、生産産品、開發工具，樓層間采用藍白相間的背景顔色做視覺區隔，3頁輪播，同時每個樓層的産品卡片大小、位置不一，給産品有較多較好的曝光。
存疑點：點選每一個産品是直接進入到型号詳情頁——我認為這樣的方式不妥。
首頁放産品的目的是引導感興趣的使用者進一步深度探索，如果點選首頁産品直接進入到具體産品的詳情頁，路徑過深，可能會導緻其他的同類産品失去了應有的曝光。
我們可以觀察到，像淘寶，我們點選首頁的商品進入的是一個頻道頁，包含了包括我們感興趣的商品在内的其他很多商品，這樣的做法是為了讓使用者在看自己感興趣的商品的同時，也可以讓其他商品獲得曝光和關注。
在首頁放産品的路徑引導上，使用者點選進入的是垂直搜尋結果頁、欄目頁、頻道頁都遠比直接進入目标産品詳情頁更合适。
2）合作廠商樓層
富昌有2個供應商展示樓層：
- 帶品牌Logo的輪播樓層，在第3屏的位置，主要展現的是國際知名廠牌，為了凸顯平台合作廠商的實力和知名度，提高消費者對平台的信心；
- 供應商索引（目錄）樓層，在第11屏的位置，展現的是平台全量的廠牌，為了展現平台合作廠牌覆寫範圍廣。
3）服務樓層
富昌提供的服務比較少，主要是3個方案設計以及對應的采購服務，比較重要的采購服務（商品資訊、BOM清單管理功能）已經在頭部和上方樓層中得到了很好的曝光，是以整體的服務樓層比較窄。
我覺得可借鑒之處是，富昌的首頁不堆砌文字，是簡潔的标題+圖檔的卡片式呈現資訊，使用者認知成本低。
4）内容樓層
富昌以資源來概括提供的内容，資源樓層還劃分了一個二級導航，包括新聞、活動、雜志、新産品資訊、科技、行業趨勢等，樓層内容以打包的方式把近期熱點整合在一個可點選的卡片内，使用者可選擇點選感興趣的内容類型，進一步檢視自己是否有自己感興趣的内容。
同樣的，采用圖檔+簡短标題的形式，互動扁平輕量化，降低使用者認知成本，适合沒有明确目的的遊客浏覽閱讀。
5）亮點：樓層錨點
剛剛有提到，樓層化雖然有利于内容聚焦和拓展，但也容易受逐屏流量消耗的影響，導緻靠後的樓層沒有得到曝光。
富昌采用樓層錨點導航的形式，主表懸浮時呈現樓層名稱，點選則頁面錨定至對應樓層，一定程度上既友善了使用者快速定位感興趣的樓層内容，也減少了逐屏流量消耗對靠後樓層的影響。
4. 底部區
底部的亮點：
- 平台能力營銷：給浏覽到底部的使用者，再曝光一次平台的優勢，首尾呼應
- 平台郵件營銷訂閱能力：以内容為引，定期郵件曝光品牌，保持使用者對平台關注度
三、是以，作為首頁，有哪些目标需要達成？
以商圈和顧客為例，窮舉可能遇到的類型：
将商圈與顧客的關系，類比首頁與使用者的關系，首頁承載的目标有：
1. 打造平台形象，迎合目标客群
首頁就像一家商店的門面，一定要精準展現平台的商業定位，這樣相應的客群進入首頁，才會感覺這是一個适合的購物場所，做進一步浏覽。
以富昌為例，富昌的定位是國際性電子元器件采購平台，首先是展現平台實力上，輪播圖呈現合作廠牌文章、合作廠商樓層輪播合作廠牌，展現平台的廠商知名度和覆寫面之廣；産品分類精細且在頭部呈現，展現平台的産品品類覆寫面廣且分類專業；其次是展現平台采購服務上，在頭部和底部均針對平台産品品質、平台優惠政策、服務等進行營銷和溝通，打造平台的實力以及服務特色。
2. 流量分發
流量（即顧客）是網際網路公司一切業務的起點，大部分公司的業務都是多元化的（比如富昌有研發服務、購買、研讨會等業務；攜程有酒店、機票、旅遊等主要業務，還有更多的如民宿、火車票、美食等細分業務；京東商城有超市、家電、家居等主要業務，以及海量的細分業務；美團點評有美食、外賣、生活服務等業務）通過首頁做好流量分發，給到各業務線合理的流量，間接影響了各個業務的營收。
3. 浏覽路徑引導
首頁日活巨大，背後的使用者群體特征差異巨大，首頁需要為不同訴求的使用者鋪設合理的浏覽路徑。
以富昌為例：
以企業産品生産周期為劃分依據，處在産品研發規劃階段的使用者更傾向于了解行業趨勢；研發階段的使用者更傾向于了解某類産品、某些元件的規格、技術适用性，更關注推薦性服務；小批試生産階段的使用者傾向于使用小批量采購、BOM清單管理服務；批量生産使用者則關注批量采購、批量詢價等服務。
以使用者觸達頁面目的為劃分依據，工具場景下，使用者有明确的使用需求，清楚自己想要送出的服務、想要擷取的資訊；工作場景下，使用者隻是進來随便逛逛，看看有什麼自己感興趣的資訊。
4. 創造直接營收
首頁是流量最大的頁面，尤其是首屏頁面，也是創造直接營收的黃金位置。比如，廣告位、熱門産品陳列、品牌合作、重要活動引流，都是創造營收的重要手段，尤其是垂類商城，客群精确，投放廣告的曝光效率可能更高，譬如富昌首頁的輪播圖位置，便可以成為廠商廣告競争的位置，還有首頁的産品樓層櫥窗，可以擺出由廠商競價展出商品。
5. 進行關鍵溝通
作為必經之處，通過首頁與使用者溝通，觸達率無疑是最高的。常見的溝通手段，比如首頁彈窗（如新人禮包、重要通知、權益到賬等），滾動資訊欄（如淘寶頭條、京東快報），頂部通欄第一桢，站内信，都是常見的溝通點位。同樣的，如何平衡觸達率和使用者體驗，也是個難題。富昌的關鍵溝通做的較為舒服，采用首屏卷軸框，将平台的關鍵優惠政策、回報路徑都呈現給使用者；在輪播圖區進行關鍵點營銷，曝光程度高但不影響使用者體驗。
四、總結
從提升體驗感的角度出發，總結富昌值得借鑒的優點為：
- 清晰的一二級門楣，完成平台關鍵服務的浏覽路徑引導，适應不同目标客群的需求；
- 内容樓層化，有較好的資訊層次和秩序，内容聚焦化；
- 樓層錨點的應用，讓使用者可以快速定位樓層，降低首頁逐屏流量消耗對位置靠下的樓層的影響；
- 圖檔+簡短标題的内容呈現樣式，互動輕量化，使用者使用過程的認知成本較低。
從産品政策上的可改進點包括：
- 産品點選的路徑不應該直接到達商品詳情頁，而是可以中間經過一個頻道頁（垂直搜尋結果頁），增加其他産品的曝光幾率；
- 首頁内容由使用者關鍵詞進行個性化推薦，一定程度上可以提高内容與使用者的相關性，可以有效提高使用者體驗感，同時也可以進一步進行殘值轉化。
本文由 @松花釀酒丸子 原創釋出于人人都是産品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協定
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。