首頁蝉衣，互聯(lián)網(wǎng)公司的門面，不僅是形象的體現(xiàn)病毡，也是所有業(yè)務(wù)的入口點(diǎn)濒翻、用戶的必經(jīng)之路。

作為最重要的模塊啦膜，它的產(chǎn)品設(shè)計和運(yùn)營有送，會對公司業(yè)務(wù)產(chǎn)生關(guān)鍵影響。首頁改版僧家，舉足輕重雀摘，不僅領(lǐng)導(dǎo)層和業(yè)務(wù)線最為關(guān)注，也是產(chǎn)品經(jīng)理的最大的難題八拱。

本文我將結(jié)合多年來在大型電商公司負(fù)責(zé)首頁產(chǎn)品和首頁運(yùn)營的實(shí)戰(zhàn)經(jīng)驗(yàn)届宠，聊聊如下方面，為大家玩轉(zhuǎn)首頁提供一些經(jīng)驗(yàn)參考：

首頁的使命與核心目標(biāo)

首頁產(chǎn)品KPI制定

首頁產(chǎn)品設(shè)計思路

大型電商首頁改版實(shí)例

一乘粒、初識首頁

最初豌注，我是在攜程的時候?qū)κ醉摰木薮笥绊懥Ξa(chǎn)生認(rèn)知。

熟悉攜程的同學(xué)都知道灯萍，攜程的首頁主體是彩色宮格轧铁。宮格被分配到各個業(yè)務(wù)線，能否獲得首頁宮格（一級入口）旦棉，及其位置齿风、大小药薯，體現(xiàn)了該業(yè)務(wù)在攜程的戰(zhàn)略地位。

下圖是攜程首頁：

據(jù)說該彩色宮格的起源是這樣的：

有一天救斑，創(chuàng)始人梁建章夢見一個彩色的房子童本，每個房間的顏色都各不相同，很有吸引力脸候。醒來之后穷娱，他就要求把攜程首頁改成了彩色宮格。

美食業(yè)務(wù)在首頁獲得了重要入口运沦，是因?yàn)槊朗吵休d著攜程關(guān)鍵的戰(zhàn)略使命：補(bǔ)齊攜程“吃住行玩購”五大旅行訴求中薄弱的兩端——吃與購泵额，并通過“吃”的高頻屬性有效驅(qū)動DAU和黏性的提升，為核心業(yè)務(wù)反哺流量携添。

這個戰(zhàn)略定位深受梁建章的重視嫁盲，由此也在很多新業(yè)務(wù)中脫穎而出，斬獲了首頁的重要位置烈掠。

因?yàn)閾碛酗@著入口羞秤，由首頁進(jìn)入的流量十分可觀。當(dāng)然左敌，背后的入口位爭奪也十分激烈瘾蛋。

而入口位置和大小，甚至顏色變化母谎，都會對流量產(chǎn)生顯著影響瘦黑，從而對業(yè)務(wù)產(chǎn)生巨大影響。

那時的我對首頁產(chǎn)品和運(yùn)營還比較懵懂奇唤，在后來的互聯(lián)網(wǎng)之路中幸斥，我越來越深刻地理解了首頁背后的那些是非曲直，下面聽我娓娓道來咬扇。

二甲葬、首頁的核心目標(biāo)

要做好首頁產(chǎn)品設(shè)計，或者制定運(yùn)營策略懈贺，首先要充分理解首頁承載的核心目標(biāo)经窖。

目標(biāo)1：流量分發(fā)

流量是互聯(lián)網(wǎng)公司一切業(yè)務(wù)的起點(diǎn)。

通過首頁做好流量分發(fā)梭灿，給到各業(yè)務(wù)線合理的流量画侣，這通常是首頁的最重要使命。

大部分公司的業(yè)務(wù)都是多元化的堡妒，比如攜程有酒店配乱、機(jī)票、旅游等主要業(yè)務(wù)，還有更多的如民宿搬泥、火車票桑寨、美食等細(xì)分業(yè)務(wù)；京東商城有超市忿檩、家電尉尾、家居等主要業(yè)務(wù)，以及海量的細(xì)分業(yè)務(wù)燥透；美團(tuán)點(diǎn)評有美食沙咏、外賣、生活服務(wù)等業(yè)務(wù)兽掰。

美團(tuán)點(diǎn)評

京東

所有這些業(yè)務(wù)都有各自的營收目標(biāo)芭碍，都需要流量（即顧客）徒役，而App端主要流量來自于首頁的分發(fā)孽尽。

那么，如何正確分發(fā)忧勿？

首先杉女，確定業(yè)務(wù)流量目標(biāo)。

舉個例子：

某公司有A鸳吸、B熏挎、C三個業(yè)務(wù)，年度營收目標(biāo)是50億晌砾，30億坎拐，20億。簡化起見养匈，我們假設(shè)全部業(yè)務(wù)通過App完成哼勇。

那么，三個業(yè)務(wù)的流量目標(biāo)計算過程如下：

第一步：統(tǒng)計上一周期A呕乎、B积担、C各自的單品頁總流量及售出單品總數(shù)，并計算A猬仁、B帝璧、C各自的轉(zhuǎn)化率（業(yè)務(wù)售出單品總數(shù)／業(yè)務(wù)單品頁總流量）。

第二步：統(tǒng)計上一周期A湿刽、B的烁、C的售出單品均價。

第三步：通過商詳頁（或POI頁）的流量來源诈闺，統(tǒng)計搜索與導(dǎo)購貢獻(xiàn)的流量占比渴庆。

第四步：預(yù)測目標(biāo)周期的全站日均單品頁總訪問量。

第五步：計算A需要的首頁流量占比，全站日均單品頁訪問總量*導(dǎo)購流量占比*A首頁流量占比*A轉(zhuǎn)化率*A單品均價*365=5000M把曼。同理計算B杨帽、C。

例如：

全站單品頁日均訪問量預(yù)計為500萬嗤军，導(dǎo)購流量占比60%注盈，A業(yè)務(wù)轉(zhuǎn)化率20%，單品均價50元叙赚。

則5M*60%*A流量占比*20%*50*365=5000M老客，得到A業(yè)務(wù)需要的流量占比=45.7%。

注：

用戶的瀏覽和訂單往往橫跨多個業(yè)務(wù)／類目震叮，因此在這里不以“用戶-訂單”為單位胧砰，而以“單品頁流量-售出單品數(shù)”為計算單位，以徹底分開各個業(yè)務(wù)苇瓣。

除社交和搜索引擎渠道通過App喚起直達(dá)單品頁的引流（非社交電商較少）尉间，單品頁流量只有兩個來源，一是通過App搜索到達(dá)击罪，二是通過導(dǎo)購欄目到達(dá)哲嘲。首頁流量分發(fā)僅影響導(dǎo)購流量。

這里說的單品頁媳禁，在電商是商詳頁眠副，在OTA或O2O是POI（店鋪、景點(diǎn)等）竣稽，在內(nèi)容平臺是內(nèi)容頁（文章囱怕、小視頻等），以此類推毫别。

簡化起見娃弓，這里假設(shè)目標(biāo)周期各業(yè)務(wù)的單品均價不變。如果有變化拧烦，可以跟業(yè)務(wù)線要求價格調(diào)整幅度忘闻，作為估算輸入。

通過上述計算恋博，我們得到A齐佳、B、C的流量占比需求债沮。但隨后可能會發(fā)現(xiàn)炼吴，三者求和不等于100%。

如果大于100%疫衩，說明全站流量無法滿足業(yè)務(wù)線的營收目標(biāo)硅蹦，還需要和有關(guān)部門溝通，要么調(diào)整營收預(yù)期，要么想辦法提升流量或轉(zhuǎn)化率童芹；如果小于100%涮瞻，恭喜，這意味著有一部分資源位可以作為buffer假褪，根據(jù)需要進(jìn)行靈活調(diào)配署咽。

確定了各業(yè)務(wù)所需流量占比，如何在首頁進(jìn)行分發(fā)呢生音？

流量不是物品宁否，可以搬來搬去，背后是鮮活的消費(fèi)者缀遍，需求明確慕匠，不是想讓他們點(diǎn)哪個欄目就會點(diǎn)哪個欄目的。流量分發(fā)牽涉到非常復(fù)雜的產(chǎn)品和運(yùn)營層面的聯(lián)動域醇，也有邊界和上限搓幌。

除了日常為業(yè)務(wù)線分發(fā)流量晌梨，大促階段首頁也承載起為主會場毅该、分會場和各類活動導(dǎo)流的責(zé)任梦谜。這時也需要明確各個活動會場的定位（分流督怜、賣貨殴瘦、拉會員），相應(yīng)的流量分配做好規(guī)劃号杠。

目標(biāo)2：瀏覽路徑引導(dǎo)

互聯(lián)網(wǎng)公司海量日活的背后蚪腋，是特征差異巨大的用戶群體。

首頁的又一個關(guān)鍵目標(biāo)姨蟋，是為不同風(fēng)格不同訴求的用戶鋪設(shè)合理的“逛”的路徑屉凯。

按購物目的來分，有的用戶是精準(zhǔn)型用戶眼溶，很清楚自己具體要買什么東西悠砚，比如雀巢三段嬰兒奶粉6罐裝；有的用戶是半精準(zhǔn)型用戶堂飞，知道自己要買什么但不具體灌旧，比如要買嬰兒奶粉；有的用戶則完全是隨便來逛逛绰筛，看看有什么好東西打動自己枢泰。

按購物風(fēng)格來分，有的用戶是價格敏感型用戶铝噩，喜歡看促銷欄目衡蚂，重點(diǎn)買優(yōu)惠商品；有的用戶是品質(zhì)或品牌導(dǎo)向型用戶，喜歡看精品導(dǎo)購毛甲、買手推薦或品牌欄目年叮；有的用戶是解決方案導(dǎo)向用戶，為了某一個身處的場景（如新媽媽玻募、春游谋右、過冬）尋找相應(yīng)商品。

當(dāng)然补箍，我們也可以按類目或用戶需求基因來分改执。比如數(shù)碼極客、閱讀愛好者坑雅、家庭主婦（可以是家庭婦男）辈挂、新媽媽（或新爸爸）、學(xué)生一族等裹粤。

以上各種用戶终蒂，都需要差異化的“逛街”路徑，以實(shí)現(xiàn)貼心的購物過程遥诉，實(shí)現(xiàn)與興趣高度匹配的沉浸式瀏覽拇泣，大幅提升購買幾率。首頁矮锈，類似于商場布局霉翔，是鋪設(shè)導(dǎo)購路徑的源頭，承載用戶千變?nèi)f化的“逛街”訴求苞笨。

目標(biāo)3：打造企業(yè)形象债朵，迎合目標(biāo)客群

每家企業(yè)都有明確的商業(yè)定位。比如有的銷售高端輕奢精品瀑凝，有的銷售跨境大牌序芦，有的銷售超市商品和百貨，有的售賣健康生鮮粤咪，有的則是小商品集散地谚中。

首頁就類似于商店門面，一定要能精準(zhǔn)體現(xiàn)公司商業(yè)定位寥枝。這樣宪塔，相應(yīng)的客群進(jìn)入首頁，就會感覺這是一個適合的購物場所脉顿，做進(jìn)一步瀏覽蝌麸。

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

輕奢電商 VS 超市電商

不難看出艾疟，奢品大牌類的首頁重點(diǎn)：

品牌：對于普通消費(fèi)者來說来吩，奢品的核心就是品牌敢辩，其次才是商品、設(shè)計和款式弟疆。

高清戚长、大圖、留白：高端氣質(zhì)需要通過這三大要素來體現(xiàn)怠苔，琳瑯滿目同廉、價格折扣都是次要因素。

而超市電商則突出品類柑司、商品迫肖，強(qiáng)調(diào)價格、折扣攒驰、賣點(diǎn)蟆湖，界面追求展示效率，營造琳瑯滿目的感覺玻粪，色彩則相對艷麗繁雜——因?yàn)槌须娚讨饕南M(fèi)者是家庭主婦隅津，重視商品、價格和折扣劲室，購物強(qiáng)調(diào)需求與效率伦仍。

目標(biāo)4：創(chuàng)造直接營收

移動端首頁無疑是流量最大的頁面，因此也是創(chuàng)造直接營收的黃金位置很洋。比如充蓝，廣告位、爆品陳列蹲缠、品牌合作棺克、向某個重要活動引流，這些都是創(chuàng)造直接營收的重要手段线定。

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

在這里特別需要平衡好的是營收訴求與用戶體驗(yàn)之間的關(guān)系，這也是業(yè)務(wù)确买、廣告等團(tuán)隊(duì)和首頁產(chǎn)品斤讥、運(yùn)營爆發(fā)最多沖突的方，需要提前預(yù)設(shè)相關(guān)具體資源位使用規(guī)則湾趾。

目標(biāo)5：進(jìn)行關(guān)鍵溝通

作為必經(jīng)之處芭商，通過首頁與用戶溝通，觸達(dá)率無疑是最高的搀缠。比如首頁彈窗（如新人禮包铛楣、重要通知、權(quán)益到賬等）艺普，滾動信息欄（如淘寶頭條簸州、京東快報）鉴竭，頂部通欄第一楨，站內(nèi)信岸浑，都是常見的溝通點(diǎn)位搏存。

同樣，如何平衡觸達(dá)率和用戶體驗(yàn)矢洲，也是個難題璧眠。

首頁彈窗是對用戶的強(qiáng)制打擾，當(dāng)初很多PC網(wǎng)站的體驗(yàn)读虏，很大程度上就毀在彈窗廣告责静。產(chǎn)品經(jīng)理設(shè)計首頁彈窗時需要格外謹(jǐn)慎，并絕對避免每次加載首頁時的重復(fù)彈窗盖桥。

首頁彈窗功能的開發(fā)不難泰演，但首頁運(yùn)營的一個挑戰(zhàn)，就是始終要抵擋一浪又一浪的首頁彈窗強(qiáng)烈需求葱轩，并為此制定合理彈窗規(guī)則睦焕。

三、首頁產(chǎn)品KPI

要做出優(yōu)秀的首頁產(chǎn)品設(shè)計靴拱，遠(yuǎn)遠(yuǎn)不只是“好看”垃喊。產(chǎn)品思維立足全局與長遠(yuǎn)，深度洞察用戶訴求與痛點(diǎn)袜炕，并側(cè)重邏輯性與歸因分析本谜。

由此，設(shè)定科學(xué)的KPI作為目標(biāo)偎窘，是首頁產(chǎn)品設(shè)計的第一步（這其實(shí)也是所有產(chǎn)品設(shè)計的第一步）乌助。

不同的公司，首頁的使命會有所不同陌知。在這里我以綜合性電商首頁KPI為例他托，來進(jìn)行闡述。

KPI之一：人均商詳頁訪問數(shù)

正常情況下仆葡，商店都希望顧客多逛逛赏参。假設(shè)商詳頁加車率固定，那么用戶到達(dá)越多的商詳頁沿盅，銷售也就越好把篓。于是很自然，人均商詳頁訪問數(shù)就是首頁設(shè)計的第一個核心指標(biāo)腰涧，它體現(xiàn)首頁的引導(dǎo)效率韧掩。

可以看到，除了選品窖铡、價格和促銷這些根本性的方面疗锐，產(chǎn)品層面上坊谁，下列因素對人均商詳頁訪問數(shù)會產(chǎn)生較大影響：

欄目的個性化程度與精準(zhǔn)化算法水平

多維度導(dǎo)購欄目的合理設(shè)置

商品的淺層級露出

商品布局及展示效率

標(biāo)簽體系設(shè)計

第一點(diǎn)比較好理解，讓用戶看到更感興趣的欄目和商品窒悔，是多逛逛的關(guān)鍵呜袁。

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

第二點(diǎn)需要平衡，導(dǎo)購欄目不要太多聋庵，也不能太少膘融。

維度設(shè)計要在用戶層面做好差異化，講清楚邏輯祭玉。例如促銷氧映，可以分為限時型、限量型脱货、團(tuán)購型岛都、精選型，一個維度做好一個欄目就可以了振峻，不要同時鋪太多邏輯臼疫，導(dǎo)致用戶迷失。同樣扣孟，導(dǎo)購可以覆蓋嘗鮮烫堤、從眾、獵奇凤价、專家意見等多個維度鸽斟，但一個維度盡量只做一個欄目。

第三點(diǎn)看似簡單利诺，實(shí)踐卻十分困難富蓄。

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

但商品直鋪首頁胜卤，實(shí)際上我看到的數(shù)據(jù)卻往往又是失敗的。比如下面這個項(xiàng)目赁项，原本頻道入口如下：

做淺案例–舊版

為了把商品做淺葛躏，提升首頁商詳?shù)竭_(dá)率澈段，我們嘗試打撈出頻道爆款商品鋪在首頁，通過首頁直達(dá)舰攒。改版后如下：

做淺案例–新版

結(jié)果完全出乎意料：商詳?shù)竭_(dá)率下降0.23%败富！

產(chǎn)品團(tuán)隊(duì)先后改了三個版本，上線測試后全部失斈η浴兽叮！

最終結(jié)論，首頁欄目鋪設(shè)櫥窗商品猾愿，如果點(diǎn)擊直達(dá)商詳鹦聪，會導(dǎo)致用戶進(jìn)入頻道幾率下降，反而使更少的商品得到曝光蒂秘。同時泽本，頻道入口變高，導(dǎo)致單屏展示效率下降姻僧，后續(xù)欄目被推得更深规丽，影響全局。

實(shí)驗(yàn)數(shù)據(jù)表明：首頁曝光櫥窗商品的正確做法是撇贺，櫥窗商品點(diǎn)擊向頻道頁引流赌莺。

第四點(diǎn)，商品布局和展示效率显熏，測試數(shù)據(jù)表明雄嚣，圖更大更美的一行二展示，效率大不如略顯擁擠的一行三喘蟆。

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

最后，標(biāo)簽體系橙弱。

簡單來說歧寺，通過導(dǎo)購、促銷棘脐、屬性三大標(biāo)簽斜筐，展示商品的核心賣點(diǎn)，對于抓到點(diǎn)擊提升商詳?shù)竭_(dá)率非常非常關(guān)鍵蛀缝。

KPI之二：首頁點(diǎn)擊價值

綜合性電商通常有海量商品顷链，欄目往往分為很多級，商品藏得很深屈梁。如何高效引導(dǎo)用戶快速找到感興趣的商品并完成購買嗤练，成為導(dǎo)購產(chǎn)品的核心訴求榛了。

用通俗的話來說，越少的點(diǎn)擊次數(shù)煞抬，產(chǎn)生越多的銷售霜大，就越好。因此革答，可以定義“首頁點(diǎn)擊價值”作為KPI战坤。

首頁點(diǎn)擊價值=首頁導(dǎo)購欄目產(chǎn)生的總銷售／首頁總點(diǎn)擊數(shù)

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

到達(dá)商詳頁的路徑深度

推薦商品的轉(zhuǎn)化能力

銷售商品的平均單價

第一個因素已經(jīng)做了簡單探討蝗碎，把商品合理做淺湖笨，但不要影響展示效率。同時蹦骑，頁面不可避免會分為多級慈省，要仔細(xì)考慮好每個頁面向下一級頁面的引流手段。

例如眠菇，首頁展示櫥窗商品边败，點(diǎn)擊后到達(dá)頻道頁而非商詳頁；但為了體驗(yàn)捎废，要確保所點(diǎn)擊商品出現(xiàn)在頻道頁第一屏顯著位置笑窜。

后兩個因素直觀來理解，是盡量向用戶展示他感興趣的商品登疗，并通過標(biāo)簽排截、文案等手段突出賣點(diǎn)，同時在匹配范圍內(nèi)辐益，推薦相對高單價商品断傲。

不過，也要立足長遠(yuǎn)智政，看生命周期價值认罩。

比如，某用戶偏好電子產(chǎn)品续捂，瀏覽和購買的商品也是以之為主垦垂。不難想象，個性化首頁的推薦商品也會高頻出現(xiàn)電子產(chǎn)品牙瓢。然而劫拗，電子產(chǎn)品總體來說是低頻品類，復(fù)購周期長矾克。

如果引導(dǎo)該顧客購買相對高頻的日用品或鞋靴服飾杨幼，進(jìn)行跨品類引導(dǎo)。一旦成功轉(zhuǎn)化聂渊，有機(jī)會大幅度提升他的留存可能性差购、訪問頻度以及年度消費(fèi)金額。從長遠(yuǎn)來看汉嗽，可以獲得更高的價值提升欲逃。

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

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

電商首頁逐屏流量分布

我們會發(fā)現(xiàn)撰筷，很多流量在逐屏向下的過程中離開了（稱為“跳失”）陈惰。后面的欄目入口，對于已跳失的流量來說毕籽，就失去了曝光機(jī)會抬闯。

流量的逐屏衰減速度，成為了產(chǎn)品設(shè)計的又一個KPI关筒。

因?yàn)槎镣蟮膬?nèi)容會不停變化溶握，而第一屏通常為固定欄目，因此實(shí)踐中有時以“首屏聚焦率”作為KPI（即百分之多少的流量僅到達(dá)首屏蒸播，數(shù)值越小越好）睡榆。當(dāng)然，也可以使用“訪問深度”袍榆，來看百分之多少的用戶到了第幾屏胀屿，或全部用戶平均走了多少屏。

提升首頁訪問深度蜡塌，這是個比較復(fù)雜的事情碉纳。

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

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

以京東為例岖沛，最爆的是秒殺暑始。那么，把秒殺往下移動幾屏婴削，延長用戶的秒殺到達(dá)動線廊镜，行不行呢？

不行唉俗！

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

相反，根據(jù)賽馬原則寺酪，業(yè)務(wù)效果越好的頻道坎背，應(yīng)該放在越上面，以進(jìn)一步提升產(chǎn)出寄雀。

目前來說得滤，并沒有特別好的手段提升后續(xù)屏的到達(dá)率。一些小技巧大家可以參考：在第一屏的底部露出第二屏欄目的一小截盒犹；預(yù)告下面有更多精彩懂更；在末屏放簽到抽獎欄目……大家可以多開些腦洞，傳遞“下面更好玩兒”或者“下面有好處”的感覺急膀。

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

首頁跳失率沮协，即無點(diǎn)擊就離開首頁南片；直觀理解就是用戶進(jìn)來以后啥都不感興趣颅筋，沒有任何點(diǎn)擊就離開了枝秤。

根據(jù)經(jīng)驗(yàn)黎茎，這個數(shù)據(jù)主要受流量質(zhì)量影響，而不是首頁產(chǎn)品設(shè)計名党。

比如嘹朗，很多流量是刷出來的侥衬，背后不是真實(shí)用戶餐禁，自然不會真的逛血久，在貢獻(xiàn)了流量計數(shù)后自然就“走”了。

還有些刷流量的工具可以錄制腳本帮非，模擬特定位置的點(diǎn)擊甚至更復(fù)雜的操作氧吐，這時該虛假流量在首頁未產(chǎn)生跳失讹蘑。但最終，虛假流量肯定不會下單筑舅。

另一種情況座慰，用戶相關(guān)度較低的渠道引流。比如豁翎，某些互聯(lián)網(wǎng)公司通過“求掃碼”或以輕微的利益刺激獲得用戶下載訪問角骤。這種情況下如果目標(biāo)人群不匹配，人們進(jìn)來看到這不是自己有興趣的“店”心剥，首頁跳失率就會很高。同樣背桐，這種情況也會出現(xiàn)在預(yù)裝機(jī)型或App下載渠道匹配不當(dāng)上优烧。

總體來說，根據(jù)經(jīng)驗(yàn)链峭，首頁跳失率受首頁產(chǎn)品設(shè)計的影響偏小畦娄，但通常這是流量效率監(jiān)測的一個重要環(huán)節(jié)。如果首頁產(chǎn)品上線后跳失率出現(xiàn)大幅波動弊仪，還是值得深入分析的熙卡。

其它指標(biāo)

首頁停留時長，首頁點(diǎn)擊次數(shù)（體現(xiàn)興趣）励饵，首頁銷售商品金額等驳癌，有時也被用作首頁KPI，本文不做深入闡述役听。

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

讓用戶多逛逛，多看些商品典予，以更少的點(diǎn)擊完成購買甜滨；但又要贏得用戶對更多欄目的注意力，產(chǎn)生更多的點(diǎn)擊瘤袖。

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

四捂敌、首頁全面改版實(shí)戰(zhàn)

下面結(jié)合我當(dāng)年在1號店操刀的首頁大改版案例艾扮，為大家介紹首頁產(chǎn)品設(shè)計流程和改版全過程。

這個項(xiàng)目在公司CEO黍匾、CTO栏渺、CMO的高度關(guān)注（每周匯報）和全力支持下，調(diào)動全公司力量推進(jìn)锐涯，覆蓋全面磕诊，幾乎所有部門深度參與。改版結(jié)果效果突出，獲劉強(qiáng)東的直接關(guān)注并聽取匯報霎终。

這個項(xiàng)目是三年前的項(xiàng)目滞磺，因?yàn)樯婕吧虡I(yè)機(jī)密，這類項(xiàng)目不可能在新上線時公開細(xì)節(jié)莱褒。大家如果有緣看到深入的案例击困，一般都已經(jīng)脫敏。

但在方法論和流程上广凸，即便今天阅茶，這個項(xiàng)目依然是個范本，值得大家參考谅海。

在構(gòu)思改版產(chǎn)品方案之前脸哀，首先需要獲取全方位的輸入，包括：

首頁競品分析扭吁；

當(dāng)前首頁用戶痛點(diǎn)深度訪談撞蜂；

業(yè)務(wù)線首頁訴求；

當(dāng)前首頁效率深度分析侥袜；

UED分析蝌诡。

1. 競品分析

競品分析的目的如下：

對標(biāo)競爭對手的首頁風(fēng)格，盡量匹配主流枫吧，尊重用戶已經(jīng)培養(yǎng)的瀏覽購物習(xí)慣浦旱；不能落伍，也不要太超前或與眾不同由蘑。

分析競品主要亮點(diǎn)闽寡，結(jié)合自身特性加以借鑒和創(chuàng)新，與此對等尼酿，發(fā)現(xiàn)缺點(diǎn)爷狈，加以規(guī)避。

了解首頁產(chǎn)品發(fā)展新萌芽裳擎，捕捉前沿趨勢涎永。

競品分析也可以跨界參考其它行業(yè)競品，以打開視野鹿响，跨界學(xué)習(xí)羡微。

用研團(tuán)隊(duì)對大量競品進(jìn)行了深度調(diào)研，下面是同業(yè)和跨界的競品優(yōu)缺點(diǎn)：

競品分析輸出

最終用研團(tuán)隊(duì)給出如下五點(diǎn)結(jié)論：

綜合性電商構(gòu)建場景化頻道是總體趨勢惶我。如淘寶的實(shí)惠妈倔、品質(zhì)（天貓）、特色三大場景绸贡；京東的“愛生活盯蝴、享品質(zhì)毅哗、購特色”三大版塊。

拳頭產(chǎn)品聚集人氣捧挺，創(chuàng)新產(chǎn)品層出不窮虑绵。如京東秒殺、淘寶有好貨闽烙，有效提高粘性并高效分流翅睛；同時京東試水眾籌、白條等新產(chǎn)品黑竞。

超強(qiáng)精準(zhǔn)化成為海量商品和用戶時代首頁營銷利器捕发。如淘寶欄目堆圖實(shí)時精準(zhǔn)化更新，天貓通過共用淘寶數(shù)據(jù)后臺摊溶，提供高效推送爬骤，千人千面，精準(zhǔn)分流莫换。

垂直電商通過首頁Tab切換大區(qū)塊成為主流做法，綜合電商試水多首頁骤铃，更多欄目得以曝光拉岁。

自主定制趨勢漸漸出現(xiàn)。網(wǎng)易云音樂可自主調(diào)節(jié)板塊順序惰爬；愛奇藝自主管理頻道喊暖，控制置頂區(qū)內(nèi)容。

通過上述趨勢撕瞧，我們得到的結(jié)論是陵叽，在整體架構(gòu)上，場景化構(gòu)建框架丛版，匹配差異化用戶購物基因巩掺，爆款頻道打頭，精準(zhǔn)化鋪底页畦，是核心方向胖替。同時，首頁分Tab切換專區(qū)豫缨，同時支持部分內(nèi)容的自主定制独令，是前沿機(jī)遇所在。

一個提示是好芭，用研的調(diào)研對象是非常寬泛的燃箭，國內(nèi)外千千萬萬眾App呈現(xiàn)出五花八門的形態(tài)，不可能由用研一一找到數(shù)據(jù)來驗(yàn)證舍败。產(chǎn)品負(fù)責(zé)人在調(diào)研開始階段需要給出思路方向招狸，用研主要進(jìn)行驗(yàn)證敬拓，并給出支持與否的結(jié)論，這需要產(chǎn)品負(fù)責(zé)人很好的方向感和預(yù)判瓢颅。當(dāng)然恩尾，有時也會收獲驚喜。

2.?用戶痛點(diǎn)深度訪談

用研的另一個重要工作就是進(jìn)行深度用戶洞察挽懦，了解各類用戶最大的痛點(diǎn)癢點(diǎn)興奮點(diǎn)翰意。

從定性研究到定量研究，用研團(tuán)隊(duì)發(fā)出數(shù)百萬份問卷（回收數(shù)萬份）信柿，并分組深度訪談了數(shù)百位用戶冀偶，得到當(dāng)前首頁問題集合，并根據(jù)反饋頻率制作詞云渔嚷。

結(jié)果如下：

首頁痛點(diǎn)詞云

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

V2 狄女士：參加活動是個體力活。

V0 方小姐：廣告不吸引我形病，關(guān)鍵信息沒寫清楚客年，天貓會很清楚；好像看不到按品牌分的漠吻，我想看滴露的量瓜，這里沒法按牌子看。

V3 陸先生：我會看剁手價途乃，量販團(tuán)和金牌秒殺绍傲，但是不知道他們有什么區(qū)別，對我都是一樣的耍共。

這里的“V”是用戶等級烫饼，以幫助我們理解在什么級別上的用戶有什么樣的反饋與痛點(diǎn)。

最后试读，產(chǎn)品團(tuán)隊(duì)對用研的反饋區(qū)分新老用戶進(jìn)行了梳理杠纵。

結(jié)果如下：

新老用戶痛點(diǎn)總結(jié)

從結(jié)論我們可以看出，老用戶覺得首頁缺乏新意鹏往，不懂自己淡诗；新用戶覺得首頁缺乏特色，欄目邏輯區(qū)分困難伊履。同時韩容，新老用戶都覺得促銷引導(dǎo)有問題，首頁整體布局不清晰唐瀑，瀏覽效率差群凶。

3.?業(yè)務(wù)線首頁需求收集

客觀來說，這個環(huán)節(jié)很重要哄辣，但也很難獲取有價值輸入请梢。

作為產(chǎn)品經(jīng)理赠尾，獲取業(yè)務(wù)線訴求是十分重要的。然而對于首頁毅弧，如果開放式地了解需求气嫁，最終聽到的業(yè)務(wù)線的訴求基本只會有兩點(diǎn)：

我要更多的資源位；

我的資源位要更靠上够坐，更靠前寸宵。

當(dāng)然，少數(shù)沒有格局的人還會反復(fù)要求別人不能太多元咙，自己的占比必須高梯影。所以，產(chǎn)品不能開放式地收集需求庶香，給自己挖坑甲棍。

可以參考的做法是，從業(yè)務(wù)線的大老板開始赶掖，從全局上獲取均衡的業(yè)務(wù)占比需求感猛，作為首頁欄目設(shè)置和資源位分配的輸入。在此基礎(chǔ)上奢赂，從全局上規(guī)劃欄目唱遭，并制定上線運(yùn)營目標(biāo)門檻，與業(yè)務(wù)線確認(rèn)對口的欄目能否運(yùn)營起來呈驶。

例如，對于促銷欄目疫鹊，對當(dāng)前欄目去蕪存菁袖瞻，歸并同質(zhì)化欄目。隨后拆吆，根據(jù)當(dāng)前業(yè)務(wù)數(shù)據(jù)建議各類促銷在多長時間里安排多少場次聋迎，促銷商品需要達(dá)到什么力度，保證多少庫存枣耀，如何選品霉晕，從而達(dá)到預(yù)期的流量與銷售效果。最終捞奕，判斷哪些欄目可以在新首頁中獲得入口牺堰，那些不太行的，要么放到二級入口颅围，要么直接取消或以新欄目代替伟葫。

本案因前期與CEO溝通緊密，獲得全力支持院促，并安排了與四位CXO的周例會筏养，獲得了最高領(lǐng)導(dǎo)貫徹始終的全力支持斧抱。因此自頂向下明確了資源規(guī)劃與分配，在此基礎(chǔ)上得到了各業(yè)務(wù)線的全力配合渐溶，并在后續(xù)產(chǎn)品欄目設(shè)置中構(gòu)思并確認(rèn)了實(shí)惠辉浦、品質(zhì)、精選等欄目的運(yùn)營團(tuán)隊(duì)茎辐∠芙迹總體來說，獲取業(yè)務(wù)線確認(rèn)與支持過程比較順暢荔茬。

4.?首頁效率分析

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

第一個，由產(chǎn)品端負(fù)責(zé)慕蔚，對每個“坑位”取流量（或點(diǎn)擊率）丐黄、營收數(shù)據(jù)。這兩個是核心指標(biāo)孔飒，也可以增加重視的其它指標(biāo)灌闺，比如商詳頁到達(dá)率、跳失率坏瞄、會員參與率桂对、核心品類引導(dǎo)率等。

第二個鸠匀，由UED團(tuán)隊(duì)負(fù)責(zé)蕉斜，通過眼動儀獲取用戶的眼動和操作軌跡，輸出視覺熱力圖缀棍、視線軌跡圖宅此、鼠標(biāo)點(diǎn)擊量、區(qū)域曝光率等爬范。這可以充分體現(xiàn)首頁哪里受到用戶關(guān)注父腕。當(dāng)然，這個需要非常專業(yè)的設(shè)備青瀑，往往外包第三方公司完成璧亮。

首頁產(chǎn)品效率分析的要素：

流量：體現(xiàn)用戶對該欄目的興趣指數(shù)，通常以UV來計算斥难。也有按點(diǎn)擊率（CTR枝嘶，點(diǎn)擊用戶數(shù)量／看到用戶數(shù)量）來看的。

營收：也叫GMV蘸炸，看這個欄目最終賣了多少貨躬络。當(dāng)然有些欄目不是直接賣貨的，比如領(lǐng)券頻道搭儒∏畹保可以由相應(yīng)指標(biāo)來代替提茁，比如領(lǐng)券率、券使用率馁菜、內(nèi)容閱讀率茴扁、社交傳播發(fā)起率等。

商詳頁到達(dá)率／人均商詳頁訪問數(shù)：體現(xiàn)該欄目對商品的引流效率汪疮。

跳失率：體現(xiàn)該欄目的內(nèi)容和體驗(yàn)會不會讓用戶離開峭火。

會員參與率：看付費(fèi)會員多少人感興趣，或者拉動用戶成為付費(fèi)會員的能力智嚷。

核心品類引導(dǎo)率：長遠(yuǎn)看賣出正確的貨卖丸，比賣出更多的貨更重要。這個指標(biāo)盏道，是看這個頻道（典型的是跨品類頻道）對于賣出正確的貨有多少幫助稍浆，或者能夠跨品類引導(dǎo)用戶，使之成為戰(zhàn)略品類的顧客猜嘱。

大家可以根據(jù)自身業(yè)務(wù)訴求衅枫，來定義如何衡量一個頻道的效率與貢獻(xiàn)，做為首頁改版中是否保留朗伶、獲得什么位置的關(guān)鍵依據(jù)弦撩。

該項(xiàng)目中，我們?nèi)×薝V和GMV兩大指標(biāo)论皆，得到了如下首頁流量效率圖（具體數(shù)字隱去）：

首頁流量效率圖

圖中的綠色方塊表示該頻道效果良好益楼，黃色表示效果差強(qiáng)人意，而紅色則完全不行点晴。這樣偏形，我們可以一目了然地看到各個頻道的表現(xiàn)。

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

UV和GMV都好，這是主力頻道队橙；

UV和GMV都差坠陈，這是要砍掉的頻道；

UV好捐康，GMV差仇矾，這說明頻道方向是受歡迎的，但貨不對解总；或者運(yùn)營有問題贮匕，轉(zhuǎn)化效率差。

最終首頁分析總結(jié)如下：

用戶瀏覽風(fēng)格：

約50%為效率追求型（35%搜索花枫，15%分類導(dǎo)航）

約50%為閑逛型（各類頻道和會場）

用戶偏好：

強(qiáng)勢頻道：團(tuán)閃剁手價 – 30%

檢索：業(yè)務(wù)及類目線 – 26%

導(dǎo)購刻盐、推薦欄目 – 12%

廣告入口 – 10%

結(jié)論：

促銷型欄目表現(xiàn)較好掏膏，圖片、廣告樓層表現(xiàn)不佳敦锌；

強(qiáng)勢品類（食品酒飲清潔廚衛(wèi)美妝母嬰）表現(xiàn)較好馒疹；

存在低效入口和重復(fù)入口，缺乏KPI驅(qū)動的調(diào)整和賽馬機(jī)制乙墙。

5.?UED分析

這個環(huán)節(jié)的第一步是交互分析颖变，側(cè)重于產(chǎn)品整體信息架構(gòu)、界面布局听想、與用戶的交互方式等方面腥刹。

本項(xiàng)目的交互分析結(jié)論含如下環(huán)節(jié)：

1）布局分析

天貓與京東在首頁模塊劃分上，將各種業(yè)務(wù)按照相關(guān)度整合在對應(yīng)頻道內(nèi)汉买，首頁內(nèi)容豐富而有序衔峰，對用戶來說簡單易懂，也便于視覺團(tuán)隊(duì)有針對性地設(shè)計視覺元素录别。

對比天貓40個入口朽色、京東44個入口，一號店雖然只有28個入口组题，但聚合方式混亂無序葫男，部分以頻道維度、部分以業(yè)務(wù)維度劃分首頁模塊崔列，沒有從用戶使用角度安排布局梢褐，造成用戶“看不懂”、“找不到”赵讯，在視覺呈現(xiàn)上也難以整體處理盈咳，割裂感嚴(yán)重。

簡單說边翼，有序性有待提升鱼响。

2）柵格分析

柵格系統(tǒng)以規(guī)則的網(wǎng)格指導(dǎo)和規(guī)范版面布局，優(yōu)勢有兩點(diǎn)：

使頁面的信息呈現(xiàn)更加美觀易讀组底，提升可用性丈积；

在前端實(shí)現(xiàn)層面，可使頁面更規(guī)范靈活债鸡，便于實(shí)現(xiàn)模塊化江滨。

交互團(tuán)隊(duì)給出的柵格分析結(jié)論為：

［京東］使用4欄柵格系統(tǒng)，模塊統(tǒng)一成2種尺寸：1個單位厌均、2個單位唬滑、4個單位（通欄）；

［天貓］使用12欄柵格系統(tǒng)，模塊統(tǒng)一成3種尺寸：3個單位晶密、4個單位擒悬、6個單位、12個單位（通欄）惹挟。

［1號店］部分使用3欄柵格系統(tǒng)茄螃，模塊占1個單位、2個單位连锯、3個單位（通欄）?部分模塊獨(dú)立與柵格系統(tǒng)之外归苍。

簡單說，當(dāng)前首頁柵格偏粗糙运怖，同時很多欄目并沒有對齊柵格拼弃。

3）視覺分析?

下一步是視覺分析，主要側(cè)重于整體視覺效果摇展、用色等方面吻氧。

視覺效果分析素材

首頁精致，提升視覺效果咏连，是預(yù)設(shè)的方向盯孙。

視覺團(tuán)隊(duì)選擇了這方面表現(xiàn)出色的良倉（刻意沒有對標(biāo)京東、淘寶）作為對標(biāo)對象祟滴，給出了如下結(jié)論：

首頁輪播圖和商品圖是傳遞給用戶最快也是最直觀的視覺感受振惰，直接反映了商品的氣質(zhì)，定位垄懂。第一眼看到我店的App感受是“雜貨店”骑晶，凌亂而乏味。商品多而品質(zhì)不高草慧，紅色價格滿屏贡耽，強(qiáng)勢而干擾舱禽。打動不了用戶航唆，沒有購買欲屋匕。

良倉：強(qiáng)調(diào)“精選”、“設(shè)計美學(xué)”舔示。商品選用上突出設(shè)計感朽寞，科技感，不采用大量的推頭斩郎，顯得雜亂。輪播上簡單的彩色鮮明烘托主題喻频，去掉俗氣的大紅大綠缩宜。文字上沒有太多花哨的裝飾，提升商品本身的品質(zhì)感。

1號店：商品圖粗糙锻煌，輪播圖略俗氣妓布。配色和商品沒有關(guān)聯(lián)。文案宋梧、價格信息過大過多匣沼，排版雜亂，各種紅色標(biāo)簽突兀捂龄，干擾視覺释涛。建議減少并控制文案字?jǐn)?shù)。增加場景化圖片的運(yùn)用倦沧，提升品質(zhì)感唇撬，營造購物環(huán)境感。模塊樓層更鮮明展融，增加樓層的節(jié)奏變化窖认，不要一行3到底，視覺容易疲勞告希，產(chǎn)生厭倦扑浸。

4）色彩分析

電商品牌色彩大多近似，要想在眾多相似的App中帶給用戶新鮮感燕偶、特別感喝噪，就只有在用色、icon等局部位置杭跪，采用不一樣的設(shè)計仙逻。如，icon風(fēng)格微變化涧尿，在適當(dāng)?shù)牡胤轿M物等系奉，增加一些小創(chuàng)意。

色彩分析素材

如下為色彩分析輸出姑廉，選了三個比較有特點(diǎn)的App進(jìn)行對標(biāo)缺亮。

［想去］banner的邊框模擬雜志紙張厚度，配合標(biāo)題文字特殊字體排版桥言，增加品質(zhì)設(shè)計的味道萌踱，烘托商品的格調(diào)。

［餓了么］icon的擬物美食号阿，提升直觀的誘惑度并鸵，大面積的藍(lán)色提升品牌印象。

［Enjoy］icon采用純黑的line扔涧，傳遞高端奢華感园担。商品圖精美届谈，默認(rèn)缺損圖也設(shè)計的有品質(zhì)感，像高級的包裝紙弯汰，不是簡單的灰色加logo艰山。

5）大促定制

雙11、618咏闪、黑五以及各個電商節(jié)曙搬，包括超級品牌日，是電商的設(shè)計團(tuán)隊(duì)大顯身手的時候鸽嫂，讓消費(fèi)者從平日熟悉的常規(guī)界面中跳脫出來纵装，耳目一新地看見熱鬧喜慶充滿創(chuàng)新的盛裝造型。

相比大促主會場更加注重促銷活動溪胶、商品展示效率搂擦、分會場的分發(fā)，首頁是更好的體現(xiàn)創(chuàng)意的舞臺哗脖。

在本項(xiàng)目的大促定制對比中瀑踢，1號店的設(shè)計勝出。

因?yàn)檫M(jìn)度要求才避，這次改版沒有安排視覺熱力圖和視線軌跡圖的測試橱夭。但如果大家時間和經(jīng)費(fèi)允許，可以與擁有專業(yè)設(shè)備的第三方機(jī)構(gòu)合作桑逝，深度了解用戶在當(dāng)前首頁上的視線軌跡和專注點(diǎn)棘劣，以更好地了解用戶瀏覽特性和興趣點(diǎn)。

下圖為亞馬遜視覺團(tuán)隊(duì)所做的首頁分析楞遏，我們可以看到：紅色區(qū)域?yàn)橛脩粢暰€最多關(guān)注的區(qū)域茬暇，越紅表示越關(guān)注，然后從黃到綠到白寡喝，關(guān)注度下降糙俗；同時，也可以獲取用戶眼動順序预鬓，最右圖的1巧骚，2，3格二，4就是用戶視線移動軌跡劈彪。

通過這樣的分析，我們比較容易判斷用戶的注意力容易被什么所吸引顶猜，進(jìn)而找到設(shè)計的側(cè)重點(diǎn)沧奴。

視覺熱力圖與軌跡圖

至此，競品分析长窄、用戶深度調(diào)研滔吠、業(yè)務(wù)線需求远寸、產(chǎn)品分析、UED分析全部完成屠凶，輸入收集階段結(jié)束，進(jìn)入新首頁設(shè)計階段肆资。

6. 移動情緒版

這個由視覺團(tuán)隊(duì)負(fù)責(zé)的專業(yè)的研究矗愧，目的是了解消費(fèi)者在App瀏覽購物時的情緒反應(yīng)，進(jìn)而確定新首頁的主體配色郑原、風(fēng)格唉韭，傳遞和凸顯產(chǎn)品個性與品牌形象，在用戶潛意識中對品牌性格和消費(fèi)方式進(jìn)行影響犯犁。

情緒版的研究流程如下：

步驟及輸出如下：

1）根據(jù)公司的品牌形象定位属愤，選擇三個原生關(guān)鍵詞。

2）根據(jù)大量的用戶問卷調(diào)研及訪談反饋酸役，整理出反復(fù)出現(xiàn)的體現(xiàn)印象和訴求的高頻詞住诸，最終整理出六個正性詞，并摻入一個易混淆的負(fù)性詞涣澡。

3）針對得到的原生和衍生定位詞贱呐，通過大量目標(biāo)用戶訪談，對定位進(jìn)行描述入桂，并選取體現(xiàn)定位詞的描述詞奄薇。

4）解讀每一個定位詞對應(yīng)的視覺、心境抗愁、物化映射馁蒂，對顏色和場景進(jìn)行定義。

下面以“家庭”為例：

詞典釋義：以婚姻和血統(tǒng)關(guān)系為基礎(chǔ)的社會單位蜘腌，包括父母沫屡、子女和其他共同生活的親屬在內(nèi)。

視覺映射：柔和的燈光逢捺，柔軟谁鳍，軟和，木結(jié)構(gòu)劫瞳。

心境映射：溫馨倘潜；溫柔、溫和志于；陪伴涮因、支持；大家在一起伺绽，心情特別好养泡。

物化映射：沙發(fā)嗜湃、地毯、壁爐澜掩、床购披、編織物；父母肩榕，孩子刚陡，祖父母；寵物株汉。

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

黃色乔妈、橙色系：燈光的顏色蝙云，皮膚的顏色，原木的顏色路召；

明度高純度低：和諧勃刨、輕盈、愜意优训。

場景：一家人圍坐吃飯朵你，一起坐在沙發(fā)看電視，一起旅行揣非。

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

依然以“家庭”為例早敬，視覺團(tuán)隊(duì)根據(jù)上述描述詞找出數(shù)百張可以代表“家庭”的視覺忌傻、心境和物化映射的圖片：

抽取其材質(zhì)：

對所有圖片進(jìn)行虛化，提取其中主要顏色：

選擇對應(yīng)字體：

限于篇幅搞监，這里僅給出“家庭”的實(shí)例水孩，以此類推。

最后琐驴，在業(yè)務(wù)定位之外俘种，針對首頁產(chǎn)品希望傳遞的“簡潔、年輕绝淡、隨時隨地”的感覺宙刘，確定如下配色方案。

簡潔：

年輕：

隨時隨地：

至此牢酵，體現(xiàn)業(yè)務(wù)定位和改版產(chǎn)品訴求的配色悬包、風(fēng)格已經(jīng)確定，成為設(shè)計師在后續(xù)首頁和頻道設(shè)計中參考的主要依據(jù)馍乙。

7. 新首頁KPI選定

這次改版的核心目標(biāo)是提升首頁引導(dǎo)效率和體驗(yàn)布近，重整并以場景化聚合導(dǎo)購欄目垫释，為不同風(fēng)格用戶提供各自的訴求承載區(qū)域。由此撑瞧，選定點(diǎn)擊價值棵譬、人均點(diǎn)擊數(shù)、首屏聚焦率预伺、跳出率作為四大核心指標(biāo)茫船。

目標(biāo)值根據(jù)當(dāng)前實(shí)際情況設(shè)定，根據(jù)競品數(shù)據(jù)對標(biāo)扭屁，最大的差距在人均點(diǎn)擊數(shù)，而當(dāng)前跳出率則占有較大優(yōu)勢涩禀。

因此料滥，根據(jù)差距以及產(chǎn)品思路對應(yīng)的潛在提升效果，設(shè)定了5%～20%的提升目標(biāo)艾船，如下：

首頁改版KPI

8. 首頁方案頭腦風(fēng)暴

產(chǎn)品團(tuán)隊(duì)根據(jù)所有前期準(zhǔn)備的輸出以及產(chǎn)品目標(biāo)葵腹，進(jìn)行了頭腦風(fēng)暴，提出的框架性思路如下：

1）樓層按主題維度屿岂，分為好店践宴、主題、賣場爷怀、清單等阻肩，頻道做穿插推薦。

點(diǎn)評：這個思路符合主流运授，方案略顯保守烤惊。

2）秒殺商品縱向排布，把流量往下帶吁朦，或?qū)⒈铑l道下沉柒室，并在首屏進(jìn)行提示。

點(diǎn)評：這思路的腦洞有點(diǎn)大逗宜，同時比較冒風(fēng)險雄右，可能會導(dǎo)致爆款頻道銷售大幅打折扣，進(jìn)而影響全局營收纺讲。

3）頂部根據(jù)場景設(shè)置Tab：如導(dǎo)購擂仍、活動等。

點(diǎn)評：該思路很創(chuàng)新激進(jìn)刻诊，實(shí)質(zhì)上是實(shí)現(xiàn)電商產(chǎn)品的多首頁防楷，最大的擔(dān)憂是后續(xù)Tab沒有流量。

4）內(nèi)容前置则涯，淺層級露出复局，穿插顯示頻道冲簿。

點(diǎn)評：這個思路的優(yōu)點(diǎn)是為更多核心內(nèi)容提供了流量，缺點(diǎn)是會導(dǎo)致首頁過長亿昏，順序在中后的欄目得不到曝光峦剔。

經(jīng)過反復(fù)探討論證，考慮做兩個方案角钩，一個保守吝沫，一個激進(jìn)，供領(lǐng)導(dǎo)層決策递礼。

上述第一點(diǎn)作為穩(wěn)妥型產(chǎn)品方案方向惨险，作為主推；放棄第二點(diǎn)脊髓；第三點(diǎn)作為激進(jìn)型方案辫愉，作為備選；而第四點(diǎn)更適合展示用戶感興趣的首頁局部內(nèi)容将硝，基于此考慮做一個大膽創(chuàng)新：純自定義首頁恭朗，作為第二首頁提供給用戶。

9. 首頁設(shè)計稿

1） 主推方案（穩(wěn)妥版）

主推方案在原有框架基礎(chǔ)上重整了幾乎所有欄目依疼，頭部區(qū)域之后按場景化進(jìn)行布局痰腮，重新梳理和調(diào)整了首頁資源欄位，在局部做了大量的微創(chuàng)新律罢，并從視覺上重新匹配公司戰(zhàn)略和商業(yè)定位膀值，解決用戶所反饋的核心痛點(diǎn)。

方案要點(diǎn)如下：

這次改版也重新設(shè)計了搜索頁误辑，對走搜索路徑的精準(zhǔn)流量進(jìn)行引導(dǎo)虫腋，創(chuàng)造新的商業(yè)機(jī)會。其中稀余，“大家都在找”通過從眾心理引導(dǎo)搜索流量轉(zhuǎn)向目標(biāo)商品或活動悦冀，同時用“想不起來找什么”來捕獲進(jìn)入搜索卻存在著“逛”心理或好奇心的用戶。

搜索頁設(shè)計

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

雖然首頁可以千人千面睛琳，但主體框架通常是固定的盒蟆。隨著導(dǎo)購欄目的豐富和新欄位的持續(xù)增加，首頁越來越長师骗，用戶有限的時間和注意力被嚴(yán)重分散历等，甚至迷失。

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

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

可以看到：該設(shè)計通過地域特征設(shè)置皮膚（可更換）寡夹，所有欄目可由用戶通過頻道池進(jìn)行選擇处面、增減、排序（用戶瀏覽歷史設(shè)定初值）菩掏；同時魂角，每個頻道提供一個首頁卡片，部分展開該欄目鉤子內(nèi)容智绸。

此外野揪，第二首頁也可以支持皮膚替換，下面是幾版默認(rèn)皮膚：

第二首頁可替換皮膚

這個大膽的首頁創(chuàng)新上線后瞧栗，我們看到的數(shù)據(jù)是斯稳，從傳統(tǒng)首頁進(jìn)入的流量占比較少。但進(jìn)入的流量迹恐，復(fù)訪比率高平挑，并在復(fù)訪時轉(zhuǎn)化效率明顯提升。

這證明了以下幾點(diǎn)：

用戶偏“懶”系草，全新產(chǎn)品的使用習(xí)慣需要逐步養(yǎng)成。

自定義首頁定制只展示用戶喜歡的頻道唆涝，引導(dǎo)效率高找都。

營銷資源位基本消失。這是它的魅力所在廊酣，但也決定了它無法最終取代第一首頁能耻。畢竟，業(yè)務(wù)線需要放廣告亡驰，推活動晓猛。

另一個創(chuàng)新實(shí)踐是UED團(tuán)隊(duì)開發(fā)了H5版本的可定制首頁，輪播圖可替換為自選照片凡辱，icon位文字可由用戶定制戒职，首頁通過微信傳播。該版本在情人節(jié)上線透乾，主打表白場景洪燥，把購物與愛情相結(jié)合，生動有趣乳乌。

H5定制化首頁

3）備選方案（激進(jìn)版）

這次首頁改版希望為不同風(fēng)格用戶提供差異化的瀏覽路徑捧韵，在第一版的穩(wěn)妥方案中，我們依然保留了符合各類用戶偏好的大量欄目汉操，但也導(dǎo)致了首頁較長再来。激進(jìn)方案則嘗試多首頁并舉，讓用戶根據(jù)自己的瀏覽偏好進(jìn)行切換磷瘤。

首頁必須要展示核心營銷內(nèi)容和核心固定欄目芒篷，除此以外搜变，逛首頁的用戶，大風(fēng)格分為閑逛型梭伐、半精準(zhǔn)型痹雅、活動導(dǎo)向型，為此設(shè)置了“頻道”糊识、“品類”绩社、“活動”三個副首頁，以提供差異化的導(dǎo)購路徑赂苗。

設(shè)計如下：

多首頁設(shè)計

因?yàn)槊總€首頁內(nèi)容做了拆分愉耙，因此具備了各欄目的首頁局部展開條件，讓頭部二級內(nèi)容淺層級露出拌滋，更好地抓取流量朴沿，甚至通過首頁直接完成轉(zhuǎn)化。此

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

最終坚芜，領(lǐng)導(dǎo)層不出意料地選擇了穩(wěn)妥型的方案。

10. 痛點(diǎn)解決方案及創(chuàng)新點(diǎn)總結(jié)

最后斜姥，針對前面的痛點(diǎn)調(diào)研鸿竖，我們來看下新版首頁在方案上對痛點(diǎn)的覆蓋和解決。

新首頁痛點(diǎn)解決方案與創(chuàng)新點(diǎn)

通過上圖我們可以看到铸敏，所有痛點(diǎn)都在方案中被覆蓋缚忧。同時，改版方案還具備了四個創(chuàng)新點(diǎn)：

自定義首頁（第二首頁）：這是電商業(yè)界的創(chuàng)新設(shè)計杈笔，通過自定義欄目闪水、本地化運(yùn)營和皮膚更換設(shè)計，為用戶打造一個最適合自己的首頁蒙具。

懸浮輪播圖：這個設(shè)計主要解決在整體首頁定制（如超級品牌日）時敦第，輪播圖第二幀及后續(xù)圖片很可能與首屏“帽子”和“衣服”不協(xié)調(diào)的問題。通過懸浮店量，在視覺上把輪播分層拉出芜果，既美觀，又減小上下不搭的問題融师。

頻道動態(tài)內(nèi)容首頁展示：根據(jù)當(dāng)前用戶偏好出打撈不同的活動右钾、商品、內(nèi)容，展示在首頁舀射，在內(nèi)容上完全動態(tài)窘茁。這突破了業(yè)界針對固定內(nèi)容展示動態(tài)圖片和商品的方式。

定制搜索頁：聚合多個維度對搜索流量進(jìn)行引導(dǎo)脆烟，突破了常規(guī)搜索頁的“搜索歷史”山林、“熱搜”兩個主要方向，增加了營收資源和業(yè)務(wù)引導(dǎo)邢羔，也提升了搜索的趣味性驼抹。

11. 新首頁數(shù)據(jù)表現(xiàn)

新首頁上線后，數(shù)據(jù)表現(xiàn)良好拜鹤，AB測試體現(xiàn)：

點(diǎn)擊價值上提升約21%框冀；

人均點(diǎn)擊次數(shù)增長27%；

首屏聚焦率在初期出現(xiàn)下滑后回升敏簿，最終與原數(shù)據(jù)接近明也，分析認(rèn)為大批用戶對于新首頁存在新鮮感，在初期“逛”的行為大幅度增加惯裕，但度過了新鮮階段后依然會專注在自己喜歡的頻道温数；

跳失率無明顯變化，這體現(xiàn)了首頁設(shè)計并非跳失率的最大影響因素蜻势，除非設(shè)計出現(xiàn)重大失誤撑刺。

五、首頁實(shí)戰(zhàn)總結(jié)

有耐心讀到這里的讀者咙边，一定是特別有興趣深入學(xué)習(xí)首頁的設(shè)計理念和方法的同行。

最后次员，我在這里做一個簡單的總結(jié)：

1. 首頁是流量分發(fā)的關(guān)鍵

首頁決定公司內(nèi)部各業(yè)務(wù)線獲得流量和轉(zhuǎn)化的機(jī)會败许，是互聯(lián)網(wǎng)產(chǎn)品的最重要模塊；甚至可以說淑蔚，沒有之一市殷。然而，流量分發(fā)是個無比復(fù)雜的話題刹衫，大約三分產(chǎn)品醋寝，七分運(yùn)營（主要是資源動態(tài)分配）。

2. 首頁承載引導(dǎo)用戶的使命

首頁承載起引導(dǎo)用戶瀏覽與購買的使命带迟，并建立和體現(xiàn)公司品牌形象音羞，創(chuàng)造直接營收。同時仓犬，首頁也是最重要溝通點(diǎn)位嗅绰。這些方面存在著大量平衡點(diǎn)，如何把握好體驗(yàn)并創(chuàng)造全局最大收益，是產(chǎn)品經(jīng)理的重要課題窘面。

3. 首先明確KPI

做好首頁翠语，必須首先明確針對哪些KPI進(jìn)行思考與設(shè)計。其中财边，人均商詳頁到達(dá)率／訪問量肌括、點(diǎn)擊價值、點(diǎn)擊次數(shù)酣难、停留時長谍夭、瀏覽深度、跳失率鲸鹦，以及其它提升流量效率的方面慧库，都可以作為KPI。

4. 把握設(shè)計來源

在首頁產(chǎn)品設(shè)計和改版中馋嗜，競品分析齐板、用戶痛點(diǎn)分析、業(yè)務(wù)需求梳理葛菇、產(chǎn)品效率分析甘磨、UED分析都是重要的輸入來源。一切的設(shè)計都需要強(qiáng)有力的依據(jù)眯停，盡量避免“我喜歡”济舆、“我覺得好看”，除了“老板喜歡”是產(chǎn)品經(jīng)理沒辦法的事莺债。

5. 跟進(jìn)數(shù)據(jù)

必須跟進(jìn)最終數(shù)據(jù)滋觉，灰度發(fā)布，仔細(xì)驗(yàn)證各方面的成效齐邦。同時椎侠，避免太大幅度的變化。用戶耳目一新的另一面措拇，也有可能“一臉懵逼”我纪，要尊重用戶已經(jīng)養(yǎng)成的習(xí)慣，避免太過于創(chuàng)新丐吓。同時浅悉，設(shè)計上盡量向下兼容，減少用戶的學(xué)習(xí)成本券犁。

首頁要出彩术健，一半是產(chǎn)品，一半是運(yùn)營粘衬。