网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 网站建设 » 正文

手机端官网设计:适配还是不适配这是个问题

2019-3-13 12:44:16 | 作者:老铁SEO | 1个评论 | 人浏览

  无适配不仅仅是布局和内容没有做适配,交互动作也没有做适配。原本为pc端设计的网页在手机端往往会缩小,然后变形,大部分操作会失效。

  极简适配就是又想做适配,又因为其他种种原因,所以对内容进行删减直到剩下最后一个页面,用一个页面去呈现最基本的产品介绍以及下载按钮。

  做了适配的官网会在手机端有良好的表现。当然,Pc端的官网有时候体量太大,在适配到手机端的时候会有删减。

  以上是QQ浏览器的官网(,可以看到,在手机端,内容被挤压到中间偏左的地方,已经变形了。同时,在pc端时,网页的操作是“鼠标滚轮滚动切换页面”,映射到手机端应该就是“滑动页面切换页面”,但是交互动作也失效了。

  QQ浏览器没有做适配的原因非常简单:这是一个pc产品的官网。用户用手机访问该官网的场景几乎不存在,所以不做适配也无可厚非。

  只是,即使不适配,那么是否有更好的方式去避免这种问题。既然手机端访问pc产品官网可能性极小,同时体验这么差,能否尝试强制跳转到手机版的官网呢?这样子或许会更好吧。

  以上是kingroot的官网(),可以看到,该页面的变形和QQ浏览器的官网很相似。都是内容的错位以及交互动作的失效。

  Kingroot官网没有做适配的原因可能和QQ浏览器有点类似,但是又不尽相同。虽然可能同是出于访问量极少的原因,但是不同的是,手机端下载的渠道几乎都是应用分发平台,用户去官网下载的概率比较小。所以,评估一下产出和收益,就不做了吧。

  以上是腾讯手机管家的官网(,可以看到,手机管家的手机端和pc端完全不是同一个东西,pc端的内容大而全,手机端只保留最基本的产品宣传介绍的东西。

  腾讯手机管家这么做得原因,可能是出于产品定位的考虑,即:pc端和手机端的官网定位不同。

  PC端官网的定位可能更多以“平台”为主,所以我们可以看到,官网上面宣传的内容相对比较少,更大的篇幅是让位给了其他各种功能,比如说首页就可以看到的:“WiFi开放平台”、“号码公众平台”、“恶意线索举报”以及“在线查毒”。

  手机端的官网定位以“产品介绍”为主,所以页面只要把腾讯手机管家的亮点秀出来、然后附上下载链接即可。

  同时,手机端本身有访问网速慢。所以需要对展示的内容进行重新筛选,因此会删除大量用户需要的信息。

  最后保留下来的信息需要考虑页面大小的问题,剩下的信息需要重新排版以符合手机端的显示效果。

  访问量小只是一个补充的因素,因为访问量小,所以即使删减信息也没有关系,毕竟影响的范围小。

  以上就是360极客版的官网(),从图片可以看到,PC端和移动端的区别除了在页面布局上的区别外,更大的区别实际上是信息架构的区别。PC端的信息架构更加复杂,而手机端只保留了最基本的“产品宣传”以及“下载”功能。同时,在PC端首页的图片变成了手机端的文字(详情请访问该网页)。

  手机端本身有访问网速慢。所以需要对展示的内容进行重新筛选,因此会删除大量用户需要的信息。

  最后保留下来的信息需要考虑页面大小的问题,剩下的信息需要重新排版以符合手机端的显示效果。

  访问量小只是一个补充的因素,因为访问量小,所以即使删减信息也没有关系,毕竟影响的范围小。

  说明:“适配”和“极简适配”区别只是信息的不同。“适配”保留的信息会更多,“极简适配”保留的信息较少,两者并没有什么明显的界限。至于信息保留的多少,应该以产品的定位为准。

  以上猎豹清理大师的官网()。可以看到,两者在信息架构上没有区别,同时,对内容进行了重新排布以适应手机端的屏幕。更重要的是,猎豹清理大师的官网有对交互动作进行了适配。在PC端,首页的内容是滚动鼠标滚轮一次,页面切换一次。在手机端映射为,每滑动一次屏幕,屏幕切换一次。在这点上,PC端和手机端体验非常一致。

  手机端本身有访问网速慢。但是在页面信息本来就不多的情况下,内容可以根据产品定位进行取舍。

  保留下来的信息需要考虑页面大小的问题,剩下的信息需要重新排版以符合手机端的显示效果。

  所有的产品在设计的时候都离不开定位的问题,网站的设计也一样。特别是在PC端网页已经存在的情况下,定位的问题更加要思考清楚。

  可以这么说,每个产品的官网在初期都是产品介绍类,因为这时候,官网的作用更多的是以介绍宣传为主,可能附带有下载的功能。

  随着产品的成长,用户人数增加,可能每个产品或多或少都有做平台的野性,对于一些有条件的产品,其官网会逐渐演变成平台类的官网,这时候,官网的宣传作用就处于较低的地位,更多时候,官网是提供服务的入口。

  两种不同类型的PC官网在做手机端适配的问题,考虑的问题都是一样的,就是,手机端的官网的定位如何。一般而言,手机端由于屏幕以及网络的原因,做成平台类的不太现实。但是,手机端的官网依旧可以保留必要的功能入口。

  最理想的状况是“分工合作”。比如说:手机端可以快捷获取到手机号等个人信息、有丰富传感器、可以随时随地推送通知;PC端有足够的空间展示信息、键盘鼠标输入非常便捷。发挥两个平台不同的优势去设计。然而,这只是理想状况,目前还没有发现此类网页设计。

  最省力的状况是“照搬全抄”。即两个平台的网页信息架构相同,改变的只有页面布局以及交互方式,比如猎豹清理大师的网页。这种情况很好地保证了体验的一致性,但是只适合信息架构比较小的网页,所以在大部分情况下可能不适用。

  最明智的状况是“因地制宜”。即结合以上两种,既允许两个平台有功能的重叠,也保证有各自的特色。不过,鉴于是官网的设计,所以更多情况下,手机端的网页只是PC端网页的一个mini版。

  网页中,文字是常见的元素。初次之外,还会有诸如图片、视频、音乐、程序或者链接等超文本的元素。

  以上是网站在pc端和手机端的对比图,可以看到,在pc端时,品牌logo旁边还有一句宣传语,但是在手机版的时候已经精简掉了。

  以上是网站在pc端和手机端的对比图,可以看到,在pc端时,tab栏是图案加文字的形式,但是在手机版的时候已经被简化到只剩下图案。需要注意到的是,如果简化掉的是图案而不是文字的话,手机端是容纳不下那么多的tab栏目的。

  以上猎豹清理大师的官网()。重组之前可以先对页面显示的内容进行分块,比如上图,pc端的内容可以分成两块。分块之后,原本两个方块的布局是一左一右,在手机端的时候就可以变成一上一下。

  更多的时候,pc网页可能同时在横向会有很多方块。这时候可以通过页面的宽度调整横向排列的方块的数量。如下图:

  某些导航栏的tab栏可以考虑使用Material design的汉堡菜单,将导航收起来,把更多的位置留给内容展示。

  以上是在手机和电影的对比图。pc端的导航tab在手机端被隐藏起来了,变成了侧边栏,这样就可以把主要的区域用于内容的展示。

  在确定好手机端网页内容以及页面布局之后,需要考虑交互动作的适配。下面是我总结的一些交互动作在PC端和手机端的映射,仅供参考。

  官网是否在手机端进行适配,除了产品本身的环境(PC端还是手机端)之外,还要考虑成本和收益的问题。不过总归,适配能给用户更好的体验。

  本文由 @yqqyzy 原创发布于人人都是产品经理 ,未经许可,禁止转载。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:网站建设方案排版  
  • 已有1位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。