移动优先：大多数网站访客用的是手机

在项目过程中用笔记本电脑检查网站很容易，却容易忽略它对大多数正拿着手机的访客实际表现如何。在马来西亚这个以移动设备为主的市场，这道差距正是询盘悄悄流失的地方。本指南解释移动优先设计究竟是什么意思、它与"响应式"有何不同、忽略它会出什么问题、它如何通过移动优先索引和 Core Web Vitals 影响搜索排名，以及如何用十分钟自查您自己的网站。

简短的答案：先为手机设计，而不是最后才考虑

移动优先设计意味着手机体验是设计的出发点——更短的菜单、适合手指点按的按钮、按手机访客最先需要的内容来排列顺序——而不是在电脑版布局做完之后才勉强塞进去的事后补充。对马来西亚大多数小型企业类别来说，大部分访问量已经来自移动设备，把它当作次要考虑，等于是在为您流量中的少数群体做设计。

移动优先在实践中究竟意味着什么

这个词描述的是一种工作方式，而不是一个可以打开的功能。以移动优先方式工作的设计师，会从网站必须支持的最窄屏幕开始，决定访客在这块屏幕上的最初几秒钟需要什么，然后围绕它来构建页面。之后才为平板和电脑加宽布局，在空间允许时增加栏目和次要内容。在代码层面，这体现为默认为小屏幕编写样式，再在被称为断点的特定宽度上叠加大屏幕规则。

按这个顺序工作，会迫使团队尽早做出有用的决定。手机屏幕一次只放得下一件事，所以团队必须就什么最重要达成一致：服务、证明、价格、联系方式。电脑优先的项目可以把所有东西并排放置来推迟这个选择，于是手机版本继承的就是一个从未排过优先级的页面。这也是为什么移动优先的网站在电脑上读起来通常也更清晰。

为什么它在马来西亚比在许多市场更重要

马来西亚的客户是通过手机找到企业的。WhatsApp 群组里分享的链接、Facebook 或 Instagram 的帖子、路上随手做的 Google 搜索，或者传单上的 QR 码，全都在手机浏览器里打开，而且往往是在社交应用自带的内置浏览器里，它的屏幕空间比 Chrome 或 Safari 更小。对于餐厅、诊所、补习中心、装修和维修行业、美发美容和本地服务这些类别，大多数首次访问就是这样发生的。假设访客用的是鼠标和宽屏幕的网站，假设的是少数情况。

手机访客通常也很匆忙，而且常常用的是移动数据而不是办公室 Wi-Fi。他们想要的是营业时间、位置、价格范围和一个给您发消息的方式。移动优先设计把这些放在触手可及的地方，不必先滚过一个幻灯片、一段欢迎词和一排标志。

没有采用移动优先设计的网站会出什么问题

• 文字太小，不放大就看不清。在 24 寸显示器上看起来没问题的字号，在 6 寸的手机屏幕上可能真的很难看清。
• 按钮挤在一起，点按不准。手指的精准度远不如鼠标指针，拥挤的点按区域会导致误触和挫败感。
• 菜单收不起来。硬塞进手机屏幕的电脑版导航栏，要么溢出屏幕，要么根本没法用，而只能靠鼠标悬停展开的下拉菜单，用手指根本打不开。
• 表单填起来很痛苦。狭小的输入框，加上遮住半个屏幕的键盘，把简单的询盘变成了一件苦差事。
• 布局导致必须左右滚动。内容比屏幕宽，是网站从未在手机上真正测试过的最明显迹象之一。
• 遮住整个屏幕的弹窗。按电脑尺寸设计的订阅或促销浮层，可能让手机访客找不到关闭按钮，而干扰性的插页式弹窗也会被搜索引擎扣分。
• 电话号码和地址无法点按。在手机上，号码应该能直接拨打，地址应该能打开地图。纯文本只会迫使访客复制粘贴。
• 过重的图片和脚本。按电脑分辨率保存的全宽主视觉照片可能有好几兆，在移动数据下意味着好几秒的空白屏幕。

移动优先、响应式与电脑优先的并排比较

这三个词在报价和提案里经常被混用，但它们描述的是不同的东西。下表从影响访客的几个方面来比较它们。

它也会影响搜索排名

搜索引擎主要使用网站的移动版本来决定所有用户看到的排名，这种做法被称为移动优先索引——一个在移动端表现不佳的网站，即使在电脑上进行的搜索也可能排名更低。实际上这意味着被收录的是手机版本上的内容、链接和结构化数据，所以为了"看起来整洁"而在移动端隐藏的板块，对搜索引擎来说也是隐藏的。

移动端性能还会通过 Core Web Vitals 被直接衡量，这是 Google 公布了阈值的页面体验指标：Largest Contentful Paint 低于 2.5 秒、Interaction to Next Paint 低于 200 毫秒、Cumulative Layout Shift 低于 0.1。这些指标基于真实的手机访问来评估，所以一个在办公室电脑上很快、在中端手机的移动数据下却很慢的页面，在搜索引擎看来就是慢。参见我们关于为什么 WordPress 网站运行缓慢的指南，了解加载性能与移动端体验之间的关联；如果问题在于可见度而不是速度，请看为什么新网站在 Google 上搜不到。

响应式不等于移动优先

两者相关但不完全相同。响应式设计是指布局能适应任何屏幕尺寸，这是必要条件但还不够充分——一个响应式网站仍然可能是先按电脑设计、再简单地缩小，同样拥挤的控件只是等比例缩小了而已。移动优先意味着手机体验从一开始就是设计的出发点，而不是事后才补上的备选方案。当提案里写着"响应式"时，先要求看一个近期项目的手机版本，再判断它是不是真的这样设计的。

移动优先设计清单

以下这些决定，区分了一个仅仅"能放进手机"的网站和一个真正"在手机上好用"的网站。大多数在一开始做对的成本很低，事后补救则很贵。

• 点按区域至少 44 到 48 像素，彼此之间留有间距。Apple 和 Google 各自的界面指南都落在这个范围，这正是精准点按和误触之间的差别。
• 正文字号至少 16 像素，行距宽松。再小就会让人想放大，而且 iOS 浏览器在表单字段文字小于 16px 时会自动缩放，把布局搞乱。
• 在拇指区放一个明确的行动按钮。屏幕下三分之一是单手最容易够到的区域，所以固定在那里的 WhatsApp 或拨号按钮，效果优于页面顶部的按钮。
• 可折叠、可点按的菜单，只列出少量目的地，而不是把完整的电脑版导航竖着堆起来。
• 内容按优先级排列：您做什么、在哪里、证明、价格范围、联系方式——按这个顺序，放在任何装饰性内容之前。
• 图片按显示屏幕的尺寸处理，经过压缩，并设置好宽高，这样页面在加载时不会跳动。
• 进入页面时不要有全屏弹窗。如果必须展示促销，用一个一次点按就能关闭的小横幅。
• 可点按的联系信息：能拨打的电话号码、能打开地图的地址、能打开邮件应用的邮箱地址。
• 在阳光下和单手操作时都能阅读。文字与背景之间有强烈对比，没有任何需要精确双指手势的操作。

手机上的表单与联系方式

询盘表单是移动优先设计回报最直接的地方，因为表单正是访客变成潜在客户的那一刻。把它控制在三到四个字段。为每个字段使用正确的输入类型，让手机显示合适的键盘：电话号码用数字键盘，邮箱地址用邮箱键盘。允许浏览器自动填充姓名、电话和邮箱。让提交按钮占满整行，并在键盘弹出时保持可见。显示明确的确认信息，而不是重新加载页面。

对许多马来西亚企业来说，表单甚至不是主要渠道；对想要快速回复的客户而言，WhatsApp 按钮的转化更好。我们关于询盘表单与 WhatsApp 的指南说明了各自的适用场景，而对大多数网站来说答案是两者都要，并把 WhatsApp 按钮放在拇指自然停留的位置。

速度是移动优先的一部分

使用移动数据的手机访客，是您网站要服务的最慢连接，也是耐心最少的那一类。常见的罪魁祸首是按电脑尺寸保存的图片、好几种网页字体，以及聊天插件、分析工具和社交信息流的第三方脚本，它们全都要在页面可用之前加载完。移动优先的思路意味着只加载屏幕所需的最小图片、限制字体数量、推迟首屏不需要的脚本，并在限速连接下测试而不是在办公室 Wi-Fi 下测试。一个在中端 Android 手机上能在 2.5 秒的 Largest Contentful Paint 目标内绘制主要内容的页面就足够快；需要六秒的页面，访客还没看到第一句话就已经流失了。

十分钟自查您自己的网站

发现大多数移动端问题不需要任何工具，只需要一部手机和一点诚实。

• 在真实手机上用移动数据打开网站，不要用 Wi-Fi，数一数要多少秒才能读到主标题。
• 完成客户会做的核心操作：阅读关键信息、点击 WhatsApp 按钮、填写询盘表单。记下每一个感觉别扭、需要放大或点按次数比应有更多的步骤。
• 点一下电话号码和地址。拨号界面和地图打开了吗？
• 试试菜单。两次点按之内能到达每个重要页面吗？
• 把手机横过来。布局还能保持吗？
• 对首页和一个服务页面运行移动端 PageSpeed Insights 测试。看看 Core Web Vitals 评估结果和它列出的前三条优化建议。
• 请一位从未见过这个网站的人找到您的价格范围并给您发消息，观察他们在哪里犹豫。

如果任何一步感觉别扭，移动端访客——也就是您流量中的大多数——正经历同样的困扰，而这正在不知不觉中流失询盘。我们关于网站正在让您流失客户的迹象的指南，涵盖了值得同时检查的其他症状。

常见错误

• 在笔记本电脑上签字确认设计。批准前在手机上检查每一个页面；电脑版效果图代表的是少数人的视角。
• 为了整洁在移动端隐藏内容。在移动优先索引下，隐藏的板块对搜索引擎同样是隐藏的。
• 在手机上弹出电脑版弹窗。它挡住页面，还可能被判定为干扰性插页式广告而扣分。
• 只能悬停触发的菜单和提示。手指无法悬停。任何重要的东西都必须能通过点按打开。
• 把速度当成电脑上的数字。在中端手机的移动数据下测试，因为那才是搜索引擎衡量的访客。
• 把联系操作埋得太深。如果 WhatsApp 按钮或电话号码只在页脚，大多数手机访客永远到不了那里。
• 上线后不再测试移动版本。插件、嵌入内容和新内容都可能破坏上线时还正常的布局；每次有变动都要检查。

Gotka Technologies 能提供什么

移动响应式设计包含在每一个 Gotka 网站设计套餐中，不另外收费，同时还包括基础 SEO、页面速度优化和 WhatsApp 一键聊天按钮——完整套餐详情请见套餐配置工具。每个页面在上线前都会在真实手机上检查，而可选的 Care 维护方案能在上线后内容和插件变动时，保持移动端体验完好。

本指南中的关键术语

• 移动优先设计：先为最小的屏幕设计，之后再为更大的屏幕加宽布局。
• 响应式设计：能重新排版以适应任何屏幕宽度的布局。移动端的必要条件，但不等于移动优先。
• 断点：布局发生变化的屏幕宽度，例如从一栏变为两栏。
• 视口（viewport）：页面在特定设备上的可见区域；页面必须声明它，否则手机会渲染出缩小的电脑版视图。
• 点按区域：手指必须命中才能触发按钮或链接的区域；44 到 48 像素是通常的最小值。
• 移动优先索引：Google 对所有搜索都以页面的移动版本进行收录和排名的做法。
• Core Web Vitals：Google 的页面体验指标，衡量加载（LCP）、响应（INP）和视觉稳定性（CLS），基于真实访问测量。
• 插页式弹窗（interstitial）：遮住内容的弹窗；移动端上干扰性的弹窗会在搜索中被扣分。