app首頁新解讀:如何設計總有一款你喜歡的首頁

NO IMAGE

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

基本上每個應用都有首頁,內容的多少和平臺的大小影響著首頁所呈現的內容,大到電商類重內容運營的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個小點(【分析】、【優化】和【再說】)來詳細分析。感興趣的朋友可以深入。

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