<menuitem id="mh6do"></menuitem>

    
    
    <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
    <ol id="mh6do"></ol>
      <em id="mh6do"><tr id="mh6do"></tr></em>
      <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

      <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>

      您的意见是我们 UI 中国进步的动力!
      点击立即反馈按钮,发表您的意见!
      立即反馈
      QQ群反馈
      您?#37096;?#20197;加入UI中国官方反馈群进行反馈!
      群号:302892100
      备注:反馈问题后@管理员能让我们及时了解您的意见

      页面加载功能设计总结

      原创文章 分类: 经验/观点 版权:
      12055 220 290 12
      2019-06-19
      81.8
      首页推荐

      去年我写过一篇文章返回功能应该怎么设计,今年反其道而行,来聊聊产品中的“前进”功能。


      关于“前进?#20445;?#25105;们很难给出一个准确的定义。狭义上的“前进”指的是用户触发某个交互动作进入一个新页面。如何在进入一个新页面的过程中给予用户良好的体验呢?#35838;?#20204;可?#28304;?#20197;下三个方面进行分析:指示器、方向顺序


      指示器


      用户每次进入一个新页面都要从后台请求数据,数据返回到页面完成渲染,内容才会展示出来。这个过程需要时间,需要用户去等待。指示器的作用就是填补用户等待的时间,减少用户因等待而产生的焦虑情绪。


      Image title


      1) 告诉用户系统当前的状态


      防止用户焦虑首先我们要告诉用户页面加载的过程正在进行。如果我们不提示用户,那么用户看到的就是一尘不变的白屏。就像下图的酷我音乐一样,用户点击进入“直播页?#20445;?#27809;有任何元素提示用户页面内容正在加载中。一旦你不知道自己所等待的流程是否正在进行,那么等待就是漫无目的的,焦虑情绪也会产生。


      Image title


      作为?#21592;?#25105;们可以看一下飞猪的处理方式,这里使用了一个loading动效弹框告诉了用户页面正在加载中。及?#22791;?#35785;用户系统当前的状态可以很好的起到安抚用户的作用。


      Image title



      2) 品牌基因植入


      指示器的样式并没有特殊的要求,虽然大部分的产品使用的都是上面所提到的loading弹框,但是指示器样式和载体并不只限于此。我们可以选择进度条,?#37096;?#20197;将loading的动效放到标题栏。


      Image title


      如果我们更进一步,可以将品牌基因植入指示器的设计中。还是以飞猪的loading动效为例,这里采用了飞猪logo的形状。当然选择传统的菊花动效同样可以,但是这个无法体现产品之间的差异性。


      Image title



      指示器在产品中出现的场景会很多,我们可以花点心思,做的尽量精致一点。很多产?#33539;?#36873;择通过一些有趣的动效分散用户在等待过程中的注意力。


      Image title



      方向


      页面在水平方向上跳转目前来说依然是主流,分为左右平移覆盖平移两种。


      Image title



      当然不管是哪种,?#25353;佑业?#24038;”的页面跳转方式大行其道的原因是它这符合用户对于一个线性操作流程的的直观感受。


      Image title


      目前也有很多产品选择在竖直方向上加载页面,?#28304;?#19979;往上居多。那么竖直方向和水平方向的区别在哪呢?这个在上面也提到过,水平方向的页面流符合用户对于操作流程的直观感受。例如,在购买火车票流程,用户的主流程是:选择车次-选择座位等级-填写订单-付款-订票结果。对于这样的主流程,我们选择从左?#25509;业?#39029;面流,而新增?#39034;?#20154;信息我们可以看成是这个主流程中的一个支流,从底部弹出更加合适。


      交互设计一定要符合用户的心理?#29616;?/strong>如果这个页面从底部弹出,会给用户一个暗示:这个页面是底部弹出的,那么我下拉是否就可以关闭这个页面呢?还是以“新增?#39034;?#20154;”页面为例,这里还是秉持着iOS?#19968;?#36820;回的机制。这个就造成了一个“手指向右,页面向下”的奇葩交互样式,明显有悖于用户的?#29616;?#24403;然也?#20889;?#29702;很好的,可以看下网?#33258;?#38899;?#25351;?#26354;评论页,点击返回按钮页面是向下关闭的,手指?#19968;?#39029;面是?#19968;?#20851;闭的,做了区分


      Image title


      有用户觉得手指?#19968;?#36820;回上一界面非常的方便。

      向右返回上一个页面的确很方?#24726;?#20294;是页面向下不合理。


      这种处理方式也给我们带来了启发。例如,微信中用户点击浮窗,文章页面是扩展开来的。那么我们可以脑洞一下,用户双?#25913;?#21512;的手势是否可以关闭文章页?


      Image title



      顺序


      用户触发?#22235;?#20010;交互动作进入一个新页面,然后页面和后台开始进行数据传输,数据传输完成后在页面渲染。这是用户进入一个新页面所经历的几个重要阶段,如下图所示,这里我将其分成了4个阶段。接下来我们从阶段1开始梳理页面加载过程的每一个步骤,力图发掘可以优化的点。


      Image title



      1)执行操作


      从用户的角度来看,当他执行完操作1,后面的步骤就跟他没有关系了。那么在页面渲染完成前,我们应该给用户展示一个什么样的页面呢?上面看到的几款产品,他们的处理方式简单?#30452;?#30333;屏。这对用户来说,不是一个友好的体验。如果你的页面布局样式相对固定,可以考虑先给用户展示页面框架,然后再展示具体的内容,这种加载机制就是占位符,又可以称之为“骨架屏”。


      Image title


      与彻底的白屏相比,先给用户展示页面框架,用户在页面数据没有加载完成的情况下?#37096;?#20197;了解页面的大致结构。此外用户一进入这个页面,发现这个页面不是空荡荡的,它已经有东西了,会觉得页面已经加载出来,从而产生一种“零等待”的错觉,体验更加流畅。


      2)先文字,后?#35745;?/span>


      一个页面的内容量是很大的,如果我们获取完所有的信息才在客户端渲染,所耗费的时间是很长的。因此为了缩短用户的等待时间,我们可以考虑先展示一些网络资源较小的内容。例如,先加载文字,再加载?#35745;?/p>


      Image title


      我们都知道5G时代即将到来,信息传输的速度大大加快。是不是意味着我们不需要考虑加载顺序?#22235;兀?#24403;然不是!


      将信息展示给用户只是界面设计的最基本要求,我们的最终目的是帮助用户理解这些信息。一个页面的信息量是很大的,网速的提升可以做到让页面立马加载完成,但是一股脑的把所?#34892;?#24687;展示给用户是否合理?分步骤地给用户展示信息,让用户更容易消化可能会更合适。例如,用户要查看跑步路线图,此时用户的注意力必然都在不断生成的跑步路线上,这个时候其余的内容可以延后展示,避免造成干扰。


      Image title



      3)预加载


      用户必须要进入这个页面才可以请求数据吗?可不可以事先加载好页面信息,这样用户进来就不需要加载了。这种提前加载好页面内容的机制就是预加载。网易新闻中,断网依然可以查看新闻,即使这条新闻你从来没?#20889;?#24320;过。


      Image title



      不止是页面


      在文章最开头我说的是:狭义上的“前进”指的是用户触发某个交互动作进入一个新页面。为什么强调是“狭义?#20445;?#22240;为用户只要触发某个交互动作完成状态的迁跃,我们都可以认为是“前进?#20445;?#21482;不过我们习惯于使用一个新页面来表?#20013;?#29366;态。当然现在我们学会使用弹框了,这是一个进步。我们添加商品到了?#20309;?#36710;,不需要进入一个“添加成功”结果页,直接一个toast就可以了。


      Image title



      但弹框是最终答案吗?我们的最终的目的是为了让用户感知系统状态的变更,而用户与系统交互的触点又是一个个操作对象,为什么不直接通过改变操作对象的样式来完成信息的传达呢?还是添加商品到?#20309;?#36710;的操作,这里通过动效演示了这个过程,不用任何文字,用户就能明白“商品已经添加到?#20309;?#36710;”这个事实,并且提示了用户?#20309;?#36710;的位置,信息的传达更具有指向型。


      Image title



      总结


      以上就是我对页面加载方式的简单分析和总结,如果你有其他的意见或看法?#38431;?#30041;言或者加群讨论


      新书热卖中,点击购买


      Image title


      微信公众号:王M争

      王M争

      微信公众号:王M争

      7461粉丝/78关注

      首页霸主身经百战人气明星分享帝lv.1收藏家lv.3
      「评论」功能设计总结轻量化设计总结
      2
      五彩斑斓

      湖人总冠军

      精彩!

      王M争

      TA已经获得14枚勋章啦

      • 成就勋章

        • 特别勋章

        • 身份勋章

      • 已拥有

      • 作品

        创造者才是真正的享受者。

      • 经验

        经验是一所好学校,可它的学生却经常旷课。

      • 活跃

        大神都是从围观群众开始的

      • 拓展

        作品、经验、活跃还不能满足你?

      京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

      印度快乐8开奖号码
        <menuitem id="mh6do"></menuitem>

        
        
        <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
        <ol id="mh6do"></ol>
          <em id="mh6do"><tr id="mh6do"></tr></em>
          <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

          <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>
            <menuitem id="mh6do"></menuitem>

            
            
            <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
            <ol id="mh6do"></ol>
              <em id="mh6do"><tr id="mh6do"></tr></em>
              <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

              <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>
              合法彩票投注网站 一尾主两码中特 一肖中特免费免费资料大全 六肖中特今晚特码 北单开奖结果 广东20选8玩法规则 779彩票官网 腾讯分分彩每天几点开始 电子游戏3d人物 河北十一选五专家推荐人四 浙江飞鱼彩票历史开奖结果 竟彩计算器 黑龙江快乐十分钟开奖结果 118心水论坛.118论坛 六合彩一尾中特平