本文是最近在做競品分析，在分析競品的首頁時，整理的一些有關首頁的想法。想看別人家的首頁都是什么樣子的就快快來看吧！

基本上每個應用都有首頁，內容的多少和平臺的大小影響著首頁所呈現的內容，大到電商類重內容運營的app如淘寶，其首頁非常復雜；小到工具類重簡易操作的app如印象筆記，其首頁非常簡潔。然而優秀的首頁都有共同的特點，我總結為三點，為了方便后面的分析，我把這三點叫做“首頁三準則”，這篇文章主要通過扒一扒這些特點來分享如何設計一款優秀的首頁/讀懂各類首頁。

根據幾種用戶使用場景來分析，先來看看首頁應該怎么設計！我總結為以下三點。

一、首頁三準則

---

首頁的主要作用是要在最短的時間內讓用戶對內容產生興趣。

“首頁三準則”

1、對首次使用產品的用戶而言，首頁的好壞關系到用戶對該產品的第一印象，用戶第一眼看到的是界面，其次是內容。所以，在這個階段，符合品牌的好的設計感和內容的豐富度會給用戶的印象加分。

2、繼而一直吸引用戶使用的就是產品到底能為他解決什么問題，這就和產品所具有的功能/所提供的服務相關，只有當用戶能用該產品切實解決問題并且用起來爽了，那他才會一直用。所以，在這個階段，對首頁而言，核心功能的展示和好的交互體驗顯的尤為重要。

3、對于深度使用用戶而言，首頁是信息的集合，用戶希望只要打開首頁就能知曉最近的活動和通知，并且能看到好的內容推薦。所以，內容的推薦和即時更新會讓用戶感到滿足。

不管是定位為內容型還是導流型應用，首頁能做到以上三點都會給用戶帶來好的體驗。當然不管在哪個階段，當內容達到一個量級的時候，搜索和導航都可以方便用戶到達想要去的頁面。

二、舉例分析：淘寶

---

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

淘寶的首頁內容非常豐富，除了基礎功能的展示和各種主題板塊，還有大量內容的推薦和更新。

1、當用戶首次到淘寶時，首頁內容的豐富和紅色活潑的設計風格會讓用戶產生熱鬧的印象，同時，各種主題模塊，如淘搶購、超實惠、天貓必逛、特色好貨、熱門市場等，足夠滿足用戶首次探索的需求。

淘寶首頁-主題模塊

2、當用戶首次探索結束時，淘寶首頁的核心功能展示，如天貓、聚劃算、天貓國際、外賣、天貓超市、充值中心、阿里旅行、領金幣、到家等，可以方便用戶快速了解到淘寶的基礎功能/服務，當然配合良好的交互體驗，用戶很快就能適應首頁并熟練的使用！

淘寶首頁-核心功能展示

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

淘寶首頁-內容推薦/更新

所以根據以上三點來思考首頁的設計是很有參考價值的。改版后的簡書也大致符合以上三點哦，是不是比以前更好懂了？

三、實戰

---

好吧，接下來開始實戰了：

分析對象：千丁

千丁簡介：千丁是一款社區生活服務類app，旨在做一站式社區服務平臺。主要功能包括：基礎服務，如：管家電話、報事報修、物業賬單、訪客通行、樂購等；生活服務，如：千丁洗衣、上門養車、千丁旅游等；以及鄰里社交。現覆蓋大約19個城市，237個小區（根據app上布局小區統計）

千丁的首頁整體給人的視覺效果不錯，頁面內容較豐富，核心功能也體現了出來，并包含了各種內容的推薦，整體是做到的“首頁三準則”。

（首頁效果圖-1+2+3為完整首頁效果圖，其中分析文字序號對應著圖中內容分解區域的序號）

首頁效果圖-1開始！

>>>>首頁效果圖-1（包含?、?、?、?、?個分析點）

首頁效果圖-1

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

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

千丁-搜索框

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

【優化】：該類應用所提供的商品/服務都比較小眾，用戶在使用時，可能不知道該怎么搜索，搜索框應有推薦搜索項。

【再說】：

搜索頁面一般有四種展現方式：

1）只有搜索框；

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

3）只顯示推薦搜索項；

4）歷史搜索記錄+推薦搜索項。

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

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

淘寶-首頁搜索

第三種和第四種適用于不明確搜索，即其實并不明確自己要怎么搜索的，如淘寶微淘/社區頁面的搜索，這兩個板塊是淘寶打造出的社區交流板塊，動態豐富多樣，用戶并不知道要如何搜索，淘寶微淘采用的是第三種方式，淘寶社區采用的是第四種方式。

淘寶-微淘/社區搜索

當然是否需要呈現歷史搜索記錄和搜索內容有關，如果內容屬于只需要搜索一次屬性那就不用歷史搜索記錄啦，頁面也能更簡潔大方。

2、消息放到右上角一級入口處有助于快速獲取到新消息狀態

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

【優化】：可考慮消息全局化，在所有的頁面都布局消息中心入口（但得根據實際情況，如果千丁內用戶不咋溝通，消息產生較少則指在四個切換卡頁布局消息中心就ok了）

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

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

?常用基礎功能顯示

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

1）“門禁鑰匙”是業主每次進出都需要使用到的，放在第一個位置能方便用戶快速開門；

2）“管家電話”處第二，希望實現咨詢到服務的快速響應，旨在能給業主提供專屬貼心服務；

3）“我的積分”處第三，積分的作用是為了提升用戶活躍度并增強用戶黏性，通過積分獎勵引導已

注冊用戶邀請用戶獲得積分、綁定房間并在應用內活躍；

4）“生活繳費”嘛，引導業主主動積極繳費唄哈哈。

【優化】：

1、圖標再設計，盡量突出些。現常用功能圖標色彩不太突出明顯，和上板塊同為橘色，區分度不高。

2、積分規則頁面可以重新設計下，將積分規則放到二級頁面內，并加入任務狀態，標識出已完成的積分任務和未完成的積分任務，并添加未完成的積分任務入口，這樣既可以引導用戶完成積分任務還能提醒用戶每日的任務完成度，從而提高用戶活躍度。

千丁-積分頁面

回家么-積分頁面

【再說】：在首頁顯示的功能必然有它的作用，除了常用之外還有希望引導用戶操作的作用，可以認真關注下，自身的應用最能幫助用戶解決的問題以及用戶最常用的功能，適當的可以將想引導用戶的功能擺放在首頁。

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

【分析】：公告的展示方式很特別，將圖文活動和文字通知分開，圖文活動公告以溢出方式填充整個屏幕，嵌套文字通知公告，頁面更富有動態，重要的活動/通知可以即時傳達給用戶。

【優化】：將未失效的圖文活動可滑動顯示。現只能看到最近發出的圖文活動，以前發出的但未失效的活動須點擊“更多”進入列表頁才能看到。

【再說】：一般應用都是采用頂部banner輪播圖的形式來展示最新的活動信息/廣告，千丁采用了不一樣的方式來展示活動，將活動面板與自身的文字通告設計在一起，傳遞出一種整體感，相比banner更好讓用戶接受。

?運營板塊（熱門推薦）

【分析】：千丁在該板塊主要是進行：商品組合推薦、單個商品推薦、千丁旅游推薦、活動宣傳等。通過內容的推薦/活動的宣傳來引導用戶進行購買商品/參與活動。

【優化】：該板塊不管是組合推薦還是單品推薦都采用這種單卡片展示方式，內容比較分散，用戶所獲取的信息完全來自于千丁運營團隊整理的推薦，且推薦的內容之間缺少關聯（每次瀏覽內容會比較累）。

建議對可以規范歸類的內容進行歸類，如千丁閃電購（快遞送貨上門）和千丁小賣部（物業自提）這兩個商品組合推薦可以設定為主題板塊。其余無法規范歸類的商品組合推薦可以參考組合運營板塊的設計方式，顯示出組合商品的特色。活動宣傳之類的可以分散點沒關系，畢竟活動本身的特點就是靈活；

【再說】：用戶喜歡歸類，事物進行歸類后可以既能方便人記憶，又能讓內容更精煉統一。對于可以規范歸類的并且重要的內容最好做好固定分類，這樣可以讓用戶在第一時間能找到內容并進行消費/享受服務。（這其實就是類似千丁做的主題運營板塊）合理運用布局可以讓內容看起來更清楚，方便用戶更快理解app。

淘寶-主題分類

首頁效果圖-2開始

>>>>首頁效果圖-2（包含?、?個分析點）

首頁效果圖-2

?組合運營板塊（對同類型的商品進行組合推薦）

【分析】：千丁在該板塊主要是進行商品組合推薦，和運營板塊里商品組合推薦是同一類型，不過在布局設計上比運營板塊的更合理，采用了組合布局。

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

淘寶-組合分類

?主題運營板塊（對同類型的商品/服務進行分類推薦）

【分析】：千丁在該板塊主要是進行主題組合推薦，通過對內容進行分類，來推薦給用戶。

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

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

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

首頁效果圖-3開始！

>>>>首頁效果圖-3（包含?、⑨個分析點）

首頁效果圖-3

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

這兩個板塊主要是基于內容推薦的。

【分析】：根據內容直接做推薦，前者推薦二手閑置內容，后者是針對瀏覽記錄和以往服務記錄進行個性化推薦

【優化】：說是個性化推薦啦，但事實上內容是固定的，既沒有更新也沒有根據記錄做推薦，不過這個得慢慢來，做好智能推薦是必須的。

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

---

分析版塊里每個分解點分了3個小點（【分析】、【優化】和【再說】)來詳細分析。感興趣的朋友可以深入。

【分析】是對分解點的分析、【優化】是我提出的可

總結

以上是生活随笔為你收集整理的app首页新解读：如何设计总有一款你喜欢的首页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。