废弃号一路前行

什么是外贸技术(解析移动端页面优化最佳实践)

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!”,让更多实时浏览的用户共享他们的想法。

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

赞(0)
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 xiaokang360@qq.com举报,一经查实,本站将立刻删除。
文章名称:《什么是外贸技术(解析移动端页面优化最佳实践)》
分享到: 更多 (0)

废弃号一路前行

联系我们联系我们