关于首页的内容还是蛮多的，我给分成了上下两部，文章有点略长，还希望诸位拿出一点耐心能够看完，相信大家会有所收获，也不枉我辛苦码字一场。老规矩，还是先来看一下整体结构：
△ 以下图片来源于应用截图，仅作为学习交流使用
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例：
美团首页顶部保留着定位功能入口，考虑用户使用场景，用户通过产品可以查看定位城市周边所有团购服务，只需要精准定位到区/县/市等即可，如有查看其它区域需求时，可以方便用户点击进行切换。点击定位后进入定位页面，组成结构：直接搜索城市（方便快速选择新城市）+国内/海外tab+当前城市+切换城市+热门城市+所有城市（字母索引，根据城市首字母排序，可快速找到选择字母下的所有城市）。
美团外卖首页顶部定位是精准到具体地址，因为平台需要根据用户定位范围X公里内进行美食推荐，点击地址进入收货地址页面，构成：城市切换（比如给其它城市亲人朋友点餐情况）+搜索收货地址（针对当前已选城市搜索具体地址）+当前定位+重新定位+我的收货地址（地址标签）+附近地址（方便快速选择新地址）+新增地址（这个功能很有必要，可以快速链接到新增地址页面）。这种页面构成常见于需要及时配送的平台，因为需要考虑商品的时效性，需要当日达/1小时达等，还比如：饿了么、每日优鲜、盒马……
不同产品对于定位功能的诉求是不一样的：电商类首页顶部不保留定位功能入口；团购类产品首页定位到区/县/市等；外卖/及时配送类产品首页需要定位到具体地址；可以根据产品需求具体应用。
5. 搜索模块
搜索功能几乎是所有产品的标配，也是必不可少的功能之一，因为搜索既可以帮助用户方便快捷地找到想找的内容，也可以通过用户的历史搜索进行相关大数据分析，在「猜你喜欢」模块可以给用户推荐可能感兴趣的商品，引导用户去购买。
搜索入口形式一般有2种，一种就是搜索框，还有一种就是点击搜索icon 进入搜索页面。先来说说搜索框，这种形式最为普遍，因为搜索框是直观的形式，大多数产品都是采用这种方式，因为用户一进入首页就可以看见，目的性比较强，电商类产品这种形式比较普遍，组成形式：搜索框+搜索icon+热搜关键词（+扫一扫/相机扫描识别），热搜关键词是根据运营需要或是数据推荐不定时更换的，如果热搜词刚好是用户感兴趣的，可以点击搜索框进入搜索页，直接点击搜索，减去了还要输入关键词的繁琐步骤；当然产品使用第二种搜索icon 的方式也蛮多的，常见于垂直类电商或是阅读类产品等，这类产品将搜索功能进行了弱化，可能搜索内容并不是用户的主要诉求，用户只想进来随便看看和逛逛。
进入搜索页面后，大致主要组成有：搜索框+搜索icon+热搜关键词（+扫一扫/相机扫描识别）+关键词联想+清空关键词button+返回/取消/搜索button（+分类tab）+历史搜索+清空搜索记录（+热门搜索）（+语音输入）+输入键盘（搜索button）；详解如下：
- 扫扫/相扫描识：扫描条码或识，搜索结类似；
- 关键词联想：这个功能十分重要，可以减少用户输入，每输入一个字段就要加载一次，将联想的结果展示出来，方便用户快速找到目标搜索对象；
- 清空关键词 button：一键点击快速清空错误关键词或更换新的关键词；
- 返回/取消/搜索 button：如果搜索框左侧没有返回 button，右侧就会有取消 button；如果左侧有返回 button，右侧取消 button 可以变为搜索 button；
- 分类 tab：针对当前分类下进行关键词搜索，更加快速、准确；
- 历史搜索+空搜索录：留历史搜索录户键击，搜索，避免复操，删除搜索录必，减页息占，效护户搜索隐私；
- 热门搜索：可能是搜索热度较高的关键词；运营需要主推的关键词；大数据推荐猜你感兴趣的关键词；
- 语音输入：用户通过语音直接说出关键词，免去输入步骤，可以方便老年人/残疾人或是特殊场景下也能使用搜索功能；
- 输入键盘：进入搜索页键盘默认弹出；搜索 button 最好设置在键盘上，会更加方便；关键词输入结束后用户上下滑动查看搜索结果时键盘要自动收起；
还有很多产品细节差异上的功能和搜索结果页面的内容就不展开说了，有机会再详细说一说。
6. 扫一扫
相信扫一扫功能几乎是每天都会用到的功能，二维码付款已经充斥了我们生活的各个方面，微信/支付宝的扫一扫功能相信大家是每天都会用到的，而且这个功能也越来越强大，不止扫描二维码甚至还可以识别手机相册内照片上的二维码；下面找了几个具有代表性的产品分析一下扫一扫的功能：
- ：扫码识+相册照码识+书籍/CD 封识+识（功）+照翻译+操示+筒（暗，引导户验）；
- 支付宝：页面布局和交互跟微信类似，区别是页面底部的 AR tab；AR 扫描相信大家应该都体验过了，春节期间 AR 扫福字和扫红包也是大热；
- 淘宝：底部 AR/扫码/拍照识别tab（tab间切换会有动效）+识别历史+相册照片二维码识别+手电筒+帮助+操作文字提示+广告；
- 京东：顶部 扫码识别/拍照识别/AR tab+识别历史+交易记录+输入条形码+操作文字提示+手电筒+底部 付款码/支付优惠/相册照片二维码识别/会员码；没有看出页面底部放置付款码/支付优惠/会员码功能的用意，点击是跳转到下级页面，是否有点多余？相册照片二维码识别功能不应该穿插其中，个人感觉体验不是很好。
对比上面4种扫一扫功能，可以看出用户的核心诉求还是扫描二维码进行识别，其他的一些功能可以作为各自的特色和产品差异，做好核心诉求的交互体验是最重要的，所以进入扫一扫页面，扫描二维码必须是默认页面，应将其作为首要功能；操作过程中的文字提示引导也十分重要，及时告知用户如何使用，避免识别不出和耗时较长造成的挫败感；另外判断出环境光不佳情况下，及时提示打开手电筒也很必要，因为用户很可能会忽视，这一点微信、支付宝、京东都做到了。
小结
文章略长，上半部分只说了关于首页顶部的一些内容，可能有一些功能不是普遍现象这里就不多说了，整体写下来感觉内容还是蛮多的，如有不足之处大家可以留言探讨，总之希望对你有所收获，下半部分将尽快进行更新。
欢迎关注作者的公众微信号：「Eason张UED」
浙公网安备33011002017549号