18年沉淀高端建站经验
为企业持续赋能品牌新价值
上周评审一个官网改版方案，首页首屏是五张轮播，间隔三秒自动切。我问了一句，第四张图放的是什么内容，会议室里没人答得上来，包括提这个需求的市场部同事。
首屏轮播在企业官网里出现得太频繁。多数时候是评审会上谁都提不出更好的方案，放个轮播谁也不得罪。这篇讲清它为什么该砍，以及砍掉之后首屏放什么。
轮播的问题出在交互上。**张图占满首屏，用户要么点，要么往下滚。停留时间超过三秒的人本来就不多，轮到第五张时，人已经在第二屏了。
我们给客户装过点击统计。轮播图从**张到第五张，点击一路往下掉，**张占绝大多数，第四张和第五张加起来不到百分之五。十几个站的数据趋势差不多，差别只在**张的点击率高低。
轮播还带来两笔技术成本。五张首图一起加载，首屏体积容易超过 1MB；自动切换的定时器在低端安卓机上会掉帧，滑动时明显卡顿。
访客打开企业官网，心里通常只有一个问题：这家公司能不能解决我的问题。首屏的任务是把这个问题答清楚，一句定位加一个动作按钮就够。
五张轮播想同时说五件事，结果一件都没说清。看完一轮的人，记住的往往只是配色，问他说了什么，答不上来。
| 首屏做法 | 首屏体积 | 用户看到什么 | 适合 |
|---|---|---|---|
| 五图轮播 | 1.5 到 2MB | 一条，看运气 | 多个活动并行 |
| 单图加文字 | 120 到 300KB | 一条，确定 | 多数企业站 |
| 三段卡片 | 80 到 200KB | 三条业务线 | 业务并列的公司 |
移动端首屏图片的体积，我们一般控制在 120KB 以内。超过这个数，4G 网络下的首屏加载时间会明显拉长。百度移动端体验标准里，最大内容绘制超过 2.5 秒就掉出合格线。
轮播的**张往往是大图，1920×800 的尺寸未压缩时常在 400KB 以上。五张一起加载，首屏就变成了 2MB，用户看到的是三秒白屏。
压到 120KB 不靠硬压。做法是按设备出两套图，手机端取 750 宽的版本，桌面端取 1440 宽的，用 srcset 让浏览器自己挑。同一张图，手机端能省掉七成体积。
三秒不够读完一句标题。中文阅读速度按每秒 8 到 10 个字算，一行 20 字的标题读完要两秒多，加上看图和理解，三秒刚好卡在边缘。
五秒好一点，但用户在第五秒之前已经滚走了。间隔调到八秒，用户又觉得页面卡住了，以为加载失败。
这个矛盾说明轮播的交互设计有硬伤。它要求用户在被切走之前看完，而用户不知道自己还剩多少时间。设计上的应对办法是关掉自动播放，让用户自己点。
深圳的制造业客户对首屏的要求更多。除了定位和按钮，还要放 400 电话和微信二维码，ISO 证书图标与厂房照片也得有位置。这些需求一条条都合理，加起来就把首屏塞满了。
我们通常这样分。联系方式固定在页头，不占首屏版面；资质放到首屏下面一条横栏，做成小图标带文字；厂房和产线照片进「关于我们」，首页只留一张缩略图。
首屏只留三样东西，剩下的内容往下排，不用都挤在**屏。
有些客户确实需要轮播，比如同时推三个展会，或者首页要挂活动入口。这种情况下的改法是把轮播降级，别让它当主角。
**张按主视觉的标准做，标题和按钮都压在图上位，信息完整。后面几张只放图和短标题，不抢注意力。切换间隔设成手动优先，自动播放关掉。
关掉自动播放会让展现量掉一些，点击质量会升。用户自己点的，意向通常更明确，落到详情页的停留时间也更长。
砍掉轮播之后，首屏照样有办法做。常见的三种排法各有适用条件。
设计网站建设做到首屏这一层，取舍比创意重要。三种排法都能容纳定位和按钮，在手机上也能正常显示。选哪种看手上有什么素材。有场景图的用通栏，只有产品图的用左文右图，业务线平行的用卡片。
排版细节上有两处容易出问题。一是标题字数，超过两行在手机上会压到按钮；二是按钮的对比度，底色和文字亮度差不够，阳光下看不清。图标用线性还是面性，取舍写在那篇里。
首屏改动对转化影响大，别一次全站换。做法是做 A/B 测试，一半流量看旧版，一半看新版，跑两周看表单提交量。
两周是下限。企业站的询盘量本来就少，一周的数据波动足以盖过真实差异。字体选择也会影响首屏观感，中文字体怎么选、加载要多长时间，参照那篇。
首屏方案定在设计之前，成本**。等设计稿出了四版再推翻，前面的人力全白费，客户那边也已经形成了印象，改起来还要重新说服一遍。
我们的做法是在需求阶段先出一张首屏结构草图，黑白线框，不涉及配色和字体。客户确认结构之后才进视觉设计，返工率能降下来。
草图上只标标题、按钮和主图三个位置。这三件事定完，首屏基本就定了，剩下的都是执行。
如需进一步沟通，可直接致电 13928418795。
