??《寫(xiě)給新手的APP結(jié)構(gòu)指南：首頁(yè)相關(guān)(上)》??的功能盤(pán)點(diǎn)已經(jīng)更新了一段時(shí)間了，希望對(duì)你有所幫助，今天跟大家繼續(xù)分享的是首頁(yè)相關(guān)功能的下半部分，先來(lái)看一下整體結(jié)構(gòu)：

△ 圖片來(lái)源于應(yīng)用截圖，僅作為學(xué)習(xí)交流使用

一、導(dǎo)航的形式

說(shuō)到導(dǎo)航大家應(yīng)該很熟悉了，導(dǎo)航是在各個(gè)功能場(chǎng)景之間切換的工具，是整個(gè)產(chǎn)品功能的大框架。它將產(chǎn)品的功能有序地連接起來(lái)，讓功能出現(xiàn)在合理的位置;如果沒(méi)有導(dǎo)航的話，用戶(hù)在使用產(chǎn)品時(shí)會(huì)不知所措，想使用某個(gè)功能也無(wú)法快速找到，可見(jiàn)它的意義是十分重大的。網(wǎng)上關(guān)于導(dǎo)航的文章很多，詳細(xì)介紹了導(dǎo)航形式之間的區(qū)別和優(yōu)缺點(diǎn)，估計(jì)多寫(xiě)也是重復(fù)，我在這里就簡(jiǎn)單的說(shuō)一下吧，想看詳細(xì)的文章可以自己去網(wǎng)上搜一搜。(編者按：更多導(dǎo)航設(shè)計(jì)好文→導(dǎo)航設(shè)計(jì))

導(dǎo)航的類(lèi)別有：

1. 底部標(biāo)簽式導(dǎo)航

底部標(biāo)簽式導(dǎo)航是最常見(jiàn)、最常用、***用戶(hù)習(xí)慣的樣式，導(dǎo)航中的***樣式。根據(jù)拇指熱區(qū)圖顯示，拇指的***操作區(qū)域只有頁(yè)面的三分之一，所以標(biāo)簽導(dǎo)航常位于頁(yè)面底部，一般作為全局導(dǎo)航使用;導(dǎo)航的內(nèi)容最直觀，不會(huì)被隱藏，并且被選中的標(biāo)簽會(huì)高亮顯示，明確告訴用戶(hù)當(dāng)前所在位置，用戶(hù)可以輕松點(diǎn)擊標(biāo)簽進(jìn)行頁(yè)面切換。

2. 頂部tab式導(dǎo)航

這類(lèi)導(dǎo)航形式也很常見(jiàn)，常和底部標(biāo)簽式導(dǎo)航搭配使用，作為二級(jí)輔助導(dǎo)航樣式，一般 tab 數(shù)量3個(gè)以上，并且可以進(jìn)行左右滑動(dòng)切換;當(dāng)然也有作為一級(jí)導(dǎo)航使用的情況，比如安卓的設(shè)計(jì)規(guī)范中，將頂部 tab 式導(dǎo)航作為一級(jí)導(dǎo)航;再比如 QQ音樂(lè)，出于產(chǎn)品核心功能需要，音樂(lè)播放頁(yè)面的快捷入口始終置于頁(yè)面底部，所以主導(dǎo)航就使用了頂部 tab 式導(dǎo)航。

3. 舵式導(dǎo)航

舵式導(dǎo)航也叫點(diǎn)聚式導(dǎo)航，其實(shí)我感覺(jué)可以歸到底部標(biāo)簽式導(dǎo)航一類(lèi)，因?yàn)樵趦烧叽钆涫褂脮r(shí)，它常作為核心功能入口放在中間位置，形成了對(duì)稱(chēng)，故而叫做舵式導(dǎo)航;設(shè)計(jì)上會(huì)和其他標(biāo)簽有明顯區(qū)分并重點(diǎn)突出了自己，很容易吸引用戶(hù)的注意力，也有鼓勵(lì)用戶(hù)使用該功能的意味，但是因?yàn)檫^(guò)于明顯所以會(huì)弱化其他功能入口;比如帶有社交屬性的產(chǎn)品，會(huì)希望用戶(hù)多發(fā)布一些 UGC 內(nèi)容，常采用這種導(dǎo)航形式;這類(lèi)導(dǎo)航里常放置用戶(hù)最多使用的或是產(chǎn)品最重要的功能，拓展的功能數(shù)量不宜過(guò)多。

4. 抽屜式導(dǎo)航

抽屜式導(dǎo)航也叫漢堡或側(cè)邊欄導(dǎo)航，也是很常見(jiàn)的一種導(dǎo)航樣式，多用于閱讀類(lèi)產(chǎn)品，因?yàn)榭梢越o用戶(hù)沉浸式閱讀體驗(yàn)，可以將很多低頻功能藏到抽屜導(dǎo)航內(nèi)，節(jié)省了屏幕空間，自然可以讓頁(yè)面看起來(lái)簡(jiǎn)潔美觀;還有一些產(chǎn)品因?yàn)楣δ鼙容^復(fù)雜，抽屜導(dǎo)航常作為輔助導(dǎo)航進(jìn)行配合使用，比如 QQ 既有底部標(biāo)簽式導(dǎo)航又有抽屜式導(dǎo)航;還有一類(lèi)就是目的性比較強(qiáng)的產(chǎn)品，比如共享單車(chē)或是打車(chē)軟件，都是采用這類(lèi)導(dǎo)航，將用戶(hù)最需要的核心功能放在首頁(yè)，其他的都隱藏起來(lái)，不干擾用戶(hù)的注意力。當(dāng)然這類(lèi)導(dǎo)航的弊端也有很多，比如隱藏起來(lái)的功能用戶(hù)可能會(huì)想不起來(lái)去展開(kāi)，需要用戶(hù)多操作才能進(jìn)入其他功能頁(yè)面等。

5. 宮格式導(dǎo)航

使用這種導(dǎo)航樣式***代表性的就是美圖秀秀了，這類(lèi)導(dǎo)航在視覺(jué)上比較整齊直觀，方便用戶(hù)快速查找，同等級(jí)功能之間割裂感比較大又或是功能之間沒(méi)有很大的關(guān)聯(lián)可以采用這種導(dǎo)航形式。雖然這種導(dǎo)航形式功能的數(shù)量上可以很多，但還是建議這種導(dǎo)航方式作為輔助導(dǎo)航使用，一方面用戶(hù)對(duì)這種導(dǎo)航形式相對(duì)比較陌生，接受度不一定高，另一方面，由于功能間割裂感較大，可能用戶(hù)切換其他功能時(shí)會(huì)比較麻煩。比如微信錢(qián)包頁(yè)面、電商和團(tuán)購(gòu)類(lèi)產(chǎn)品首頁(yè) banner 下的類(lèi)目入口也是屬于宮格式導(dǎo)航，都是作為輔助導(dǎo)航使用。

6. 列表式導(dǎo)航

這種導(dǎo)航形式很常見(jiàn)，可能常見(jiàn)到我們平時(shí)都沒(méi)察覺(jué)到這類(lèi)竟然也是導(dǎo)航，在視覺(jué)上整齊美觀，幾乎所有產(chǎn)品都會(huì)用到，列表式導(dǎo)航和宮格式導(dǎo)航類(lèi)似，只是在表現(xiàn)形式上的不同，列表式導(dǎo)航的表現(xiàn)形式有很多，比如純文字/icon+文字/文字+圖片等;數(shù)量上也可以很多，并沒(méi)有局限性，因?yàn)橛脩?hù)是上下滑動(dòng)查看的方式;常作為二級(jí)導(dǎo)航和其他導(dǎo)航搭配進(jìn)行使用，因?yàn)椴环奖阌脩?hù)切換功能，并且太靠下的列表可能點(diǎn)擊率不高。

7. 懸浮式導(dǎo)航

這種導(dǎo)航形式也比較常見(jiàn)，現(xiàn)在的手機(jī)屏幕比較大，用這種導(dǎo)航方式也越來(lái)越多了，常作為二級(jí)輔助導(dǎo)航使用，在閱讀類(lèi)或工具類(lèi)產(chǎn)品中比較常見(jiàn)。點(diǎn)擊導(dǎo)航常伴有動(dòng)效并出現(xiàn)若干功能，這些功能聚合在懸浮導(dǎo)航內(nèi)，節(jié)省了屏幕空間，但是會(huì)對(duì)用戶(hù)的視覺(jué)形成干擾。

小結(jié)

導(dǎo)航形式對(duì)產(chǎn)品來(lái)說(shuō)不是單一的存在，尤其在產(chǎn)品功能結(jié)構(gòu)都日益趨于繁雜龐大的今天，導(dǎo)航間進(jìn)行組合使用已是常態(tài)，也是一種大趨勢(shì)，所以在進(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候需要結(jié)合自身的需要具體分析，使用適合自身的導(dǎo)航形式，畢竟適合自己的才是***的。

二、頂部banner廣告位

banner 廣告幾乎是所有產(chǎn)品難以避免的存在，它也是產(chǎn)品出于運(yùn)營(yíng)需要或進(jìn)行盈利的方式之一，banner 數(shù)量一般3-8個(gè)不等，可以左右滑動(dòng)查看，點(diǎn)擊可進(jìn)入相關(guān)專(zhuān)題或是詳情頁(yè)面。電商類(lèi)產(chǎn)品的 banner 是根據(jù)用戶(hù)喜好生成的，系統(tǒng)推薦給用戶(hù)可能感興趣的內(nèi)容，點(diǎn)擊率可想而知。

常見(jiàn)的 banner 設(shè)計(jì)比例有2:1和16:9，當(dāng)然這不是固定的，高度可以根據(jù)產(chǎn)品需要來(lái)定，比如電商類(lèi)產(chǎn)品首頁(yè)空間比較寶貴，banner 高度就會(huì)相對(duì)緊湊，以節(jié)省頁(yè)面空間。我們?cè)谠O(shè)計(jì) banner 時(shí)***使用屏幕***的寬度尺寸進(jìn)行設(shè)計(jì)，即：安卓(@4x)寬度1440px(各個(gè)公司可能后臺(tái)上傳尺寸不一樣，僅做參考)，這樣做雖然會(huì)多占資源，但是在適配下面的各個(gè)屏幕時(shí)可以避免可能出現(xiàn)模糊不清的狀況。

自從 iPhone X 問(wèn)世之后，為了避免劉海對(duì) banner 的干擾，越來(lái)越多的產(chǎn)品取消了之前狀態(tài)欄和導(dǎo)航欄全透明的效果，將 banner 放到了導(dǎo)航欄下面;目前電商中京東還保留著原來(lái)的樣式，這類(lèi)樣式需要注意的點(diǎn)有：

1. 留出頂部危險(xiǎn)區(qū)域

狀態(tài)欄和導(dǎo)航欄底下為危險(xiǎn)區(qū)域，危險(xiǎn)區(qū)域內(nèi)不要出現(xiàn)文字等重要內(nèi)容。

2. 頂部黑色透明遮罩

因?yàn)?banner 的顏色不可控，為了突出狀態(tài)欄，開(kāi)發(fā)會(huì)在頂部設(shè)置自上而下的黑色遮罩，數(shù)值為70%—0%。

3. 上滑時(shí)顯示狀態(tài)欄和導(dǎo)航欄底色

開(kāi)發(fā)會(huì)設(shè)置一個(gè)數(shù)值，比如通常是一個(gè)狀態(tài)欄和導(dǎo)航欄的總高度，即128px(@2x)，在頁(yè)面整體上滑128px時(shí)，狀態(tài)欄和導(dǎo)航欄會(huì)由全透明變成不透明顯示出底色/漸變色。

三、分類(lèi)模塊入口

分類(lèi)模塊入口一般位于首頁(yè) banner 下面，在電商、團(tuán)購(gòu)類(lèi)等產(chǎn)品中是十分常見(jiàn)的形式。很多用戶(hù)可能不知道搜索什么關(guān)鍵詞或是目的性比較強(qiáng)的來(lái)尋找某一商品，這種快捷的分類(lèi)入口就會(huì)顯得很方便。

分類(lèi)模塊一般有1-2頁(yè)，數(shù)量4-20個(gè)不等;因?yàn)?**頁(yè)的點(diǎn)擊率普遍較高，所以請(qǐng)將最重要的分類(lèi)放在***頁(yè)，要讓用戶(hù)觸手可及，而第二頁(yè)放相對(duì)次要的分類(lèi);也可以將***頁(yè)***一個(gè)分類(lèi)設(shè)置為「更多分類(lèi)」，這樣做可以減少一頁(yè)，但是里面分類(lèi)的點(diǎn)擊率可能會(huì)不高。

icon 的設(shè)計(jì)上普遍是面性圖標(biāo)或者面性圖標(biāo)+圓形/方形底色(漸變色)，因?yàn)檫@樣視覺(jué)上圖標(biāo)會(huì)顯得比較飽滿(mǎn);面性圖標(biāo)的設(shè)計(jì)上不單單只是反白效果，還可以添加一些設(shè)計(jì)細(xì)節(jié)對(duì)比，會(huì)顯得更有層次;這里不建議使用線性圖標(biāo)，因?yàn)闀?huì)顯得視覺(jué)沖擊力太弱，不夠突出。

四、「資訊/新聞/快報(bào)/頭條」入口

出于運(yùn)營(yíng)需要或進(jìn)行品牌相關(guān)的一些宣傳，或是關(guān)于產(chǎn)品的一些資訊，這類(lèi)入口通常會(huì)在首頁(yè)分類(lèi)模塊下方，處于頁(yè)面的中心位置，雖然位置比較突出，但是占的空間不會(huì)很大，所以用戶(hù)對(duì)它的關(guān)注度可能不會(huì)很高。

字體：這里的字體一般不會(huì)使用系統(tǒng)的默認(rèn)字體，通常是經(jīng)過(guò)設(shè)計(jì)的，會(huì)具有品牌字體相關(guān)性;比如「京東快報(bào)」字體和京東的 Logo 字體是和品牌關(guān)聯(lián)的。

內(nèi)容：一般采用輪播的方式，3秒左右進(jìn)行更換一次，有的是一行，有的是兩行，點(diǎn)擊會(huì)進(jìn)入相關(guān)專(zhuān)題頁(yè)。

五、底部標(biāo)簽欄

標(biāo)簽欄在上面的導(dǎo)航模式中已經(jīng)提到過(guò)了，這里就來(lái)具體的說(shuō)一下。

設(shè)計(jì)上：標(biāo)簽欄高度為98px(@2x)，標(biāo)簽欄內(nèi)的字體作為提示作用，字號(hào)為20px;標(biāo)簽的數(shù)量一般有3-5個(gè)，icon 的設(shè)計(jì)上要保持簡(jiǎn)約并且能夠精準(zhǔn)傳達(dá)釋義，也可以進(jìn)行品牌基因的融入來(lái)突出自己的調(diào)性和其他產(chǎn)品的差異化;常用的是線性和面性?xún)煞N，一般進(jìn)行結(jié)合使用以表明選中狀態(tài);iOS11之后面性 icon 開(kāi)始流行，用品牌色進(jìn)行區(qū)分;另外 icon 的設(shè)計(jì)要保持統(tǒng)一，比如線性 icon 的粗細(xì)、圓角角度大小、開(kāi)口的大小等都要保持一致，這樣用戶(hù)看起來(lái)也會(huì)比較賞心悅目。

反饋方面：可以分為視覺(jué)和聽(tīng)覺(jué)兩方面。視覺(jué)上當(dāng)前選中狀態(tài)要和其他 icon 有明顯區(qū)分，比如線性和面性的區(qū)分、顏色的區(qū)分等，以表明當(dāng)前所在的頁(yè)面位置;另外，點(diǎn)擊時(shí) icon 伴有動(dòng)態(tài)效果，可以增加趣味性，也是現(xiàn)在比較常見(jiàn)的反饋方式;聽(tīng)覺(jué)上的反饋是指在點(diǎn)擊 icon 時(shí)會(huì)伴有點(diǎn)擊音效，比如 facebook。

隱藏功能：再次點(diǎn)擊 icon 置頂頁(yè)面功能。用戶(hù)熟知的置頂頁(yè)面功能是點(diǎn)擊狀態(tài)欄或是點(diǎn)擊置頂 button，可能很多用戶(hù)沒(méi)有發(fā)現(xiàn)或是很少用到：再次點(diǎn)擊當(dāng)前頁(yè)面標(biāo)簽欄 icon 是可以進(jìn)行頁(yè)面置頂?shù)?，可能很多產(chǎn)品都有這一功能，但是沒(méi)有對(duì)用戶(hù)進(jìn)行很好的引導(dǎo)，反觀之，淘寶和 MONO 在上滑時(shí)會(huì)在標(biāo)簽欄進(jìn)行置頂頁(yè)面的引導(dǎo)，體驗(yàn)較好;另外淘票票采用的是雙擊標(biāo)簽欄 icon 進(jìn)行置頂頁(yè)面，應(yīng)該是為了避免用戶(hù)的誤操作，導(dǎo)致用戶(hù)正在瀏覽的內(nèi)容上移，需要再次滑動(dòng)很久才能找到，但這樣的交互可能很多用戶(hù)都不會(huì)知道。

為了獲得沉浸式體驗(yàn)，標(biāo)簽欄在用戶(hù)瀏覽時(shí)可以進(jìn)行隱藏，比如上滑時(shí)收起、下滑時(shí)顯示出來(lái)。

六、加載方式

加載方式不限定于首頁(yè)，而是貫穿整個(gè)產(chǎn)品。加載是用戶(hù)在進(jìn)行某個(gè)操作，服務(wù)器進(jìn)行處理后并將數(shù)據(jù)反饋給用戶(hù)，這一過(guò)程中耗費(fèi)的時(shí)間用來(lái)做什么用戶(hù)是不知情的，所以才會(huì)需要有加載方式來(lái)進(jìn)行反饋，減少用戶(hù)的焦慮。網(wǎng)上關(guān)于加載的文章很多，我這里就簡(jiǎn)單說(shuō)一下吧，大家想詳細(xì)了解的可以自己去搜索一下。

1. 下拉刷新加載

這種加載方式在上一篇文章中的第2點(diǎn)「下拉刷新」中已經(jīng)說(shuō)了，就不多說(shuō)了。

2. 進(jìn)度條加載

多用于 web端，這種加載方式不知道具體的加載時(shí)間，開(kāi)始時(shí)可以加載的較快，***時(shí)可以加載慢一點(diǎn)，這樣用戶(hù)會(huì)比較愿意等待，但是不能在加載時(shí)卡住;移動(dòng)端用這種方式的不多，多數(shù)是 H5頁(yè)面，因?yàn)檫@種加載方式會(huì)過(guò)于吸引用戶(hù)的注意力，而且在加載速度很快的情況下可能進(jìn)度條都不會(huì)顯示出來(lái)。

3. 全屏加載

指用戶(hù)在進(jìn)入新頁(yè)面時(shí)的加載方式，一次性加載完所有內(nèi)容之前看不見(jiàn)任何內(nèi)容，自然也無(wú)法進(jìn)行操作，所以***能采用情感化的加載動(dòng)效設(shè)計(jì)，因?yàn)槿の兜膭?dòng)效反饋可以避免用戶(hù)的焦慮;但在對(duì)于網(wǎng)絡(luò)不佳的情況下，加載時(shí)間過(guò)長(zhǎng)會(huì)讓人感到急躁，所以這種加載方式的跳失率比較大。

4. 分段加載

這類(lèi)加載方式也可以說(shuō)是上拉刷新加載，使用場(chǎng)景一般是用戶(hù)刷到 feed 流底部時(shí)繼續(xù)上滑或點(diǎn)擊后加載出的數(shù)據(jù);在做交互文檔時(shí)應(yīng)該注明一次性加載出多少條數(shù)據(jù)，這個(gè)需要根據(jù)產(chǎn)品的自身需求來(lái)定，比如：光加載內(nèi)容的話可以一次性加載50條，而帶有圖片的內(nèi)容數(shù)據(jù)可以一次性加載25條，體驗(yàn)了一下微信朋友圈的動(dòng)態(tài)數(shù)據(jù)是一次性加載20條(自己數(shù)了一下，不一定準(zhǔn)確)。

5. 分步加載

顧名思義，就是一步一步的加載，優(yōu)先加載占用資源比較小的內(nèi)容。分兩種情況：***種先加載文字再加載圖片，圖片的突然出現(xiàn)會(huì)打擾到用戶(hù)，這種體驗(yàn)不佳，已經(jīng)慢慢被舍棄了;第二種就是先加載出頁(yè)面的框架再加載出頁(yè)面的內(nèi)容，比如先加載圖片占位符，占位符可以是灰色或產(chǎn)品主色(+logo或icon)/彩色(后臺(tái)設(shè)置顏色，隨機(jī)出現(xiàn))，接著再加載頁(yè)面文字，***再加載占位符位置上的圖片;這種加載方式的好處是可以讓用戶(hù)快速了解頁(yè)面整體的大致結(jié)構(gòu)，體驗(yàn)較好。

6. 懶加載

指在用戶(hù)使用到時(shí)才會(huì)加載，以免造成流量和資源的浪費(fèi)，比如用戶(hù)刷feed流時(shí)，上滑被看見(jiàn)時(shí)再加載出圖片內(nèi)容，再往底下看不見(jiàn)的位置可能只加載出文字和框架。

7. 加載

在閱讀類(lèi)產(chǎn)品中使用較多，指對(duì)用戶(hù)下一步的操作進(jìn)行預(yù)判，提前加載下一頁(yè)的內(nèi)容，以減少用戶(hù)進(jìn)入下級(jí)頁(yè)面時(shí)加載所需要的時(shí)間;可以和下面要說(shuō)的智能加載搭配使用，比如在wifi情況下可以使用預(yù)加載，4G下則不進(jìn)行預(yù)加載，節(jié)省流量，這樣的體驗(yàn)更佳。

8. 智能加載

指在不同網(wǎng)絡(luò)環(huán)境的下，加載的內(nèi)容也不一樣。比如在4G網(wǎng)絡(luò)下，為了給用戶(hù)節(jié)省流量，頁(yè)面中進(jìn)行加載文字內(nèi)容和普清圖片，不對(duì)視頻進(jìn)行加載或只加載標(biāo)清視頻，但是考慮一部分用戶(hù)的流量比較多，所以現(xiàn)在也會(huì)給用戶(hù)提供自己選擇的權(quán)利，比如彈窗提醒用戶(hù)是否使用流量加載或切換高清模式;而在 wifi 條件下，則是可以自動(dòng)加載高清圖片或視頻。

小結(jié)

加載模式多種多樣，同一頁(yè)面可能就會(huì)有多種加載方式，目的都是為了節(jié)省時(shí)間從而提升用戶(hù)體驗(yàn)，這是前提條件;另外加載動(dòng)效的方式可以多使用情感化設(shè)計(jì)，能夠讓用戶(hù)忘記當(dāng)前的等待，加深品牌記憶的同時(shí)也是一種大的設(shè)計(jì)趨勢(shì);加載動(dòng)效的位置***可以合理使用頁(yè)面的位置，以減少對(duì)用戶(hù)的干擾;在加載失敗的情況下，也要給出反饋結(jié)果，并且可以讓用戶(hù)重新加載。

總結(jié)

關(guān)于首頁(yè)的內(nèi)容就說(shuō)這么多吧，首頁(yè)看似很平常，其實(shí)涉及到的功能還是比較多的，有些功能點(diǎn)也比較細(xì)微，不同的產(chǎn)品首頁(yè)功能布局也不一樣，我這里說(shuō)的是產(chǎn)品通用的一些功能，也沒(méi)有很深入的去講，希望在以后的文章中有機(jī)會(huì)再詳細(xì)說(shuō)一說(shuō)。