我們?nèi)粘Ｉ钪校褂眠^形形色色的app；而作為ui設(shè)計師，是負(fù)責(zé)我們手機app視覺效果的人。一個app由哪些部分組成，我們都要很清楚，才可以設(shè)計出符合用戶的app界面。今天和小伙伴分享下，一個app首頁包含的功能。
app首頁包含的內(nèi)容：
（1）授權(quán)彈窗；（2）下拉；（3）廣告位；（4）導(dǎo)航；（5）加載；（6）掃一掃；（7）搜索；（8）地址定位；（9）模塊入口；
1、彈窗
（1）彈窗的種類有哪些呢？
a: 授權(quán)彈窗；
我們下載一個app，打開app首先會彈出授權(quán)彈窗，比如：請求地理位置、相冊授權(quán)，麥克風(fēng)權(quán)限等。
b: 版本更新彈窗；
一般app更新了功能等都會有新的版本彈窗提示。
c:? 活動彈窗；
彈窗的優(yōu)先級是什么樣的呢？
彈窗的優(yōu)先級：網(wǎng)絡(luò)授權(quán)>推送消息、獲取位置、通訊錄>訪問相冊、麥克風(fēng)、訪問相冊>活動彈窗；
2、下拉
（1）下拉刷新；
a:下拉刷新相信我們在app使用過程中都會用到，那么思考一下用戶在使用什么產(chǎn)品時，會在首頁下拉刷新呢？
答：一般一個app如果有事實內(nèi)容更新，它會在首頁有下拉刷新。
b:下拉刷新需要3種狀態(tài)
? ? 下拉還未松手時候的狀態(tài)；
? ? 松手后正在刷新的動態(tài)；
? ? 刷新完成后，動效收回去的時候的狀態(tài)；
（2）下拉廣告、二樓；
這個我們一般在視頻播放器中會有；淘寶的下拉二樓等
3、廣告位/頂部banner
一般首頁頂部會出現(xiàn)banner圖，超過1張，就會出現(xiàn)輪播指示器；
4、瓷片廣告位和CTA（call to action）
瓷片廣告區(qū)：
使用后臺傳圖片或文字+圖片的形式； 一般使用上下、左右、對角線的排版方式；加載過程中需要提供占位圖（即弱網(wǎng)絡(luò)狀態(tài)下未進(jìn)行渲染的展示圖）；
CTA（call to action）：行為召喚按鈕；一般放置在明顯的廣告入口，采用大圓角或小圓角的按鈕樣式，支持輪播；
?行為召喚按鈕一般放置明顯的廣告位入口；一般會采用大圓角或小圓角的按鈕樣式；并且支持輪播；
5、FAB（Floating action button）懸浮按鈕
懸浮按鈕：最早來源于安卓，安卓原生帶有懸浮按鈕；
懸浮按鈕一般只用于正向按鈕，用于輔助當(dāng)前頁面的一些操作及重要的操作，常常用于觸發(fā)導(dǎo)航、主操作、功能收納、活動專題跳轉(zhuǎn)等作用；比如我們說的收納作用運營于正向的按鈕一般就包括：添加、編輯、收藏、點贊、轉(zhuǎn)發(fā)等，不能用于返回、刪除、禁用等負(fù)向的按鈕。
問：首頁的FAB會有一個缺點，會擋住首頁界面的展示，這個應(yīng)該怎么解決呢？
答：我們經(jīng)常會在app首頁看到FAB，用做活動專題跳轉(zhuǎn)作用；我們可以在滑動界面的時候?qū)AB隱藏起來，停止滑動的時候，停頓3-5s左右的時間再次顯示出來即可。
6、加載
加載同數(shù)據(jù)獲取的原理是一樣的；當(dāng)用戶去執(zhí)行某一操作后，前端會去調(diào)用后臺的接口，這時候后臺會把相關(guān)的數(shù)據(jù)打包給到前端，前段進(jìn)行渲染之后，就展示給用戶了。
加載的類型：模態(tài)加載和非模態(tài)加載；
（1）模態(tài)加載：全部加載完成才會顯示出來。
模態(tài)加載是比較暴力的加載方式，當(dāng)用戶發(fā)出事件后模態(tài)加載會獨占客戶端；就相當(dāng)于你在餐廳吃飯，餐廳要把全部的菜做完才給你上菜，整個過程你只能等待。這種加載方式體驗不是很好，當(dāng)數(shù)據(jù)請求很龐大的時候，大部分的用戶會失去耐心；所以除非不完全加載出來就會導(dǎo)致嚴(yán)重失誤的場景，其它場景盡量不要使用模態(tài)加載。
為了緩解模態(tài)加載給用戶帶來不好的體驗，可以學(xué)習(xí)下豆瓣，先把布局框架預(yù)先加載出來，加上情感化的小插畫，這樣可以緩解用戶的焦慮。
（2）非模態(tài)加載：能夠在用戶等待獲取數(shù)據(jù)的同時，允許用戶對當(dāng)前頁面的其它內(nèi)容進(jìn)行操作。
我們常見的下拉刷新就是典型的非模態(tài)加載，在下拉刷新的同時，可以點擊其它任何一個功能。
另外，我們經(jīng)常在實際生活中遇到其它的加載方式：分步加載和懶加載、預(yù)加載、智能加載。
（1）分步加載：先加載文字等較小的資源，再加載圖片、視頻等較大的資源；根據(jù)用戶的瀏覽行為來逐漸加載內(nèi)容，當(dāng)用戶瀏覽到該區(qū)域再進(jìn)行加載；當(dāng)用戶的行為滿足某些條件后再進(jìn)行加載。
分步加載的好處：減少用戶的等待時間，以及提高信息渲染的效率。分頁加載可以理解為當(dāng)前獲取到了100條數(shù)據(jù)，將這100條數(shù)據(jù)分別拆成5頁每頁20條數(shù)據(jù)提供給用戶，這樣可以讓用戶減少等待時間。
（2）預(yù)加載：預(yù)加載可以理解為當(dāng)用戶在瀏覽內(nèi)容A的時候，系統(tǒng)預(yù)先判斷他接下來會進(jìn)行的操作行為，對這部分內(nèi)容進(jìn)行提前的請求。預(yù)加載并不能解決網(wǎng)絡(luò)請求緩慢的問題，只是提前發(fā)起網(wǎng)絡(luò)請求，緩解問題。
預(yù)加載的邏輯會更加的復(fù)雜，比如：如何判斷何時進(jìn)行預(yù)加載，以及預(yù)加載呈現(xiàn)的時間。需要考慮用戶在當(dāng)前頁面的核心場景，來考慮不同的加載方式。例如咨詢類app，會在用戶瀏覽資訊列表時，對當(dāng)前或者某一部分列表的詳情內(nèi)容進(jìn)行文字記載，以及判斷列表頁面滾動的占比來觸發(fā)接下來內(nèi)容的機制。
（3）智能加載：在不同的網(wǎng)絡(luò)環(huán)境下，某些客戶端會采用加載不同的資源，不同的渲染效果來給用戶進(jìn)行視覺呈現(xiàn)。比如在4G網(wǎng)絡(luò)下用戶瀏覽視頻，會默認(rèn)采用質(zhì)量最低的視頻資源提供給用戶；而在wifi環(huán)境下客戶端會自己加載后續(xù)內(nèi)容。
7、搜索
搜索默認(rèn)點擊之后都會跳轉(zhuǎn)頁面。
搜索入口分為2種：
（1）搜素圖標(biāo)：只具備簡單的搜索功能；
（2）搜索框：會承載更多的信息，比如支付寶搜索框后邊有語音的功能等。
搜索點擊之后跳轉(zhuǎn)的界面，會有不同的樣式：
（1）按照地理位置和種類的；
（2）搜索輸入進(jìn)行實時匹配；
搜索結(jié)果也會進(jìn)行不同的分類，具體要看產(chǎn)品策略不同分類；
如：淘票票搜索結(jié)果列表式排列，為了讓用戶不切換tab就看到多個類目。
知乎利用tab切換分為不同的類目：
8、篩選控件
篩選控件分為：
（1）頂部顯示
（2）下拉浮層顯示；
（3）側(cè)邊浮層顯示；
（4）二級頁面；
（1）頂部橫向滑動標(biāo)簽篩選：適用于業(yè)務(wù)功能簡單，電影類APP中分類的篩選。
優(yōu)點：能夠進(jìn)行多分類的橫向快速篩選，及時篩選出自己想看的電影；
缺點：不適用于聯(lián)動分類以及更多分類的產(chǎn)品，并且橫向滑動，靠后的標(biāo)簽點擊率會下降明顯；
（2）下拉浮層篩選：外賣類、美食娛樂類app使用較多，業(yè)務(wù)功能復(fù)雜由于需要根據(jù)用戶位置以及不同條件的喜好等維度篩選，因此它的分類較多、較雜。所以頂部標(biāo)簽橫向滑動無法滿足用戶需求，下拉式篩選可擴展性強，能夠支持聯(lián)動以及滑動、進(jìn)度條控制器等多種篩選控制。
當(dāng)分類比較多的時候，下拉部分不宜太長，會不好適配小機型。
（3）側(cè)邊浮層篩選：側(cè)邊浮層可容量的篩選維度更多，并且可以上下滑動；
缺點：橫向內(nèi)容顯示過少，總體來說會比下拉菜單更容易操作。
（4）二級頁面：一般用于找房app；沉浸式搜索方式，可擴展性強，適用于一開始就有強烈目標(biāo)目的的人為其進(jìn)行篩選；
缺點：層級較深，篩選成本比較高，容錯率較低。
app首頁的功能大體上就是上邊梳理的這些了，希望小伙伴們根據(jù)自己的app的種類，不同模塊對比，作出優(yōu)秀的方案。
