如何设计让app更快?

深圳/产品设计师/7年前/343浏览
如何设计让app更快?

这篇文章分享如何通过一些设计方法让app“看起来”更快,提高产品的用户体验。

在这个快节奏的信息时代里,大家难免会有一丝焦躁,那么产品在时间和速度上的体验很大程度会决定最终用户是否愿意为产品买单。其实交互设计师可以在设计阶段就考虑速度的优化问题,后面结合开发技术去实现。




1.预填充、加载内容,“看起来”很快


用户打开app时如果遇到网速不够好,就很容易卡在当前页面上,从心理学的角度来看,用户很容易产生烦闷,直接跳出app了。那么假设页面上可以预填充一些文字或图片进行占位,或者先显示一部分信息,加载完之后真实的文字和图片直接显示出来,会让用户得到“速度很快”的惊喜。




比如dribbble是一个面向设计师等呈现创意类作品的人群,提供作品在线服务、查看的交流网站。那么它经常会加载海量的图片,在app打开加载时预先填充一些浅色的色块,让用户感受到页面有内容,以及内容的布局情况,等图片加载完成后,真实有趣的图片立刻显示,用户进入这个app并不觉得很卡,反而觉得效率很高。





比如打开建设银行app或招行掌上生活app时,启动页面上先显示logo信息,再加载完整个启动页面,尽管都是静态的图片,但是有感觉迅速在启动。所以我们在设计页面时可以根据实际情况适当将一些信息放在本地,当页面打开未完全载入时可以先显示本地数据,紧接着后面网络数据很自然地获取显示,这样会让用户获得“快速动”的直观感受。




2.后台操作并行,不影响前台


在后台执行一些操作,同时适当转移用户的注意力。当执行某项操作需要等待一定时间时,如果用户在这个时间“无所事事”,要么也许会点“退出”放弃,要么焦躁不安。所以可以在这个时间内可以并行做其他操作。




比如搜狐新闻app中,视频在加载时,用户可以滚动浏览和操作视频区域之外的内容,转移注意力,等视频加载好自动播放几乎意识不到时间过去多久,当然除非网络很差和无网络情况例外;

网易云音乐app中,如果未下载过该歌曲,点击下载按钮后自动弹出1~2s的toast提示:“已加入下载队列”,后台执行下载歌曲操作,不影响用户听歌和其他操作;




3.变速进度条


使用变速的进度条效果更好些,因为文件很大的时候还全程匀速的情况很容易引起情绪焦躁,变速的情况有先快后慢或者先慢后快,先快后慢的场景下刚开始超出用户的心理预期,用户情绪比较高涨,后面稍微慢一点也有耐心等待;先慢后快的场景下,认为用户一开始比较平静、有耐心可以等待一定时间,接着进度条提速给用户制造了惊喜,同样也达到“快”的效果。




比如打开王者荣耀app,当它有版本更新时,先初始化资源包,进度条一下子达到100%,视觉上产生冲击,让用户情绪高涨起来,接下来下载资源包(资源包文件相对大)到后面的解压资源包均是变速的过程,速度由慢到快和由快到慢不断变化,有了加速度看起来快很多,效率很高,其中解压资源包的提示文案“过程不耗流量”,打消用户疑虑,进一步强化了体验效果。




4.预先自动更新


考虑到现在用户打开app一般想看到的是最新前沿的信息,所以会有刷新查看这一高频操作,我们可以在用户进入app就触发自动更新页面内容,随即出现toast提示或小红点、“NEW”的标识,这时用户可以直接看到更新的信息或点击带红点标识的icon等就可以直接获取想要的信息,不需要再操作等待加载更新。





比如打开新浪微博app,自动更新微博内容,顶部toast显示“更新了xx条微博”,底部标签栏中“消息”标签旁有小红点,点击可以看到最新的消息;同理,豆果美食app刚打开时自动更新页面内容,顶部toast提示“有xx条更新”,同时右上角消息icon出现小红点提示。




5.微动效


现在很多app页面都会适当加入一些交互微动效,包括入场、出场动效,过渡动效和加载动效等,减少用户等待的煎熬,让心情舒畅起来。就像我们在欣赏一场音乐会或者歌剧,当真的能调动你的情感时,会发现时间过得飞快。




以上gif动图来自网络




总结:

以上是关于如何通过设计能让app变快的方法,其中有预填充、加载内容,后台操作执行,变速进度条,预先自动更新,微动效等等,从心理上让用户在等待的过程心情愉悦,从交互细节上让用户有“快”的变化,无形中整体提高了产品的用户体验。


8
Report
|
5
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
2025 Annual Portfolio
Homepage recommendation
大家都在看
Log in