我们日常生活中，使用过形形色色的app；而作为ui设计师，是负责我们手机app视觉效果的人。一个app由哪些部分组成，我们都要很清楚，才可以设计出符合用户的app界面。今天和小伙伴分享下，一个app首页包含的功能。

app首页包含的内容：

（1）授权弹窗；（2）下拉；（3）广告位；（4）导航；（5）加载；（6）扫一扫；（7）搜索；（8）地址定位；（9）模块入口；

1、弹窗

（1）弹窗的种类有哪些呢？

a: 授权弹窗；

我们下载一个app，打开app首先会弹出授权弹窗，比如：请求地理位置、相册授权，麦克风权限等。

app授权弹窗

b: 版本更新弹窗；

一般app更新了功能等都会有新的版本弹窗提示。

版本更新弹窗

c:  活动弹窗；

活动弹窗

弹窗的优先级是什么样的呢？

弹窗的优先级：网络授权>推送消息、获取位置、通讯录>访问相册、麦克风、访问相册>活动弹窗；

2、下拉

（1）下拉刷新；

a:下拉刷新相信我们在app使用过程中都会用到，那么思考一下用户在使用什么产品时，会在首页下拉刷新呢？

答：一般一个app如果有事实内容更新，它会在首页有下拉刷新。

b:下拉刷新需要3种状态

    下拉还未松手时候的状态；

    松手后正在刷新的动态；

    刷新完成后，动效收回去的时候的状态；

（2）下拉广告、二楼；

这个我们一般在视频播放器中会有；淘宝的下拉二楼等

淘宝二楼

3、广告位/顶部banner

一般首页顶部会出现banner图，超过1张，就会出现轮播指示器；

banner轮播

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

瓷片广告区：

使用后台传图片或文字+图片的形式； 一般使用上下、左右、对角线的排版方式；加载过程中需要提供占位图（即弱网络状态下未进行渲染的展示图）；

瓷片广告区

CTA（call to action）：行为召唤按钮；一般放置在明显的广告入口，采用大圆角或小圆角的按钮样式，支持轮播；

 行为召唤按钮一般放置明显的广告位入口；一般会采用大圆角或小圆角的按钮样式；并且支持轮播；

CTA：行为召唤按钮

5、FAB（Floating action button）悬浮按钮

悬浮按钮：最早来源于安卓，安卓原生带有悬浮按钮；

悬浮按钮一般只用于正向按钮，用于辅助当前页面的一些操作及重要的操作，常常用于触发导航、主操作、功能收纳、活动专题跳转等作用；比如我们说的收纳作用运营于正向的按钮一般就包括：添加、编辑、收藏、点赞、转发等，不能用于返回、删除、禁用等负向的按钮。

问：首页的FAB会有一个缺点，会挡住首页界面的展示，这个应该怎么解决呢？

答：我们经常会在app首页看到FAB，用做活动专题跳转作用；我们可以在滑动界面的时候将FAB隐藏起来，停止滑动的时候，停顿3-5s左右的时间再次显示出来即可。

FAB：悬浮按钮

6、加载

加载同数据获取的原理是一样的；当用户去执行某一操作后，前端会去调用后台的接口，这时候后台会把相关的数据打包给到前端，前段进行渲染之后，就展示给用户了。

加载的原理

加载的类型：模态加载和非模态加载；

（1）模态加载：全部加载完成才会显示出来。

模态加载是比较暴力的加载方式，当用户发出事件后模态加载会独占客户端；就相当于你在餐厅吃饭，餐厅要把全部的菜做完才给你上菜，整个过程你只能等待。这种加载方式体验不是很好，当数据请求很庞大的时候，大部分的用户会失去耐心；所以除非不完全加载出来就会导致严重失误的场景，其它场景尽量不要使用模态加载。

模态加载

为了缓解模态加载给用户带来不好的体验，可以学习下豆瓣，先把布局框架预先加载出来，加上情感化的小插画，这样可以缓解用户的焦虑。

加载小插画

（2）非模态加载：能够在用户等待获取数据的同时，允许用户对当前页面的其它内容进行操作。

我们常见的下拉刷新就是典型的非模态加载，在下拉刷新的同时，可以点击其它任何一个功能。

下拉刷新

另外，我们经常在实际生活中遇到其它的加载方式：分步加载和懒加载、预加载、智能加载。

（1）分步加载：先加载文字等较小的资源，再加载图片、视频等较大的资源；根据用户的浏览行为来逐渐加载内容，当用户浏览到该区域再进行加载；当用户的行为满足某些条件后再进行加载。

分步加载的好处：减少用户的等待时间，以及提高信息渲染的效率。分页加载可以理解为当前获取到了100条数据，将这100条数据分别拆成5页每页20条数据提供给用户，这样可以让用户减少等待时间。

分步加载

（2）预加载：预加载可以理解为当用户在浏览内容A的时候，系统预先判断他接下来会进行的操作行为，对这部分内容进行提前的请求。预加载并不能解决网络请求缓慢的问题，只是提前发起网络请求，缓解问题。

预加载的逻辑会更加的复杂，比如：如何判断何时进行预加载，以及预加载呈现的时间。需要考虑用户在当前页面的核心场景，来考虑不同的加载方式。例如咨询类app，会在用户浏览资讯列表时，对当前或者某一部分列表的详情内容进行文字记载，以及判断列表页面滚动的占比来触发接下来内容的机制。

预加载

（3）智能加载：在不同的网络环境下，某些客户端会采用加载不同的资源，不同的渲染效果来给用户进行视觉呈现。比如在4G网络下用户浏览视频，会默认采用质量最低的视频资源提供给用户；而在wifi环境下客户端会自己加载后续内容。

智能加载：4G和wifi不同环境下，加载的视频清晰度不同

7、搜索

搜索默认点击之后都会跳转页面。

搜索入口分为2种：

（1）搜素图标：只具备简单的搜索功能；

搜索图标

（2）搜索框：会承载更多的信息，比如支付宝搜索框后边有语音的功能等。

搜索框

搜索点击之后跳转的界面，会有不同的样式：

（1）按照地理位置和种类的；

（2）搜索输入进行实时匹配；

搜索输入实时匹配

搜索结果也会进行不同的分类，具体要看产品策略不同分类；

如：淘票票搜索结果列表式排列，为了让用户不切换tab就看到多个类目。

列表排列搜索结果

知乎利用tab切换分为不同的类目：

搜索结果tab切换

8、筛选控件

筛选控件分为：

（1）顶部显示

（2）下拉浮层显示；

（3）侧边浮层显示；

（4）二级页面；

筛选控件的种类

（1）顶部横向滑动标签筛选：适用于业务功能简单，电影类APP中分类的筛选。

优点：能够进行多分类的横向快速筛选，及时筛选出自己想看的电影；

缺点：不适用于联动分类以及更多分类的产品，并且横向滑动，靠后的标签点击率会下降明显；

顶部横向滑动标签筛选

（2）下拉浮层筛选：外卖类、美食娱乐类app使用较多，业务功能复杂由于需要根据用户位置以及不同条件的喜好等维度筛选，因此它的分类较多、较杂。所以顶部标签横向滑动无法满足用户需求，下拉式筛选可扩展性强，能够支持联动以及滑动、进度条控制器等多种筛选控制。

当分类比较多的时候，下拉部分不宜太长，会不好适配小机型。

下拉浮层筛选

（3）侧边浮层筛选：侧边浮层可容量的筛选维度更多，并且可以上下滑动；

缺点：横向内容显示过少，总体来说会比下拉菜单更容易操作。

侧边浮层筛选

（4）二级页面：一般用于找房app；沉浸式搜索方式，可扩展性强，适用于一开始就有强烈目标目的的人为其进行筛选；

缺点：层级较深，筛选成本比较高，容错率较低。

二级页面

app首页的功能大体上就是上边梳理的这些了，希望小伙伴们根据自己的app的种类，不同模块对比，作出优秀的方案。