App启动页和引导页注意事项

0 本文目录

1 什么是app启动页?

2 为什么要有启动页?

3 合理的启动页是什么样?

4 iOS和android启动页的合理尺寸?

5 如何实时更新app启动页?

1 什么是app启动页?

一张图告诉你什么是app启动页!(请看微信启动图)

App启动页和引导页注意事项

启动页(loading screen),也叫闪屏(splash screen)。启动页是点开app图标之后进入的第一个页面,是一个承上启下的作用。

苹果官方给出的关于iOS启动页的设计说明:

为了增强应用程序启动时的用户体验,您应该提供一个启动图像。启动图像与应用程序的首屏幕看起来非常相似。当用户在主屏幕上点击您的应用程序图标时,iPhone OS会立即显示这个启动图像。一旦准备就绪,您的应用程序就会显示它的首屏幕,来替换掉这个启动占位图像。请记住,启动图像并不是为您提供机会进行艺术展示;它完全是为了增强用户对应用程序能够快速启动并立即投入使用的感知度

也许,你听过一个说法:app启动页要控制在7秒之内。为什么是7秒呢?

心理学上有个“七秒钟理论”,就是说人与人在见面的时候,产生的好恶决定于见面的头七秒钟。看似挺有道理,但大部分人都没意识到,该理论说的是“头”七秒钟,不是每次七秒钟,如果你希望你的app是满足用户真实需求、希望用户时不时就打开用一下的那种,就不要在每次启动时都弄个几秒钟的美图、动画之类的来恶心用户了。

2 为什么要有启动页?

在最初的时候,一些app启动需要花费很多时间进行初始化(比如从数据库拉取数据填充首页......),开发者为了不展示一个空白的页面给用户,发明了启动页。

后来,很多不需要启动页的应用,意识到启动页还能有其它的用途,比如品牌展示、广告展示等,也开始打起了启动页的主意。

渐渐的,就形成了一种惯性......

所谓的启动页其实是一种欺骗用户的手段,为了掩盖app启动比较慢的事实,让用户在等待的过程中忽略这个开启加载速度的过程,目的是为了提高用户体验,降低用户焦虑感。毕竟,能够秒开的app太少了。

用户看到启动画面,产生一种app马上就能进去的错觉;不致于等了半天app都没反应,以为app出bug的错觉。这是常用的提高用户体验的手段,类似的还有360垃圾扫描时,显示扫描垃圾的路径,让用户真真切切的看到过程,不至于觉得心里没底,不至于觉得等待的时候很长......

3 合理的启动页是什么样?

  1. 努力优化app的启动时间(合理的缓存技术、适当的异步任务调度等),尽量在应用程序中做最少的事情,使app的主页面在3秒内成功加载。就像QQ、微信等。
  2. 在应用启动的时间内,使应用的背景和app的主页面一致,产生平滑的过渡。就像支付宝(我刚打开支付宝好像没有启动页面了...)
  3. 如果非要设置启动页面,可以考虑在用户第一次装应用的时候显示,然后进入注册登陆页面。就这一次就足够,以后就不要再显示了。

4 iOS和android启动页图片的合理尺寸?

  1. iOS:
    按照非retina3.5英寸、retina3.5英寸、4英寸、4.7英寸和5.5英寸来分:

    • iPhone 4/4s(non-retina 3.5):320x480
    • iPhone 4/4s(retina 3.5):640x960
    • iPhone 5/5s/SE(retina 4):640x1136
    • iPhone 6/6s(retina 4.7):750x1334
    • iPhone 6 plus/6s plus(retina 5.5):1080*1920
  2. iPad
    • 12.9英吋(iPad Pro):2048*2732
    • 9.7英吋(iPad Pro、iPad Air、iPad mini 4、iPad mini 2):1536*2048

 

  1. 安卓:
    按照dpi来分,目前有6个:l/m/h/xh/xxh/xxxh:

    • ldpi - 240x320
    • mdpi - 320x480
    • hdpi - 480x800
    • xhdpi - 720x1280
    • xxhdpi - 960x1600
    • xxxhdpi - 1280x1920

5 如何实时更新app启动页?

App启动页和引导页注意事项


www.cooleapp.com

发表评论,文明发言,遵守法律法规一律通过

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: