企业与服务网站：移动端首屏应优先呈现什么（成长阶段）

企业网站随着服务线增加而不断扩写时，移动端首屏反而容易变得拥挤：每加一项服务、每添一段介绍，都想挤进最上面那一屏。本文围绕一个具体问题展开——成长阶段的企业与服务网站，移动端首屏究竟应先放什么；并从视口设置和响应式布局的常见做法入手，说明怎样让关键信息在小屏上保持可读。

用一个假设场景界定移动端首屏的优先任务

下面是一个假设场景。一家小型咨询机构随着服务项目增加而重建网站，负责文案的人手上有三份首屏草稿。第一份写着“我们帮助成长中的团队理顺运营”，下方是一个标着“预约通话”的按钮。第二份以“运营、招聘与财务支持”开头，下面排列三个短链接，每项服务一个。第三份先写一行客户成果，再放一个“了解我们的工作方式”链接，点击后滚动到流程部分。这些草稿只为这个例子编写，没有访客看过，也没有经过任何测试。

这三份候选稿对首屏的用途看法不同。第一份把屏幕当作单一的转化点，把其他信息都推到折叠线以下。第二份把屏幕当作目录，假设从搜索结果点进来的访客已经知道自己想要哪项服务。第三份把屏幕当作一句简短的证明，押注初次到访的人需要先有理由继续往下读，才愿意做选择。每种选择都会改变被挤下去的内容：联系方式、资质证明、服务说明，甚至导航本身。

对于这位假设中的作者，还有两个问题没有答案。其一，从广告进入网站的访客与从自然搜索进入的访客行为是否不同，因为前者可能已经知道服务名称，后者则未必。其二，随着机构增加第四或第五条服务线，优先级应当调整多少；适合三个链接的目录式布局，到五个链接时可能就会显得拥挤。现有材料无法回答这两个问题，在草稿定稿之前，两者都需要来自真实访客的证据。

列出这几份候选稿的目的，是让背后的决策变得可见：首屏无法同时承担转化、导引和证明三项承诺而不牺牲其中一项。作者下一步要做的，是判断在当前成长阶段，屏幕应当只完成哪一项任务，然后让其余内容排在它下面。

正确配置视口元信息

当viewport元元素的content属性使用width=device-width时，会把视口设置为与设备宽度一致，资料把这一取值作为推荐设置。该值是以逗号分隔的key=value键值对列表；width接受1到10000之间的正整数，或特殊值device-width，资料还指出这一取值会确立vw单位。¹

资料说明，省略initial-scale=1的示例是一种通常并不必要的常见做法，因为浏览器此时会自动确定初始缩放级别，并在内容溢出时可能缩小；如果溢出内容导致了不希望的缩小，而页面希望以100%缩放起始，就应加上initial-scale=1。对于设置了初始或最大缩放的页面，width值实际上成为最小视口宽度，因此在更宽的屏幕上，浏览器会扩展视口，而不是放大页面。¹

对于你正在重建的文案稿，可以把视口设置当作一项记录在草稿文字旁边的单一决定，而不是让它处于隐含状态。可以考虑打开新移动端模板的页面源码，找到head部分。检查视口元声明目前写的是什么，再把它与两种常见形式对照：一种把宽度固定为设备宽度并保留自由缩放，另一种还阻止缩放。在短期试用中，可以把声明设为设备宽度加初始缩放，然后在窄窗口中打开首屏文案，记录标题和主要服务说明这两行是否都能在不出现横向滚动的情况下保持可见。

如果咨询网站的一部分访客可能会放大文字，那么对于承载所选关键信息的同一屏幕来说，禁止缩放并不合适。可以把这一点记录为与你先前所选候选稿之间的一项取舍。

可以考虑在笔记中把这项声明标注为暂定选择，而不是最终设置，直到文案与版面放在一起通读为止。如果首屏的用途是帮助访客定位方向，而不是促成转化，那么较为宽松的视口设置能让这份导引对更多人保持可读。你可以在下一次文案修改后重新审视这项声明，因为标题长度的变化可能改变主要信息占据屏幕的比例。

避免虚拟视口造成的版面失真

当页面使用媒体查询为窄屏设计时，虚拟视口可能会与这种布局相冲突：980px 的虚拟视口意味着在 640px、480px 或更小宽度生效的媒体查询永远不会启用。视口 meta 元素可以缓解这一问题，文档给出的推荐设置是 width=device-width。该示例省略了 initial-scale=1，认为通常没有必要；省略时，浏览器会自动决定初始缩放，并可能在内容溢出时缩小，缩放程度取决于浏览器以及内容的宽度和高度。¹

如果溢出内容造成了不想要的缩小，而页面应当以 100% 缩放开始，可以加上 initial-scale=1，不过通常应避免横向溢出。资料来源警告不要将 user-scalable 设为 no：这会妨碍低视力人群阅读和理解内容，而 WCAG 要求至少 2 倍缩放，5 倍缩放是最佳实践。浏览器设置可以忽略 maximum-scale、minimum-scale 和 user-scalable，iOS10+ 默认忽略它们。¹

对于你正在重建的文案集，可以考虑把视口声明写成你自己草稿笔记中的一行明确记录，然后对照占据首屏的文字来读。一个实用的作者做法是：把选定的关键信息写在纯文本文件的顶部，加一行注明缩放是保持开放还是受到限制，如果该声明会让那段文字更难放大，就修改信息的措辞。这是你记录在草稿旁边的写作决定，不是你现在要启用的设置。

你也可以比较同一段简短开场的两个版本。第一个版本中，把服务句和支持性的证明句放在一起；第二个版本中，缩短证明句，让服务句独自承担屏幕。在窄宽度下读这两版，问哪一版在读者放大文字后仍然说得通。这个比较留在你自己的工作范围内，不需要外部测试。

如果屏蔽缩放对选定的信息来说仍然显得合适，你可以在段落旁记下理由，而不是把这种限制视为已经确定。在文案和布局一起读过之前，把该声明标注为一项工作选择，并在笔记中保留这样一个问题：首屏是否仍能为放大文字的读者提供方向。

以轻量方式响应式呈现图片与视频

对于不断扩充的页面中的媒体内容，有文档记录的做法是把 img、picture 和 video 元素的最大宽度设为 100%，这样媒体会随之缩放，不会溢出其容器。同一来源提醒，用一张大图缩小来适配小设备会浪费带宽，也可能显得不好看，并指出带 img 的 srcset 和 sizes 属性的 picture 元素是超出其讨论范围的进阶方案。²

该来源还建议选择 PNG 或 JPG 之类合适的图片格式，上传前在图形编辑器中优化文件大小，并用渐变、阴影等 CSS 特性实现视觉效果，而不是依赖图片。对于视频和音频，可以借助嵌套在 video 和 audio 元素中的 source 元素的 media 属性里的媒体查询，为不同设备提供合适的文件。²

对于草稿中仍然保留的轻量媒体，可以考虑在移动端首屏只用一张缩略图和一句简短说明，而不是一条由多张图片组成的图片带。你可以把说明写成一句平实的话，点明图片展示的内容，然后把更大的版本排除在开头部分之外，并记下它之后出现的位置。在窄屏上把草稿读出声，可以看出当图片加载较慢时，这句说明是否仍然成立。

你也可以在自己的笔记里比较同一媒体区块的两个版本。第一个版本把说明放在图片之前；第二个版本把说明放在图片之后，并把文字精简到一行。选择那个在你设想图片缺失时仍能让关键信息保持可读的版本，并在文字旁把这个选择标为暂定。决定权仍在你手里，随着服务线增加，你可以重新审视它。

把核心用户任务放在装饰元素之前

资料页给出的是一个具体例子，而不是适用于每个成长中网站的规则。它提到，旅行网站的移动端用户可能只想查看航班时间和延误信息，而不应该被迫先看到展示航线与公司历史的3D动画地球。这个对比就是资料中把任务放在装饰之前的依据。²

同一页面把响应式设计与良好的可用性联系起来，并描述要为多设备网络做防御式设计，兼顾常见屏幕尺寸、分辨率以及未知情况。它还把电池续航和带宽等限制放在视野内，因此移动端体验始终是值得关注的问题。在这个范围内，它提供的比较是访客需要的具体信息与并不服务于该需求的装饰性展示之间的取舍。²

检查你自己草稿中的一个具体片段：开篇句子以及它下面的那一段。先把装饰性段落保留在原位读一遍，再把它删掉、把关键任务句直接移到标题下面读一遍。记录哪一版更快地回答了“我在这里能做什么”；如果你能明显看出差别，就可以保留删减后的版本。

你也可以用两种颜色标注草稿，一种标出让访客能够开始某项任务的文字，一种标出只营造气氛的文字。如果首屏大部分是第二种颜色，可以考虑把一行装饰性文字换成服务说明句，并检查去掉装饰后开篇是否仍然读得自然。

对于该屏幕上的媒体内容，类似的比较也有帮助。在你的笔记里，把三张图片组成的横条与一张配简短说明的缩略图并排放置，然后通读两个版本，它们覆盖的是同一项服务。如果图片横条推迟了访客最先需要的那句话，你可以选择单张图片，并把理由记在草稿旁边，这样以后增加服务线时也容易重新审视这个选择。

在窄宽度下检验版面重排

把选定的首屏候选文案写进自己的草稿笔记，并专门做一个窄宽度版本：文字不变，但按屏幕只有平时一半宽的情形断成短行。一句服务说明和它的佐证句在宽版面上并排很舒展，空间一缩小却可能被迫换行、读起来别扭；因此可以只改断行位置，看看意思是否仍按原来的顺序抵达。你还可以在这个窄宽度版本里把佐证句移到服务说明之前，问一问匆匆浏览的读者更愿意接受哪种顺序。

对于选定的图片，可以在动手改动其他内容之前，先在纸上比较两种窄宽度排法。一种把缩略图放在说明文字上方，另一种把说明文字放在前面。分别把它与紧挨在下面的文本块一起读，记下说明文字在两者上下堆叠而非并排时，是否还能解释这张图。如果说明文字只有挨着宽幅图片时才讲得通，那就是应当缩短它的信号，而不是依赖位置来补救。

可以给自己做一张小小的对照表：选定的首屏文字放一栏宽版排列，同样的文字放一栏窄版排列，每栏旁边简短记下哪些内容发生了移动。凡是宽度变化后意思或强调重点发生改变的句子，都可以标出来。这些标记会告诉你哪些词是承重的，哪些只是装饰。

最后，要决定在窄宽度下舍弃什么，而不是硬塞进去。就这项练习而言，你可以挑一条辅助细节，在窄版里整条删掉，然后把结果读出声来。如果屏幕仍然能告诉访客这项服务是什么、为什么值得信任，重排就完成了它的任务；如果不能，说明被删掉的那条细节承载的分量比你估计的更重。把这个选择记在草稿旁边，下一次修改就能从一个明确的决定出发，而不是靠猜。

常见问题

拿自己草稿里的一段具体文字，我可以先保留装饰段读一遍、再删掉它读一遍吗？

可以。取草稿的开头一句和它下面那一块文字，先带着装饰段读一遍，再把装饰段删掉、把关键任务句直接移到标题下面读一遍，比较哪一版更快回答“我在这里能做什么”。

怎样用两种颜色标出帮助访客开始任务的文字，以及只用于营造气氛的文字？

用两种颜色区分草稿：一种标出让访客能够开始某项任务的文字，另一种标出只用于营造气氛的文字。若首屏上第二种颜色占了大半，可以试着用一句服务说明替换其中一行装饰性文字，再看开头是否仍然通顺。

怎样在自己草稿里把选定的开头方案改写成明显更窄的版本加以检验？

把选定的开头方案按同样字句写进草稿笔记，只是断成短行，好像屏幕只有平时一半宽。宽版下并排舒服的服务句与佐证句，在空间收窄时可能被迫换行，因此只改断行、不改措辞，看意思是否仍按原顺序到达。