首屏 · Hero区

Hero区应该放什么内容？

Hero区只要放进三样东西就够了：“这是做什么的地方”“为什么要选这里”“现在该做什么”。顾客只看首屏，就应该能决定是继续看下去，还是直接联系您。

并不是放得越多越好。元素越多，每一样就越不显眼，所以最好把必须放的和可以往下移的区分开来。

之所以要写上行业和地区，是为了通过搜索进来的顾客。搜索“望远洞 蛋糕”进来的顾客，如果在首屏看到同样的字眼，就会确信自己找对了地方。

顾客真的只看首屏就做判断吗？

顾客并不只看首屏，但在首屏停留的时间确实最长。尼尔森诺曼集团2018年发布的眼动追踪研究显示，浏览页面的时间中约57%集中在滚动之前的区域。

同一项研究中，前两屏占了浏览时间的约74%。这说明顾客虽然会往下滚动，但越往下看得越不仔细。

所以首屏还承担着提供“继续往下看的理由”的作用。只有在首屏确信就是这家店，顾客才会继续读下面的价格 · 评价。

不过，也没必要把所有内容都塞进首屏。顾客看到往下看的理由就会滚动，所以让首屏底部稍微露出下一部分内容，顾客就会自然地接着看下去。

Hero区文案怎么写？

Hero区文案的基本写法是：用顾客搜索时会用的词，在一句话里写清行业 · 地区 · 优势。比起漂亮的修辞，一看就懂的表达更容易被读进去。

按下面的顺序来写，大部分店铺都能写出可用的文案。不必一开始就追求完美，写两三条比较看看。

想在一句话里塞进所有优点，句子会变长，结果什么都记不住。优点有好几个的话，只把最有把握的一个放在首屏，其余的放到下面的区块里逐一展开。

文案定下来后，最好让搜索结果中显示的页面标题和首屏文案用词一致。搜索时看到的词和首屏上的词一样，顾客就不容易困惑。

1. 01写下顾客找您的店铺时可能会搜索的词。（例如：“望远洞 蛋糕订购”“弘大 层次剪”）
2. 02从中挑出包含行业和地区的词，做成一个简短的大标题。
3. 03加一行小字说明，写出与其他店铺不同的一点。（例如：“当天可订”“1:1咨询后再做项目”）
4. 04按钮文案要写成顾客要做的动作。（例如：“蛋糕预约咨询”“查看空闲时段”）
5. 05放到手机页面上试试，如果换行太多就精简用词。
6. 06给不了解店铺的人看5秒，问对方：“你觉得这是做什么的地方？”

首屏放大图或视频会不会让网站变慢？

不加处理的话就会变慢。首屏的大图通常是页面中最大的元素，会直接反映在Google衡量加载速度的指标LCP（最大内容绘制时间）上。

根据web.dev的说明，LCP在2.5秒以内被视为“良好”。基本做法是：把首屏图片缩小到适合屏幕的尺寸，转换成轻量格式，并且不要给它设置延迟加载（懒加载）。

手机上的速度比电脑慢，用移动数据比用Wi-Fi慢。检查首屏时，关掉Wi-Fi用手机直接打开，最接近顾客的实际体验。

背景视频能烘托氛围，但文件大，在手机移动数据环境下负担较重。即使要用也要做得短一些，并准备好视频加载出来之前显示的静态图片。

不同行业的首屏怎么设计？

不同行业的顾客在首屏想确认的东西不一样，所以照片和按钮也要据此选择。下面是小店常用的搭配。

照片尽量使用在店里实拍的。图库网站的照片虽然精致，但如果顾客到店后发现样子不一样，反而会降低信任。

在手机页面上，竖长的照片几乎会占满整个屏幕，文字和按钮很容易被挤下去。把电脑版和手机版的照片分别裁好，两种屏幕都会显得清爽。

首屏文案和照片也可以随季节或活动更换。不过如果每次更换都要找制作公司，会很麻烦，所以最好事先确认能否在管理后台自己修改。

• 咖啡馆：空间或招牌饮品的照片，“延南洞手冲咖啡馆 · 每天10点~22点”，“路线导航”按钮。
• 美发店：真实的项目效果照片，“合井站步行3分钟 · 专做低损伤烫发”，“按设计师预约”按钮。
• 手作工坊：上课时双手的照片，“周末陶艺一日体验课”，“查看本月课程安排”按钮。
• 网店：代表商品照片，“亲手烘焙的手工格兰诺拉 · 全国快递”，“去看商品”按钮。

首屏常见的错误有哪些？

最常见的错误是只放一张大大的氛围照片，却把文字拿掉。您了解自己的店铺，所以觉得光有照片就够了，但第一次来的顾客很难马上看出这是一家什么店。

轮播图自动切换、重要文案一闪而过，也是常见问题。在电脑上看没问题，在手机上按钮却被挤到屏幕下方的情况也很多，所以一定要用手机确认。

一进网站就弹出的弹窗也要小心。活动窗口挡住页面的话，顾客还没看到店铺介绍就忙着关窗口，Google也把遮挡内容的弹窗列为不良页面体验之一。

不用轮播图，而是用一张照片加文案开场，管理起来也更轻松。如果想展示多张照片，可以在首屏下方另设一个图库区块。

看首屏设计稿时，该问网站制作公司哪些问题？

收到设计稿后，可以问制作公司下面四个问题。以手机页面为准得到答复，上线后要改的地方就会少很多。

• 在手机首屏上，不用滚动就能看到按钮吗？
• 会帮忙检查首屏图片的文件大小和加载速度吗？
• 照片上的文字在明亮的照片上也能看清楚吗？
• 如果使用轮播图，顾客能自己暂停或翻页吗？