APP加载

作者: 马老师0000 | 来源:发表于2016-01-20 18:26 被阅读291次

    不经意发现今年已经写了近50篇博客。先前使用Lofter,但网站经常不稳定,便转移到简书。精品太少,更多的是自我记录、梳理思路,希望此后更用心书写。绘事后素,切磋琢磨。

    LOFTER网址:1、产品分享;2、JerryMa


    分享一篇之前的博客,全文如下:

    APP加载

    出现APP加载的页面分为三大类:下载/安装页、启动加载页、内容加载页。

    一、下载/安装页

    二、启动加载页

    1、固定的加载页

    用于展示品牌形象,重复出现,增强记忆

    微信.png

    可优化点:

    A 与首页保持视觉延续性

    B 使用动画效果

    C 展示乃至告知进度

    京东.png

    2、调整的加载页

    节假日定制、活动定制、不同版本定制

    三、内容加载页

    内容加载页中,常见的加载方式大致有5种:

    1、全屏加载

    全屏加载就是整个屏幕白屏进行加载


    如Zaker加载热点视图时:


    微博加载好友关注动态:


    2、优先加载

    优先加载使用户不间断去接触信息,以渐进的方式进行加载。文字的加载往往优先于图片。优先加载要求内容需要按重要性排序,另外要求相比子内容,优先加载父内容。


    Lofter搜索页:


    ZAKER频道信息页:


    3、自动加载

    自动加载适用于瀑布流、长列表内容的页面,设定每隔10 or 20块内容加载一次。PS:优点是吸引用户浏览更多内容,缺点是迷失位置,故常常加上一键置顶的功能。


    如微博首页:

    4、智能加载

    当网络环境不好(无WiFi、弱网),需要简化处理图片、动画、视频传输数量大的组件的显示方式,以此控制整体的加载速度和用户消耗的流量。这种根据网络状况智能调整的加载方式,称为智能加载。


    5、离线加载

    当APP处于无网,特别用户处于地铁等环境时,许多内容不可见、功能不可用。这种设计会让用户产生挫败感。优化方向是采用预加载和离线缓存。



    下图为ZAKER的离线加载功能:


    特殊情况:页面中下载内容,给出相应下载进

    四、加载优化

    当能保证加载结果,即能够显示页面,加载的优化在于用户体验。

    从情感角度,APP加载对用户来说,即意味着等待,等待则产生焦虑、失落。优化方向:A、结果导向:减少加载时间(性能层面)或让用户感知时间且感觉耗时少(感觉层面);B、过程导向:让用户忘记时间、享受过程。

    具体优化方法,包括:

    1、预加载

    所谓预加载,就是提前在后台加载下一步可能浏览的内容,不在前台展示。这样保证了用户浏览内容的顺畅无阻。预加载常应用于瀑布流。对于图片的预加载,其过渡效果就是图片由模糊变清晰。

    2、模态加载可取消或采用非模态加载

    模态加载的一个优化方法是提供取消加载的功能,否则一直加载又无法查看内容,会让用户极不耐烦。

    采用非模态加载是更好的选择:


    Line的通知加载:在通知项中加载,不影响阅读上下内容


    3、告知进度

    常见的有进度条和活动圈,分为显示和不显示百分比。
    下图为浏览器常见的设计:


    4、情感化的动画设计

    用动画效果吸引用户,乃过程导向,旨在不产生等待的焦虑
    下图为零售/生鲜电商的场景化设计:


    参考:
    1、浅谈移动端App的页面载入方式
    2、App6种常见的数据加载设计
    3、从app加载页面说开去
    4、3种常见的移动APP页面加载设计方案优缺点

    相关文章

      网友评论

          本文标题:APP加载

          本文链接:https://www.haomeiwen.com/subject/idrlkttx.html