APP首頁看似很平常，其實涉及到的功能還是比較多的，有些功能點也比較細微，不同的產品首頁功能布局也不一樣。該篇文章簡單的概括了產品首頁通用的一些功能結構，希望能對剛入門的UI設計師有些幫助。

hey，guys~

APP UI結構-首頁相關(上) 的功能盤點已經更新了一段時間了，希望對你有所幫助，今天跟大家繼續(xù)分享的是首頁相關功能的下半部分。OK，老規(guī)矩，還是先來看一下整體結構：

（圖片來源于網絡和應用截圖，僅作為學習交流使用）

一、導航的形式

說到導航大家應該很熟悉了，導航是在各個功能場景之間切換的工具，是整個產品功能的大框架。它將產品的功能有序地連接起來，讓功能出現在合理的位置；如果沒有導航的話，用戶在使用產品時會不知所措，想使用某個功能也無法快速找到，可見它的意義是十分重大的。

網上關于導航的文章很多，詳細介紹了導航形式之間的區(qū)別和優(yōu)缺點，估計多寫也是重復，我在這里就簡單的說一下吧，想看詳細的文章可以自己去網上搜一搜。?導航的類別有：

1.1 底部標簽式導航

最常見、最常用、最符合用戶習慣的樣式，導航中的首選樣式。根據拇指熱區(qū)圖顯示，拇指的最佳操作區(qū)域是只有頁面的三分之一，所以標簽導航常位于頁面底部，一般作為全局導航使用；導航的內容最直觀，不會被隱藏，并且被選中的標簽會高亮顯示，明確告訴用戶當前所在位置，用戶可以輕松點擊標簽進行頁面切換；

1.2 頂部tab式導航

這類導航形式也很常見，常和底部標簽式導航搭配使用，作為二級輔助導航樣式，一般tab數量3個以上，并且可以進行左右滑動切換；

當然也有作為一級導航使用的情況：比如安卓的設計規(guī)范中，將頂部tab式導航作為一級導航；再比如QQ音樂，出于產品核心功能需要，音樂播放頁面的快捷入口始終置于頁面底部，所以主導航就使用了頂部tab式導航；

1.3 舵式導航

也叫點聚式導航，其實我感覺可以歸到底部標簽式導航一類，因為在兩者搭配使用時，它常作為核心功能入口放在中間位置，形成了對稱，故而叫做舵式導航；

設計上會和其他標簽有明顯區(qū)分并重點突出了自己，很容易吸引用戶的注意力，也有鼓勵用戶使用該功能的意味，但是因為過于明顯所以會弱化其他功能入口；比如帶有社交屬性的產品，會希望用戶多發(fā)布一些UGC內容，常采用這種導航形式；這類導航里常放置用戶最多使用的或是產品最重要的功能，拓展的功能數量不宜過多。

1.4 抽屜式導航

也叫漢堡或側邊欄導航，也是很常見的一種導航樣式，多用于閱讀類產品，因為可以給用戶沉浸式閱讀體驗，可以將很多低頻功能藏到抽屜導航內，節(jié)省了屏幕空間，自然可以讓頁面看起來簡潔美觀；

還有一些產品因為功能比較復雜，抽屜導航常作為輔助導航進行配合使用，比如QQ既有底部標簽式導航又有抽屜式導航；

還有一類就是目的性比較強的產品，比如共享單車或是打車軟件，都是采用這類導航，將用戶最需要的核心功能放在首頁，其他的都隱藏起來，不干擾用戶的注意力。

當然這類導航的弊端也有很多，比如隱藏起來的功能用戶可能會想不起來去展開；需要用戶多操作才能進入其他功能頁面等；

1.5 宮格式導航

使用這種導航樣式最具代表性的就是美圖秀秀了，這類導航在視覺上比較整齊直觀，方便用戶快速查找，同等級功能之間割裂感比較大又或是功能之間沒有很大的關聯可以采用這種導航形式；

雖然這種導航形式功能的數量上可以很多，但還是建議這種導航方式作為輔助導航使用，一方面用戶對這種導航形式相對比較陌生，接受度不一定高，另一方面，由于功能間割裂感較大，可能用戶切換其他功能時會比較麻煩；比如微信錢包頁面、電商和團購類產品首頁banner下的類目入口也是屬于宮格式導航，都是作為輔助導航使用；

1.6 列表式導航

這種導航形式很常見，可能常見到我們平時都沒察覺到這類竟然也是導航，在視覺上整齊美觀，幾乎所有產品都會用到。

列表式導航和宮格式導航類似，只是在表現形式上的不同，列表式導航的表現形式有很多，比如純文字/icon+文字/文字+圖片等；數量上也可以很多，并沒有局限性，因為用戶是上下滑動查看的方式；常作為二級導航和其他導航搭配進行使用，因為不方便用戶切換功能，并且太靠下的列表可能點擊率不高；

1.7 懸浮式導航

這種導航形式也比較常見，現在的手機屏幕比較大，用這種導航方式也越來越多了，常作為二級輔助導航使用，在閱讀類或工具類產品中比較常見；點擊導航常伴有動效并出現若干功能，這些功能聚合在懸浮導航內，節(jié)省了屏幕空間，但是會對用戶的視覺形成干擾。

小結

導航形式對產品來說不是單一的存在，尤其在產品功能結構都日益趨于繁雜龐大的今天，導航間進行組合使用已是常態(tài)，也是一種大趨勢，所以在進行產品設計的時候需要結合自身的需要具體分析，使用適合自身的導航形式，畢竟適合自己的才是最好的。

二、頂部banner廣告位

banner廣告幾乎是所有產品難以避免的存在，它也是產品出于運營需要或進行盈利的方式之一。banner數量一般3-8個不等，可以左右滑動查看，點擊可進入相關專題或是詳情頁面。電商類產品的banner是根據用戶喜好生成的，系統推薦給用戶可能感興趣的內容，點擊率可想而知。

常見的banner設計比例有2:1和16:9，當然這不是固定的，高度可以根據產品需要來定，比如電商類產品首頁空間比較寶貴，banner高度就會相對緊湊，以節(jié)省頁面空間。我們在設計banner時最好使用屏幕最大的寬度尺寸進行設計，即：安卓(@4x)—寬度1440px (各個公司可能后臺上傳尺寸不一樣，僅做參考)，這樣做雖然會多占資源，但是在適配下面的各個屏幕時可以避免可能出現模糊不清的狀況。

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

• 留出頂部危險區(qū)域：狀態(tài)欄和導航欄底下為危險區(qū)域，危險區(qū)域內不要出現文字等重要內容；
• 頂部黑色透明遮罩：因為banner的顏色不可控，為了突出狀態(tài)欄，開發(fā)會在頂部設置自上而下的黑色遮罩，數值為70%—0%；
• 上滑時顯示狀態(tài)欄和導航欄底色：開發(fā)會設置一個數值，比如通常是一個狀態(tài)欄和導航欄的總高度，即128px(@2x)，在頁面整體上滑128px時，狀態(tài)欄和導航欄會由全透明變成不透明顯示出底色/漸變色。

三、分類模塊入口

分類模塊入口一般位于首頁banner下面，在電商、團購類等產品中是十分常見的形式。很多用戶可能不知道搜索什么關鍵詞或是目的性比較強的來尋找某一商品，這種快捷的分類入口就會顯得很方便。

分類模塊一般有1-2頁，數量4-20個不等；因為第一頁的點擊率普遍較高，所以請將最重要的分類放在第一頁，要讓用戶觸手可及，而第二頁放相對次要的分類；也可以將第一頁最后一個分類設置為”更多分類“，這樣做可以減少一頁，但是里面分類的點擊率可能會不高；

icon的設計上普遍是面性圖標或者面性圖標+圓形/方形底色(漸變色)，因為這樣視覺上圖標會顯得比較飽滿；面性圖標的設計上不單單只是反白效果，還可以添加一些設計細節(jié)對比，會顯得更有層次；這里不建議使用線性圖標，因為會顯得視覺沖擊力太弱，不夠突出。

四、“資訊/新聞/快報/頭條”入口

出于運營需要或進行品牌相關的一些宣傳、或是關于產品的一些資訊，這類入口通常會在首頁分類模塊下方，處于頁面的中心位置，雖然位置比較突出，但是占的空間不會很大，所以用戶對它的關注度可能不會很高。

• 字體：這里的字體一般不會使用系統的默認字體，通常是經過設計的，會具有品牌字體相關性；比如“京東快報”字體和京東的Logo字體是有品牌關聯的。
• 內容：一般采用輪播的方式，3秒左右進行更換一次，有的是一行，有的是兩行，點擊會進入相關專題頁。

五、底部標簽欄

標簽欄在上面的導航模式中已經提到過了，這里就來具體的說一下：

設計方面：

標簽欄高度為98px(@2x)，標簽欄內的字體作為提示作用，字號為20px；標簽的數量一般有3-5個，icon的設計上要保持簡約并且能夠精準傳達釋義，也可以進行品牌基因的融入來突出自己的調性和其他產品的差異化；

常用的是線性和面性兩種，一般進行結合使用以表明選中狀態(tài)；iOS 11之后面性icon開始流行，用品牌色進行區(qū)分；

另外 icon的設計要保持統一，比如線性icon的粗細、圓角角度大小、開口的大小等都要保持一致，這樣用戶看起來也會比較賞心悅目。

反饋方面：

視覺上當前選中狀態(tài)要和其他icon有明顯區(qū)分，比如線性和面性的區(qū)分、顏色的區(qū)分等，以表明當前所在的頁面位置；另外，點擊時icon伴有動態(tài)效果，可以增加趣味性，也是現在比較常見的反饋方式；

聽覺上的反饋是指在點擊icon時會伴有點擊音效，比如facebook。

隱藏功能：

再次點擊icon置頂頁面功能。用戶熟知的置頂頁面功能是點擊狀態(tài)欄或是點擊置頂button，可能很多用戶沒有發(fā)現或是很少用到——再次點擊當前頁面標簽欄icon是可以進行頁面置頂的，可能很多產品都有這一功能，但是沒有對用戶進行很好的引導。

反觀之，淘寶和MONO在上滑時會在標簽欄進行置頂頁面的引導，體驗較好；另外，淘票票采用的是雙擊標簽欄icon進行置頂頁面，應該是為了避免用戶的誤操作，導致用戶正在瀏覽的內容上移，需要再次滑動很久才能找到，但這樣的交互可能很多用戶都不會知道；

為了獲得沉浸式體驗，標簽欄在用戶瀏覽時可以進行隱藏，比如上滑時收起、下滑時顯示出來。

六、加載方式

加載方式不限定于首頁，而是貫穿整個產品。加載是用戶在進行某個操作，服務器進行處理后并將數據反饋給用戶，這一過程中耗費的時間用來做什么用戶是不知情的，所以才會需要有加載方式來進行反饋，減少用戶的焦慮。網上關于加載的文章很多，我這里就簡單說一下吧，大家想詳細了解的可以自己去搜索一下。

6.1 下拉刷新加載

這種加載方式在上一篇文章中的第2點“下拉刷新”中已經說了，就不多說了；

6.2 進度條加載

多用于web端。這種加載方式不知道具體的加載時間，開始時可以加載的較快，最后時可以加載慢一點，這樣用戶會比較愿意等待，但是不能在加載時卡??；移動端用這種方式的不多，多數是H5頁面，因為這種加載方式會過于吸引用戶的注意力，而且在加載速度很快的情況下可能進度條都不會顯示出來；

6.3 全屏加載

指用戶在進入新頁面時的加載方式，一次性加載完所有內容之前看不見任何內容，自然也無法進行操作，所以最好能采用情感化的加載動效設計，因為趣味的動效反饋可以避免用戶的焦慮；但在對于網絡不佳的情況下，加載時間過長會讓人感到急躁，所以這種加載方式的跳失率比較大；

6.4 分段加載

這類加載方式也可以說是上拉刷新加載，使用場景一般是用戶刷到feed流底部時繼續(xù)上滑或點擊后加載出的數據；

在做交互文檔時應該注明一次性加載出多少條數據，這個需要根據產品的自身需求來定，比如：光加載內容的話可以一次性加載50條，而帶有圖片的內容數據可以一次性加載25條，體驗了一下微信朋友圈的動態(tài)數據是一次性加載20條(自己數了一下，不一定準確)；

6.5 分步加載

顧名思義，就是一步一步的加載，優(yōu)先加載占用資源比較小的內容；分兩種情況：

1. 第一種先加載文字再加載圖片，圖片的突然出現會打擾到用戶，這種體驗不佳，已經慢慢被舍棄了；
2. 第二種就是先加載出頁面的框架再加載出頁面的內容，比如先加載圖片占位符，占位符可以是灰色或產品主色(+logo或icon) / 彩色(后臺設置顏色，隨機出現)，接著再加載頁面文字，最后再加載占位符位置上的圖片；

這種加載方式的好處是可以讓用戶快速頁面整體的大致結構，體驗較好；

6.6 懶加載

指在用戶使用到時才會加載，以免造成流量和資源的浪費，比如用戶刷feed流時，上滑被看見時再加載出圖片內容，再往底下看不見的位置可能只加載出文字和框架；

6.7 預加載

在閱讀類產品中使用較多，指對用戶下一步的操作進行預判，提前加載下一頁的內容，以減少用戶進入下級頁面時加載所需要的時間；可以和下面要說的智能加載搭配使用，比如在wifi情況下可以使用預加載，4G下則不進行預加載，節(jié)省流量，這樣的體驗會比較佳；

6.8 智能加載

指在不同網絡環(huán)境的下，加載的內容也不一樣。比如在4G網絡下，為了給用戶節(jié)省流量，頁面中進行加載文字內容和普清圖片，不對視頻進行加載或只加載標清視頻。

但是考慮一部分用戶的流量比較多，所以現在也會給用戶提供自己選擇的權利，比如彈窗提醒用戶是否使用流量加載或切換高清模式；而在wifi條件下，則是可以自動加載高清圖片或視頻。

小結

加載模式多種多樣，同一頁面可能就會有多種加載方式，目的都是為了節(jié)省時間從而提升用戶體驗，這是前提條件。

另外加載動效的方式可以多使用情感化設計，能夠讓用戶能夠忘記當前的等待，加深品牌記憶的同時也是一種大的設計趨勢；加載動效的位置最好可以合理使用頁面的位置，以減少對用戶的干擾；在加載失敗的情況下，也要給出反饋結果，并且可以讓用戶重新加載。

七、總結

關于首頁的內容就說這么多吧，首頁看似很平常，其實涉及到的功能還是比較多的，有些功能點也比較細微，不同的產品首頁功能布局也不一樣，我這里說的是產品通用的一些功能，也沒有很深入的去講，希望在以后的文章中有機會再詳細說一說。以上，Thanks for reading~ To be continued…

作者：EasonZhang，公眾號：Eason張UED（ID：EasonZhangUED）

本文由 @EasonZhang 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議