首頁是一個網站的門面，它對於用戶的初印象是非常重要的。本文作者從拆解富昌電子商城出發，剖析作為電子元器件商城的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協議
該文觀點僅代表作者本人，人人都是產品經理平台僅提供信息存儲空間服務。