为什么必须立即着手优化您在线商店的移动端版本？用户如何通过智能手机获取信息？移动设备网站适配的正确与错误做法是什么？Google对此有何看法？市场专家将为您解答所有这些问题。 Flexbi 丹尼拉·普列什科夫（Danila Pleshkov）。附赠：您的在线商店移动端版本检查清单。
一些统计数据：在线商店的移动端版本已成为必要需求
让我们从几个数字开始，它们能明确回答是否有必要积极投入在线商店的移动端版本建设：
- 在俄罗斯互联网用户总数普遍增长的背景下，智能手机受众的增长速度最快：截至2017年3月，46%的人口使用手机上网（一年内增长了15%）；仅使用移动设备的人数增加了26%。
- 移动受众的增长影响着电子商务市场。2016年，在线完成的购买中有16%是通过智能手机进行的。大型品牌的这一指标约为30%。对于25岁以下的年轻人来说，智能手机是购物的主要设备。
- 用户积极使用智能手机寻找商品，其中83%的情况发生在户外：在工作、学习、交通、休闲甚至购物中心——当用户比较特定商店的在线价格并决定购买地点时。
- 买家通过智能手机下单不仅是因为他们无法访问台式电脑和笔记本电脑，更是因为这样对他们来说更方便、更简单。
显而易见的结论是：为了不流失潜在客户，您的商店网站必须在智能手机上实现最佳显示效果。让我们深入探讨这意味着什么。
第一印象
我们并非逐字阅读在线文本。相反，我们会快速浏览内容，迅速滚动页面，然后决定是否留在当前网站或跳转到其他平台。因此，关键在于您的在线商店能否在最初几秒内给用户留下良好的印象。这种印象由哪些因素构成？
- 网站的移动版必须尽可能快速地加载：潜在买家通常是在移动中搜索商品，他们没有时间（也不方便）像在使用台式机时那样同时打开多个标签页来加载不同商店的内容。每多一秒钟的加载时间就意味着失去客户（如果网站在三秒内未加载完成，40%的潜在买家会离开该网站）。如果在滚动页面时商品卡片未能及时加载，访客会认为这些商品根本不存在，从而离开网站。因此，应放弃复杂的元素、Flash动画、横幅广告等，转而注重实用性和用户体验。您可以使用Page Speed Insights来检查您网站的加载速度。
- 网站元素应按垂直方向排列。
- 字体和导航元素应足够大。用户通常不愿通过缩放来放大文本以获取所需信息。
- 首屏应清晰展示您经营的商品类别。向下滚动后，应显示具体商品卡片，包含大图、名称和价格。
- 网站导航菜单应清晰易懂且始终可见（滚动时固定定位，但不遮挡大部分屏幕），以便访客了解在线商店包含哪些板块，并能在不同页面间快速切换。
- 访客应能方便地看到联系卖家的方式：可点击的电话号码/呼叫按钮、回拨请求以及/或反馈表单，必须出现在第一或第二屏内。
关于导航
几乎任何网站在桌面电脑或平板电脑上的使用体验都优于手机——这仅仅是因为屏幕尺寸较小，而在PC或笔记本电脑上还可以使用鼠标或触控板。对于智能手机而言，“输入设备”通常是手指（多为右手拇指），在小屏幕上操作的精准度要低得多。如果用户连续两三次无法准确点击目标按钮，他们可能会感到恼火并直接关闭网站。由此得出移动端网站导航元素的两个基本规则：
- 所有链接（在可能的情况下）都应设计为按钮：不是带下划线的可点击文本，而是显而易见的按钮。点击按钮要容易得多，而且更加醒目。
- 导航元素（如按钮、图标等）应彼此保持足够的间距，以免点击其中一个时误触另一个。例如，这类商品分类链接就难以操作（字体过小、排列过于密集，需要放大才能看清）：
比较一下：商品类别清晰可见，无需仔细辨认小字，点击按钮也很容易：
由于网站的移动版本通常看起来像一张无尽的“长页”（考虑到所有模块的垂直布局，这并不总是坏事），因此重要的是，从网站上的任何位置都可以快速进入菜单或返回页面顶部。为此，例如，可以固定一个调用菜单的图标，该图标会随着滚动同步移动。
目录
对智能手机用户在网络商店中行为的研究显示：70%的访客首先会滚动页面，以初步评估能否找到他们感兴趣的内容。而在PC和笔记本电脑上，这种浏览模式仅见于25%的访客。移动网店主页的质量直接决定了用户是否会停留超过几秒的快速滚动时间。
为此我们可以做些什么？
- 清理首页上所有不重要的信息，以便为商品卡片腾出空间。
- 卡片应垂直排列，这样用户只需上下滑动，无需左右滚动。
- 每件商品都应配有大幅图片、简要描述、价格以及“订购”按钮。
4. 相同商品若仅颜色不同，应合并为同一张商品卡片，并注明有多种配色可选。否则客户会因不断滚动查看重复商品而迅速流失。请对比（屏幕左侧仅为包含7个相同商品的列表片段）：
5. 如果您的商店商品类别众多，建议设置筛选功能，这将帮助访客更轻松地查找商品，从而提高买家找到心仪商品的可能性。
购买时操作简便
用户从进入网站到确认购买所需的点击次数越少，完成购买的可能性就越高。任何商品卡片（无论是简短描述还是详细描述）都应包含一个“购买”按钮，该按钮能在一次点击中将商品加入购物车。
购物车中的商品展示应紧凑简洁。仅显示最关键的信息：产品图片、名称、颜色和尺寸。访客通常在处理购物车时做出最终购买决定，并经常从多个选项中进行选择，因此这一选择过程应尽可能简便。
每个商品旁边都应提供修改数量或删除商品的选项，订单总额应随之更新：
最多只需从购物车点击一次即可进入订单填写页面。务必记住，此时顾客可能只有一只空闲的手，且时间非常有限。细节问题可由您的经理后续通过电话确认，因此请允许客户在不注册的情况下完成下单。对比：
文本内容
网站的移动版本完全不需要冗长且充满抽象思考的文本，这些内容至今仍常被用于SEO目的。所有内容都应尽可能简洁明了。请记住：访客并不会仔细阅读文本，他们只是快速扫视，因此你的任务是将信息安排得让目光能够迅速捕捉到。以下方法将有助于实现这一点：
- 列表，
- 简短的句子，
- 将内容拆分为小段落，并在段落之间添加缩进间距，
- 以按钮形式呈现的行动号召，
- 用于突出重要信息的图标。
这是一个很好的例子：
确实，不要试图用刺眼的颜色和全大写来吸引对文本的注意。
按钮和图标
我们之前已经提到，交互元素和导航元素应该足够大，并且彼此之间保持足够的距离。那么“足够”是什么意思呢？在Android开发人员的指南中指出，成年人手指指腹的平均尺寸约为10毫米。据此，活动元素的最小尺寸为7毫米，对于最重要的按钮（如联系方式、订购等）则为9毫米。活动元素之间的间距不应小于一个手指指腹的宽度（对于不常用的链接，至少应为5毫米）。
所有重要的按钮和行动号召（CTA）都应居中放置，以确保在快速滚动时也能最大程度地吸引注意力，从而方便客户使用。为便于理解，所有按钮的外观应保持一致，并通过颜色与页面其他内容形成鲜明对比。此外，建议在鼠标悬停和点击时改变按钮的颜色或色调，以明确提示用户该元素具有交互功能，而非静态图标。
响应式设计与搜索引擎
移动网站的要求与桌面版（适用于PC和笔记本电脑）不同，但创建两个独立的资源既不经济也不方便。在选择电商平台时，需要确保设计能够轻松适配不同屏幕尺寸的智能设备和平板电脑。理想情况下，这不应仅仅是元素的按比例缩放，而应是合理结构化地排列内容区块，以满足移动设备的可用性要求。
高质量的移动版不仅是为访客提供便利，也是网站在Google和Yandex上通过智能手机进行搜索排名的重要因素。Google列出了移动版网站必须符合的主要标准。您可以通过服务Google Search Console来检查您的平台情况如何。
系统认为最严重的错误包括：
- 存在Flash元素，这些元素在大多数智能手机上无法显示（尤其是导航相关的Flash元素，这一问题尤为关键）；
- 未配置的网站视口（即网站在不同屏幕尺寸设备上的显示方式）；
- 内容宽度大于视口（需要水平滚动页面）；
- 小字体；
- 交互元素（如按钮、菜单项等）间距过近。
为了方便您检查网站是否符合移动设备展示要求，我们为您准备了一份简易清单。借助这份清单，您可以发现不足之处并制定整改计划，或者确认您的网站已经完美达标。
赠品：优质移动端电商网站检查清单
基本参数
- 网站加载速度足够快（可在此处检查）。
- 网站上没有 Flash 元素。
- 您网上商店的网站模板已针对移动设备进行了适配（可在此处检查）。
- 移动版的地址与桌面版的地址相同。
- 所有文本在不放大和缩放的情况下均可清晰阅读。
- 无需水平滚动页面即可查看全部内容/阅读文本。
- 商品图片足够大，无需拉伸屏幕。
导航
- 交互元素（如“订购”、“致电”等）以按钮形式呈现。
- 所有按钮和图标都足够大，方便成年人用拇指轻松点击。
- 导航元素之间保持适当间距，以避免误触。
- 在页面滚动时，始终可以返回顶部并进入菜单（固定元素）；添加商品后，购物车图标也始终显示在屏幕上。
联系方式
- 商店电话号码可点击（无需复制即可拨打），或设计为“拨打电话”按钮。
- 标明了营业时间。
- 提供了交通地图。
目录
- 移动版的商品目录与主站目录一致（非精简版），包含用户评价和商品评测。
- 同类商品合并为一张卡片（支持选择颜色、尺寸）。
- 提供筛选功能，以缩短商品搜索时间。
购物车与下单
- 购物车中的每个商品项均简要描述（一行文字），并配有图片；支持修改数量、从列表中删除以及重新计算总价。
- 下单步骤最少（1至3次点击）。
- 支持无需注册即可下单，仅需填写手机号码。
- 提供多种支付方式，包括在线刷卡支付。