app.vue 跳转页面_外贸技术流：手把手教你优化移动端页面！

关于作者：韩席军，焦点商学院明星讲师，商务英语和计算机双专业，精通外贸销售、SEO、EDM、社交渠道营销等，属于技术流的营销高手，善于钻研和思考，从业九年来，一直在做业务的同时坚持分享。目前在知名美资公司担任海外市场总监，从事跨境电商的研究和实践。

昨天我们讲解了有关企业网站在移动端优化的一些基础概念(回顾：想提高订单转化率？这个方法你试过了吗？)，今天我们来实战了。

移动端页面优化最佳实践

1

适应屏幕的响应布局

在第一部分的术语解释中，我们就说过这样三个名词：自适应布局、响应式设计、移动端适配。

其实这些概念和技术早在多年前就已经提出并且开始应用，但根据Google的统计数据，截止2019年底，全球仅有50%的网站使用这些技术对网站进行了布局适配与优化。这恰恰是个好消息，因为这个时候，仅仅是开始使用自适应布局这一个更改，就能让你的网站在移动端的表现立即产生质的不同。

常见的适应屏幕的相应式布局的思路有：

如果是原本就比较简单的布局，可以通过将元素，主要是图片、视频和表格之类的元素的比例由绝对值设置为比例值，比如原来的宽度设置是900px，为了适应各种设备，新的宽度则可以设置为100%，这样不论屏幕多宽，该元素总是和屏幕一样宽；

在同一个页面中写入多种不同布局，通过CSS和其他前端框架，自动识别当前设备尺寸宽度，进而自动调整元素布局；

不同平台，设计完全不同的网站，访问的时候域名都是不同的，比如电脑上的域名是www.abcd.com，而在手机上则会变成m.abcd.com。

这是常见的思路，而具体实现的方法，这因为网站使用的语言、程序、架构等的不同，各有不同，举例来说：

使用了Bootstrap框架的网站或者网站程序，天然就支持自适应布局；

使用Wordpress创建的网站，可以使用Thrive、Divi等插件和主题，进行模块化搭建。搭建完成之后，就是自适应的布局。并且可以根据需求，对每个元素的细节进行手动调整；

使用Shopify创建的网站，可以使用Gem Pages等扩展，对页面上的元素进行设计，并且在设计过程中就可以随时切换到不同的设备尺寸进行预览，十分方便；

有的网站程序后台直接就支持生成桌面端和手机端两个不同的网站。优势是原生支持，不会出现排版错乱，缺点是需要制作两个网站，要求付出额外的管理时间和成本。

不论是哪种方法，最终目的是为了让网站在手机和平板等移动设备上，也都能获得精美的展示。如上文所说，只要做到这一步，就能让用户对网站的使用体验，产生极大的提升。

2

简化折叠固定式菜单

手机屏幕的空间本来就小，如果还要像桌面端那样将所有的菜单展示出来，不仅拥挤难看，而且就是给可怜的手指出难题，往往无法精确点中。面对这样的菜单系统，用户只好在反复斗争之后，原地崩溃，然后累觉不爱。

所以在移动端，网站的菜单需要重新考虑与设计：

简化。仅仅保留必要的和重要的菜单项，比如原始的菜单包括：Home、About、Products、News、Contact这几个最常见的菜单项。很明显在手机上是无法在一行内将这些内容全部展示出来的。这时就可以将菜单简化，根据需求保留最重要的选项，如：Products和Contact两项。其他的选项可以放在页脚，或者页面中的其他位置；

折叠。这是最常见的方式，将原本横向排布的展开菜单，折叠到页面的右上角，变为一个按钮区域，点击这个按钮，菜单就会纵向展开。这个时候要注意，这样处理后的菜单，最好不要再添加二级子菜单，否则整个版面又会看起来很乱；

底部固定。顾名思义，这种情况下，菜单会固定在手机浏览器的下方，不论页面如何变化，菜单始终固定在下方。其实这是十分符合移动端思维的，就像微信公众号下面的固定菜单一样，便捷、直观。但是这样的设计需要专门的代码或者工具来实现，所以虽然是很好的方式，但是实际使用的站点还不多；

移除。有些内容简单，以高品质信息展示为主要目的的网站，会采用这种大胆的设计，整个网站看不到菜单的存在，只需要一直向下滑动即可。这样网站也被称为单页面(One Page Website)站点，在一个页面中展示所有必要的信息。

不论哪种方式，都是为了移动端的菜单系统看起来美观、用起来简便、设计起来方便。

3

极致优化的网站速度

第一印象十分重要，尤其是面对耐性越来越少的客户。用户愿意在手机上打开一个网站， 说明对这个网站感兴趣。但是如果在3秒钟之内，整个页面还没有完成载入，47%的用户就会选择关闭当前页面。

这是因为手机端用户对于网站速度的要求，对标的不是其他网站，而是手机上各种APP。由于这些APP的资源，大部分都是预先载入的，所以用户在使用APP的间隙使用网站，就总会觉得网站好慢。

要优化移动端网站的速度，除了必做的常规操作之外，还应包括：

移除不必要的组件。如幻灯片和视频。虽然网站首页放一组幻灯片已经是行业标准，但除非经过特别优化，否则幻灯片在手机端的表现并不好：不好看，不好用，影响速度；

移除不必要的动画效果。桌面端由于空间充足 ，所以会在各个区块(Blocks)之间加入留白和载入动画。其他元素，如按钮，也会有一些动画效果。这主要是为了配合页面的整体设计风格，为网站加入动态的互动元素，进而降低用户的枯燥感，无可厚非。但是在移动设备上，用户并没有这样的需求，太多动态的元素，反而会增加用户的操作成本，降低好感度；

使用Lazy Load技术，用最快的速度加载第一屏。这里有两个术语：Lazy Load和第一屏，两者不同而又有密切的关联。Lazy Load指的是在浏览器加载网站内容的时候，优先加载用户当前能看到的内容，而用户还没有翻到的部分就不着急加载。很久以前的网站，所有的内容都是同时加载的，如果网页上有很多大体积照片，就会造成整个页面都迟迟加载不出来。

使用Lazy Load之后，就会“智能地”优先将用户翻到的部分尽快展示出来。而第一屏指的则是，用户在打开网站之后，看到的铺满当前屏幕的部分。如果所有的带宽和计算资源都用来支撑第一屏，就会加快载入速度，进而给人“这个网站贼快'的印象。这一点至关重要。

4

高度提炼的产品页面

每个网站上都有产品页，如何排布产品页的信息，自然大有讲究。桌面端网站的产品页面，位于最上方的是菜单，然后是面包屑导航，有的还有一些Banner之类的元素。但是在移动端，应该直奔主题，移除顶部的无用元素，对产品页面进行重新设计。

突出展示产品图片与标题。这应该是产品页面最引人注目的两个元素；

在第一屏展示给用户的信息应该包括：首图、标题、价格、主要卖点、询盘/购买按钮。这样做的目的是在最短的时间内传递核心信息，节省客户的时间，尽快采取决策；

不要设计过多的跳转。在桌面端网页中，从浏览器打开一个新的窗口是十分自然与平常的事情，但是在移动端中，在多个页面之间切换却是一件十分麻烦与不便利的事情。所以移动端的产品页面(以及其他页面)都要有意识地减少跳转，或者尽量只在本窗口打开跳转后的页面，而不是再开一个新的窗口；

产品的属性选项，比如颜色、材质、尺寸等，最好使用较大的元素进行平铺展示，避免折叠，更加便于用户选择以及进行其他操作；

推荐产品数量不应过多，3个为最佳。这主要是因为移动端下方的空间很小，不利于放置太多干扰元素。

总之，移动端的产品页面信息逻辑，和桌面端的页面有很大差异，在设计的时候，一定要花心思进行重新思考与设计。

5

高相关高清图片素材

虽然手机屏幕的尺寸较小，但是分辨率却一点儿也不小。就拿2020年秋季的主流旗舰机来说，普遍都是2K屏，甚至3K、4K屏幕也不稀奇。从屏幕的质感上来说，电脑上普遍还是60Hz的刷新率，手机上已经有120Hz+的刷新频率了。

所以，手机屏幕虽小的，但是对素材的要求却一点儿也不低。看一些大牌的网站，经常会感觉手机上的站点更加清晰精致，就是这个原因了。

所以，如果是采用了不同素材的管理方式，则在手机上应该优先考虑高清的图片素材，更加能够传达品质感。

6

多样化与固定的CTA

在第一部分我们已经说过CTA的概念，简言之就是通过醒目的元素吸引用户采取行动。大部分时候，在一个页面中，会放置2个以上的CTA元素，并且它们的目的是一样的。

比如在外贸网站产品页面中，CTA的主要作用就是引导客户留言或者发送询盘，那么在一个页面中，可能会在产品大图下方放置一个“Inquiry Now”的按钮，在产品描述的下方也放置一个同样功能的按钮。

如果两个按钮的样式和文案是完全一致的，则有可能因为客户忽略了第一个按钮，也同时忽略了第二个/第三个/第N个按钮，毕竟它们长得都一模一样嘛。

所以一个优化后的做法是，将多个目的相同的CTA元素，故意设计地看起来不一样。数据表明，应用这个策略之后，CTA按钮的转化率得到明显的上升。用户不喜欢这个按钮，不代表他不喜欢另一个按钮，只要款式多，总有一款适合你！

另一个可以考虑的CTA优化点是，将CTA固定在页面的某个地方，比如左下角或者正下方。这样的好处是用户在需要采取某个行动时，随时随地就能找到入口，而不必要上下翻滚页面。当然，在这种情况下，CTA按钮的设计一定要低调，不能太过花里胡哨，否则只能起到反作用，让用户更快地离开页面。

7

极度精简的信息表格

网站上往往会有很多需要用户输入信息的地方，如：留言框、注册页面、订单、询盘等等。在电脑上用键盘和鼠标输入信息，对大部分用户来说，都是小事一件。但如果在手机上使用同样的思路，就绝对行不通。

就拿最简单的下拉菜单来说，在电脑上从下拉菜单中选择一个选项是轻而易举的事情，但在手机上却会是很糟糕的体验。

信息本身也需要精简。如果原本需要采集用户的5项信息(姓名、年龄、国家、邮箱、公司名)，那么在手机上应该缩减到3项甚至2项，所以我们在很多现代设计的网站上，经常看到非常精简的表单系统，仅仅需要一个邮件地址，即可订阅。这就是根据移动设备的性质而重新思考和设计的结果。

8

弹窗与即时沟通入口

如果花点儿时间浏览20个以上的外贸网站，就很难忽略一件事情：一多半的外贸网站，都有超过1个弹窗与聊天服务窗口。

这个出发点本来是好的：客户只要想联系，就可以随时随地找到一个信息入口。但仔细思考一下：当用一种令人反感的方式为客户提供帮助的时候，他能够感觉到诚意吗？如果他感受到的不是诚意，而是一眼可见的企图心、粗制滥造的设计、不胜其烦的干扰，心情可想而知。

所以，网站减少弹窗，仅仅保留一个必要的弹窗，不仅仅是移动端的需求，而是对所有站点的要求。

再回到移动端的弹窗中，也要做出优化：

延迟弹出时间，至少要等待10秒钟再弹出。如果一开始就弹出，因为屏幕尺寸的关系，会严重遮挡页面中的其他内容；

文字要少，最好就一句话，3-6个单词。字多了字体就需要变小，变小了就看不到。另外，没人会有耐心读完20个以上的单词的；

一个弹窗只期望用户完成一个任务。不同的页面可以使用不同的弹窗，所以可以设计多个弹窗。但是一个弹窗应该只设计一个任务，任务大于1个之后，就会一个都完不成；

设计风格很重要。弹窗的风格要和主要内容有所区分，同时在素材质感上要和主要内容保持一致。

9

经常在不同设备查看

虽然说了这么多移动端网站可以优化的点，但这绝对不是全部。要想发现问题，并且保持优化，最好的做法是经常在移动设备上查看自己的网站到底是什么样子的。当然，也有专业的方法来进行观察与持续测试。

最简单的方式就是用Chrome浏览器。在浏览网站的时候，按一下键盘上的F12，即可打开Chrome的调试模式，在这个模式下，可以通过调试窗口左上角的设备选项，在不同设备和尺寸之间切换。刷新页面之后，就可以立即看到你的网站在当前尺寸下的排版布局方式；

也可以借助BrowseEmAll这样的专业工具，更加精细地测试网站在各种分辨率与屏幕尺寸下的表现；

最好的方法，莫过于问问真实的用户。可以定期给订阅用户发邮件参与问卷，也可以在网站的显眼地方设置一个CTA，文案就是"Help us improve, your suggetions matter!"，让更多实时浏览的用户共享他们的想法。

总结来说，我们众多的外贸网站都没有针对移动端进行优化，这让我们辛辛苦苦得来的流量都流失了，十分可惜。我们的外贸从业人员，尤其是网站建设和运维人员，应该关注新趋势，应用新技术，为外贸网站带来更多流量的同时，也将留存率与转化率提升上去。

(本文刊载于第74期《焦点视界》杂志)