[產品]一文搞懂 App 首頁如何設計

京東

所有這些業務都有各自的營收目標，都需要流量（即顧客），而App端主要流量來自於首頁的分發。

那麼，如何正確分發？

首先，確定業務流量目標。

舉個例子：

某公司有A、B、C三個業務，年度營收目標是50億，30億，20億。簡化起見，我們假設全部業務通過App完成。

那麼，三個業務的流量目標計算過程如下：

• 第一步：統計上一週期A、B、C各自的單品頁總流量及售出單品總數，並計算A、B、C各自的轉化率（業務售出單品總數／業務單品頁總流量）。
• 第二步：統計上一週期A、B、C的售出單品均價。
• 第三步：通過商詳頁（或POI頁）的流量來源，統計搜索與導購貢獻的流量佔比。
• 第四步：預測目標週期的全站日均單品頁總訪問量。
• 第五步：計算A需要的首頁流量佔比，全站日均單品頁訪問總量*導購流量佔比*A首頁流量佔比*A轉化率*A單品均價*365=5000M。同理計算B、C。

例如：

全站單品頁日均訪問量預計為500萬，導購流量佔比60%，A業務轉化率20%，單品均價50元。

則5M*60%*A流量佔比*20%*50*365=5000M，得到A業務需要的流量佔比=45.7%。

注：

1. 用戶的瀏覽和訂單往往橫跨多個業務／類目，因此在這裡不以“用戶-訂單”為單位，而以“單品頁流量-售出單品數”為計算單位，以徹底分開各個業務。
2. 除社交和搜索引擎渠道通過App喚起直達單品頁的引流（非社交電商較少），單品頁流量只有兩個來源，一是通過App搜索到達，二是通過導購欄目到達。首頁流量分發僅影響導購流量。
3. 這裡說的單品頁，在電商是商詳頁，在OTA或O2O是POI（店鋪、景點等），在內容平臺是內容頁（文章、小視頻等），以此類推。
4. 簡化起見，這裡假設目標週期各業務的單品均價不變。如果有變化，可以跟業務線要求價格調整幅度，作為估算輸入。

通過上述計算，我們得到A、B、C的流量佔比需求。但隨後可能會發現，三者求和不等於100%。

如果大於100%，說明全站流量無法滿足業務線的營收目標，還需要和有關部門溝通，要麼調整營收預期，要麼想辦法提升流量或轉化率；如果小於100%，恭喜，這意味著有一部分資源位可以作為buffer，根據需要進行靈活調配。

確定了各業務所需流量佔比，如何在首頁進行分發呢？

流量不是物品，可以搬來搬去，背後是鮮活的消費者，需求明確，不是想讓他們點哪個欄目就會點哪個欄目的。流量分發牽涉到非常複雜的產品和運營層面的聯動，也有邊界和上限。

除了日常為業務線分發流量，大促階段首頁也承載起為主會場、分會場和各類活動導流的責任。這時也需要明確各個活動會場的定位（分流、賣貨、拉會員），相應的流量分配做好規劃。

目標2：瀏覽路徑引導

互聯網公司海量日活的背後，是特徵差異巨大的用戶群體。

首頁的又一個關鍵目標，是為不同風格不同訴求的用戶鋪設合理的“逛”的路徑。

按購物目的來分，有的用戶是精準型用戶，很清楚自己具體要買什麼東西，比如雀巢三段嬰兒奶粉6罐裝；有的用戶是半精準型用戶，知道自己要買什麼但不具體，比如要買嬰兒奶粉；有的用戶則完全是隨便來逛逛，看看有什麼好東西打動自己。

按購物風格來分，有的用戶是價格敏感型用戶，喜歡看促銷欄目，重點買優惠商品；有的用戶是品質或品牌導向型用戶，喜歡看精品導購、買手推薦或品牌欄目；有的用戶是解決方案導向用戶，為了某一個身處的場景（如新媽媽、春遊、過冬）尋找相應商品。

當然，我們也可以按類目或用戶需求基因來分。比如數碼極客、閱讀愛好者、家庭主婦（可以是家庭婦男）、新媽媽（或新爸爸）、學生一族等。

以上各種用戶，都需要差異化的“逛街”路徑，以實現貼心的購物過程，實現與興趣高度匹配的沉浸式瀏覽，大幅提升購買幾率。首頁，類似於商場佈局，是鋪設導購路徑的源頭，承載用戶千變萬化的“逛街”訴求。

目標3：打造企業形象，迎合目標客群

每家企業都有明確的商業定位。比如有的銷售高端輕奢精品，有的銷售跨境大牌，有的銷售超市商品和百貨，有的售賣健康生鮮，有的則是小商品集散地。

首頁就類似於商店門面，一定要能精準體現公司商業定位。這樣，相應的客群進入首頁，就會感覺這是一個適合的購物場所，做進一步瀏覽。

我們把輕奢電商和超市電商App做個對比，看看首頁風格的差異：

輕奢電商 VS 超市電商

不難看出，奢品大牌類的首頁重點：

1. 品牌：對於普通消費者來說，奢品的核心就是品牌，其次才是商品、設計和款式。
2. 高清、大圖、留白：高端氣質需要通過這三大要素來體現，琳琅滿目、價格折扣都是次要因素。

而超市電商則突出品類、商品，強調價格、折扣、賣點，界面追求展示效率，營造琳琅滿目的感覺，色彩則相對豔麗繁雜——因為超市電商主要的消費者是家庭主婦，重視商品、價格和折扣，購物強調需求與效率。

目標4：創造直接營收

移動端首頁無疑是流量最大的頁面，因此也是創造直接營收的黃金位置。比如，廣告位、爆品陳列、品牌合作、向某個重要活動引流，這些都是創造直接營收的重要手段。

金龍魚超級品牌日1號店首頁

在這裡特別需要平衡好的是營收訴求與用戶體驗之間的關係，這也是業務、廣告等團隊和首頁產品、運營爆發最多衝突的方，需要提前預設相關具體資源位使用規則。

目標5：進行關鍵溝通

作為必經之處，通過首頁與用戶溝通，觸達率無疑是最高的。比如首頁彈窗（如新人禮包、重要通知、權益到賬等），滾動信息欄（如淘寶頭條、京東快報），頂部通欄第一楨，站內信，都是常見的溝通點位。

同樣，如何平衡觸達率和用戶體驗，也是個難題。

首頁彈窗是對用戶的強制打擾，當初很多PC網站的體驗，很大程度上就毀在彈窗廣告。產品經理設計首頁彈窗時需要格外謹慎，並絕對避免每次加載首頁時的重複彈窗。

首頁彈窗功能的開發不難，但首頁運營的一個挑戰，就是始終要抵擋一浪又一浪的首頁彈窗強烈需求，併為此制定合理彈窗規則。

三、首頁產品KPI

要做出優秀的首頁產品設計，遠遠不只是“好看”。產品思維立足全局與長遠，深度洞察用戶訴求與痛點，並側重邏輯性與歸因分析。

由此，設定科學的KPI作為目標，是首頁產品設計的第一步（這其實也是所有產品設計的第一步）。

不同的公司，首頁的使命會有所不同。在這裡我以綜合性電商首頁KPI為例，來進行闡述。

KPI之一：人均商詳頁訪問數

正常情況下，商店都希望顧客多逛逛。假設商詳頁加車率固定，那麼用戶到達越多的商詳頁，銷售也就越好。於是很自然，人均商詳頁訪問數就是首頁設計的第一個核心指標，它體現首頁的引導效率。

可以看到，除了選品、價格和促銷這些根本性的方面，產品層面上，下列因素對人均商詳頁訪問數會產生較大影響：

• 欄目的個性化程度與精準化算法水平
• 多維度導購欄目的合理設置
• 商品的淺層級露出
• 商品佈局及展示效率
• 標籤體系設計

第一點比較好理解，讓用戶看到更感興趣的欄目和商品，是多逛逛的關鍵。

從千人千面再到近來興起的沉浸式瀏覽（抖音和頭條是最大典型，京東和淘寶也在靠向這個風格），都是針對這個方向。

第二點需要平衡，導購欄目不要太多，也不能太少。

維度設計要在用戶層面做好差異化，講清楚邏輯。例如促銷，可以分為限時型、限量型、團購型、精選型，一個維度做好一個欄目就可以了，不要同時鋪太多邏輯，導致用戶迷失。同樣，導購可以覆蓋嚐鮮、從眾、獵奇、專家意見等多個維度，但一個維度儘量只做一個欄目。

第三點看似簡單，實踐卻十分困難。

酒香就怕巷子深，如果商品要層層跳轉到更深的頁面上才能看到，逐級流量衰減嚴重，觸達商品就很難。然而，把商品直接鋪在首頁上，“猜你喜歡”這種抓殘值欄目中會獲得一定的效果。

但商品直鋪首頁，實際上我看到的數據卻往往又是失敗的。比如下面這個項目，原本頻道入口如下：

做淺案例–舊版

為了把商品做淺，提升首頁商詳到達率，我們嘗試打撈出頻道爆款商品鋪在首頁，通過首頁直達。改版後如下：

做淺案例–新版

結果完全出乎意料：商詳到達率下降0.23%！

產品團隊先後改了三個版本，上線測試後全部失敗！

最終結論，首頁欄目鋪設櫥窗商品，如果點擊直達商詳，會導致用戶進入頻道幾率下降，反而使更少的商品得到曝光。同時，頻道入口變高，導致單屏展示效率下降，後續欄目被推得更深，影響全局。

實驗數據表明：首頁曝光櫥窗商品的正確做法是，櫥窗商品點擊向頻道頁引流。

第四點，商品佈局和展示效率，測試數據表明，圖更大更美的一行二展示，效率大不如略顯擁擠的一行三。

一眼看到想要的商品，擊中用戶的幾率高於精美的商品圖。別問有沒有測一行四，那個超越了我的審美底線。

最後，標籤體系。

簡單來說，通過導購、促銷、屬性三大標籤，展示商品的核心賣點，對於抓到點擊提升商詳到達率非常非常關鍵。

KPI之二：首頁點擊價值

綜合性電商通常有海量商品，欄目往往分為很多級，商品藏得很深。如何高效引導用戶快速找到感興趣的商品並完成購買，成為導購產品的核心訴求。

用通俗的話來說，越少的點擊次數，產生越多的銷售，就越好。因此，可以定義“首頁點擊價值”作為KPI。

首頁點擊價值=首頁導購欄目產生的總銷售／首頁總點擊數

不難想到，點擊價值的主要影響因素有三個：

1. 到達商詳頁的路徑深度
2. 推薦商品的轉化能力
3. 銷售商品的平均單價

第一個因素已經做了簡單探討，把商品合理做淺，但不要影響展示效率。同時，頁面不可避免會分為多級，要仔細考慮好每個頁面向下一級頁面的引流手段。

例如，首頁展示櫥窗商品，點擊後到達頻道頁而非商詳頁；但為了體驗，要確保所點擊商品出現在頻道頁第一屏顯著位置。

後兩個因素直觀來理解，是儘量向用戶展示他感興趣的商品，並通過標籤、文案等手段突出賣點，同時在匹配範圍內，推薦相對高單價商品。

不過，也要立足長遠，看生命週期價值。

比如，某用戶偏好電子產品，瀏覽和購買的商品也是以之為主。不難想象，個性化首頁的推薦商品也會高頻出現電子產品。然而，電子產品總體來說是低頻品類，復購週期長。

如果引導該顧客購買相對高頻的日用品或鞋靴服飾，進行跨品類引導。一旦成功轉化，有機會大幅度提升他的留存可能性、訪問頻度以及年度消費金額。從長遠來看，可以獲得更高的價值提升。

KPI之三：首屏聚焦率／訪問深度

綜合性電商移動端首頁往往有很多屏，如果我們觀察流量的衰減情況：第一屏一般是100%，到第二屏可能會衰減為70%……以此類推，直到通常用來鋪底抓流量殘值的“猜你喜歡”的頭部作為最後一屏（在京東、淘寶、亞馬遜等主流電商網站，通常首頁末屏流量在2%～6%之間），如下圖（數據為示例）：

電商首頁逐屏流量分佈

我們會發現，很多流量在逐屏向下的過程中離開了（稱為“跳失”）。後面的欄目入口，對於已跳失的流量來說，就失去了曝光機會。

流量的逐屏衰減速度，成為了產品設計的又一個KPI。

因為二屏往後的內容會不停變化，而第一屏通常為固定欄目，因此實踐中有時以“首屏聚焦率”作為KPI（即百分之多少的流量僅到達首屏，數值越小越好）。當然，也可以使用“訪問深度”，來看百分之多少的用戶到了第幾屏，或全部用戶平均走了多少屏。

提升首頁訪問深度，這是個比較複雜的事情。

我們先想一下線下大賣場的做法，賣場常常把生鮮這類高頻剛需品放在超市最深處。這樣，大多數人要買生鮮，就不得不一路逛下去，穿過整個賣場，從而提升了所有品類的曝光機會。

生鮮在線上的滲透率很低，我們無法效仿大賣場的做法。那麼，是否可以把線上的爆款頻道往下放呢？

以京東為例，最爆的是秒殺。那麼，把秒殺往下移動幾屏，延長用戶的秒殺到達動線，行不行呢？

不行！

流量逐屏衰減嚴重，如果把秒殺放到第五屏，也許五屏的流量可以提升不少，但也只是首屏的幾分之一，從而使秒殺流量大打折扣，全局上得不償失。這樣的核心頻道不該用來延長動線。

相反，根據賽馬原則，業務效果越好的頻道，應該放在越上面，以進一步提升產出。

目前來說，並沒有特別好的手段提升後續屏的到達率。一些小技巧大家可以參考：在第一屏的底部露出第二屏欄目的一小截；預告下面有更多精彩；在末屏放簽到抽獎欄目……大家可以多開些腦洞，傳遞“下面更好玩兒”或者“下面有好處”的感覺。

KPI之四：首頁跳失率（bounce rate）

首頁跳失率，即無點擊就離開首頁；直觀理解就是用戶進來以後啥都不感興趣，沒有任何點擊就離開了。

根據經驗，這個數據主要受流量質量影響，而不是首頁產品設計。

比如，很多流量是刷出來的，背後不是真實用戶，自然不會真的逛，在貢獻了流量計數後自然就“走”了。

還有些刷流量的工具可以錄製腳本，模擬特定位置的點擊甚至更復雜的操作，這時該虛假流量在首頁未產生跳失。但最終，虛假流量肯定不會下單。

另一種情況，用戶相關度較低的渠道引流。比如，某些互聯網公司通過“求掃碼”或以輕微的利益刺激獲得用戶下載訪問。這種情況下如果目標人群不匹配，人們進來看到這不是自己有興趣的“店”，首頁跳失率就會很高。同樣，這種情況也會出現在預裝機型或App下載渠道匹配不當上。

總體來說，根據經驗，首頁跳失率受首頁產品設計的影響偏小，但通常這是流量效率監測的一個重要環節。如果首頁產品上線後跳失率出現大幅波動，還是值得深入分析的。

其它指標

首頁停留時長，首頁點擊次數（體現興趣），首頁銷售商品金額等，有時也被用作首頁KPI，本文不做深入闡述。

縱觀上述KPI，我們可以看到首頁的幾大訴求：

讓用戶多逛逛，多看些商品，以更少的點擊完成購買；但又要贏得用戶對更多欄目的注意力，產生更多的點擊。

某些維度的數據有時會相互成反比，需要隔離開思考如何提升。

四、首頁全面改版實戰

下面結合我當年在1號店操刀的首頁大改版案例，為大家介紹首頁產品設計流程和改版全過程。

這個項目在公司CEO、CTO、CMO的高度關注（每週彙報）和全力支持下，調動全公司力量推進，覆蓋全面，幾乎所有部門深度參與。改版結果效果突出，獲劉強東的直接關注並聽取彙報。

這個項目是三年前的項目，因為涉及商業機密，這類項目不可能在新上線時公開細節。大家如果有緣看到深入的案例，一般都已經脫敏。

但在方法論和流程上，即便今天，這個項目依然是個範本，值得大家參考。

在構思改版產品方案之前，首先需要獲取全方位的輸入，包括：

• 首頁競品分析；
• 當前首頁用戶痛點深度訪談；
• 業務線首頁訴求；
• 當前首頁效率深度分析；
• UED分析。

1. 競品分析

競品分析的目的如下：

• 對標競爭對手的首頁風格，儘量匹配主流，尊重用戶已經培養的瀏覽購物習慣；不能落伍，也不要太超前或與眾不同。
• 分析競品主要亮點，結合自身特性加以借鑑和創新，與此對等，發現缺點，加以規避。
• 瞭解首頁產品發展新萌芽，捕捉前沿趨勢。

競品分析也可以跨界參考其它行業競品，以打開視野，跨界學習。

用研團隊對大量競品進行了深度調研，下面是同業和跨界的競品優缺點：

競品分析輸出

最終用研團隊給出如下五點結論：

1. 綜合性電商構建場景化頻道是總體趨勢。如淘寶的實惠、品質（天貓）、特色三大場景；京東的“愛生活、享品質、購特色”三大版塊。
2. 拳頭產品聚集人氣，創新產品層出不窮。如京東秒殺、淘寶有好貨，有效提高粘性並高效分流；同時京東試水眾籌、白條等新產品。
3. 超強精準化成為海量商品和用戶時代首頁營銷利器。如淘寶欄目堆圖實時精準化更新，天貓通過共用淘寶數據後臺，提供高效推送，千人千面，精準分流。
4. 垂直電商通過首頁Tab切換大區塊成為主流做法，綜合電商試水多首頁，更多欄目得以曝光。
5. 自主定製趨勢漸漸出現。網易雲音樂可自主調節板塊順序；愛奇藝自主管理頻道，控制置頂區內容。

通過上述趨勢，我們得到的結論是，在整體架構上，場景化構建框架，匹配差異化用戶購物基因，爆款頻道打頭，精準化鋪底，是核心方向。同時，首頁分Tab切換專區，同時支持部分內容的自主定製，是前沿機遇所在。

一個提示是，用研的調研對象是非常寬泛的，國內外千千萬萬眾App呈現出五花八門的形態，不可能由用研一一找到數據來驗證。產品負責人在調研開始階段需要給出思路方向，用研主要進行驗證，並給出支持與否的結論，這需要產品負責人很好的方向感和預判。當然，有時也會收穫驚喜。

2. 用戶痛點深度訪談

用研的另一個重要工作就是進行深度用戶洞察，瞭解各類用戶最大的痛點癢點興奮點。

從定性研究到定量研究，用研團隊發出數百萬份問卷（回收數萬份），並分組深度訪談了數百位用戶，得到當前首頁問題集合，並根據反饋頻率製作詞雲。

結果如下：

首頁痛點詞雲

同時，用研報告中摘錄部分典型用戶反饋如下：

• V2 狄女士：參加活動是個體力活。
• V0 方小姐：廣告不吸引我，關鍵信息沒寫清楚，天貓會很清楚；好像看不到按品牌分的，我想看滴露的，這裡沒法按牌子看。
• V3 陸先生：我會看剁手價，量販團和金牌秒殺，但是不知道他們有什麼區別，對我都是一樣的。

這裡的“V”是用戶等級，以幫助我們理解在什麼級別上的用戶有什麼樣的反饋與痛點。

最後，產品團隊對用研的反饋區分新老用戶進行了梳理。

結果如下：

新老用戶痛點總結

從結論我們可以看出，老用戶覺得首頁缺乏新意，不懂自己；新用戶覺得首頁缺乏特色，欄目邏輯區分困難。同時，新老用戶都覺得促銷引導有問題，首頁整體佈局不清晰，瀏覽效率差。

3. 業務線首頁需求收集

客觀來說，這個環節很重要，但也很難獲取有價值輸入。

作為產品經理，獲取業務線訴求是十分重要的。然而對於首頁，如果開放式地瞭解需求，最終聽到的業務線的訴求基本只會有兩點：

1. 我要更多的資源位；
2. 我的資源位要更靠上，更靠前。

當然，少數沒有格局的人還會反覆要求別人不能太多，自己的佔比必須高。所以，產品不能開放式地收集需求，給自己挖坑。

可以參考的做法是，從業務線的大老闆開始，從全局上獲取均衡的業務佔比需求，作為首頁欄目設置和資源位分配的輸入。在此基礎上，從全局上規劃欄目，並制定上線運營目標門檻，與業務線確認對口的欄目能否運營起來。

例如，對於促銷欄目，對當前欄目去蕪存菁，歸併同質化欄目。隨後，根據當前業務數據建議各類促銷在多長時間裡安排多少場次，促銷商品需要達到什麼力度，保證多少庫存，如何選品，從而達到預期的流量與銷售效果。最終，判斷哪些欄目可以在新首頁中獲得入口，那些不太行的，要麼放到二級入口，要麼直接取消或以新欄目代替。

本案因前期與CEO溝通緊密，獲得全力支持，並安排了與四位CXO的周例會，獲得了最高領導貫徹始終的全力支持。因此自頂向下明確了資源規劃與分配，在此基礎上得到了各業務線的全力配合，並在後續產品欄目設置中構思並確認了實惠、品質、精選等欄目的運營團隊。總體來說，獲取業務線確認與支持過程比較順暢。

4. 首頁效率分析

總體來說，首頁效率分析有兩個方式：

第一個，由產品端負責，對每個“坑位”取流量（或點擊率）、營收數據。這兩個是核心指標，也可以增加重視的其它指標，比如商詳頁到達率、跳失率、會員參與率、核心品類引導率等。

第二個，由UED團隊負責，通過眼動儀獲取用戶的眼動和操作軌跡，輸出視覺熱力圖、視線軌跡圖、鼠標點擊量、區域曝光率等。這可以充分體現首頁哪裡受到用戶關注。當然，這個需要非常專業的設備，往往外包第三方公司完成。

首頁產品效率分析的要素：

• 流量：體現用戶對該欄目的興趣指數，通常以UV來計算。也有按點擊率（CTR，點擊用戶數量／看到用戶數量）來看的。
• 營收：也叫GMV，看這個欄目最終賣了多少貨。當然有些欄目不是直接賣貨的，比如領券頻道。可以由相應指標來代替，比如領券率、券使用率、內容閱讀率、社交傳播發起率等。
• 商詳頁到達率／人均商詳頁訪問數：體現該欄目對商品的引流效率。
• 跳失率：體現該欄目的內容和體驗會不會讓用戶離開。
• 會員參與率：看付費會員多少人感興趣，或者拉動用戶成為付費會員的能力。
• 核心品類引導率：長遠看賣出正確的貨，比賣出更多的貨更重要。這個指標，是看這個頻道（典型的是跨品類頻道）對於賣出正確的貨有多少幫助，或者能夠跨品類引導用戶，使之成為戰略品類的顧客。

大家可以根據自身業務訴求，來定義如何衡量一個頻道的效率與貢獻，做為首頁改版中是否保留、獲得什麼位置的關鍵依據。

該項目中，我們取了UV和GMV兩大指標，得到了如下首頁流量效率圖（具體數字隱去）：

首頁流量效率圖

圖中的綠色方塊表示該頻道效果良好，黃色表示效果差強人意，而紅色則完全不行。這樣，我們可以一目瞭然地看到各個頻道的表現。

從UV和GMV維度，大致分為三種情況：

• UV和GMV都好，這是主力頻道；
• UV和GMV都差，這是要砍掉的頻道；
• UV好，GMV差，這說明頻道方向是受歡迎的，但貨不對；或者運營有問題，轉化效率差。

最終首頁分析總結如下：

用戶瀏覽風格：

• 約50%為效率追求型（35%搜索，15%分類導航）
• 約50%為閒逛型（各類頻道和會場）

用戶偏好：

• 強勢頻道：團閃剁手價 – 30%
• 檢索：業務及類目線 – 26%
• 導購、推薦欄目 – 12%
• 廣告入口 – 10%

結論：

• 促銷型欄目表現較好，圖片、廣告樓層表現不佳；
• 強勢品類（食品酒飲清潔廚衛美妝母嬰）表現較好；
• 存在低效入口和重複入口，缺乏KPI驅動的調整和賽馬機制。

5. UED分析

這個環節的第一步是交互分析，側重於產品整體信息架構、界面佈局、與用戶的交互方式等方面。

本項目的交互分析結論含如下環節：

1）佈局分析

天貓與京東在首頁模塊劃分上，將各種業務按照相關度整合在對應頻道內，首頁內容豐富而有序，對用戶來說簡單易懂，也便於視覺團隊有針對性地設計視覺元素。

對比天貓40個入口、京東44個入口，一號店雖然只有28個入口，但聚合方式混亂無序，部分以頻道維度、部分以業務維度劃分首頁模塊，沒有從用戶使用角度安排佈局，造成用戶“看不懂”、“找不到”，在視覺呈現上也難以整體處理，割裂感嚴重。

簡單說，有序性有待提升。

2）柵格分析

柵格系統以規則的網格指導和規範版面佈局，優勢有兩點：

1. 使頁面的信息呈現更加美觀易讀，提升可用性；
2. 在前端實現層面，可使頁面更規範靈活，便於實現模塊化。

交互團隊給出的柵格分析結論為：

• ［京東］使用4欄柵格系統，模塊統一成2種尺寸：1個單位、2個單位、4個單位（通欄）；
• ［天貓］使用12欄柵格系統，模塊統一成3種尺寸：3個單位、4個單位、6個單位、12個單位（通欄）。
• ［1號店］部分使用3欄柵格系統，模塊佔1個單位、2個單位、3個單位（通欄） 部分模塊獨立與柵格系統之外。

簡單說，當前首頁柵格偏粗糙，同時很多欄目並沒有對齊柵格。

3）視覺分析

下一步是視覺分析，主要側重於整體視覺效果、用色等方面。

視覺效果分析素材

首頁精緻，提升視覺效果，是預設的方向。

視覺團隊選擇了這方面表現出色的良倉（刻意沒有對標京東、淘寶）作為對標對象，給出瞭如下結論：

• 首頁輪播圖和商品圖是傳遞給用戶最快也是最直觀的視覺感受，直接反映了商品的氣質，定位。第一眼看到我店的App感受是“雜貨店”，凌亂而乏味。商品多而品質不高，紅色價格滿屏，強勢而干擾。打動不了用戶，沒有購買慾。
• 良倉：強調“精選”、“設計美學”。商品選用上突出設計感，科技感，不採用大量的推頭，顯得雜亂。輪播上簡單的彩色鮮明烘托主題，去掉俗氣的大紅大綠。文字上沒有太多花哨的裝飾，提升商品本身的品質感。
• 1號店：商品圖粗糙，輪播圖略俗氣。配色和商品沒有關聯。文案、價格信息過大過多，排版雜亂，各種紅色標籤突兀，干擾視覺。建議減少並控制文案字數。增加場景化圖片的運用，提升品質感，營造購物環境感。模塊樓層更鮮明，增加樓層的節奏變化，不要一行3到底，視覺容易疲勞，產生厭倦。

4）色彩分析

電商品牌色彩大多近似，要想在眾多相似的App中帶給用戶新鮮感、特別感，就只有在用色、icon等局部位置，採用不一樣的設計。如，icon風格微變化，在適當的地方微擬物等，增加一些小創意。

色彩分析素材

如下為色彩分析輸出，選了三個比較有特點的App進行對標。

• ［想去］banner的邊框模擬雜誌紙張厚度，配合標題文字特殊字體排版，增加品質設計的味道，烘托商品的格調。
• ［餓了麼］icon的擬物美食，提升直觀的誘惑度，大面積的藍色提升品牌印象。
• ［Enjoy］icon採用純黑的line，傳遞高端奢華感。商品圖精美，默認缺損圖也設計的有品質感，像高級的包裝紙，不是簡單的灰色加logo。

5）大促定製

雙11、618、黑五以及各個電商節，包括超級品牌日，是電商的設計團隊大顯身手的時候，讓消費者從平日熟悉的常規界面中跳脫出來，耳目一新地看見熱鬧喜慶充滿創新的盛裝造型。

相比大促主會場更加註重促銷活動、商品展示效率、分會場的分發，首頁是更好的體現創意的舞臺。

在本項目的大促定製對比中，1號店的設計勝出。

因為進度要求，這次改版沒有安排視覺熱力圖和視線軌跡圖的測試。但如果大家時間和經費允許，可以與擁有專業設備的第三方機構合作，深度瞭解用戶在當前首頁上的視線軌跡和專注點，以更好地瞭解用戶瀏覽特性和興趣點。

下圖為亞馬遜視覺團隊所做的首頁分析，我們可以看到：紅色區域為用戶視線最多關注的區域，越紅表示越關注，然後從黃到綠到白，關注度下降；同時，也可以獲取用戶眼動順序，最右圖的1，2，3，4就是用戶視線移動軌跡。

通過這樣的分析，我們比較容易判斷用戶的注意力容易被什麼所吸引，進而找到設計的側重點。

視覺熱力圖與軌跡圖

至此，競品分析、用戶深度調研、業務線需求、產品分析、UED分析全部完成，輸入收集階段結束，進入新首頁設計階段。

6. 移動情緒版

這個由視覺團隊負責的專業的研究，目的是瞭解消費者在App瀏覽購物時的情緒反應，進而確定新首頁的主體配色、風格，傳遞和凸顯產品個性與品牌形象，在用戶潛意識中對品牌性格和消費方式進行影響。

情緒版的研究流程如下：

步驟及輸出如下：

1）根據公司的品牌形象定位，選擇三個原生關鍵詞。

2）根據大量的用戶問卷調研及訪談反饋，整理出反覆出現的體現印象和訴求的高頻詞，最終整理出六個正性詞，並摻入一個易混淆的負性詞。

3）針對得到的原生和衍生定位詞，通過大量目標用戶訪談，對定位進行描述，並選取體現定位詞的描述詞。

4）解讀每一個定位詞對應的視覺、心境、物化映射，對顏色和場景進行定義。

下面以“家庭”為例：

詞典釋義：以婚姻和血統關係為基礎的社會單位，包括父母、子女和其他共同生活的親屬在內。

視覺映射：柔和的燈光，柔軟，軟和，木結構。

心境映射：溫馨；溫柔、溫和；陪伴、支持；大家在一起，心情特別好。

物化映射：沙發、地毯、壁爐、床、編織物；父母，孩子，祖父母；寵物。

顏色：暖色系、柔和的顏色。

• 黃色、橙色系：燈光的顏色，皮膚的顏色，原木的顏色；
• 明度高純度低：和諧、輕盈、愜意。

場景：一家人圍坐吃飯，一起坐在沙發看電視，一起旅行。

5）通過上面的這些解讀，找到大量可以代表定位詞的圖片。

依然以“家庭”為例，視覺團隊根據上述描述詞找出數百張可以代表“家庭”的視覺、心境和物化映射的圖片：

抽取其材質：

對所有圖片進行虛化，提取其中主要顏色：

選擇對應字體：

限於篇幅，這裡僅給出“家庭”的實例，以此類推。

最後，在業務定位之外，針對首頁產品希望傳遞的“簡潔、年輕、隨時隨地”的感覺，確定如下配色方案。

簡潔：

年輕：

隨時隨地：

至此，體現業務定位和改版產品訴求的配色、風格已經確定，成為設計師在後續首頁和頻道設計中參考的主要依據。

7. 新首頁KPI選定

這次改版的核心目標是提升首頁引導效率和體驗，重整並以場景化聚合導購欄目，為不同風格用戶提供各自的訴求承載區域。由此，選定點擊價值、人均點擊數、首屏聚焦率、跳出率作為四大核心指標。

目標值根據當前實際情況設定，根據競品數據對標，最大的差距在人均點擊數，而當前跳出率則佔有較大優勢。

因此，根據差距以及產品思路對應的潛在提升效果，設定了5%～20%的提升目標，如下：

首頁改版KPI

8. 首頁方案頭腦風暴

產品團隊根據所有前期準備的輸出以及產品目標，進行了頭腦風暴，提出的框架性思路如下：

1）樓層按主題維度，分為好店、主題、賣場、清單等，頻道做穿插推薦。

點評：這個思路符合主流，方案略顯保守。

2）秒殺商品縱向排布，把流量往下帶，或將爆款頻道下沉，並在首屏進行提示。

點評：這思路的腦洞有點大，同時比較冒風險，可能會導致爆款頻道銷售大幅打折扣，進而影響全局營收。

3）頂部根據場景設置Tab：如導購、活動等。

點評：該思路很創新激進，實質上是實現電商產品的多首頁，最大的擔憂是後續Tab沒有流量。

4）內容前置，淺層級露出，穿插顯示頻道。

點評：這個思路的優點是為更多核心內容提供了流量，缺點是會導致首頁過長，順序在中後的欄目得不到曝光。

經過反覆探討論證，考慮做兩個方案，一個保守，一個激進，供領導層決策。

上述第一點作為穩妥型產品方案方向，作為主推；放棄第二點；第三點作為激進型方案，作為備選；而第四點更適合展示用戶感興趣的首頁局部內容，基於此考慮做一個大膽創新：純自定義首頁，作為第二首頁提供給用戶。

9. 首頁設計稿

1） 主推方案（穩妥版）

主推方案在原有框架基礎上重整了幾乎所有欄目，頭部區域之後按場景化進行佈局，重新梳理和調整了首頁資源欄位，在局部做了大量的微創新，並從視覺上重新匹配公司戰略和商業定位，解決用戶所反饋的核心痛點。

方案要點如下：

這次改版也重新設計了搜索頁，對走搜索路徑的精準流量進行引導，創造新的商業機會。其中，“大家都在找”通過從眾心理引導搜索流量轉向目標商品或活動，同時用“想不起來找什麼”來捕獲進入搜索卻存在著“逛”心理或好奇心的用戶。

搜索頁設計

2）第二首頁與定製化首頁

雖然首頁可以千人千面，但主體框架通常是固定的。隨著導購欄目的豐富和新欄位的持續增加，首頁越來越長，用戶有限的時間和注意力被嚴重分散，甚至迷失。

既然對每個人來說都有大量不感興趣的欄目，那麼不難想到：讓首頁完全由用戶定製。

在這次改版設計中，我們推出了完全可由用戶定製的第二首頁。如下圖：

可以看到：該設計通過地域特徵設置皮膚（可更換），所有欄目可由用戶通過頻道池進行選擇、增減、排序（用戶瀏覽歷史設定初值）；同時，每個頻道提供一個首頁卡片，部分展開該欄目鉤子內容。

此外，第二首頁也可以支持皮膚替換，下面是幾版默認皮膚：

第二首頁可替換皮膚

這個大膽的首頁創新上線後，我們看到的數據是，從傳統首頁進入的流量佔比較少。但進入的流量，復訪比率高，並在復訪時轉化效率明顯提升。

這證明了以下幾點：

• 用戶偏“懶”，全新產品的使用習慣需要逐步養成。
• 自定義首頁定製只展示用戶喜歡的頻道，引導效率高。
• 營銷資源位基本消失。這是它的魅力所在，但也決定了它無法最終取代第一首頁。畢竟，業務線需要放廣告，推活動。

另一個創新實踐是UED團隊開發了H5版本的可定製首頁，輪播圖可替換為自選照片，icon位文字可由用戶定製，首頁通過微信傳播。該版本在情人節上線，主打表白場景，把購物與愛情相結合，生動有趣。

H5定製化首頁

3）備選方案（激進版）

這次首頁改版希望為不同風格用戶提供差異化的瀏覽路徑，在第一版的穩妥方案中，我們依然保留了符合各類用戶偏好的大量欄目，但也導致了首頁較長。激進方案則嘗試多首頁並舉，讓用戶根據自己的瀏覽偏好進行切換。

首頁必須要展示核心營銷內容和核心固定欄目，除此以外，逛首頁的用戶，大風格分為閒逛型、半精準型、活動導向型，為此設置了“頻道”、“品類”、“活動”三個副首頁，以提供差異化的導購路徑。

設計如下：

多首頁設計

因為每個首頁內容做了拆分，因此具備了各欄目的首頁局部展開條件，讓頭部二級內容淺層級露出，更好地抓取流量，甚至通過首頁直接完成轉化。此

外，“活動”首頁的活動瀑布流可以讓喜歡參加活動的用戶，快速瀏覽活動池，極大提升“逛”的效率。

最終，領導層不出意料地選擇了穩妥型的方案。

10. 痛點解決方案及創新點總結

最後，針對前面的痛點調研，我們來看下新版首頁在方案上對痛點的覆蓋和解決。

新首頁痛點解決方案與創新點

通過上圖我們可以看到，所有痛點都在方案中被覆蓋。同時，改版方案還具備了四個創新點：

1. 自定義首頁（第二首頁）：這是電商業界的創新設計，通過自定義欄目、本地化運營和皮膚更換設計，為用戶打造一個最適合自己的首頁。
2. 懸浮輪播圖：這個設計主要解決在整體首頁定製（如超級品牌日）時，輪播圖第二幀及後續圖片很可能與首屏“帽子”和“衣服”不協調的問題。通過懸浮，在視覺上把輪播分層拉出，既美觀，又減小上下不搭的問題。
3. 頻道動態內容首頁展示
   ：根據當前用戶偏好出打撈不同的活動、商品、內容，展示在首頁，在內容上完全動態。這突破了業界針對固定內容展示動態圖片和商品的方式。
4. 定製搜索頁：聚合多個維度對搜索流量進行引導，突破了常規搜索頁的“搜索歷史”、“熱搜”兩個主要方向，增加了營收資源和業務引導，也提升了搜索的趣味性。

11. 新首頁數據表現

新首頁上線後，數據表現良好，AB測試體現：

• 點擊價值上提升約21%；
• 人均點擊次數增長27%；
• 首屏聚焦率在初期出現下滑後回升，最終與原數據接近，分析認為大批用戶對於新首頁存在新鮮感，在初期“逛”的行為大幅度增加，但度過了新鮮階段後依然會專注在自己喜歡的頻道；
• 跳失率無明顯變化，這體現了首頁設計並非跳失率的最大影響因素，除非設計出現重大失誤。

五、首頁實戰總結

有耐心讀到這裡的讀者，一定是特別有興趣深入學習首頁的設計理念和方法的同行。

最後，我在這裡做一個簡單的總結：

1. 首頁是流量分發的關鍵

首頁決定公司內部各業務線獲得流量和轉化的機會，是互聯網產品的最重要模塊；甚至可以說，沒有之一。然而，流量分發是個無比複雜的話題，大約三分產品，七分運營（主要是資源動態分配）。

2. 首頁承載引導用戶的使命

首頁承載起引導用戶瀏覽與購買的使命，並建立和體現公司品牌形象，創造直接營收。同時，首頁也是最重要溝通點位。這些方面存在著大量平衡點，如何把握好體驗並創造全局最大收益，是產品經理的重要課題。

3. 首先明確KPI

做好首頁，必須首先明確針對哪些KPI進行思考與設計。其中，人均商詳頁到達率／訪問量、點擊價值、點擊次數、停留時長、瀏覽深度、跳失率，以及其它提升流量效率的方面，都可以作為KPI。

4. 把握設計來源

在首頁產品設計和改版中，競品分析、用戶痛點分析、業務需求梳理、產品效率分析、UED分析都是重要的輸入來源。一切的設計都需要強有力的依據，儘量避免“我喜歡”、“我覺得好看”，除了“老闆喜歡”是產品經理沒辦法的事。

5. 跟進數據

必須跟進最終數據，灰度發佈，仔細驗證各方面的成效。同時，避免太大幅度的變化。用戶耳目一新的另一面，也有可能“一臉懵逼”，要尊重用戶已經養成的習慣，避免太過於創新。同時，設計上儘量向下兼容，減少用戶的學習成本。

首頁要出彩，一半是產品，一半是運營。

來源 產品遇上運營

---

分享到:

---

閱讀更多 壹點方圓諮詢 的文章

關鍵字: 跟進 設計

---