经营面向消费者的独立站时，分类页首屏常有一种尴尬：团队花了不少时间选照片、调背景、写口号，顾客进入页面却还要往下滚动，才知道这里到底卖什么。首屏并不是一块独立的广告牌。它连接着上游的搜索、社媒或广告点击，也连接着下游的筛选、商品卡片和购买决定。首屏做得好，顾客能迅速确认“我找对地方了”；做得过满、过空或过高，商品就被挤出视野。

这篇文章来自一次真实的页面设计讨论：一个面向消费者的商店分类页，需要同时呈现品牌气质、真实产品图和商品列表。讨论中，Hero 高度被压到约 350 像素，图片区随之调整，文字与图片之间的空白也被收紧。这些是设计取舍和本地预览思路，不等于线上页面已经发布，也不等于 350 像素适合所有网站。下面把这次判断延伸为一套可以复用的检查方法。

核心判断

分类页 Hero 的价值，不在于占满屏幕，而在于让顾客在几秒内识别商品类别、看到可信的产品，并找到下一步。

一、先说清首屏要完成什么

首页的任务是介绍品牌；分类页的任务更具体：承接顾客对一类产品的期待，并帮助他开始筛选。假设一位顾客从搜索结果进入“家居收纳”分类，他首先想确认的通常不是品牌愿景，而是这里有没有自己要的产品、款式大致如何、价格或规格从哪里看。若首屏只有抽象情绪图和一句“让生活更美好”，信息密度再高也无法帮他做决定。

设计前先写下一句话：这个分类页的顾客，进入后最需要确认什么？答案可能是“有适合家庭厨房的收纳盒”，也可能是“这些产品可直接购买且能按尺寸筛选”。只有这个判断明确，才知道该把面积留给产品照片、分类说明、筛选入口还是促销信息。不要把分类页当成首页的缩小版，也不要把同一个 Hero 无差别地复制到所有分类。

同一品牌的不同分类，顾客的比较维度也不同。食品容器可能比较容量、密封方式和材质；展示用品可能比较尺寸、陈列场景和承重。首屏至少要露出一个与该分类有关的事实，避免“图换了、话却没变”。

二、Hero 高度要从商品可见性倒推

“做成 350 像素”可以是某个桌面设计稿的具体约束，却不该成为通用标准。正确顺序是先看常见屏幕尺寸、站点导航占用、公告栏、面包屑和分类标题；再看 Hero 结束时，商品列表是否开始露出。若导航已经占去较多高度，Hero 再塞一整屏，顾客就很难意识到下面还有商品。反过来，如果产品需要较大的细节图，过矮也会让图片和文字都无法读清。

桌面端可以先做一个中等高度的样稿，再用“首屏能否看到第一排商品的开头”来校准。这里的“看到”不必意味着完整商品卡片全部进入视野；至少应该让顾客明确知道下面是可浏览的商品，而不是一页长长的品牌故事。若页面有固定顶部导航、区域提醒或购物车横幅，验收时也要把这些真实元素算进去。

只改 CSS 里的高度数值，很容易让图片被裁切、按钮挤压或文字溢出。高度变短时，要同步调整标题字号、段落行距、左右栏比例、图片容器、按钮间距。设计稿中 350 像素看起来刚好，上线后却可能因字体加载、语言长度或主题样式而改变。最终以真实浏览器里的页面为准。

三、真实商品图怎样排，才不会显得空或乱

一张大图常常最稳妥：顾客看得清产品，页面也不会被装饰元素切碎。但如果产品线有多个视觉差异明显的款式，合适的组合图能让顾客更快理解这一类产品。关键是每张图都要有工作：第一张展示主要商品，第二张补充使用场景，第三张说明颜色、尺度或组合方式。只为了“填满空白”再加一张图，可能让焦点更散。

图片排列前先看原图条件。横幅图与竖图的比例不同，直接把它们塞进相同大小的格子，常会切掉边角。产品本身需要完整呈现时，可用留白或与背景协调的底色；场景图需要情绪和尺度时，可以允许有限裁切。裁切决策应逐张检查，而不是给所有图片统一一个 object-fit: cover 就结束。真实产品图若尺寸、光线、背景完全不一致，也要先做轻量整理，再谈排版。

这次页面讨论里，图片区加宽、文字区收窄，是为了减少中间过大的空白；同时仍要保留商品完整边角。这里反映出一个常见设计问题：空白不是越多越高级。空白要帮助视线从标题走向产品，再走向按钮和商品列表。如果两栏之间的空白隔断了这个路径，就该调整比例，而不是添加无意义的图标或箭头。

尤其不要为了“高级感”生成一张看似真实的商品照片，替代实际销售的产品。消费者页面上的主图承载材质、颜色、尺寸的期待；示意图可以说明使用氛围，却必须清楚标注。真实商品图无法取得时，先用已有可核实素材，不要让视觉方案走在商品事实之前。

四、首屏文案只回答三个问题

分类页文案不用像品牌宣言。让标题、短说明和按钮分别回答三个问题：这里是什么商品？适合谁或什么场景？下一步去哪看？标题最好直接出现类别名称；短说明补充主要差异，而不是堆砌形容词；按钮指向商品列表或明确的子分类。若页面下面本来就是商品网格，按钮可以跳到网格；若有多个用途截然不同的产品线，按钮应先带到相应子分类。

可以用一张小卡来写文案：类别名称、一个可核实的产品特征、一个使用场景、一个下一步动作。比如“厨房收纳容器｜按容量和使用场景选购｜查看全部款式”。这里的材质、安全或性能承诺必须有产品资料支撑；没有证据就不要为了转化写“无毒”“最耐用”或“适合所有家庭”。这也让后续 AI 辅助生成文案时，有一个可以核实的事实边界。

语言也要与页面目标市场一致。英文商店的首屏，不应出现从中文直译的长句或难以理解的本土化口号。要请熟悉目标顾客用语的人读一遍，检查分类名称是否就是顾客会搜索和点击的词。漂亮文案若让用户猜商品是什么，就没有完成任务。

五、手机端需要单独设计，不能靠桌面缩小

桌面端可以把文字放左、三张产品图放右；手机端若简单缩小，两边都会变成狭窄的小块。更稳妥的顺序通常是类别标题、简短说明、主要产品图、明确按钮，然后是商品或筛选入口。次要图片可放在横向滑动区，也可只保留一张最有代表性的图。具体取舍仍看产品差异和手机端加载速度。

检查手机端时，不要只看 390 像素的设计画布。至少在一台小屏手机宽度和一台较大手机宽度上看真实页面，注意文字是否换行过多、按钮是否好点、图片是否遮挡产品、首个商品卡片是否被推得太远。若页头有折扣条、地区选择、Cookie 提示或悬浮客服，这些元素会进一步压缩可见空间。手机端的“首屏”是用户当下真正能看到的内容，不是设计工具里的一块固定画板。

图片质量与速度也要一起看。多张高分辨率图叠在首屏，会延迟用户看到商品。为不同屏幕提供合适尺寸，避免用桌面大图硬塞给手机；图像的文件名、替代文本应描述实际内容。视觉效果和加载速度相互影响，不能只用静态截图判断成败。

六、让 Hero 接上商品路径，而不是成为独立展板

分类页的成功路径可以画得很短：进入页面，确认类别，看到产品，筛选或比较，进入商品详情。Hero 只负责其中前几步。若按钮写“立即探索”，却跳到无关的品牌介绍页，视觉设计再好也会断路。若图片看起来可点却不能点，顾客也会失望。按钮、产品图和筛选入口的行为应与文字承诺一致。

对于面向消费者的商店，还要检查商品列表的基本信息：首批商品是否有真实库存、价格、规格和清晰的购买入口；筛选条件是否符合顾客的比较方式。一个 Hero 可以让页面更有吸引力，却无法弥补无货、分类错误、商品描述含糊的问题。先把产品路径打通，再做气氛。

有一个简单办法判断首屏是否有效：请不参与制作的人在五秒内回答“卖什么、给谁、往哪里点”。如果他只记住配色，却说不出产品，首屏就需要改。这个测试不需要昂贵工具，也不等于正式的转化率实验，但能快速发现信息结构中的明显断点。

七、发布前按这张清单验收

  1. 事实：图中是可销售的真实商品吗？颜色、形态、功能与商品页一致吗？示意图有说明吗？
  2. 层级：类别标题是否一眼可见？短说明是否只保留有帮助的信息？按钮是否清楚？
  3. 比例：桌面首屏下方能否看到商品路径？调整高度后是否发生裁切、溢出或空洞？
  4. 移动：小屏和大屏手机上，文字、图片、按钮和第一批商品是否顺畅衔接？
  5. 功能：筛选、排序、商品卡片、图片链接和按钮是否都指向正确位置？
  6. 速度：图片是否压缩并使用合适尺寸？首屏是否因为大图明显变慢？
  7. 发布：检查的是线上公开 URL 吗？主题预览或本地文件不算完成发布。

验收最好先记录当前页面的截图与关键路径，再改一个清晰的版本。上线后对照真实访问数据与顾客反馈，观察分类页进入商品详情的比例、筛选使用情况和购买路径中断位置。不要只凭“看着更高级”判断效果，也不要因为某一天的访问波动就宣布设计成功。内容、库存、流量来源同时变化时，要谨慎解释数据。

如果你正在做外贸 B2B 站，商品路径会从“加入购物车”变成“询盘、索样、下载规格”。判断方法仍然适用，但首屏要展示的证据可能从生活场景图变为规格、应用行业和交付能力。可继续阅读分类页标题：文案问题还是模板问题和产品图片 ALT 核查方法，把首屏的文字与图片证据一起检查。

常见问题

分类页 Hero 一定要做成 350 像素吗？

不一定。350 像素是某次桌面设计讨论的约束，不是行业标准。先看导航、设备高度、图片比例以及商品列表开始的位置，再决定具体高度。

首屏放三张图会不会比一张图更好？

只有在三张图各自提供不同、真实的产品信息时才值得。若三张图内容重复，或让主商品变小，一张清晰的大图通常更容易读。

有了漂亮的 Hero，商品列表还需要改吗？

需要。商品状态、规格、价格、筛选和详情页才是后续决策的基础。首屏只能把顾客带到产品，不能替代产品信息。

本地预览完成后可以说页面上线了吗？

不可以。要在公开 URL 核对真实页面，并检查桌面、手机、链接、图片和商品路径。设计稿、主题预览与线上发布是不同状态。