外贸手机移动端网站如何优化？

在前期的分享过程中，我们已经提到过外贸网站之手机移动端网站的设计和策划，我们也了解了手机网站对于外贸宣传和推广的重要性，那么北京外贸网站设计公司Bontop外贸建站给大家分享如何优化外贸手机网站？

1、适应屏幕的响应布局

说到这里大家一定听说过这些名词自适应布局、响应式设计、移动端适配，实际上都是一个意思，就是外贸网站的设计要能非常好的适配移动端的访问。其实这些概念和技术早在多年前就已经提出并且开始应用，但根据Google的统计数据，截止2019年底，全球仅有50%的网站使用这些技术对网站进行了布局适配与优化。这恰恰是个好消息，因为这个时候，仅仅是开始使用自适应布局这一个更改，就能让你的网站在移动端的表现立即产生质的不同。

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

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

在同一个页面中写入多种不同布局，通过CSS和其他前端框架，自动识别当前设备尺寸宽度，进而自动调整元素布局；不同平台，设计完全不同的网站，访问的时候域名都是不同的，比如电脑上的域名是www.abcd.com，而在手机上则会变成m.abcd.com。这是常见的思路，而具体实现的方法，这因为网站使用的语言、程序、架构等的不同，各有不同。有的网站程序后台直接就支持生成桌面端和手机端两个不同的网站。优势是原生支持，不会出现排版错乱，缺点是需要制作两个网站，要求付出额外的管理时间和成本。不论是哪种方法，最终目的是为了让网站在手机和平板等移动设备上，也都能获得精美的展示。如上文所说，只要做到这一步，就能让用户对网站的使用体验，产生极大的提升。

2、简化折叠固定式菜单

手机屏幕的空间本来就小，如果还要像桌面端那样将所有的菜单展示出来，不仅拥挤难看，而且就是给可怜的手指出难题，往往无法精确点中。面对这样的菜单系统，用户只好在反复斗争之后，原地崩溃，然后累觉不爱。所以在移动端，网站的菜单需要重新考虑与设计简化。仅仅保留必要的和重要的菜单项，比如原始的菜单包括：Home、About、Products、News、Contact这几个最常见的菜单项。很明显在手机上是无法在一行内将这些内容全部展示出来的。这时就可以将菜单简化，根据需求保留最重要的选项，如：Products和Contact两项。其他的选项可以放在页脚，或者页面中的其他位置；

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

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

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

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

3、极致优化的网站速度

第一印象十分重要，尤其是面对耐性越来越少的客户。用户愿意在手机上打开一个网站， 说明对这个网站感兴趣。但是如果在3秒钟之内，整个页面还没有完成载入，47%的用户就会选择关闭当前页面。这是因为手机端用户对于网站速度的要求，对标的不是其他网站，而是手机上各种APP。由于这些APP的资源，大部分都是预先载入的，所以用户在使用APP的间隙使用网站，就总会觉得网站好慢。

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

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

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

4、高度提炼的产品页面

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

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

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

产品的属性选项，比如颜色、材质、尺寸等，最好使用较大的元素进行平铺展示，避免折叠，更加便于用户选择以及进行其他操作；推荐产品数量不应过多，3个为最佳。这主要是因为移动端下方的空间很小，不利于放置太多干扰元素。总之，移动端的产品页面信息逻辑，和桌面端的页面有很大差异，在设计的时候，一定要花心思进行重新思考与设计。

5、相关高清图片素材

虽然手机屏幕的尺寸较小，但是分辨率却一点儿也不小。就拿2020年秋季的主流旗舰机来说，普遍都是2K屏，甚至3K、4K屏幕也不稀奇。从屏幕的质感上来说，电脑上普遍还是60Hz的刷新率，手机上已经有120Hz+的刷新频率了。所以，手机屏幕虽小的，但是对素材的要求却一点儿也不低。看一些大牌的网站，经常会感觉手机上的站点更加清晰精致，就是这个原因了。

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