編輯導(dǎo)語：首頁設(shè)計(jì)對一款A(yù)pp來說可謂是至關(guān)重要。如何做出一個(gè)有效的首頁設(shè)計(jì)？本篇文章里，作者就對比了幾款互金App的首頁設(shè)計(jì)，提出了首頁設(shè)計(jì)的目標(biāo)和幾個(gè)設(shè)計(jì)要點(diǎn)。如果你也對這個(gè)內(nèi)容感興趣的話，就一起看一下吧。

一、楔子

最近在看同花順的時(shí)候突發(fā)奇想清除了數(shù)據(jù)，結(jié)果我直接好家伙，首屏完全不一樣了。

同花順首頁之前是這樣的，新用戶和老用戶的區(qū)別在于九宮格和推薦，并沒有做特別差異化的策略。

而改版之后，首屏完全變了個(gè)樣：

1. banner置于頂部，內(nèi)容以投資者教育為主；
2. 九宮格縮為一行，主打新用戶體驗(yàn)和開戶轉(zhuǎn)化；
3. 原先的信息流下移至第二屏，由以包裝成新手指引、而實(shí)際是以開戶轉(zhuǎn)化為導(dǎo)向的“4步學(xué)會(huì)股票投資”替代。

而當(dāng)用戶登錄后或不再滿足新用戶的條件，同花順的首屏又會(huì)變成我們之前熟悉的樣子。

那么同花順為什么要怎么改呢？首頁設(shè)計(jì)有哪些要點(diǎn)？

接下來我將結(jié)合首頁的設(shè)計(jì)要點(diǎn)和同花順、漲樂財(cái)富通、螞蟻財(cái)富的對應(yīng)設(shè)計(jì)進(jìn)行闡述。

二、首頁的目標(biāo)

在做首頁設(shè)計(jì)時(shí)，最重要的是明確它所承載的使命和目標(biāo)。

首頁與其他頁面不同，它是一個(gè)產(chǎn)品的門面，需要直觀地向用戶傳達(dá)這個(gè)產(chǎn)品的理念和定位，并且讓用戶在第一時(shí)間內(nèi)get到這個(gè)產(chǎn)品對他的價(jià)值。一般來說，首頁的目標(biāo)有以下幾點(diǎn)：

1. 流量分發(fā)

作為APP的門面，首頁陳列著各式各樣的功能和模塊，如何通過首頁做好流量分發(fā)，給到各業(yè)務(wù)線合理的流量，通常是首頁的最重要使命。

那么如何來分配流量呢？一個(gè)字，算。

例如某公司有A、B、C業(yè)務(wù)，年度營收目標(biāo)是a、b、c。為了簡化模型，假設(shè)這些業(yè)務(wù)目標(biāo)全部由線上實(shí)現(xiàn)，那么我們可以根據(jù)往年的業(yè)務(wù)轉(zhuǎn)化表現(xiàn)推算出實(shí)現(xiàn)目標(biāo)需要多少流量支持，進(jìn)而推算出單個(gè)業(yè)務(wù)占首頁流量的比例。

以同花順為例，由于同花順還在探索新人首頁，我們這里就只分析它的“老人首頁”。

上面這張圖是同花順上年的主營業(yè)務(wù)構(gòu)成，可以看出，同花順最大比例的營收來源于“增值電信服務(wù)”和“廣告及互聯(lián)網(wǎng)業(yè)務(wù)推廣服務(wù)”。

• “增值電信服務(wù)”指的是手機(jī)超級Level-2、神奇電波、同花順VIP等付費(fèi)服務(wù)；
• “廣告及互聯(lián)網(wǎng)業(yè)務(wù)推廣服務(wù)”則由廣告和券商開戶等組成。

天風(fēng)證券對同花順各項(xiàng)業(yè)務(wù)的解讀

同花順在增值電信業(yè)務(wù)的經(jīng)營模式為“平臺(tái)免費(fèi)，增值服務(wù)收費(fèi)”，通過向投資者提供多種增值軟件服務(wù)產(chǎn)品以獲取營業(yè)收入。該項(xiàng)業(yè)務(wù)營業(yè)收入=活躍用戶數(shù)×付費(fèi)滲透率×ARPU。在同花順的首頁，付費(fèi)服務(wù)比較明顯的入口有九宮格中的“決策”、banner位、以及信息流中的軟文及硬廣等。

當(dāng)然，以同花順當(dāng)前的首頁布局，對增值服務(wù)的流量分發(fā)能力是無法滿足需求的，例如banner位的曝光點(diǎn)擊率通常在2%以下，這也是券商自營類app和同花順等平臺(tái)型證券產(chǎn)品的困擾之一：如何平衡用戶體驗(yàn)和業(yè)務(wù)轉(zhuǎn)化。當(dāng)前同花順的主要解決方式是結(jié)合場景見縫插針，利用功能的流量給業(yè)務(wù)帶來變現(xiàn)。

2. 瀏覽路徑引導(dǎo)

互聯(lián)網(wǎng)公司海量日活的背后，是特征差異巨大的用戶群體。如何向不同特征的用戶群體呈現(xiàn)他們喜歡的內(nèi)容也是首頁重要的使命之一。

以投資經(jīng)驗(yàn)來分，用戶可分為有投資經(jīng)驗(yàn)和無投資經(jīng)驗(yàn)。

有投資經(jīng)驗(yàn)的用戶目的性更強(qiáng)，最常使用的是行情、自選股等功能。而無經(jīng)驗(yàn)用戶則更偏向使用新人教學(xué)，以及活躍類、直接薦股類功能等，例如討論區(qū)、話題、問財(cái)。

以投資風(fēng)格來分，用戶又可分為短線、中線、長線等。打板用戶更多看的是熱點(diǎn)板塊、連板天數(shù)、封板力度等，而長線用戶則更加聚焦于股票的基本面，更多關(guān)注研報(bào)、財(cái)報(bào)等。

不同年齡段用戶的決策特征

而首頁針對這些人群，則通常采用個(gè)性化推薦等形式將用戶可能更喜歡的功能或內(nèi)容推薦給用戶。比如九宮格的新老模式、廣告的千人千面、信息流的推薦算法等。

3. 直接創(chuàng)造營收

首頁無疑是app流量最大的頁面，因此也是創(chuàng)造直接營收的黃金位置。如何在保證用戶體驗(yàn)的前提下更好地創(chuàng)收是首頁產(chǎn)品們的一個(gè)重大課題。

螞蟻財(cái)富的營收主要是基金銷售，它的流量和創(chuàng)收是一致的，這點(diǎn)和電商相似。螞蟻可以肆無忌憚地將各種基金進(jìn)行包裝，然后陳列到用戶面前，用戶買了基金，螞蟻便賺了錢。

而券商和同花順等的營收來源于傭金、融資融券、付費(fèi)服務(wù)等業(yè)務(wù)，用戶的使用目的和他們的盈利來源存在較長的轉(zhuǎn)化路徑。

比如券商，它需要想方設(shè)法讓用戶來開戶和交易才能獲得主要收益。

然而，對用戶來說，使用app可能只是為了看行情、資訊等，伺候好了才有可能進(jìn)行開戶以及交易。

所以我們可以看到券商的首頁直接創(chuàng)收的模塊并不明顯，更多的是做好用戶體驗(yàn)、提升產(chǎn)品價(jià)值。

漲樂財(cái)富通作為首個(gè)月活破千萬的純?nèi)套誀Iapp在首頁的布局上便可圈可點(diǎn)。

比如簡單的九宮格布局，其他同類往往設(shè)置成資金流向、研報(bào)、打新等通用功能，而華泰則是布置了業(yè)務(wù)轉(zhuǎn)化類（開戶、理財(cái)?shù)龋⒒钴S類（禮包、簽到）等，相對而言華泰的九宮格傾向于業(yè)務(wù)引流，而其他競品則側(cè)重于給用戶提供功能快捷入口。實(shí)際上，大部分用戶每天使用九宮格的個(gè)數(shù)在3個(gè)以下，如何提升這塊黃金位置的利用效率，或許可以借鑒華泰的做法。

4. 樹立企業(yè)形象，迎合目標(biāo)用戶

首頁是app的門面，它需要在用戶進(jìn)入時(shí)準(zhǔn)確地傳達(dá)產(chǎn)品的理念和定位。比如螞蟻頭部的 “余額寶” “理財(cái)” 等就比較直觀地傳達(dá)了其核心業(yè)務(wù)。

5. 進(jìn)行關(guān)鍵溝通

作為必經(jīng)之處，通過首頁與用戶溝通，觸達(dá)率無疑是最高的。常見的溝通手段，比如首頁彈窗（如新人禮包、重要通知、權(quán)益到賬等），頂部通欄第一楨，站內(nèi)信，都是常見的溝通點(diǎn)位。

同樣的，如何平衡觸達(dá)率和用戶體驗(yàn)，也是個(gè)難題。

首頁彈窗是對用戶的強(qiáng)制打擾，當(dāng)初很多PC網(wǎng)站的體驗(yàn)，很大程度上就毀在彈窗廣告，產(chǎn)品經(jīng)理設(shè)計(jì)首頁彈窗時(shí)需要格外謹(jǐn)慎，并絕對避免每次加載首頁時(shí)的重復(fù)彈窗。首頁彈窗功能的開發(fā)不難，但首頁運(yùn)營的一個(gè)挑戰(zhàn)，就是始終要抵擋一浪又一浪的首頁彈窗強(qiáng)烈需求，并為此制定合理彈窗規(guī)則。

三、總結(jié)

首頁的目標(biāo)

1. 流量分發(fā)，對核心業(yè)務(wù)有效的分流；
2. 瀏覽路徑引導(dǎo)，讓不同客群有所歸屬；
3. 直接創(chuàng)收，利用好黃金位置變現(xiàn)；
4. 樹立企業(yè)形象，傳達(dá)理念和定位；
5. 觸達(dá)用戶，進(jìn)行關(guān)鍵溝通。

首頁主要承載的功能有上述5個(gè)，具體如何設(shè)計(jì)和布局則需要結(jié)合產(chǎn)品自身的特點(diǎn)和需求。

作者：阿宅的產(chǎn)品筆記；公眾號：阿宅的產(chǎn)品筆記（PMZZnote）

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

題圖來自Unsplash，基于CC0協(xié)議