本文是最近在做競(jìng)品分析，在分析競(jìng)品的首頁(yè)時(shí)，整理的一些有關(guān)首頁(yè)的想法。想看別人家的首頁(yè)都是什么樣子的就快快來(lái)看吧！
基本上每個(gè)應(yīng)用都有首頁(yè)，內(nèi)容的多少和平臺(tái)的大小影響著首頁(yè)所呈現(xiàn)的內(nèi)容，大到電商類(lèi)重內(nèi)容運(yùn)營(yíng)的app如淘寶，其首頁(yè)非常復(fù)雜；小到工具類(lèi)重簡(jiǎn)易操作的app如印象筆記，其首頁(yè)非常簡(jiǎn)潔。然而優(yōu)秀的首頁(yè)都有共同的特點(diǎn)，我總結(jié)為三點(diǎn)，為了方便后面的分析，我把這三點(diǎn)叫做“首頁(yè)三準(zhǔn)則”，這篇文章主要通過(guò)扒一扒這些特點(diǎn)來(lái)分享如何設(shè)計(jì)一款優(yōu)秀的首頁(yè)/讀懂各類(lèi)首頁(yè)。
根據(jù)幾種用戶(hù)使用場(chǎng)景來(lái)分析，先來(lái)看看首頁(yè)應(yīng)該怎么設(shè)計(jì)！我總結(jié)為以下三點(diǎn)。
一、首頁(yè)三準(zhǔn)則
首頁(yè)的主要作用是要在最短的時(shí)間內(nèi)讓用戶(hù)對(duì)內(nèi)容產(chǎn)生興趣。
“首頁(yè)三準(zhǔn)則”
1、對(duì)首次使用產(chǎn)品的用戶(hù)而言，首頁(yè)的好壞關(guān)系到用戶(hù)對(duì)該產(chǎn)品的第一印象，用戶(hù)第一眼看到的是界面，其次是內(nèi)容。所以，在這個(gè)階段，符合品牌的好的設(shè)計(jì)感和內(nèi)容的豐富度會(huì)給用戶(hù)的印象加分。
2、繼而一直吸引用戶(hù)使用的就是產(chǎn)品到底能為他解決什么問(wèn)題，這就和產(chǎn)品所具有的功能/所提供的服務(wù)相關(guān)，只有當(dāng)用戶(hù)能用該產(chǎn)品切實(shí)解決問(wèn)題并且用起來(lái)爽了，那他才會(huì)一直用。所以，在這個(gè)階段，對(duì)首頁(yè)而言，核心功能的展示和好的交互體驗(yàn)顯的尤為重要。
3、對(duì)于深度使用用戶(hù)而言，首頁(yè)是信息的集合，用戶(hù)希望只要打開(kāi)首頁(yè)就能知曉最近的活動(dòng)和通知，并且能看到好的內(nèi)容推薦。所以，內(nèi)容的推薦和即時(shí)更新會(huì)讓用戶(hù)感到滿(mǎn)足。
不管是定位為內(nèi)容型還是導(dǎo)流型應(yīng)用，首頁(yè)能做到以上三點(diǎn)都會(huì)給用戶(hù)帶來(lái)好的體驗(yàn)。當(dāng)然不管在哪個(gè)階段，當(dāng)內(nèi)容達(dá)到一個(gè)量級(jí)的時(shí)候，搜索和導(dǎo)航都可以方便用戶(hù)到達(dá)想要去的頁(yè)面。
二、舉例分析：淘寶
就譬如淘寶，它是綜合型電子商務(wù)平臺(tái)，打開(kāi)淘寶app，雖然打開(kāi)看到的琳瑯滿(mǎn)目的內(nèi)容和各類(lèi)入口，但是不管哪個(gè)階段的用戶(hù)都能很快的找到自己想要的商品，并且在整個(gè)購(gòu)買(mǎi)過(guò)程中都享受到了樂(lè)趣（除了最后的支付），以淘寶為例，簡(jiǎn)單舉幾個(gè)小例子。
淘寶的首頁(yè)內(nèi)容非常豐富，除了基礎(chǔ)功能的展示和各種主題板塊，還有大量?jī)?nèi)容的推薦和更新。
1、當(dāng)用戶(hù)首次到淘寶時(shí)，首頁(yè)內(nèi)容的豐富和紅色活潑的設(shè)計(jì)風(fēng)格會(huì)讓用戶(hù)產(chǎn)生熱鬧的印象，同時(shí)，各種主題模塊，如淘搶購(gòu)、超實(shí)惠、天貓必逛、特色好貨、熱門(mén)市場(chǎng)等，足夠滿(mǎn)足用戶(hù)首次探索的需求。
2、當(dāng)用戶(hù)首次探索結(jié)束時(shí)，淘寶首頁(yè)的核心功能展示，如天貓、聚劃算、天貓國(guó)際、外賣(mài)、天貓超市、充值中心、阿里旅行、領(lǐng)金幣、到家等，可以方便用戶(hù)快速了解到淘寶的基礎(chǔ)功能/服務(wù)，當(dāng)然配合良好的交互體驗(yàn)，用戶(hù)很快就能適應(yīng)首頁(yè)并熟練的使用！
3、當(dāng)深度用戶(hù)進(jìn)入淘寶時(shí)，淘寶的內(nèi)容推薦和更新做的很贊，結(jié)合以前瀏覽過(guò)的內(nèi)容和購(gòu)買(mǎi)記錄，淘寶的首頁(yè)給出了大量的推薦，首頁(yè)中主題模塊的展示圖都是根據(jù)該用戶(hù)的以往記錄按一定的時(shí)間段輪流替換的，頂部的廣告輪播圖和搜索框提示語(yǔ)也是根據(jù)用戶(hù)的喜好而顯示的，并且最底部的猜你喜歡都做到了內(nèi)容的即時(shí)更新推薦，這不僅讓首頁(yè)更人性化，并且讓用戶(hù)感受到了逛頁(yè)面購(gòu)物的滿(mǎn)足。
所以根據(jù)以上三點(diǎn)來(lái)思考首頁(yè)的設(shè)計(jì)是很有參考價(jià)值的。改版后的簡(jiǎn)書(shū)也大致符合以上三點(diǎn)哦，是不是比以前更好懂了？
三、實(shí)戰(zhàn)
好吧，接下來(lái)開(kāi)始實(shí)戰(zhàn)了：
分析對(duì)象：千丁
千丁簡(jiǎn)介：千丁是一款社區(qū)生活服務(wù)類(lèi)app，旨在做一站式社區(qū)服務(wù)平臺(tái)。主要功能包括：基礎(chǔ)服務(wù)，如：管家電話(huà)、報(bào)事報(bào)修、物業(yè)賬單、訪客通行、樂(lè)購(gòu)等；生活服務(wù)，如：千丁洗衣、上門(mén)養(yǎng)車(chē)、千丁旅游等；以及鄰里社交?，F(xiàn)覆蓋大約19個(gè)城市，237個(gè)小區(qū)（根據(jù)app上布局小區(qū)統(tǒng)計(jì)）
千丁的首頁(yè)整體給人的視覺(jué)效果不錯(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、搜索框可方便用戶(hù)快速獲取到所需要的商品或服務(wù)，點(diǎn)擊搜索框后彈出搜索頁(yè)面，顯示如下：
【分析】：用戶(hù)可能需要多次瀏覽某商品或使用同一服務(wù)，所以有歷史搜索記錄能方便用戶(hù)記憶并搜索。
【優(yōu)化】：該類(lèi)應(yīng)用所提供的商品/服務(wù)都比較小眾，用戶(hù)在使用時(shí)，可能不知道該怎么搜索，搜索框應(yīng)有推薦搜索項(xiàng)。
【再說(shuō)】：
搜索頁(yè)面一般有四種展現(xiàn)方式：
1）只有搜索框；
2）只顯示歷史搜索記錄；
3）只顯示推薦搜索項(xiàng)；
4）歷史搜索記錄+推薦搜索項(xiàng)。
而這四種方式都適用不同的情況：
第一種和第二種適用于明確搜索，即知道自己要搜索什么，如淘寶首頁(yè)的搜索，點(diǎn)開(kāi)就知道要搜索的是商品，所以淘寶首頁(yè)采用的是第二種方式；
第三種和第四種適用于不明確搜索，即其實(shí)并不明確自己要怎么搜索的，如淘寶微淘/社區(qū)頁(yè)面的搜索，這兩個(gè)板塊是淘寶打造出的社區(qū)交流板塊，動(dòng)態(tài)豐富多樣，用戶(hù)并不知道要如何搜索，淘寶微淘采用的是第三種方式，淘寶社區(qū)采用的是第四種方式。
當(dāng)然是否需要呈現(xiàn)歷史搜索記錄和搜索內(nèi)容有關(guān)，如果內(nèi)容屬于只需要搜索一次屬性那就不用歷史搜索記錄啦，頁(yè)面也能更簡(jiǎn)潔大方。
2、消息放到右上角一級(jí)入口處有助于快速獲取到新消息狀態(tài)
【分析】：千丁在其四個(gè)切換卡頁(yè)的右上角都布局有消息中心，這可方便用戶(hù)快速獲取新消息
【優(yōu)化】：可考慮消息全局化，在所有的頁(yè)面都布局消息中心入口（但得根據(jù)實(shí)際情況，如果千丁內(nèi)用戶(hù)不咋溝通，消息產(chǎn)生較少則指在四個(gè)切換卡頁(yè)布局消息中心就ok了）
【再說(shuō)】：應(yīng)用里一般都有消息提示，但消息入口有深有淺。有些消息中心放在比較重要的位置，如頂部左上角或右上角，而有些則比較隱蔽，如個(gè)人中心處的某個(gè)夾層里。這和應(yīng)用的定位有關(guān)，如果重社交屬性，app內(nèi)重要的消息（評(píng)論點(diǎn)贊之類(lèi)的）產(chǎn)生較頻繁，那消息中心得放在重要的位置，因?yàn)檫@樣可以讓用戶(hù)之間可以更好的溝通，方便直接讀取又能即時(shí)獲得新消息；
消息的全局化適合社交消息（評(píng)論點(diǎn)贊之類(lèi)的）產(chǎn)生頻繁的情況，指在應(yīng)用內(nèi)的每個(gè)頁(yè)面都有消息入口，一般放在頂部左上角或右上角，消息全局化有助于用戶(hù)在使用app的整個(gè)過(guò)程中都能獲取到新消息狀態(tài)，拉近用戶(hù)之間的距離，更積極地溝通。
?常用基礎(chǔ)功能顯示
【分析】：顯示常用功能，包含了門(mén)禁鑰匙、管家電話(huà)、我的積分、生活繳費(fèi)。
1）“門(mén)禁鑰匙”是業(yè)主每次進(jìn)出都需要使用到的，放在第一個(gè)位置能方便用戶(hù)快速開(kāi)門(mén)；
2）“管家電話(huà)”處第二，希望實(shí)現(xiàn)咨詢(xún)到服務(wù)的快速響應(yīng)，旨在能給業(yè)主提供專(zhuān)屬貼心服務(wù)；
3）“我的積分”處第三，積分的作用是為了提升用戶(hù)活躍度并增強(qiáng)用戶(hù)黏性，通過(guò)積分獎(jiǎng)勵(lì)引導(dǎo)已
注冊(cè)用戶(hù)邀請(qǐng)用戶(hù)獲得積分、綁定房間并在應(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)用戶(hù)完成積分任務(wù)還能提醒用戶(hù)每日的任務(wù)完成度，從而提高用戶(hù)活躍度。
【再說(shuō)】：在首頁(yè)顯示的功能必然有它的作用，除了常用之外還有希望引導(dǎo)用戶(hù)操作的作用，可以認(rèn)真關(guān)注下，自身的應(yīng)用最能幫助用戶(hù)解決的問(wèn)題以及用戶(hù)最常用的功能，適當(dāng)?shù)目梢詫⑾胍龑?dǎo)用戶(hù)的功能擺放在首頁(yè)。
?圖文公告板+?文字公告板
【分析】：公告的展示方式很特別，將圖文活動(dòng)和文字通知分開(kāi)，圖文活動(dòng)公告以溢出方式填充整個(gè)屏幕，嵌套文字通知公告，頁(yè)面更富有動(dòng)態(tài)，重要的活動(dòng)/通知可以即時(shí)傳達(dá)給用戶(hù)。
【優(yōu)化】：將未失效的圖文活動(dòng)可滑動(dòng)顯示。現(xiàn)只能看到最近發(fā)出的圖文活動(dòng)，以前發(fā)出的但未失效的活動(dòng)須點(diǎn)擊“更多”進(jìn)入列表頁(yè)才能看到。
【再說(shuō)】：一般應(yīng)用都是采用頂部banner輪播圖的形式來(lái)展示最新的活動(dòng)信息/廣告，千丁采用了不一樣的方式來(lái)展示活動(dòng)，將活動(dòng)面板與自身的文字通告設(shè)計(jì)在一起，傳遞出一種整體感，相比banner更好讓用戶(hù)接受。
?運(yùn)營(yíng)板塊（熱門(mén)推薦）
【分析】：千丁在該板塊主要是進(jìn)行：商品組合推薦、單個(gè)商品推薦、千丁旅游推薦、活動(dòng)宣傳等。通過(guò)內(nèi)容的推薦/活動(dòng)的宣傳來(lái)引導(dǎo)用戶(hù)進(jìn)行購(gòu)買(mǎi)商品/參與活動(dòng)。
【優(yōu)化】：該板塊不管是組合推薦還是單品推薦都采用這種單卡片展示方式，內(nèi)容比較分散，用戶(hù)所獲取的信息完全來(lái)自于千丁運(yùn)營(yíng)團(tuán)隊(duì)整理的推薦，且推薦的內(nèi)容之間缺少關(guān)聯(lián)（每次瀏覽內(nèi)容會(huì)比較累）。
建議對(duì)可以規(guī)范歸類(lèi)的內(nèi)容進(jìn)行歸類(lèi)，如千丁閃電購(gòu)（快遞送貨上門(mén)）和千丁小賣(mài)部（物業(yè)自提）這兩個(gè)商品組合推薦可以設(shè)定為主題板塊。其余無(wú)法規(guī)范歸類(lèi)的商品組合推薦可以參考組合運(yùn)營(yíng)板塊的設(shè)計(jì)方式，顯示出組合商品的特色?；顒?dòng)宣傳之類(lèi)的可以分散點(diǎn)沒(méi)關(guān)系，畢竟活動(dòng)本身的特點(diǎn)就是靈活；
【再說(shuō)】：用戶(hù)喜歡歸類(lèi)，事物進(jìn)行歸類(lèi)后可以既能方便人記憶，又能讓內(nèi)容更精煉統(tǒng)一。對(duì)于可以規(guī)范歸類(lèi)的并且重要的內(nèi)容最好做好固定分類(lèi)，這樣可以讓用戶(hù)在第一時(shí)間能找到內(nèi)容并進(jìn)行消費(fèi)/享受服務(wù)。（這其實(shí)就是類(lèi)似千丁做的主題運(yùn)營(yíng)板塊）合理運(yùn)用布局可以讓內(nèi)容看起來(lái)更清楚，方便用戶(hù)更快理解app。
>>>>首頁(yè)效果圖-2（包含?、?個(gè)分析點(diǎn)）
?組合運(yùn)營(yíng)板塊（對(duì)同類(lèi)型的商品進(jìn)行組合推薦）
【分析】：千丁在該板塊主要是進(jìn)行商品組合推薦，和運(yùn)營(yíng)板塊里商品組合推薦是同一類(lèi)型，不過(guò)在布局設(shè)計(jì)上比運(yùn)營(yíng)板塊的更合理，采用了組合布局。
【再說(shuō)】：組合商品推薦可以采用組合布局的方式，先顯示部分商品，再通過(guò)鏈接方式引導(dǎo)用戶(hù)獲取更多商品，這種漸進(jìn)呈現(xiàn)式組合布局能讓用戶(hù)對(duì)這個(gè)組合內(nèi)容有個(gè)大致的概念（什么類(lèi)型商品的組合等），且當(dāng)用戶(hù)對(duì)該組合商品感興趣時(shí)可以查看更多內(nèi)容，滿(mǎn)足用戶(hù)的參與感。
?主題運(yùn)營(yíng)板塊（對(duì)同類(lèi)型的商品/服務(wù)進(jìn)行分類(lèi)推薦）
【分析】：千丁在該板塊主要是進(jìn)行主題組合推薦，通過(guò)對(duì)內(nèi)容進(jìn)行分類(lèi)，來(lái)推薦給用戶(hù)。
【再說(shuō)】：設(shè)定主題板塊的目的是在于能讓用戶(hù)專(zhuān)注地挑選商品/接受服務(wù)，淘寶首頁(yè)就基本滿(mǎn)滿(mǎn)地都是各種分類(lèi)主題板塊
綜述：為了好分析，想到更好的說(shuō)法之前暫時(shí)先這么命名上面三個(gè)板塊...這三個(gè)板塊所采用的布局樣式都一致，即以這種單卡片流的方式來(lái)展示內(nèi)容，單卡片流式布局可以讓用戶(hù)在瀏覽內(nèi)容時(shí)可以比較專(zhuān)注于當(dāng)前內(nèi)容，讓用戶(hù)享受瀏覽快感，但單卡片式布局的內(nèi)容缺少關(guān)聯(lián)，用戶(hù)瀏覽易產(chǎn)生疲勞和注意力分散，且其依賴(lài)內(nèi)容的頻繁更新。單卡片式布局適用于比較靈活并受時(shí)間影響的內(nèi)容，如活動(dòng)分享。如有特定分類(lèi)并且內(nèi)容不怎么受時(shí)間影響的建議還是采用主題分類(lèi)布局內(nèi)容比較好。
當(dāng)然也有例外，如果你愛(ài)自由的話(huà)，也可以整個(gè)采用單卡片式瀑布流方式展示內(nèi)容，如唯品會(huì)的今日上新。（有興趣去看看，不過(guò)本寶寶覺(jué)得看好累）
>>>>首頁(yè)效果圖-3（包含?、⑨個(gè)分析點(diǎn)）
?二手閑置板塊+⑨猜你喜歡
這兩個(gè)板塊主要是基于內(nèi)容推薦的。
【分析】：根據(jù)內(nèi)容直接做推薦，前者推薦二手閑置內(nèi)容，后者是針對(duì)瀏覽記錄和以往服務(wù)記錄進(jìn)行個(gè)性化推薦
【優(yōu)化】：說(shuō)是個(gè)性化推薦啦，但事實(shí)上內(nèi)容是固定的，既沒(méi)有更新也沒(méi)有根據(jù)記錄做推薦，不過(guò)這個(gè)得慢慢來(lái)，做好智能推薦是必須的。
【再說(shuō)】：根據(jù)內(nèi)容進(jìn)行推薦是很贊的，但內(nèi)容推薦具有不確定性且對(duì)數(shù)據(jù)的整合分析要求較高（算法等），內(nèi)容不多的情況下，前期手動(dòng)推薦也是挺好的~但手動(dòng)推薦有其局限性，即內(nèi)容更新速度慢且推薦的內(nèi)容不匹配用戶(hù)。
分析版塊里每個(gè)分解點(diǎn)分了3個(gè)小點(diǎn)（【分析】、【優(yōu)化】和【再說(shuō)】)來(lái)詳細(xì)分析。感興趣的朋友可以深入。
【分析】是對(duì)分解點(diǎn)的分析、【優(yōu)化】是我提出的可以?xún)?yōu)化的點(diǎn)、【再說(shuō)】則是通過(guò)分析整理了一些參考知識(shí)點(diǎn)
以上分析均來(lái)自我非常正經(jīng)的瞎YY，如有雷同純屬巧合，如有異議歡迎探討！
