基本上每個(gè)應(yīng)用都有首頁(yè)，內(nèi)容的多少和平臺(tái)的大小影響著首頁(yè)所呈現(xiàn)的內(nèi)容，大到電商類重內(nèi)容運(yùn)營(yíng)的app如淘寶，其首頁(yè)非常復(fù)雜；小到工具類重簡(jiǎn)易操作的app如印象筆記，其首頁(yè)非常簡(jiǎn)潔。然而優(yōu)秀的首頁(yè)都有共同的特點(diǎn)，我總結(jié)為三點(diǎn)，為了方便后面的分析，我把這三點(diǎn)叫做“首頁(yè)三準(zhǔn)則”，這篇文章主要通過扒一扒這些特點(diǎn)來(lái)分享如何設(shè)計(jì)一款優(yōu)秀的首頁(yè)/讀懂各類首頁(yè)。

根據(jù)幾種用戶使用場(chǎng)景來(lái)分析，先來(lái)看看首頁(yè)應(yīng)該怎么設(shè)計(jì)！我總結(jié)為以下三點(diǎn)。

一、首頁(yè)三準(zhǔn)則

首頁(yè)的主要作用是要在最短的時(shí)間內(nèi)讓用戶對(duì)內(nèi)容產(chǎn)生興趣。

“首頁(yè)三準(zhǔn)則”對(duì)首次使用產(chǎn)品的用戶而言，首頁(yè)的好壞關(guān)系到用戶對(duì)該產(chǎn)品的第一印象，用戶第一眼看到的是界面，其次是內(nèi)容。所以，在這個(gè)階段，符合品牌的好的設(shè)計(jì)感和內(nèi)容的豐富度會(huì)給用戶的印象加分。繼而一直吸引用戶使用的就是產(chǎn)品到底能為他解決什么問題，這就和產(chǎn)品所具有的功能/所提供的服務(wù)相關(guān)，只有當(dāng)用戶能用該產(chǎn)品切實(shí)解決問題并且用起來(lái)爽了，那他才會(huì)一直用。所以，在這個(gè)階段，對(duì)首頁(yè)而言，核心功能的展示和好的交互體驗(yàn)顯的尤為重要。對(duì)于深度使用用戶而言，首頁(yè)是信息的集合，用戶希望只要打開首頁(yè)就能知曉最近的活動(dòng)和通知，并且能看到好的內(nèi)容推薦。所以，內(nèi)容的推薦和即時(shí)更新會(huì)讓用戶感到滿足。不管是定位為內(nèi)容型還是導(dǎo)流型應(yīng)用，首頁(yè)能做到以上三點(diǎn)都會(huì)給用戶帶來(lái)好的體驗(yàn)。當(dāng)然不管在哪個(gè)階段，當(dāng)內(nèi)容達(dá)到一個(gè)量級(jí)的時(shí)候，搜索和導(dǎo)航都可以方便用戶到達(dá)想要去的頁(yè)面。

二、舉例分析

淘寶就譬如淘寶，它是綜合型電子商務(wù)平臺(tái)，打開淘寶app，雖然打開看到的琳瑯滿目的內(nèi)容和各類入口，但是不管哪個(gè)階段的用戶都能很快的找到自己想要的商品，并且在整個(gè)購(gòu)買過程中都享受到了樂趣（除了最后的支付），以淘寶為例，簡(jiǎn)單舉幾個(gè)小例子。

淘寶的首頁(yè)內(nèi)容非常豐富，除了基礎(chǔ)功能的展示和各種主題板塊，還有大量?jī)?nèi)容的推薦和更新。

1、當(dāng)用戶首次到淘寶時(shí)，首頁(yè)內(nèi)容的豐富和紅色活潑的設(shè)計(jì)風(fēng)格會(huì)讓用戶產(chǎn)生熱鬧的印象，同時(shí)，各種主題模塊，如淘搶購(gòu)、超實(shí)惠、天貓必逛、特色好貨、熱門市場(chǎng)等，足夠滿足用戶首次探索的需求。

（淘寶首頁(yè)-主題模塊）

2、當(dāng)用戶首次探索結(jié)束時(shí)，淘寶首頁(yè)的核心功能展示，如天貓、聚劃算、天貓國(guó)際、外賣、天貓超市、充值中心、阿里旅行、領(lǐng)金幣、到家等，可以方便用戶快速了解到淘寶的基礎(chǔ)功能/服務(wù)，當(dāng)然配合良好的交互體驗(yàn)，用戶很快就能適應(yīng)首頁(yè)并熟練的使用！

（淘寶首頁(yè)-核心功能展示）

3、當(dāng)深度用戶進(jìn)入淘寶時(shí)，淘寶的內(nèi)容推薦和更新做的很贊，結(jié)合以前瀏覽過的內(nèi)容和購(gòu)買記錄，淘寶的首頁(yè)給出了大量的推薦，首頁(yè)中主題模塊的展示圖都是根據(jù)該用戶的以往記錄按一定的時(shí)間段輪流替換的，頂部的廣告輪播圖和搜索框提示語(yǔ)也是根據(jù)用戶的喜好而顯示的，并且最底部的猜你喜歡都做到了內(nèi)容的即時(shí)更新推薦，這不僅讓首頁(yè)更人性化，并且讓用戶感受到了逛頁(yè)面購(gòu)物的滿足。

（淘寶首頁(yè)-內(nèi)容推薦/更新）

所以根據(jù)以上三點(diǎn)來(lái)思考首頁(yè)的設(shè)計(jì)是很有參考價(jià)值的。改版后的簡(jiǎn)書也大致符合以上三點(diǎn)哦，是不是比以前更好懂了？

三、實(shí)戰(zhàn)

好吧，下面開始實(shí)戰(zhàn)了：

分析對(duì)象：某社區(qū)服務(wù)類app（競(jìng)品）

這個(gè)app的首頁(yè)整體給人的視覺效果不錯(cuò)，頁(yè)面內(nèi)容較豐富，核心功能也體現(xiàn)了出來(lái)，并包含了各種內(nèi)容的推薦，整體是做到的“首頁(yè)三準(zhǔn)則”。

（首頁(yè)效果圖-1+2+3為完整首頁(yè)效果圖，其中分析文字序號(hào)對(duì)應(yīng)著圖中內(nèi)容分解區(qū)域的序號(hào)）

首頁(yè)效果圖-1（包含?、?、?、?、?個(gè)分析點(diǎn)）

?頂部布局了搜索框和全局消息中心

1、搜索框可方便用戶快速獲取到所需要的商品或服務(wù)，點(diǎn)擊搜索框后彈出搜索頁(yè)面，顯示如下：

【分析】：用戶可能需要多次瀏覽某商品或使用同一服務(wù)，所以有歷史搜索記錄能方便用戶記憶并搜索。

【優(yōu)化】：該類應(yīng)用所提供的商品/服務(wù)都比較小眾，用戶在使用時(shí)，可能不知道該怎么搜索，搜索框應(yīng)有推薦搜索項(xiàng)。

【再說】：

搜索頁(yè)面一般有四種展現(xiàn)方式：

1）只有搜索框；

2）只顯示歷史搜索記錄；

3）只顯示推薦搜索項(xiàng)；

4）歷史搜索記錄+推薦搜索項(xiàng)。

而這四種方式都適用不同的情況：

第一種和第二種適用于明確搜索，即知道自己要搜索什么，如淘寶首頁(yè)的搜索，點(diǎn)開就知道要搜索的是商品，所以淘寶首頁(yè)采用的是第二種方式；

第三種和第四種適用于不明確搜索，即其實(shí)并不明確自己要怎么搜索的，如淘寶微淘/社區(qū)頁(yè)面的搜索，這兩個(gè)板塊是淘寶打造出的社區(qū)交流板塊，動(dòng)態(tài)豐富多樣，用戶并不知道要如何搜索，淘寶微淘采用的是第三種方式，淘寶社區(qū)采用的是第四種方式。

當(dāng)然是否需要呈現(xiàn)歷史搜索記錄和搜索內(nèi)容有關(guān)，如果內(nèi)容屬于只需要搜索一次屬性那就不用歷史搜索記錄啦，頁(yè)面也能更簡(jiǎn)潔大方。

2、消息放到右上角一級(jí)入口處有助于快速獲取到新消息狀態(tài)

【分析】：該app在其四個(gè)切換卡頁(yè)的右上角都布局有消息中心，這可方便用戶快速獲取新消息

【優(yōu)化】：可考慮消息全局化，在所有的頁(yè)面都布局消息中心入口（但得根據(jù)實(shí)際情況，如果app內(nèi)部用戶不咋溝通，消息產(chǎn)生較少則指在四個(gè)切換卡頁(yè)布局消息中心就ok了）

【再說】： 應(yīng)用里一般都有消息提示，但消息入口有深有淺。有些消息中心放在比較重要的位置，如頂部左上角或右上角，而有些則比較隱蔽，如個(gè)人中心處的某個(gè)夾層里。這 和應(yīng)用的定位有關(guān)，如果重社交屬性，app內(nèi)重要的消息（評(píng)論點(diǎn)贊之類的）產(chǎn)生較頻繁，那消息中心得放在重要的位置，因?yàn)檫@樣可以讓用戶之間可以更好的溝 通，方便直接讀取又能即時(shí)獲得新消息；

消息的全局化適合社交消息（評(píng)論點(diǎn)贊之類的）產(chǎn)生頻繁的情況，指在應(yīng)用內(nèi)的每個(gè)頁(yè)面都有消息入口，一般放在頂部左上角或右上角，消息全局化有助于用戶在使用app的整個(gè)過程中都能獲取到新消息狀態(tài)，拉近用戶之間的距離，更積極地溝通。

?常用基礎(chǔ)功能顯示

【分析】：顯示常用功能，包含了門禁鑰匙、管家電話、我的積分、生活繳費(fèi)。

1. “門禁鑰匙”是業(yè)主每次進(jìn)出都需要使用到的，放在第一個(gè)位置能方便用戶快速開門；
2. “管家電話”處第二，希望實(shí)現(xiàn)咨詢到服務(wù)的快速響應(yīng)，旨在能給業(yè)主提供專屬貼心服務(wù)；
3. “我的積分”處第三，積分的作用是為了提升用戶活躍度并增強(qiáng)用戶黏性，通過積分獎(jiǎng)勵(lì)引導(dǎo)已 注冊(cè)用戶邀請(qǐng)用戶獲得積分、綁定房間并在應(yīng)用內(nèi)活躍；
4. “生活繳費(fèi)”嘛，引導(dǎo)業(yè)主主動(dòng)積極繳費(fèi)唄哈哈。

【優(yōu)化】： 1、圖標(biāo)再設(shè)計(jì)，盡量突出些?，F(xiàn)常用功能圖標(biāo)色彩不太突出明顯，和上板塊同為橘色，區(qū)分度不高。 2、積分規(guī)則頁(yè)面可以重新設(shè)計(jì)下，將積分規(guī)則放到二級(jí)頁(yè)面內(nèi)，并加入任務(wù)狀態(tài)，標(biāo)識(shí)出已完成的積分任務(wù)和未完成的積分任務(wù)，并添加未完成的積分任務(wù)入口，這樣既可以引導(dǎo)用戶完成積分任務(wù)還能提醒用戶每日的任務(wù)完成度，從而提高用戶活躍度。

【再說】：在首頁(yè)顯示的功能必然有它的作用，除了常用之外還有希望引導(dǎo)用戶操作的作用，可以認(rèn)真關(guān)注下，自身的應(yīng)用最能幫助用戶解決的問題以及用戶最常用的功能，適當(dāng)?shù)目梢詫⑾胍龑?dǎo)用戶的功能擺放在首頁(yè)。

? 圖文公告板? +?? ? 文字公告板

【分析】：公告的展示方式很特別，將圖文活動(dòng)和文字通知分開，圖文活動(dòng)公告以溢出方式填充整個(gè)屏幕，嵌套文字通知公告，頁(yè)面更富有動(dòng)態(tài)，重要的活動(dòng)/通知可以即時(shí)傳達(dá)給用戶。

【優(yōu)化】：將未失效的圖文活動(dòng)可滑動(dòng)顯示。現(xiàn)只能看到最近發(fā)出的圖文活動(dòng)，以前發(fā)出的但未失效的活動(dòng)須點(diǎn)擊“更多”進(jìn)入列表頁(yè)才能看到。

【再說】：一般應(yīng)用都是采用頂部banner輪播圖的形式來(lái)展示最新的活動(dòng)信息/廣告，該app采用了不一樣的方式來(lái)展示活動(dòng)，將活動(dòng)面板與自身的文字通告設(shè)計(jì)在一起，傳遞出一種整體感，相比banner更好讓用戶接受。

? 運(yùn)營(yíng)板塊（熱門推薦）

【分析】：app在該板塊主要是進(jìn)行：商品組合推薦、單個(gè)商品推薦、旅游推薦、活動(dòng)宣傳等。通過內(nèi)容的推薦/活動(dòng)的宣傳來(lái)引導(dǎo)用戶進(jìn)行購(gòu)買商品/參與活動(dòng)。

【優(yōu)化】：該板塊不管是組合推薦還是單品推薦都采用這種單卡片展示方式，內(nèi)容比較分散，用戶所獲取的信息完全來(lái)自于該運(yùn)營(yíng)團(tuán)隊(duì)整理的推薦，且推薦的內(nèi)容之間缺少關(guān)聯(lián)（每次瀏覽內(nèi)容會(huì)比較累）。

建議對(duì)可以規(guī)范歸類的內(nèi)容進(jìn)行歸類，如閃電購(gòu)（快遞送貨上門）和小賣部（物業(yè)自提）這兩個(gè)商品組合推薦可以設(shè)定為主題板塊。其余無(wú)法規(guī)范歸類的商品 組合推薦可以參考組合運(yùn)營(yíng)板塊的設(shè)計(jì)方式，顯示出組合商品的特色?；顒?dòng)宣傳之類的可以分散點(diǎn)沒關(guān)系，畢竟活動(dòng)本身的特點(diǎn)就是靈活；

【再說】： 用戶喜歡歸類，事物進(jìn)行歸類后可以既能方便人記憶，又能讓內(nèi)容更精煉統(tǒng)一。對(duì)于可以規(guī)范歸類的并且重要的內(nèi)容最好做好固定分類，這樣可以讓用戶在第一時(shí)間 能找到內(nèi)容并進(jìn)行消費(fèi)/享受服務(wù)。（這其實(shí)就是類似該app做的主題運(yùn)營(yíng)板塊）合理運(yùn)用布局可以讓內(nèi)容看起來(lái)更清楚，方便用戶更快理解app。

首頁(yè)效果圖-2（包含?、?個(gè)分析點(diǎn)）

? 組合運(yùn)營(yíng)板塊（對(duì)同類型的商品進(jìn)行組合推薦）

【分析】：app在該板塊主要是進(jìn)行商品組合推薦，和運(yùn)營(yíng)板塊里商品組合推薦是同一類型，不過在布局設(shè)計(jì)上比運(yùn)營(yíng)板塊的更合理，采用了組合布局。

【再說】：組合商品推薦可以采用組合布局的方式，先顯示部分商品，再通過鏈接方式引導(dǎo)用戶獲取更多商品，這種漸進(jìn)呈現(xiàn)式組合布局能讓用戶對(duì)這個(gè)組合內(nèi)容有個(gè)大致的概念（什么類型商品的組合等），且當(dāng)用戶對(duì)該組合商品感興趣時(shí)可以查看更多內(nèi)容，滿足用戶的參與感。

? 主題運(yùn)營(yíng)板塊（對(duì)同類型的商品/服務(wù)進(jìn)行分類推薦）

【分析】：app在該板塊主要是進(jìn)行主題組合推薦，通過對(duì)內(nèi)容進(jìn)行分類，來(lái)推薦給用戶。

【再說】：設(shè)定主題板塊的目的是在于能讓用戶專注地挑選商品/接受服務(wù)，淘寶首頁(yè)就基本滿滿地都是各種分類主題板塊

綜述： 為了好分析，想到更好的說法之前暫時(shí)先這么命名上面三個(gè)板塊…這三個(gè)板塊所采用的布局樣式都一致，即以這種單卡片流的方式來(lái)展示內(nèi)容，單卡片流式布局 可以讓用戶在瀏覽內(nèi)容時(shí)可以比較專注于當(dāng)前內(nèi)容，讓用戶享受瀏覽快感，但單卡片式布局的內(nèi)容缺少關(guān)聯(lián)，用戶瀏覽易產(chǎn)生疲勞和注意力分散，且其依賴內(nèi)容的頻 繁更新。單卡片式布局適用于比較靈活并受時(shí)間影響的內(nèi)容，如活動(dòng)分享。如有特定分類并且內(nèi)容不怎么受時(shí)間影響的建議還是采用主題分類布局內(nèi)容比較好。

當(dāng)然也有例外，如果你愛自由的話，也可以整個(gè)采用單卡片式瀑布流方式展示內(nèi)容，如唯品會(huì)的今日上新。（有興趣去看看，不過本寶寶覺得看好累）

首頁(yè)效果圖-3（包含?、⑨個(gè)分析點(diǎn)）

? 二手閑置板塊?? +???⑨ 猜你喜歡

這兩個(gè)板塊主要是基于內(nèi)容推薦的。

【分析】：根據(jù)內(nèi)容直接做推薦，前者推薦二手閑置內(nèi)容，后者是針對(duì)瀏覽記錄和以往服務(wù)記錄進(jìn)行個(gè)性化推薦

【優(yōu)化】：說是個(gè)性化推薦啦，但事實(shí)上內(nèi)容是固定的，既沒有更新也沒有根據(jù)記錄做推薦，不過這個(gè)得慢慢來(lái)，做好智能推薦是必須的。

【再說】：根據(jù)內(nèi)容進(jìn)行推薦是很贊的，但內(nèi)容推薦具有不確定性且對(duì)數(shù)據(jù)的整合分析要求較高（算法等），內(nèi)容不多的情況下，前期手動(dòng)推薦也是挺好的~但手動(dòng)推薦有其局限性，即內(nèi)容更新速度慢且推薦的內(nèi)容不匹配用戶。

分析版塊里每個(gè)分解點(diǎn)分了3個(gè)小點(diǎn)（【分析】、【優(yōu)化】和【再說】 )來(lái)詳細(xì)分析。感興趣的朋友可以深入。

【分析】是對(duì)分解點(diǎn)的分析、【優(yōu)化】是我提出的可以優(yōu)化的點(diǎn)、【再說】則是通過分析整理了一些參考知識(shí)點(diǎn)

以上分析均來(lái)自我非常正經(jīng)的瞎YY，如有雷同純屬巧合，如有異議歡迎探討！

作者：小圣，個(gè)人微信公眾號(hào)：hi_xiaosheng

本文由 @小圣 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。