赞助商
立即赞助

写给新手的APP结构指南:首页相关(上)

UI设计3年前 (2021)更新 流光
2.5K 0 0

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

写给新手的APP结构指南:首页相关(上)

△ 以下图片来源于应用截图,仅作为学习交流使用

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

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

写给新手的APP结构指南:首页相关(上)

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

写给新手的APP结构指南:首页相关(上)

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

写给新手的APP结构指南:首页相关(上)

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

写给新手的APP结构指南:首页相关(上)

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

2. 下拉刷新

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

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

刷效趋势越越,早已早系统刷,各拥刷效,将基融,并趣泼案,惊,深户印象,法谓举。

写给新手的APP结构指南:首页相关(上)

必刷,伙伴聊,刷呢,,刷况,某登录,登录首页刷数据,阅读;见数据类,查数据增况,刷必。普遍使程使刷刷呢,刷圈、、乎况,系统刷,某,数据突刷,阅读被挤,相验户灾难。

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

刷,首页持续页页或功页,刷基础颠覆,相功户眼亮。忆先淘,搞,。目淘首页持续《千零夜》,短视频+相+UGC ,户验,法告。,短视频播,视频验,基先讲述故,播或击暂,击详促。够,户,,肯注何。另鼓励户订阅享,希望户 UGC ,综,户够受。

写给新手的APP结构指南:首页相关(上)

早6.6.1版,首页程序捷,速使程序,节骤。持续页示案「」,验,忆早案俏,应该换掉。

写给新手的APP结构指南:首页相关(上)

盒「盒蒙」,,始模惊,毕竟盒,竟玩跨界突始,尺。需求,毕竟,毕竟难免思,隐私证,贵,盒、易杯羹。盒蒙竞争:质障、30钟、隐私,相「30钟」条够竞争。盒蒙,毕竟盒,揉难免奇怪,证2模独立,互扰。

写给新手的APP结构指南:首页相关(上)

首页功,举例,趣研究研究。

4. 城市/地址定位

功相熟,获取户授权,根据范围供相应,功见,类、类、类();户首页刷,准,户除需改击它。功见首页搜索框左,展首页某寸土寸,类类,户资添收址,择址,需户改,首页脆隐藏掉;类或需供及送,需户查改,类将功首页予留,举2例:

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

写给新手的APP结构指南:首页相关(上)

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

写给新手的APP结构指南:首页相关(上)

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

5. 搜索模块

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

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

写给新手的APP结构指南:首页相关(上)

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

写给新手的APP结构指南:首页相关(上)

  • 扫扫/相扫描识:扫描条码或识,搜索结类似;
  • 关键词联想:这个功能十分重要,可以减少用户输入,每输入一个字段就要加载一次,将联想的结果展示出来,方便用户快速找到目标搜索对象;
  • 清空关键词 button:一键点击快速清空错误关键词或更换新的关键词;
  • 返回/取消/搜索 button:如果搜索框左侧没有返回 button,右侧就会有取消 button;如果左侧有返回 button,右侧取消 button 可以变为搜索 button;
  • 分类 tab:针对当前分类下进行关键词搜索,更加快速、准确;
  • 历史搜索+空搜索录:留历史搜索录户键击,搜索,避免复操,删除搜索录必,减页息占,效护户搜索隐私;
  • 热门搜索:可能是搜索热度较高的关键词;运营需要主推的关键词;大数据推荐猜你感兴趣的关键词;
  • 语音输入:用户通过语音直接说出关键词,免去输入步骤,可以方便老年人/残疾人或是特殊场景下也能使用搜索功能;
  • 输入键盘:进入搜索页键盘默认弹出;搜索 button 最好设置在键盘上,会更加方便;关键词输入结束后用户上下滑动查看搜索结果时键盘要自动收起;

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

6. 扫一扫

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

写给新手的APP结构指南:首页相关(上)

  • :扫码识+相册照码识+书籍/CD 封识+识(功)+照翻译+操示+筒(暗,引导户验);
  • 支付宝:页面布局和交互跟微信类似,区别是页面底部的 AR tab;AR 扫描相信大家应该都体验过了,春节期间 AR 扫福字和扫红包也是大热;
  • 淘宝:底部 AR/扫码/拍照识别tab(tab间切换会有动效)+识别历史+相册照片二维码识别+手电筒+帮助+操作文字提示+广告;
  • 京东:顶部 扫码识别/拍照识别/AR tab+识别历史+交易记录+输入条形码+操作文字提示+手电筒+底部 付款码/支付优惠/相册照片二维码识别/会员码;没有看出页面底部放置付款码/支付优惠/会员码功能的用意,点击是跳转到下级页面,是否有点多余?相册照片二维码识别功能不应该穿插其中,个人感觉体验不是很好。

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

小结

文章略长,上半部分只说了关于首页顶部的一些内容,可能有一些功能不是普遍现象这里就不多说了,整体写下来感觉内容还是蛮多的,如有不足之处大家可以留言探讨,总之希望对你有所收获,下半部分将尽快进行更新。

欢迎关注作者的公众微信号:「Eason张UED」

写给新手的APP结构指南:首页相关(上)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

现代人对于健康越来越重视,而移动端APP 在这方面为用户提供了多种多样的帮助。无论是系统化的健身应用,还是卡路里计算器,...
App设计
多年以前,当我们刚刚开始频繁听到「大数据」这个词的时候,很多企业和团队的负责人开始认为,这是他们所缺少的东西,是让产...
App设计
通过APP来构建面向用户的解决方案,是目前企业常见的思路。相比于移动端网站,APP有着功能更加强大的框架和针对性更强的特点...
App设计
@途家UED :如何把控图标设计的风格,在什么场景该如何应用,本篇文章就为大家解决这些问题。 什么是图标 图标的功能分类 ...
入门
在设计移动端APP的时候,最重要的一点是确保界面和交互足够有用又清晰直观。如果这两个基本的特征都无法达成,用户是没有足够...
App设计
我们在进行设计的时候,往往遇到以下的场景: 这就是信息的无限性和手机屏幕的有限性之间的矛盾,如何把信息合理的展示给...
App设计
在手机app应用中各种格式的弹窗效果相信大家都看过,也可能反感过某些弹窗,本文就来谈谈关于app弹窗设计以及弹窗的适用情景...
App设计
网易 UEDC  – 崇书庆 :经常被人问起「如何入门交互设计」,也做过很多次解答,今天便系统地和大家聊聊。 提示:这篇文章会...
交互设计