Blog · Homepage ·

官网移动端优化应该先看什么?

从搜索进来的访客,大多是在路上或空闲片刻用手机打开官网。但制作和验收仍然多在大屏幕上完成,于是真正的客户所看到的那块屏幕,反而没人从头到尾确认过。本文讨论访客在移动端流失的位置,以及那块屏幕上应该先动手的要素。

一句话总结

官网移动端优化不是把画面缩小,而是重新安排信息和路径,让人在窄屏上也能读、能点、能咨询。字号、手指可触区域、咨询按钮位置、首屏加载速度是四个起点。

描绘手机屏幕上纵向堆叠的内容区块,以及拇指按向下方薄荷色按钮的3D插图
这些信号

访客在移动端离开的信号

要放大才能读的文字

如果必须用手指撑开屏幕才能读正文,访客已经受了一次不便。按电脑宽度做的表格或价格说明在边缘被截断也是同样的问题。当阅读需要额外操作,流失就开始了。

不适合手指的按钮和输入框

按钮太小或彼此紧挨,就会点到不想点的地方。咨询表单输入框太窄容易打错字,选项也常被挤出屏幕。越接近咨询这一步,这种不便的代价越大。

弹窗和横幅遮住首屏

在电脑上放在留白处的活动横幅或提示,在窄屏上会盖住整段正文。如果关闭按钮也很小,访客还没看到内容就按了返回。

等到失去耐心的加载

大图和视频原样上传,在移动网络下首屏要过一会儿才出现。愿意长时间盯着一片空白等待未知内容的访客并不多。

检查要素

移动端要先动手的地方

按屏幕宽度重新堆叠的结构

原本横向并排的元素,在窄屏上应该纵向重新堆叠。单纯把电脑版缩小显示,会把文字和按钮一起变小。让布局随屏幕宽度变化,是最基本的设计。

能读的字号和留白

正文以不用放大就能读的尺寸为准,行距和段落之间的留白留得宽裕些。窄屏上段落越长阅读负担越大,把段落切短反而更容易被读完。

拇指可达范围内的咨询路径

电话、预约咨询、预订这类最重要的行动,要放在单手握持时拇指够得到的位置。需要一直往下滑才出现的咨询按钮,和没有差别不大。也可以放一个随页面滚动而跟随的咨询按钮。

轻的首屏

首屏所需图片按显示尺寸准备合适的体积,下方图片则随滚动再加载。决定让眼前看得见的内容先出现,这个顺序决定了体感速度。

自查清单

移动端检查清单

  • 正文不用放大就能直接阅读
  • 表格和图片无需横向滚动即可完整显示
  • 按钮和输入框足够大、间距足够单手点击
  • 咨询和电话按钮不用滑很久就能触及
  • 在移动网络下首屏也能不憋闷地显示出来
需要记住

五项中有两项以上不符合,就该先从移动端画面开始梳理。但整理移动端并不能保证访问量或咨询量增加。移动端优化减少的是离开的理由,要变成咨询,还需要把首屏的信息和咨询路径一起理顺。

常见问题

关于这个主题经常确认的内容

需要把电脑版和手机版官网分开做吗?

多数情况下不分开更好。让同一个官网按屏幕宽度改变布局,内容只需管理一次。地址和内容一分为二,漏改和搜索曝光的管理负担会同时增加。

移动端优化是设计问题还是速度问题?

两者都是。布局和字号决定页面能不能读,加载速度决定有没有机会读。如果要排先后,先确认首屏出现的速度和正文的可读性会更有效率。

怎么确认我们的官网在手机上是否没问题?

最准确的办法是用真实手机从搜索结果进入,像第一次来的人一样浏览一遍。把需要放大才能读的地方、容易点错的按钮、走到咨询用了几步记下来,这份记录就是待修清单。

做移动端优化对搜索曝光有帮助吗?

可能有帮助,但不保证排名。搜索引擎多以移动端呈现为准评估页面,而画面不好用时访客很快离开,这个信号也会留下。要提升曝光,还需要一并处理内容和信息结构。

相关文章

适合一起阅读的文章