APP UI结构-首页功能点大集锦，很干很详细

APP UI结构的系列的文章有一段时间没有更新了，因为最近在学一些新东西和看一些新书籍，适当的给自己充电也是为了更好的输出，言归正传，今天想跟大家聊的是和首页相关的一些内容，可能有些内容最近有的小伙伴已经更新过了，相信大家也看见了，比如导航的分类、加载的分类等，感觉写的都很不错，我也在犹豫这些内容还要不要再写，但是思考再三，还是决定写一下吧，毕竟这是APP UI结构系列文章里不可缺少的一部分，作为一个处女座伪完美主义者，还是决定有始有终。

首页相关（上）

关于首页的内容还是蛮多的，我给分成了上下两部，文章有点略长，还希望诸位拿出一点耐心能够看完，相信大家会有所收获，也不枉我辛苦码字一场，OK，老规矩，还是先来看一下整体结构：

（以下图片来源于应用截图，仅作为学习交流使用）

1.进入首页前的授权弹窗

用户在初次登录进入产品首页之前，难免会弹出一些弹窗，包括授权类弹窗或促销类弹窗，这些授权弹窗的出现无可厚非，用户只有通过授权产品才可以正常运转和使用某项功能；授权弹窗也是操作系统安全机制中的一部分，会涉及到用户的安全和隐私，近期Facebook用户信息泄露的事件频频发生，相信很多用户对隐私的保护感只会越来越强，试想用户还未使用产品，此时对产品的信任感较低，所以需要用户授权的弹窗最好是权限较高的，也是必要的授权，比如常见的有：网络授权、消息通知授权、获取定位、相机/相册的授权…非必要性的授权(权限较低)弹窗最好是在用户使用某个功能的情况下出现，切忌一股脑的全部弹出让用户进行授权，会给用户造成不必要的困扰，体验也会很差，相信这点大家也都知道，比如：麦克风、日历、蓝牙、通讯录…可以在使用到该功能时再弹出。

因为系统不一样，授权弹窗也会有些不同，iOS相对比较尊重用户，消息通知授权和网络授权等都是需要用户允许的，而安卓则不需要，相比起来iOS更优一点。说到网络授权，之前有小伙伴跟我讨论过这一问题，就是有的产品有网络授权，有的产品却没有，我之前倒没有刻意注意过，后来在网上查了一下：由于国家有关规定的出台，苹果自iOS 10以后针对中国大陆地区提供了需要用户授权允许“无线局域网与蜂窝移动网络”的弹窗，它的出现位置应该是用户初次打开应用，注册登录之前，通过率应该是会蛮高的，因为没有网络下面什么也不用做了。

授权弹窗的设计可以直接使用系统模态弹窗的样式，iOS和安卓弹窗的样式还有点不一样，iOS除了系统固定文字外还可以配以必要的说明文字，告知授权的重要性和不授权的后果，而安卓只能是系统固定的文字，相比起来又是iOS更优一点。现在大部分用户已经十分熟悉这类弹窗的重要性，一次性允许授权的通过率也很高，这里还要提一下：iOS只能出现一次授权弹窗，而安卓比较特殊，下次登录时还会弹出授权弹窗，也可以点击不再提醒。

如果iOS用户在第一次拒绝了授权，产品也是有二次授权的机会的，比如电商类产品消息通知的授权，我一般都不会授权，因为不喜欢被促销消息所打扰(这只是我个人习惯，不知道大家是不是也是这样)，但是这类授权对电商类产品很重要，再次登录产品时，会弹出二次授权弹窗提醒用户去打开消息通知，但是这里的区别就是，点击授权是利用深层链接(deep-link)直接跳转到系统设置中去打开相应授权，这样就会比较繁琐。还有一类情况是在页面中使用引导的方式去打开权限，无关授权弹窗的内容这里就不多说了。当然还有的产品很聪明，在授权弹窗出现之前会使用预授权机制(pre-permission)，先试探一下用户是否会授权，比如会先弹出设计比较美观的弹窗(带有诱导性的文字或是插画)，在你点击button后再弹出系统授权弹窗，这样做可以避免二次授权的繁琐，操作成本也会比较高，能这么做的产品还是比较少见的。

促销类弹窗的内容这里就不多说了，在往期文章中有所提到，可以在文章底部点击链接查看。

2.下拉刷新

下拉刷新相信大家已经是司空见惯了，几乎所有的产品都会有这一功能，这一交互的首创是源于twitter，后来慢慢流行开来，下拉刷新其实也不只是在首页存在，在产品很多页面中普遍存在。

下拉刷新的过程：页面整体下拉，顶部出现提示文案“松开即可刷新”—松开后显示旋转动效+“刷新中”—刷新成功后动效消失(toast提示刷新数据情况)，页面自动置顶/如果刷新失败进行toast提示。整个过程中要保持动效的可见性，在刷新结束出现数据后再隐藏动效，并且刷新过程中用户是可以继续操作的，不是说刷新过程中就什么也做不了；刷新的结果根据时间排序，即最新的数据在最上面；如果用户在短时间内进行多次下拉刷新，需要进行toast提醒(比如“你的操作太过频繁啦”)，防止出现页面卡顿或服务器请求失败的情况。

下拉刷新的动效设计现在的趋势真是越来越多样化，早已不再局限于早期系统的刷新样式，各大产品都设计了拥有自己特色的刷新动效，将自己的品牌基因融合进去，并加以趣味活泼的文案修饰，给人一种惊喜感，可以加深了用户对产品的印象，这种做法可谓是一举多得。

这里还有必要提一下自动刷新，之前有小伙伴跟我聊过，产品为什么不能自动刷新呢，那样多方便啊，自动刷新的情况也不是没有，比如某个产品你长时间没有登录，再次登录进入首页会自动进行刷新动态数据，方便阅读；还有的就是常见于数据类的产品，比如要实时查看数据的增长情况，自动刷新就会很有必要。但是为什么普遍产品在使用过程中还是使用下拉刷新而不是自动刷新呢，试想你在刷朋友圈、微博、知乎等情况下，系统在设置的时间段内进行了自动刷新，你正津津有味的看着某个动态，数据突然自动刷新了，正在阅读的动态可能就被挤到下面了，相信这样的体验对用户来说就是灾难。

3.持续下拉进入产品二楼

上面说的是下拉刷新，这里要说的是在首页持续下拉会进入的页面是二楼活动页面或是其他功能页面，这是对下拉刷新基础上的颠覆，相信这一功能的出现会让用户眼前一亮。记忆中最先这么做的是淘宝，好像京东搞活动的时候也这么做过，有点记不太清了。目前淘宝首页整体持续下拉是《一千零一夜》活动，是短视频+相关商品+UGC的方式，给了用户一个完整的购物体验，这种做法跟广告行业的营销是一样的；我看了一下，每个短视频的播放量都是百万级的，视频的体验都很不错，基本上是先讲述一个故事，播放完或点击暂停会出现关联商品，可以点击进入商品详情促成购买；但是光有商品是不够的，用户的评价也很重要，就跟我们平时购物一样，我们肯定也会关注大家的评价如何；另外还会鼓励用户进行订阅和分享，也希望用户多多生产UGC内容，综合来说整体的方式比较有说服力，用户也比较能够接受。

早期微信6.6.1版本更新后，首页下拉出现的是小程序的快捷入口，可以更加快速的找到近期使用过的小程序，节省了很多步骤。如果持续下拉整体页面的话会出现提示文案“这不是入口”，也是不错的体验，记忆中早期的文案更俏皮一点，现在应该是换掉了。

还有一个值得提一下的就是盒马的二楼是“盒尔蒙”业务，是专门卖成人用品的，刚开始知道这个模块的时候有点吃惊，毕竟盒马是一家主营生鲜的电商，竟然玩起了跨界突然开始卖起了成人用品，尺度是不是有点大啊；可能市场上对成人商品的需求比较大，毕竟购买成人用品大部分还是线上购买比较多，毕竟线下购买可能很多人难免会有点不好意思，隐私得不到保证，而且价格比较贵，这样一想盒马想和阿里、网易分一杯羹也可以理解。盒尔蒙的三大竞争力是：品质保障、30分钟达、隐私包装，相信光“30分钟达”这一条就足够有竞争力了，貌似有点扯远了…盒尔蒙为什么要在二楼售卖，可能毕竟盒马的主营业务还是生鲜，总感觉生鲜和成人用品要是杂揉在一起销售难免会有点奇怪，放到二楼可以保证2个模块的独立性，可以互不打扰。

可能还有一些产品首页也有二楼这一功能，我就不一一举例了，大家有兴趣的就自己研究研究吧。

4.城市/地址定位

定位功能相信大家都很熟知了，在获取用户的定位授权后，产品可以根据定位范围提供相应的服务，功能很常见，比如电商类、团购类、社交类(做社区)等；用户每次进入产品首页都会刷新定位，一般都很精准，用户除非需要更改定位才会想到要去点击它。定位功能常见于首页搜索框左侧，但是发展来看首页对于某些产品来说是寸土寸金，比如电商类和社交类产品，用户一般会在个人资料里添加多个收货地址，下单时直接选择地址就好，不需要用户常去更改定位，所以现在首页定位入口干脆隐藏掉了；而对于团购类或是需要提供及时配送服务的产品，需要用户方便查看和更改定位，所以这类产品都将定位功能在首页予以保留，下面就来举2个例子说明一下：

a.美团首页顶部保留着定位功能入口，考虑用户使用场景，用户通过产品可以查看定位城市周边所有团购服务，只需要精准定位到区/县/市等即可，如有查看其它区域需求时，可以方便用户点击进行切换。点击定位后进入定位页面，组成结构：直接搜索城市(方便快速选择新城市)+国内/海外tab+当前城市+切换城市+热门城市+所有城市(字母索引，根据城市首字母排序，可快速找到选择字母下的所有城市)。

b.美团外卖首页顶部定位是精准到具体地址，因为平台需要根据用户定位范围X公里内进行美食推荐，点击地址进入收货地址页面，构成：城市切换(比如给其它城市亲人朋友点餐情况)+搜索收货地址(针对当前已选城市搜索具体地址)+当前定位+重新定位+我的收货地址(地址标签)+附近地址(方便快速选择新地址)+新增地址(这个功能很有必要，可以快速链接到新增地址页面)。这种页面构成常见于需要及时配送的平台，因为需要考虑商品的时效性，需要当日达/1小时达等，还比如：饿了么、每日优鲜、盒马…

不同产品对于定位功能的诉求是不一样的：电商类首页顶部不保留定位功能入口；团购类产品首页定位到区/县/市等;外卖/及时配送类产品首页需要定位到具体地址；可以根据产品需求具体应用。

5.搜索模块

搜索功能几乎是所有产品的标配，也是必不可少的功能之一，因为搜索既可以帮助用户方便快捷地找到想找的内容，也可以通过用户的历史搜索进行相关大数据分析，在“猜你喜欢”模块可以给用户推荐可能感兴趣的商品，引导用户去购买。

搜索入口形式一般有2种，一种就是搜索框，还有一种就是点击搜索icon进入搜索页面。先来说说搜索框，这种形式最为普遍，因为搜索框是直观的形式，大多数产品都是采用这种方式，因为用户一进入首页就可以看见，目的性比较强，电商类产品这种形式比较普遍，组成形式：搜索框+搜索icon+热搜关键词(+扫一扫/相机扫描识别)，热搜关键词是根据运营需要或是数据推荐不定时更换的，如果热搜词刚好是用户感兴趣的，可以点击搜索框进入搜索页，直接点击搜索，减去了还要输入关键词的繁琐步骤；当然产品使用第二种搜索icon的方式也蛮多的，常见于垂直类电商或是阅读类产品等，这类产品将搜索功能进行了弱化，可能搜索内容并不是用户的主要诉求，用户只想进来随便看看和逛逛。

进入搜索页面后，大致主要组成有：搜索框+搜索icon+热搜关键词(+扫一扫/相机扫描识别)+关键词联想+清空关键词button+返回/取消/搜索button(+分类tab)+历史搜索+清空搜索记录(+热门搜索)(+语音输入)+输入键盘(搜索button)；详解如下：

a.扫一扫/相机扫描识别：通过扫描条码或商品进行识别，得出搜索结果和类似商品；

b.关键词联想：这个功能十分重要，可以减少用户输入，每输入一个字段就要加载一次，将联想的结果展示出来，方便用户快速找到目标搜索对象；

c.清空关键词button：一键点击快速清空错误关键词或更换新的关键词；

d.返回/取消/搜索button：如果搜索框左侧没有返回button，右侧就会有取消button；如果左侧有返回button，右侧取消button可以变为搜索button；

e.分类tab：针对当前分类下进行关键词搜索，更加快速、准确；

f.历史搜索+清空搜索记录：保留历史搜索记录可以方便用户一键点击，再次进行搜索，可以避免重复操作，当然删除搜索记录也很必要，可以减少页面无用信息的占比，也可以有效保护用户的搜索隐私；

g.热门搜索：可能是搜索热度较高的关键词；运营需要主推的关键词；大数据推荐猜你感兴趣的关键词；

h.语音输入：用户通过语音直接说出关键词，免去输入步骤，可以方便老年人/残疾人或是特殊场景下也能使用搜索功能；

i.输入键盘：进入搜索页键盘默认弹出；搜索button最好设置在键盘上，会更加方便；关键词输入结束后用户上下滑动查看搜索结果时键盘要自动收起；

还有很多产品细节差异上的功能和搜索结果页面的内容就不展开说了，有机会再详细说一说。

6.扫一扫

相信扫一扫功能几乎是每天都会用到的功能，二维码付款已经充斥了我们生活的各个方面，微信/支付宝的扫一扫功能相信大家是每天都会用到的，而且这个功能也越来越强大，不止扫描二维码甚至还可以识别手机相册内照片上的二维码；下面找了几个具有代表性的产品分析一下扫一扫的功能：

a.微信：扫码识别+相册照片二维码识别+书籍/CD等封面识别+街景识别(定位功能)+文字拍照翻译+操作文字提示+手电筒(在环境光较暗时出现，引导用户的体验很好)；

b.支付宝：页面布局和交互跟微信类似，区别是页面底部的AR tab；AR扫描相信大家应该都体验过了，春节期间AR扫福字和扫红包也是大热；

c.淘宝：底部 AR/扫码/拍照识别tab(tab间切换会有动效)+识别历史+相册照片二维码识别+手电筒+帮助+操作文字提示+广告；

d.京东：顶部 扫码识别/拍照识别/AR tab+识别历史+交易记录+输入条形码+操作文字提示+手电筒+底部 付款码/支付优惠/相册照片二维码识别/会员码；没有看出页面底部放置付款码/支付优惠/会员码功能的用意，点击是跳转到下级页面，是否有点多余？相册照片二维码识别功能不应该穿插其中，个人感觉体验不是很好；

对比上面4种扫一扫功能，可以看出用户的核心诉求还是扫描二维码进行识别，其他的一些功能可以作为各自的特色和产品差异，做好核心诉求的交互体验是最重要的，所以进入扫一扫页面，扫描二维码必须是默认页面，应将其作为首要功能；操作过程中的文字提示引导也十分重要，及时告知用户如何使用，避免识别不出和耗时较长造成的挫败感；另外判断出环境光不佳情况下，及时提示打开手电筒也很必要，因为用户很可能会忽视，这一点微信、支付宝、京东都做到了。

首页相关（下）

（图片来源于网络和应用截图，仅作为学习交流使用）

1.导航的形式

说到导航大家应该很熟悉了，导航是在各个功能场景之间切换的工具，是整个产品功能的大框架。它将产品的功能有序地连接起来，让功能出现在合理的位置；如果没有导航的话，用户在使用产品时会不知所措，想使用某个功能也无法快速找到，可见它的意义是十分重大的。网上关于导航的文章很多，详细介绍了导航形式之间的区别和优缺点，估计多写也是重复，我在这里就简单的说一下吧，想看详细的文章可以自己去网上搜一搜。

导航的类别有：

底部标签式导航：最常见、最常用、最符合用户习惯的样式，导航中的首选样式。根据拇指热区图显示，拇指的最佳操作区域是只有页面的三分之一，所以标签导航常位于页面底部，一般作为全局导航使用；导航的内容最直观，不会被隐藏，并且被选中的标签会高亮显示，明确告诉用户当前所在位置，用户可以轻松点击标签进行页面切换；

顶部tab式导航：这类导航形式也很常见，常和底部标签式导航搭配使用，作为二级辅助导航样式，一般tab数量3个以上，并且可以进行左右滑动切换；当然也有作为一级导航使用的情况，比如安卓的设计规范中，将顶部tab式导航作为一级导航；再比如QQ音乐，出于产品核心功能需要，音乐播放页面的快捷入口始终置于页面底部，所以主导航就使用了顶部tab式导航；

舵式导航：也叫点聚式导航，其实我感觉可以归到底部标签式导航一类，因为在两者搭配使用时，它常作为核心功能入口放在中间位置，形成了对称，故而叫做舵式导航；设计上会和其他标签有明显区分并重点突出了自己，很容易吸引用户的注意力，也有鼓励用户使用该功能的意味，但是因为过于明显所以会弱化其他功能入口；比如带有社交属性的产品，会希望用户多发布一些UGC内容，常采用这种导航形式；这类导航里常放置用户最多使用的或是产品最重要的功能，拓展的功能数量不宜过多；

抽屉式导航：也叫汉堡或侧边栏导航，也是很常见的一种导航样式，多用于阅读类产品，因为可以给用户沉浸式阅读体验，可以将很多低频功能藏到抽屉导航内，节省了屏幕空间，自然可以让页面看起来简洁美观；还有一些产品因为功能比较复杂，抽屉导航常作为辅助导航进行配合使用，比如QQ既有底部标签式导航又有抽屉式导航；还有一类就是目的性比较强的产品，比如共享单车或是打车软件，都是采用这类导航，将用户最需要的核心功能放在首页，其他的都隐藏起来，不干扰用户的注意力。当然这类导航的弊端也有很多，比如隐藏起来的功能用户可能会想不起来去展开；需要用户多操作才能进入其他功能页面等；

宫格式导航：使用这种导航样式最具代表性的就是美图秀秀了，这类导航在视觉上比较整齐直观，方便用户快速查找，同等级功能之间割裂感比较大又或是功能之间没有很大的关联可以采用这种导航形式；虽然这种导航形式功能的数量上可以很多，但还是建议这种导航方式作为辅助导航使用，一方面用户对这种导航形式相对比较陌生，接受度不一定高，另一方面，由于功能间割裂感较大，可能用户切换其他功能时会比较麻烦；比如微信钱包页面、电商和团购类产品首页banner下的类目入口也是属于宫格式导航，都是作为辅助导航使用；

列表式导航：这种导航形式很常见，可能常见到我们平时都没察觉到这类竟然也是导航，在视觉上整齐美观，几乎所有产品都会用到，列表式导航和宫格式导航类似，只是在表现形式上的不同，列表式导航的表现形式有很多，比如纯文字/icon+文字/文字+图片等；数量上也可以很多，并没有局限性，因为用户是上下滑动查看的方式；常作为二级导航和其他导航搭配进行使用，因为不方便用户切换功能，并且太靠下的列表可能点击率不高；

悬浮式导航：这种导航形式也比较常见，现在的手机屏幕比较大，用这种导航方式也越来越多了，常作为二级辅助导航使用，在阅读类或工具类产品中比较常见，；点击导航常伴有动效并出现若干功能，这些功能聚合在悬浮导航内，节省了屏幕空间，但是会对用户的视觉形成干扰；

小结：导航形式对产品来说不是单一的存在，尤其在产品功能结构都日益趋于繁杂庞大的今天，导航间进行组合使用已是常态，也是一种大趋势，所以在进行产品设计的时候需要结合自身的需要具体分析，使用适合自身的导航形式，毕竟适合自己的才是最好的。

2.顶部banner广告位

banner广告几乎是所有产品难以避免的存在，它也是产品出于运营需要或进行盈利的方式之一，banner数量一般3-8个不等，可以左右滑动查看，点击可进入相关专题或是详情页面。电商类产品的banner是根据用户喜好生成的，系统推荐给用户可能感兴趣的内容，点击率可想而知。

常见的banner设计比例有2:1和16:9，当然这不是固定的，高度可以根据产品需要来定，比如电商类产品首页空间比较宝贵，banner高度就会相对紧凑，以节省页面空间。我们在设计banner时最好使用屏幕最大的宽度尺寸进行设计，即：安卓(@4x)—宽度1440px (各个公司可能后台上传尺寸不一样，仅做参考)，这样做虽然会多占资源，但是在适配下面的各个屏幕时可以避免可能出现模糊不清的状况。

自从iPhone X问世之后，为了避免刘海对banner的干扰，越来越多的产品取消了之前状态栏和导航栏全透明的效果，将banner放到了导航栏下面；目前电商中京东还保留着原来的样式，这类样式需要注意的点有：

留出顶部危险区域：状态栏和导航栏底下为危险区域，危险区域内不要出现文字等重要内容；

顶部黑色透明遮罩：因为banner的颜色不可控，为了突出状态栏，开发会在顶部设置自上而下的黑色遮罩，数值为70%—0%；

上滑时显示状态栏和导航栏底色：开发会设置一个数值，比如通常是一个状态栏和导航栏的总高度，即128px(@2x)，在页面整体上滑128px时，状态栏和导航栏会由全透明变成不透明显示出底色/渐变色；

3.分类模块入口

分类模块入口一般位于首页banner下面，在电商、团购类等产品中是十分常见的形式。很多用户可能不知道搜索什么关键词或是目的性比较强的来寻找某一商品，这种快捷的分类入口就会显得很方便。

分类模块一般有1-2页，数量4-20个不等；因为第一页的点击率普遍较高，所以请将最重要的分类放在第一页，要让用户触手可及，而第二页放相对次要的分类；也可以将第一页最后一个分类设置为”更多分类“，这样做可以减少一页，但是里面分类的点击率可能会不高；

icon的设计上普遍是面性图标或者面性图标+圆形/方形底色(渐变色)，因为这样视觉上图标会显得比较饱满；面性图标的设计上不单单只是反白效果，还可以添加一些设计细节对比，会显得更有层次；这里不建议使用线性图标，因为会显得视觉冲击力太弱，不够突出；

4.“资讯/新闻/快报/头条”入口

出于运营需要或进行品牌相关的一些宣传、或是关于产品的一些资讯，这类入口通常会在首页分类模块下方，处于页面的中心位置，虽然位置比较突出，但是占的空间不会很大，所以用户对它的关注度可能不会很高；

字体：这里的字体一般不会使用系统的默认字体，通常是经过设计的，会具有品牌字体相关性；比如“京东快报”字体和京东的Logo字体是有品牌关联的。

内容：一般采用轮播的方式，3秒左右进行更换一次，有的是一行，有的是两行，点击会进入相关专题页；

5.底部标签栏

标签栏在上面的导航模式中已经提到过了，这里就来具体的说一下：

设计上：标签栏高度为98px(@2x)，标签栏内的字体作为提示作用，字号为20px；标签的数量一般有3-5个，icon的设计上要保持简约并且能够精准传达释义，也可以进行品牌基因的融入来突出自己的调性和其他产品的差异化；常用的是线性和面性两种，一般进行结合使用以表明选中状态；iOS 11之后面性icon开始流行，用品牌色进行区分；另外 icon的设计要保持统一，比如线性icon的粗细、圆角角度大小、开口的大小等都要保持一致，这样用户看起来也会比较赏心悦目；

反馈方面：可以分为视觉和听觉两方面；视觉上当前选中状态要和其他icon有明显区分，比如线性和面性的区分、颜色的区分等，以表明当前所在的页面位置；另外，点击时icon伴有动态效果，可以增加趣味性，也是现在比较常见的反馈方式；听觉上的反馈是指在点击icon时会伴有点击音效，比如facebook；

隐藏功能：再次点击icon置顶页面功能。用户熟知的置顶页面功能是点击状态栏或是点击置顶button，可能很多用户没有发现或是很少用到——再次点击当前页面标签栏icon是可以进行页面置顶的，可能很多产品都有这一功能，但是没有对用户进行很好的引导，反观之，淘宝和MONO在上滑时会在标签栏进行置顶页面的引导，体验较好；另外 淘票票采用的是双击标签栏icon进行置顶页面，应该是为了避免用户的误操作，导致用户正在浏览的内容上移，需要再次滑动很久才能找到，但这样的交互可能很多用户都不会知道；

为了获得沉浸式体验，标签栏在用户浏览时可以进行隐藏，比如上滑时收起、下滑时显示出来；

6.加载方式

加载方式不限定于首页，而是贯穿整个产品。加载是用户在进行某个操作，服务器进行处理后并将数据反馈给用户，这一过程中耗费的时间用来做什么用户是不知情的，所以才会需要有加载方式来进行反馈，减少用户的焦虑。网上关于加载的文章很多，我这里就简单说一下吧，大家想详细了解的可以自己去搜索一下。

下拉刷新加载：这种加载方式在上一篇文章中的第2点“下拉刷新”中已经说了，就不多说了；

进度条加载：多用于web端，这种加载方式不知道具体的加载时间，开始时可以加载的较快，最后时可以加载慢一点，这样用户会比较愿意等待，但是不能在加载时卡住；移动端用这种方式的不多，多数是H5页面，因为这种加载方式会过于吸引用户的注意力，而且在加载速度很快的情况下可能进度条都不会显示出来；

全屏加载：指用户在进入新页面时的加载方式，一次性加载完所有内容之前看不见任何内容，自然也无法进行操作，所以最好能采用情感化的加载动效设计，因为趣味的动效反馈可以避免用户的焦虑；但在对于网络不佳的情况下，加载时间过长会让人感到急躁，所以这种加载方式的跳失率比较大；

分段加载：这类加载方式也可以说是上拉刷新加载，使用场景一般是用户刷到feed流底部时继续上滑或点击后加载出的数据；在做交互文档时应该注明一次性加载出多少条数据，这个需要根据产品的自身需求来定，比如：光加载内容的话可以一次性加载50条，而带有图片的内容数据可以一次性加载25条，体验了一下微信朋友圈的动态数据是一次性加载20条(自己数了一下，不一定准确)；

分步加载：顾名思义，就是一步一步的加载，优先加载占用资源比较小的内容；分两种情况：第一种先加载文字再加载图片，图片的突然出现会打扰到用户，这种体验不佳，已经慢慢被舍弃了；第二种就是先加载出页面的框架再加载出页面的内容，比如先加载图片占位符，占位符可以是灰色或产品主色(+logo或icon) / 彩色(后台设置颜色，随机出现)，接着再加载页面文字，最后再加载占位符位置上的图片；这种加载方式的好处是可以让用户快速页面整体的大致结构，体验较好；

懒加载：指在用户使用到时才会加载，以免造成流量和资源的浪费，比如用户刷feed流时，上滑被看见时再加载出图片内容，再往底下看不见的位置可能只加载出文字和框架；

预加载：在阅读类产品中使用较多，指对用户下一步的操作进行预判，提前加载下一页的内容，以减少用户进入下级页面时加载所需要的时间；可以和下面要说的智能加载搭配使用，比如在wifi情况下可以使用预加载，4G下则不进行预加载，节省流量，这样的体验会比较佳；

智能加载：指在不同网络环境的下，加载的内容也不一样。比如在4G网络下，为了给用户节省流量，页面中进行加载文字内容和普清图片，不对视频进行加载或只加载标清视频，但是考虑一部分用户的流量比较多，所以现在也会给用户提供自己选择的权利，比如弹窗提醒用户是否使用流量加载或切换高清模式；而在wifi条件下，则是可以自动加载高清图片或视频；

小结：加载模式多种多样，同一页面可能就会有多种加载方式，目的都是为了节省时间从而提升用户体验，这是前提条件；另外加载动效的方式可以多使用情感化设计，能够让用户能够忘记当前的等待，加深品牌记忆的同时也是一种大的设计趋势；加载动效的位置最好可以合理使用页面的位置，以减少对用户的干扰；在加载失败的情况下，也要给出反馈结果，并且可以让用户重新加载；

总结

关于首页的内容就说这么多吧，首页看似很平常，其实涉及到的功能还是比较多的，有些功能点也比较细微，不同的产品首页功能布局也不一样，我这里说的是产品通用的一些功能，也没有很深入的去讲，希望在以后的文章中有机会再详细说一说。

编辑：千锋UI设计

作者：EasonZhangUED

来源：UI中国主页