產(chǎn)品首頁設(shè)計(jì)攻略，快收藏！

時(shí)間：2023-09-20 03:42:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-20 03:42:02 來源：網(wǎng)站運(yùn)營

產(chǎn)品首頁設(shè)計(jì)攻略，快收藏！：數(shù)據(jù)顯示：95%以上的用戶通過首頁登錄產(chǎn)品，按照獲客成本￥150/人計(jì)算：產(chǎn)品預(yù)計(jì)新增10000人，粗略成本10000x150=150W。如果將跳出人員算在其中（來了又走了沒做最終留下），實(shí)際投入可能在150~400W之間。

你覺得只有1W個(gè)用戶的產(chǎn)品，在你心中算是有價(jià)值的好產(chǎn)品么？

高昂的成本之下，產(chǎn)品首頁作用不言而喻，按照優(yōu)先級排列為：

抓取→突出優(yōu)勢→提升指標(biāo)

什么叫抓??？

--仔細(xì)回憶一下，我們?yōu)槭裁创蜷_“淘寶”？

--絕大多數(shù)人，在打開軟件之前，必定已經(jīng)存在某個(gè)具體的或者模糊的目標(biāo)。根據(jù)雞尾酒效應(yīng)（有目標(biāo)的人只會(huì)關(guān)注跟目標(biāo)相關(guān)的元素），用戶打開產(chǎn)品后會(huì)主動(dòng)搜尋跟目標(biāo)匹配的功能或內(nèi)容，發(fā)現(xiàn)即留存，無發(fā)現(xiàn)即跳出。

這就是抓取的概念。因此如果想要精準(zhǔn)抓住用戶，實(shí)現(xiàn)了解用戶為什么打開產(chǎn)品非常重要。

先來看一下亞馬遜的首頁效果，直觀感受一下產(chǎn)品交互；

亞馬遜在中國曾被譽(yù)為“電商教科書”，但從表現(xiàn)層來看，該設(shè)計(jì)實(shí)在欠缺可圈點(diǎn)之處。真正值得學(xué)習(xí)的，是交互的骨骼。

用專業(yè)視角透析一下，就可以發(fā)現(xiàn)看似散亂的頁面所包含的“需求塊”，產(chǎn)品交互充分考慮了用戶到達(dá)的目標(biāo)：

解析：

logo(左上角)：用于解釋用戶行為，根據(jù)左上右下的瀏覽次序和“人”的行為習(xí)慣，點(diǎn)開網(wǎng)站之后必定首先檢查網(wǎng)站是否正確；

搜索（logo右側(cè)）：大部分用戶到達(dá)前必定有明確目標(biāo)，他們希望直接查找內(nèi)容，非常急切。如果網(wǎng)站存在此類用戶，大多數(shù)產(chǎn)品都會(huì)將搜索放置于logo側(cè)面用于滿足需求。

同理如果產(chǎn)品此類用戶少，搜索完全可以去掉或擺放在其他地方。產(chǎn)品設(shè)計(jì)沒有定論，了解需求后方可游刃有余；

分類（logo下方綠色區(qū)域）：針對沒有明確的sku品類用戶（這個(gè)詞在此處可以理解為具體目標(biāo)），這類一般有明確的購買方向且比例很高，因此分類占據(jù)了相當(dāng)巨大的版面， 所在位置也十分關(guān)鍵。

注意：在設(shè)計(jì)產(chǎn)品分類的時(shí)候，應(yīng)注意標(biāo)簽的獨(dú)立窮盡，即分類之間不要存在交叉部分，如：兩個(gè)標(biāo)簽一個(gè)叫化妝品，一個(gè)叫美妝，用戶很難確定“口紅”這個(gè)品類會(huì)存放在哪里；

最后：

針對無目標(biāo)用戶的轉(zhuǎn)化，需要企業(yè)運(yùn)營、產(chǎn)品、交互、設(shè)計(jì)四方聯(lián)動(dòng)。

幾乎所有的產(chǎn)品平臺(tái)，轉(zhuǎn)化流程都采用 無目標(biāo)→建立目標(biāo)→激發(fā)動(dòng)機(jī) 的三段式流程，這就是首屏其他區(qū)域傳達(dá)信息的核心思路，可以采用：banner推薦 + 產(chǎn)品優(yōu)勢 + 算法喜好推薦 ，也不乏針對某些特定活動(dòng)出現(xiàn)banner + 活動(dòng)推薦 + 核心優(yōu)勢 這樣的內(nèi)容安排。

上圖為：banner + 活動(dòng)推薦 + 核心優(yōu)勢 推薦方法

首頁關(guān)系著產(chǎn)品的成敗，是轉(zhuǎn)化用戶的核心陣地。唯有眾志成城，上下一心，才能共促核心指標(biāo)的提升，實(shí)現(xiàn)產(chǎn)品目的。

最后這里還提供海量UI設(shè)計(jì)學(xué)習(xí)資料包（教程+源碼+學(xué)習(xí)筆記+工具+課件+面試題解析）免費(fèi)領(lǐng)取，點(diǎn)擊上方鏈接即可獲得，還有大牛講師在線答疑免費(fèi)輔導(dǎo)！