我們?nèi)粘Ｉ钪凶褂眠^(guò)形形色色的app；而作為ui設(shè)計(jì)師及塘，是負(fù)責(zé)我們手機(jī)app視覺(jué)效果的人莽使。一個(gè)app由哪些部分組成，我們都要很清楚笙僚，才可以設(shè)計(jì)出符合用戶(hù)的app界面芳肌。今天和小伙伴分享下，一個(gè)app首頁(yè)包含的功能。

app首頁(yè)包含的內(nèi)容：

（1）授權(quán)彈窗亿笤；（2）下拉翎迁；（3）廣告位；（4）導(dǎo)航净薛；（5）加載汪榔；（6）掃一掃；（7）搜索肃拜；（8）地址定位痴腌；（9）模塊入口；

1燃领、彈窗

（1）彈窗的種類(lèi)有哪些呢士聪？

a: 授權(quán)彈窗；

我們下載一個(gè)app猛蔽，打開(kāi)app首先會(huì)彈出授權(quán)彈窗剥悟，比如：請(qǐng)求地理位置、相冊(cè)授權(quán)曼库，麥克風(fēng)權(quán)限等懦胞。

app授權(quán)彈窗

b: 版本更新彈窗；

一般app更新了功能等都會(huì)有新的版本彈窗提示凉泄。

版本更新彈窗

c:? 活動(dòng)彈窗；

活動(dòng)彈窗

彈窗的優(yōu)先級(jí)是什么樣的呢蚯根？

彈窗的優(yōu)先級(jí)：網(wǎng)絡(luò)授權(quán)>推送消息后众、獲取位置、通訊錄>訪問(wèn)相冊(cè)颅拦、麥克風(fēng)蒂誉、訪問(wèn)相冊(cè)>活動(dòng)彈窗；

2距帅、下拉

（1）下拉刷新右锨；

a:下拉刷新相信我們?cè)赼pp使用過(guò)程中都會(huì)用到，那么思考一下用戶(hù)在使用什么產(chǎn)品時(shí)碌秸，會(huì)在首頁(yè)下拉刷新呢绍移？

答：一般一個(gè)app如果有事實(shí)內(nèi)容更新，它會(huì)在首頁(yè)有下拉刷新讥电。

b:下拉刷新需要3種狀態(tài)

? ? 下拉還未松手時(shí)候的狀態(tài)蹂窖；

? ? 松手后正在刷新的動(dòng)態(tài)；

? ? 刷新完成后恩敌，動(dòng)效收回去的時(shí)候的狀態(tài)瞬测；

（2）下拉廣告、二樓；

這個(gè)我們一般在視頻播放器中會(huì)有月趟；淘寶的下拉二樓等

淘寶二樓

3灯蝴、廣告位/頂部banner

一般首頁(yè)頂部會(huì)出現(xiàn)banner圖，超過(guò)1張孝宗，就會(huì)出現(xiàn)輪播指示器穷躁；

banner輪播

4、瓷片廣告位和CTA（call to action）

瓷片廣告區(qū)：

使用后臺(tái)傳圖片或文字+圖片的形式碳褒； 一般使用上下折砸、左右、對(duì)角線的排版方式沙峻；加載過(guò)程中需要提供占位圖（即弱網(wǎng)絡(luò)狀態(tài)下未進(jìn)行渲染的展示圖）睦授；

瓷片廣告區(qū)

CTA（call to action）：行為召喚按鈕；一般放置在明顯的廣告入口摔寨，采用大圓角或小圓角的按鈕樣式去枷，支持輪播；

?行為召喚按鈕一般放置明顯的廣告位入口是复；一般會(huì)采用大圓角或小圓角的按鈕樣式删顶；并且支持輪播；

CTA：行為召喚按鈕

5淑廊、FAB（Floating action button）懸浮按鈕

懸浮按鈕：最早來(lái)源于安卓逗余，安卓原生帶有懸浮按鈕；

懸浮按鈕一般只用于正向按鈕季惩，用于輔助當(dāng)前頁(yè)面的一些操作及重要的操作录粱，常常用于觸發(fā)導(dǎo)航、主操作画拾、功能收納啥繁、活動(dòng)專(zhuān)題跳轉(zhuǎn)等作用；比如我們說(shuō)的收納作用運(yùn)營(yíng)于正向的按鈕一般就包括：添加青抛、編輯旗闽、收藏、點(diǎn)贊蜜另、轉(zhuǎn)發(fā)等适室，不能用于返回、刪除蚕钦、禁用等負(fù)向的按鈕亭病。

問(wèn)：首頁(yè)的FAB會(huì)有一個(gè)缺點(diǎn)，會(huì)擋住首頁(yè)界面的展示嘶居，這個(gè)應(yīng)該怎么解決呢罪帖？

答：我們經(jīng)常會(huì)在app首頁(yè)看到FAB促煮，用做活動(dòng)專(zhuān)題跳轉(zhuǎn)作用；我們可以在滑動(dòng)界面的時(shí)候?qū)AB隱藏起來(lái)整袁，停止滑動(dòng)的時(shí)候菠齿，停頓3-5s左右的時(shí)間再次顯示出來(lái)即可。

FAB：懸浮按鈕

6坐昙、加載

加載同數(shù)據(jù)獲取的原理是一樣的绳匀；當(dāng)用戶(hù)去執(zhí)行某一操作后，前端會(huì)去調(diào)用后臺(tái)的接口炸客，這時(shí)候后臺(tái)會(huì)把相關(guān)的數(shù)據(jù)打包給到前端疾棵，前段進(jìn)行渲染之后，就展示給用戶(hù)了痹仙。

加載的原理

加載的類(lèi)型：模態(tài)加載和非模態(tài)加載是尔；

（1）模態(tài)加載：全部加載完成才會(huì)顯示出來(lái)。

模態(tài)加載是比較暴力的加載方式开仰，當(dāng)用戶(hù)發(fā)出事件后模態(tài)加載會(huì)獨(dú)占客戶(hù)端拟枚；就相當(dāng)于你在餐廳吃飯，餐廳要把全部的菜做完才給你上菜众弓，整個(gè)過(guò)程你只能等待恩溅。這種加載方式體驗(yàn)不是很好，當(dāng)數(shù)據(jù)請(qǐng)求很龐大的時(shí)候谓娃，大部分的用戶(hù)會(huì)失去耐心脚乡；所以除非不完全加載出來(lái)就會(huì)導(dǎo)致嚴(yán)重失誤的場(chǎng)景，其它場(chǎng)景盡量不要使用模態(tài)加載滨达。

模態(tài)加載

為了緩解模態(tài)加載給用戶(hù)帶來(lái)不好的體驗(yàn)每窖，可以學(xué)習(xí)下豆瓣，先把布局框架預(yù)先加載出來(lái)弦悉，加上情感化的小插畫(huà)，這樣可以緩解用戶(hù)的焦慮蟆炊。

加載小插畫(huà)

（2）非模態(tài)加載：能夠在用戶(hù)等待獲取數(shù)據(jù)的同時(shí)稽莉，允許用戶(hù)對(duì)當(dāng)前頁(yè)面的其它內(nèi)容進(jìn)行操作。

我們常見(jiàn)的下拉刷新就是典型的非模態(tài)加載涩搓，在下拉刷新的同時(shí)污秆，可以點(diǎn)擊其它任何一個(gè)功能。

下拉刷新

另外昧甘，我們經(jīng)常在實(shí)際生活中遇到其它的加載方式：分步加載和懶加載良拼、預(yù)加載、智能加載充边。

（1）分步加載：先加載文字等較小的資源庸推，再加載圖片常侦、視頻等較大的資源；根據(jù)用戶(hù)的瀏覽行為來(lái)逐漸加載內(nèi)容贬媒，當(dāng)用戶(hù)瀏覽到該區(qū)域再進(jìn)行加載聋亡；當(dāng)用戶(hù)的行為滿(mǎn)足某些條件后再進(jìn)行加載。

分步加載的好處：減少用戶(hù)的等待時(shí)間际乘，以及提高信息渲染的效率坡倔。分頁(yè)加載可以理解為當(dāng)前獲取到了100條數(shù)據(jù)，將這100條數(shù)據(jù)分別拆成5頁(yè)每頁(yè)20條數(shù)據(jù)提供給用戶(hù)脖含，這樣可以讓用戶(hù)減少等待時(shí)間罪塔。

分步加載

（2）預(yù)加載：預(yù)加載可以理解為當(dāng)用戶(hù)在瀏覽內(nèi)容A的時(shí)候，系統(tǒng)預(yù)先判斷他接下來(lái)會(huì)進(jìn)行的操作行為养葵，對(duì)這部分內(nèi)容進(jìn)行提前的請(qǐng)求征堪。預(yù)加載并不能解決網(wǎng)絡(luò)請(qǐng)求緩慢的問(wèn)題，只是提前發(fā)起網(wǎng)絡(luò)請(qǐng)求港柜，緩解問(wèn)題请契。

預(yù)加載的邏輯會(huì)更加的復(fù)雜，比如：如何判斷何時(shí)進(jìn)行預(yù)加載夏醉，以及預(yù)加載呈現(xiàn)的時(shí)間爽锥。需要考慮用戶(hù)在當(dāng)前頁(yè)面的核心場(chǎng)景，來(lái)考慮不同的加載方式畔柔。例如咨詢(xún)類(lèi)app氯夷，會(huì)在用戶(hù)瀏覽資訊列表時(shí)，對(duì)當(dāng)前或者某一部分列表的詳情內(nèi)容進(jìn)行文字記載靶擦，以及判斷列表頁(yè)面滾動(dòng)的占比來(lái)觸發(fā)接下來(lái)內(nèi)容的機(jī)制腮考。

預(yù)加載

（3）智能加載：在不同的網(wǎng)絡(luò)環(huán)境下，某些客戶(hù)端會(huì)采用加載不同的資源玄捕，不同的渲染效果來(lái)給用戶(hù)進(jìn)行視覺(jué)呈現(xiàn)踩蔚。比如在4G網(wǎng)絡(luò)下用戶(hù)瀏覽視頻，會(huì)默認(rèn)采用質(zhì)量最低的視頻資源提供給用戶(hù)枚粘；而在wifi環(huán)境下客戶(hù)端會(huì)自己加載后續(xù)內(nèi)容馅闽。

智能加載：4G和wifi不同環(huán)境下，加載的視頻清晰度不同

7馍迄、搜索

搜索默認(rèn)點(diǎn)擊之后都會(huì)跳轉(zhuǎn)頁(yè)面福也。

搜索入口分為2種：

（1）搜素圖標(biāo)：只具備簡(jiǎn)單的搜索功能；

搜索圖標(biāo)

（2）搜索框：會(huì)承載更多的信息攀圈，比如支付寶搜索框后邊有語(yǔ)音的功能等暴凑。

搜索框

搜索點(diǎn)擊之后跳轉(zhuǎn)的界面，會(huì)有不同的樣式：

（1）按照地理位置和種類(lèi)的赘来；

（2）搜索輸入進(jìn)行實(shí)時(shí)匹配现喳；

搜索輸入實(shí)時(shí)匹配

搜索結(jié)果也會(huì)進(jìn)行不同的分類(lèi)凯傲，具體要看產(chǎn)品策略不同分類(lèi)；

如：淘票票搜索結(jié)果列表式排列拿穴，為了讓用戶(hù)不切換tab就看到多個(gè)類(lèi)目泣洞。

列表排列搜索結(jié)果

知乎利用tab切換分為不同的類(lèi)目：

搜索結(jié)果tab切換

8、篩選控件

篩選控件分為：

（1）頂部顯示

（2）下拉浮層顯示默色；

（3）側(cè)邊浮層顯示球凰；

（4）二級(jí)頁(yè)面；

篩選控件的種類(lèi)

（1）頂部橫向滑動(dòng)標(biāo)簽篩選：適用于業(yè)務(wù)功能簡(jiǎn)單腿宰，電影類(lèi)APP中分類(lèi)的篩選呕诉。

優(yōu)點(diǎn)：能夠進(jìn)行多分類(lèi)的橫向快速篩選，及時(shí)篩選出自己想看的電影吃度；

缺點(diǎn)：不適用于聯(lián)動(dòng)分類(lèi)以及更多分類(lèi)的產(chǎn)品甩挫，并且橫向滑動(dòng)，靠后的標(biāo)簽點(diǎn)擊率會(huì)下降明顯椿每；

頂部橫向滑動(dòng)標(biāo)簽篩選

（2）下拉浮層篩選：外賣(mài)類(lèi)伊者、美食娛樂(lè)類(lèi)app使用較多，業(yè)務(wù)功能復(fù)雜由于需要根據(jù)用戶(hù)位置以及不同條件的喜好等維度篩選间护，因此它的分類(lèi)較多亦渗、較雜。所以頂部標(biāo)簽橫向滑動(dòng)無(wú)法滿(mǎn)足用戶(hù)需求汁尺，下拉式篩選可擴(kuò)展性強(qiáng)法精，能夠支持聯(lián)動(dòng)以及滑動(dòng)、進(jìn)度條控制器等多種篩選控制痴突。

當(dāng)分類(lèi)比較多的時(shí)候搂蜓，下拉部分不宜太長(zhǎng)，會(huì)不好適配小機(jī)型辽装。

下拉浮層篩選

（3）側(cè)邊浮層篩選：側(cè)邊浮層可容量的篩選維度更多帮碰，并且可以上下滑動(dòng)；

缺點(diǎn)：橫向內(nèi)容顯示過(guò)少拾积，總體來(lái)說(shuō)會(huì)比下拉菜單更容易操作收毫。

側(cè)邊浮層篩選

（4）二級(jí)頁(yè)面：一般用于找房app；沉浸式搜索方式殷勘，可擴(kuò)展性強(qiáng)，適用于一開(kāi)始就有強(qiáng)烈目標(biāo)目的的人為其進(jìn)行篩選昔搂；

缺點(diǎn)：層級(jí)較深玲销，篩選成本比較高，容錯(cuò)率較低摘符。

二級(jí)頁(yè)面

app首頁(yè)的功能大體上就是上邊梳理的這些了贤斜，希望小伙伴們根據(jù)自己的app的種類(lèi)策吠，不同模塊對(duì)比，作出優(yōu)秀的方案瘩绒。