本文為首頁(yè)設(shè)計(jì)系列第三篇（終結(jié)篇），閱讀時(shí)長(zhǎng)約10分鐘,，內(nèi)容實(shí)用性強(qiáng),，建議收藏

上一篇（如何構(gòu)建首頁(yè)模塊）我們提出了三個(gè)在設(shè)計(jì)首頁(yè)需要思考的問(wèn)題：1）我的核心業(yè)務(wù)是什么？2）我的用戶需求是什么,？3）我想在首頁(yè)上打造什么用戶使用場(chǎng)景,？

而本篇就要講述，在做好上述的思考后,，各模塊都有什么樣的設(shè)計(jì)可能,，不同形式的模塊樣式設(shè)計(jì)應(yīng)該運(yùn)用在什么場(chǎng)景中。

以下本文將會(huì)總結(jié)目前市面上的7大模塊設(shè)計(jì)樣式,，在最后我們將以天弘,、同花順、天天基金為例進(jìn)行樣式應(yīng)用的講解,。

一,、首頁(yè)設(shè)計(jì)樣式

1.1 登錄改變頁(yè)面狀態(tài)型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

一般與資產(chǎn)模塊相結(jié)合，提示用戶需要登錄注冊(cè),。適用于平臺(tái)促新,，刺激用戶開(kāi)戶注冊(cè)；

也可與產(chǎn)品推薦、營(yíng)銷(xiāo)活動(dòng)板塊結(jié)合,，用戶登錄后,，首頁(yè)信息則針對(duì)用戶特征進(jìn)行變化，針對(duì)新人用戶推薦新手紅包,、針對(duì)低風(fēng)險(xiǎn)用戶推薦低風(fēng)險(xiǎn)產(chǎn)品,。適用于平臺(tái)針對(duì)不同用戶進(jìn)行多樣化設(shè)計(jì)

1.2 頭像展示型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

作為系統(tǒng)核心功能的入口。適用于平臺(tái)框架過(guò)于龐大的情況

2.1 平鋪型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

一些功能比較少,，隱藏過(guò)深又不易發(fā)現(xiàn),，如搜索、消息,、客服等,。所以以平鋪的方式呈現(xiàn)在首頁(yè)頂部。適用于展示重要但需求頻率較低的系統(tǒng)功能

2.2 隱藏型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

當(dāng)功能較多且需要按照一定業(yè)務(wù)邏輯歸納整理時(shí),，可以隱藏的形式收納功能

2.3 底部平鋪型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

當(dāng)隨著用戶視覺(jué)流瀏覽下來(lái)的時(shí)候,，正好能夠幫助用戶解決一些平臺(tái)疑惑。適合放置：平臺(tái)介紹,、場(chǎng)景問(wèn)題,、客服反饋等。適用于與整個(gè)平臺(tái)服務(wù)介紹相關(guān)的功能

3.1 核心信息展示型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

將資產(chǎn)板塊的核心信息展現(xiàn)至首頁(yè),。適用于資產(chǎn)板塊信息維度較為繁多的是情況，為有查看資產(chǎn)需求的用戶提供一個(gè)跳轉(zhuǎn)入口

3.2 展示收益構(gòu)成型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

適用于平臺(tái)理財(cái)產(chǎn)品種類(lèi)較多的情況,，如：不僅有平臺(tái)自身的現(xiàn)金寶產(chǎn)品,、還代銷(xiāo)其他基金公司產(chǎn)品。這樣可以給用戶很明顯的不同產(chǎn)品的獲益感,，也會(huì)刺激用戶購(gòu)買(mǎi)更多收益產(chǎn)品

3.3 延伸功能型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

適用于主力推薦平臺(tái)的自己的現(xiàn)金寶產(chǎn)品,。方便用戶在一個(gè)頁(yè)面一件操作所有流程；

且適用于平臺(tái)較為成熟階段,，用戶數(shù)量穩(wěn)定后,，資產(chǎn)信息成為平臺(tái)關(guān)注度最高的板塊

3.4 插入提示型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

適用于首頁(yè)模塊信息較為繁多復(fù)雜的時(shí)候，穿插在模塊之間,，避免占據(jù)太多首頁(yè)面積

4.1 頂部輪播型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

用于常規(guī)型營(yíng)銷(xiāo)活動(dòng),，放置于首頁(yè)頂部，以輪播的方式,，吸引用戶對(duì)活動(dòng)的關(guān)注

4.2 中部并排型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

適用于運(yùn)營(yíng)活動(dòng)較為簡(jiǎn)單的情況,，一般是以紅包的形式出現(xiàn)，穿插在產(chǎn)品推薦模塊當(dāng)中,，吸引用戶領(lǐng)取紅包后購(gòu)買(mǎi)產(chǎn)品

4.3 頁(yè)面突出型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

這種突出的形式有很多,，還有懸浮型新人紅包，目的都是為了更加突出

5.1 平鋪型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

常見(jiàn)的快捷入口方式，把所有的入口都平鋪在首頁(yè)上,，讓用戶一眼明晰,，適用于快捷入口較少的情況

5.2 分層型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

在快捷入口內(nèi)部進(jìn)行分層。起總覽作用的快捷入口放置在第一層,，起縱向連接產(chǎn)品架構(gòu)的,，放在第二層

5.3 切換型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

適用于快捷入口較多，維度較為復(fù)雜的情況,，用戶也可以點(diǎn)擊進(jìn)入大的板塊,，挑選常用入口放置首頁(yè)

6.1 列表型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

適用于推薦產(chǎn)品較少的情況下，以列表排列的形式,，展現(xiàn)首頁(yè)推薦產(chǎn)品

6.2 重推型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

適用于展示熱推的產(chǎn)品,，比較典型的就是平臺(tái)的現(xiàn)金寶產(chǎn)品，同時(shí)輔助一些功能,，如：立刻買(mǎi)入

6.3 橫向拓展型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

適用于展示多維度產(chǎn)品的情況,，可以通過(guò)橫向切換、滑動(dòng)的方式展示大量同緯度下的產(chǎn)品

7.1 列表型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

適用于文章型資訊,，和咨詢數(shù)量較少的情況,，可以起到填充頁(yè)面空間，使得信息豐富度提升的作用

7.2 切換型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

適用于話題型的資訊,，左右切換的方式,，提升了用戶互動(dòng)參與感，刺激參與欲望,。

7.3 滾動(dòng)型

設(shè)計(jì)目標(biāo)與應(yīng)用場(chǎng)景

適用于新發(fā)布的一些資訊,，以滾動(dòng)出現(xiàn)的方式，給用戶一種時(shí)間感

二,、首頁(yè)案例分析

了解完首頁(yè)的各模塊有什么設(shè)計(jì)樣式,，我們就可以按照模塊的重要性針對(duì)首頁(yè)進(jìn)行分類(lèi)，如：資產(chǎn)型首頁(yè),、產(chǎn)品推薦型首頁(yè),、索引類(lèi)首頁(yè)、營(yíng)銷(xiāo)型首頁(yè),、資訊型首頁(yè)....,，接下來(lái)我們以前三個(gè)常見(jiàn)類(lèi)型做一個(gè)展示。

1,、資產(chǎn)型首頁(yè)設(shè)計(jì)

查看資產(chǎn)一直是app使用中的一個(gè)重要行為,，目前的app設(shè)計(jì)趨勢(shì)也是將查看資產(chǎn)這個(gè)功能放置重要位置。以天弘愛(ài)理財(cái)為例：

（向右滑）

核心模塊表現(xiàn)—資產(chǎn)模塊：

（1）進(jìn)行了登錄狀態(tài)的區(qū)分,，未登錄時(shí)很好的利用了空間進(jìn)行平臺(tái)介紹,，有效的針對(duì)注冊(cè)/未注冊(cè)用戶進(jìn)行不同目的設(shè)計(jì),；

（2）展現(xiàn)了資產(chǎn)的構(gòu)成，也很好的展現(xiàn)了整個(gè)平臺(tái)的理財(cái)產(chǎn)品類(lèi)型,。不僅可以展現(xiàn)資產(chǎn)的收益狀況,，還承擔(dān)著該類(lèi)產(chǎn)品的入口功能，和快捷入口充分融合

頁(yè)面布局合理性：

模塊次重點(diǎn)劃分清晰,，產(chǎn)品推薦搭配資產(chǎn)模塊,，能夠讓已經(jīng)購(gòu)買(mǎi)的老用戶在日常查看完資產(chǎn)信息后不至于直接退出，能夠順帶看一些其他基金產(chǎn)品,，提升產(chǎn)品曝光度

亮點(diǎn)：

與運(yùn)營(yíng)活動(dòng)結(jié)合,。查看資產(chǎn)信息是用戶每次登錄的主要目的。而將簽到活動(dòng)入口放置資產(chǎn)模塊中,，讓用戶每日查看資產(chǎn)的同時(shí)簽到獲取獎(jiǎng)勵(lì),，這大大促進(jìn)了用戶參與度。

2,、產(chǎn)品推薦主導(dǎo)型首頁(yè)設(shè)計(jì)

同時(shí),，產(chǎn)品推薦主導(dǎo)型是過(guò)去以及現(xiàn)在也很流行的一種趨勢(shì)，以同花順愛(ài)基金為例：

核心模塊表現(xiàn)—產(chǎn)品推薦模塊：

產(chǎn)品推薦的模塊樣式非常豐富,，而且結(jié)合了只能篩選的方式,，通過(guò)登錄推薦適合用戶的基金，個(gè)性化做的更好,。整體來(lái)說(shuō)板塊的互動(dòng)參與感較強(qiáng)

頁(yè)面布局合理性

（1）產(chǎn)品模塊是一種交叉的方式和其他的模塊內(nèi)容交叉在一起,，這樣可以很好的避免產(chǎn)品推薦的內(nèi)容過(guò)于冗雜而忽視了其他模塊內(nèi)容

（2）整個(gè)頁(yè)面產(chǎn)品推薦模塊占屏大，比較長(zhǎng),，而頁(yè)面下部的快捷入口很好的可以在用戶下拉瀏覽中,，給用戶一個(gè)篩選跳轉(zhuǎn)的入口，避免用戶在長(zhǎng)模塊中迷失

3,、索引型的首頁(yè)設(shè)計(jì)

以天天基金為例：

核心模塊表現(xiàn)—索引薦模塊：

快捷入口進(jìn)行了分層級(jí)處理?！包S金,、活期寶、穩(wěn)定理財(cái)”等這些理財(cái)產(chǎn)品的類(lèi)型分在一個(gè)維度,，篩選基金（按照業(yè)績(jī)“徘行,、估值、凈值”來(lái)篩選,，按基金類(lèi)型來(lái)“指數(shù)寶,、組合寶”來(lái)篩）放在第二層維度，針對(duì)天天基金這個(gè)龐大的平臺(tái)來(lái)說(shuō),，這樣分類(lèi)雜亂入口的層級(jí)更明晰

頁(yè)面布局合理性：

（1）頁(yè)面的模塊非常之多,，但是模塊布置的順序非常合理,。通過(guò)各板塊呈現(xiàn)出來(lái)的閱讀和參與人數(shù)，可以見(jiàn)得模塊是按照用戶關(guān)注度來(lái)排布的上下順序,，這樣能夠讓平臺(tái)有效的針對(duì)不同模塊進(jìn)行重要產(chǎn)品的推送

（2）各模塊的樣式設(shè)計(jì)區(qū)分度非常高,，不會(huì)讓用戶產(chǎn)生信息混亂感

三、本文小結(jié)

首頁(yè)系列走到了最后一篇,，讓我們?cè)俅我?span data-darkmode-color-16080922109352='rgb(44, 111, 241)' data-darkmode-original-color-16080922109352='rgb(44, 111, 241)'>4個(gè)問(wèn)題的回答回憶一下,，做一個(gè)首頁(yè)設(shè)計(jì)的流程是什么。

1,、首先,，確定平臺(tái)的核心模塊是什么

首頁(yè)的布局需要區(qū)分層次感，這體現(xiàn)在各模塊的占屏比上,，核心模塊占屏比需要夠大,；同時(shí)圍繞核心功能拓展其縱向需求功能，如：資產(chǎn)模塊的收集構(gòu)成查看,、贖回等,，產(chǎn)品模塊的理解購(gòu)入。這樣才能豐富模塊的組成,，讓模塊的展示更有效率

2,、其次，平臺(tái)信息架構(gòu)是什么

除了首頁(yè)核心的底部導(dǎo)航欄承擔(dān)著app各板塊之間的指引,。首頁(yè)也承擔(dān)著展現(xiàn)平臺(tái)架構(gòu)的作用,，首頁(yè)不宜展現(xiàn)過(guò)深架構(gòu)，明確平臺(tái)自身的信息架構(gòu)可以分為什么板塊,，首頁(yè)起一個(gè)總覽各板塊的作用

3,、升華，平臺(tái)用戶使用場(chǎng)景是什么

首頁(yè)布局是傾向于簡(jiǎn)潔清晰,，還是傾向于多模塊沉浸化,，這取決于平臺(tái)用戶使用平臺(tái)的方式和平臺(tái)期望的用戶行為。如：短暫停留則更偏向于簡(jiǎn)潔目標(biāo)明確的布局,；反復(fù)登錄型則適合信息點(diǎn)豐富的多模塊化首頁(yè)

4,、最后，平臺(tái)運(yùn)營(yíng)人力資源是否充足

一個(gè)戰(zhàn)斗力充足的團(tuán)隊(duì)意味著可以多樣化,、快速性地更新首頁(yè)的資訊,、活動(dòng)等信息，這些需要投入大量運(yùn)營(yíng)人力的模塊會(huì)影響到首頁(yè)的布局,，精心的將這些營(yíng)銷(xiāo)資訊插入各模塊當(dāng)中,，能做到融入而不唐突

總體來(lái)說(shuō)，首頁(yè)是app的門(mén)面,，是各板塊濃縮的呈現(xiàn),。首頁(yè)設(shè)計(jì)一定要結(jié)合自己的戰(zhàn)略層和范圍層,，對(duì)自己的模塊信息設(shè)計(jì)進(jìn)行思考，莫讓首頁(yè)變成一個(gè)個(gè)僵硬分割的模塊拼湊而成的頁(yè)面,。

希望獲取PDF版本資料,，進(jìn)行業(yè)務(wù)、產(chǎn)品設(shè)計(jì)交流,，歡迎文末留言