• 转载
  • 前端开发
  • Web前端必知的5个优化技巧,可以提高移动Web应用程序用户留存率

    2020.04.24 15:28发布

    6066人阅读

    0人评论


    截至2020年,互联网流量大约一半是移动端,一半是桌面端。谷歌看的是你的移动网站版本,以决定在索引时将你的页面排在什么位置。相当一部分的年轻用户甚至根本就不使用桌面设备了。


    这3个事实表明,为什么针对移动端使用的网站优化比以往更重要。更重要的是,移动用户在移动设备上的用户体验问题比桌面用户更挑剔,也更容易在潜意识中受到刺激。如果你的网站在移动设备上的表现有问题,那么你的移动用户留存率很可能会受到影响。


    除了为600px宽度以下的设备使用不同的CSS样式外,这里还有一些技巧可以优化你的移动网站。


    1. 移除移动幽灵阴影点击效果


    原生应用没有,移动浏览器有。当你单击任何按钮或任何可单击的对象(例如图标)时,使用Safari或Chrome浏览器的用户将看到阴影单击效果。


    <div>、<button>或其他被单击的元素将具有简短的基础阴影效果。这种效果应该是给用户反馈,让用户知道有什么东西被点击了,结果应该会发生什么。这对于网站上的很多交互来说是有意义的。


    但是,如果您的网站实际上已经足够响应并包含加载数据的效果了怎么办?或者您使用Angular,React或Vue,并且很多UX交互是瞬时的?阴影单击效果可能会影响您的用户体验。


    你可以在样式表中使用以下代码来摆脱这种阴影单击效果。不用担心,即使您需要将其作为全局样式添加,它也不会破坏其他任何内容。


    * { 
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    2. 使用用户代理检测用户是否从移动设备访问


    我不是在谈论针对宽度小于600px的设备放弃特定于样式表的 @media 代码。相反。您应该始终使用样式表来使网站移动友好。


    但是,如果要根据用户是否在移动设备上显示其他效果,该怎么办?你希望将它包含在JavaScript函数中——并且您不希望在用户更改其智能手机方向(将宽度增加到600px以上)时更改它。


    对于这种情况,我的建议是使用可全局访问的Helper函数,该函数根据浏览器的用户代理确定用户设备是否为移动设备。


    $_HelperFunctions_deviceIsMobile: function() {
     if (/Mobi/i.test(navigator.userAgent)) {
        return true;
     } else 
        {return false;
     }      
    }

    3. 加载移动版本的较大的图像


    如果你使用大图像,并且想要确保移动设备上的加载时间仍然适合你的移动用户,请始终加载不同版本的图像。



    <div class="generalcontainer nomobile">
       <div class="aboutus-picture" id="blend-in-cover" v-bind:style="{ 'background-image': 'url(' + image1 + ')' }"></div>
    </div>

    <div class="generalcontainer mobile-only">
       <div class="aboutus-picture" id="blend-in-cover" v-bind:style="{ 'background-image': 'url(' + image1-mobile + ')' }"></div>
    </div>

    在你的CSS文件中,定义 mobile-only 和 nomobile。


    .mobile-only {   display: none; }
    @media (max-width: 599px) {
     ...
     .nomobile {display: none;}
     .mobile-only {display: initial;}

    4. 尝试无限滚动和延迟加载的数据


    如果您有大型列表,则应考虑在用户向下滚动时延迟加载更多数据,而不是显示“加载更多或显示更多”按钮。原生应用程序通常包括这样的延迟加载的无限滚动功能。


    在移动web中使用Javascript框架实现这一点并不难。您可以在模板中的元素上添加引用($ref)或仅依赖于窗口的绝对滚动位置。


    以下代码显示了如何在Vue应用中实现这种效果。可以在其他框架(例如Angular或React)中添加类似的代码。


    mounted() {
     this.$nextTick(function() {
        window.addEventListener('scroll', this.onScroll);
        this.onScroll(); // 需要初始加载页面
     });        
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.onScroll);
    }

    如果用户滚动到某个元素或页面底部,则onScroll函数将加载数据:


    onScroll() {    
      var users = this.$refs["users"];
      if (users) {
         var marginTopUsers = usersHeading.getBoundingClientRect().top;
         var innerHeight = window.innerHeight;
         if ((marginTopUsers - innerHeight) < 0) {
             this.loadMoreUsersFromAPI();
         }                               
      }  
    }

    5. 使模态和弹出窗口全屏或全屏显示


    手机屏幕的空间有限。有时,开发人员会忘记这一点,并使用与桌面版本相同的界面类型。尤其是模态窗口,如果不正确的实现,对移动用户来说是个关卡。


    模式窗口是你叠加在页面其他内容之上的窗口。对于桌面版用户,他们可以很好地工作。


    由于屏幕空间有限,大型公司的移动网页应用(如Youtube或Instagram)设计得很好的移动网页应用都会把模态做为全宽或全屏,在模态的顶部有一个 ”X“ 来关闭。


    注册功能尤其如此,在桌面版本中,注册功能是普通模式窗口,而在移动版本中,则是全屏模式。


    文章来源于网络,版权归原作者所有,内容为作者个人观点,文章仅供学习,如有侵权请联系客服删除,本站拥有对此声明的最终解释权。


  • Web前端
  • 前端优化方案
  • 举报文章

  • 收藏博客:

  • 分享至:
  • 添加评论

    请先登录再评论...

    登录

    评论列表(条评论)

    没有更多评论了