靠大、靠色还是靠位置：三种视觉层级做法的失效边界

同一份首屏内容——一句主张、三条卖点、一个咨询按钮、一张产品图——交给三个人排，会出来三张完全不同的页面，而且三张都自认为「重点很突出」。想分高下，得让它们做同一件事：找十二到十五个不了解这门生意的人，屏幕亮五秒后遮掉，问他们记住了什么、下一步想点哪里。做过几轮就会发现，差距不在好不好看，而在三种做法各自押的赌注不一样，塌方的方式也不一样。

做法一：把最重要的那个做到最大

具体的量长这样。主标题给到 44 至 56 像素，正文 16 像素，中间不设过渡层级，副标题直接压到 20 像素，最大与最小之间拉开 2.75 到 3.5 倍。主视觉占首屏高度的 55% 到 65%，其余元素一律往后退。这条路之所以成立，是因为尺寸是最原始的层级信号，眯着眼睛看、缩到指甲盖大小看，它都还在。

成本结构有点反直觉。网站设计的工时在这个方案里反而是最省的，一两天就能定稿，钱几乎全花在素材上。一张能撑住 1920 像素宽还不发虚的图，产品实拍通常是两天拍摄加一天修图，落在四千到一万二千元这个区间。想省这笔钱就得用图库照片，代价是同一张笑脸和同一双握着的手，同行也在用。

维护上有一笔容易被漏掉的账。运营每换一次首屏大图，要出 1920、750、375 三套裁切，还要压到 200KB 以内，熟练的人也得四十分钟左右，不算挑图和沟通的时间。一年换六次，就是四个多小时的纯操作，而且每换一次，首屏的气质就重赌一次。

它失效在三种情况下。第一种是重点不止一个：三条卖点都想大，结果三个都不大，五秒测试里受访者往往一条都复述不出。第二种是文案变长：八个字的主张改成二十二个字，48 像素的标题在 375 像素宽的手机上折成四行，首屏被标题吃掉，按钮直接掉到折叠线以下。第三种是素材不够硬：放大本身就是放大器，产品的毛边、灯光的反光、抠图留下的白边，全部按比例一起放大。

做法二：只给唯一动作留一个高饱和色

做法是把整页收到两三个中性灰阶，主色只出现在按钮和一处强调标签上。正文与背景的对比度不低于 4.5 比 1，24 像素以上的大字不低于 3 比 1，按钮的默认、悬停、按下、禁用四种状态之间，明度差至少拉开 8% 到 12%，否则用户点下去没有回馈感，会以为页面卡住又点一次。

这是三条路里首次投入最低的一条。一份色板加一份状态规范，一到两天就能交，不依赖拍摄，不依赖内容方配合，改起来也快。很多预算紧的项目最后都会落到这里，理由充分。

问题出在第二年。它是最容易被稀释的方案：上线那天页面上只有两个主色按钮，三个月后市场部要给活动入口上色，半年后销售要给询价入口上色，客服要给在线咨询上色，等回头统计，主色按钮已经变成八九个。一旦超过三处，那个颜色就不再是指示，只是装饰。所以这条路真正的成本不在设计，在于有没有人能长期驳回「我这个入口也很重要」——这条规矩比任何一份网站设计规范都难守，因为它需要的不是工时，是权限。

失效场景也更琐碎。品牌主色本身压不住是最常见的一种，浅蓝、米色、浅灰绿这类高明度低饱和的颜色放在白底上跳不出来，硬要用就得加深色描边或深色底块，反而更花。其次是色觉差异，男性里红绿色觉异常的比例约为 8%，只靠红绿区分主次的一组按钮，对这部分人是平的，所以颜色永远要和位置、形状再搭一层冗余。第三是深色模式，白底上刚刚好的饱和色放到深底上会发光刺眼，得另配一套明度值，等于规范做两遍。最后是投放落地页，活动色一个月一换，规范撑不过两个季度。

做法三：用位置和成组关系分层

这条路不靠放大也不靠上色，靠的是让人一眼看出「哪几块是一伙的」。首屏切成三个信息组，组内间距和组间间距必须拉开四倍以上才会被识别成两组，通常组内取 8 到 12 像素，组间取 48 到 64 像素。最重要的那块放在阅读动线的第一个停留点，按钮紧贴主张，中间不要插三条卖点——一旦插进去，按钮就被归到卖点那一组，点击率往往掉三成以上。

设计本身不贵，贵在动手之前那一段。客户给过来七条卖点，全都写着「行业领先」，得砍到三条并排出先后，这件事通常要多开两次会、多花三到五个工作日。它在网站设计的报价单上几乎看不见，却是三条路里前期最重的一段，也是最容易被砍掉的一段。砍掉的后果不是页面变丑，是三个信息组里塞了七件东西，位置分层从第一天起就不成立。

一年后它最省，前提是把首屏在后台做成固定槽位：标题槽一个、卖点槽三个、按钮槽一个，字数上限写死。如果图省事丢一个自由富文本框出去，行政会加一条放假公告，市场会塞一个二维码，那 56 像素的组间距两个月就被填平了。槽位化这件事在开发阶段大约多花半天到一天，是整套方案里回报率最高的半天。

它撑不住的场合有两类。一类是内容天然就密的页面，参数表、政策条款、招标公告，留白不够分，这时候该用的是分隔线和表头固定，不是留白。另一类是一屏内所有条目优先级真的相同，比如分公司列表、经销商网点，强行做出主次反而是误导，用户会以为排在前面的那家更近或更好。

把三条路摆到同一张账单上

首次投入从低到高是色彩、尺寸、位置。色彩省在不依赖外部素材，尺寸的钱压在拍摄上，位置的钱压在人力沟通上，后者最难写进合同，也最容易被误认为「你们什么都还没做」。

上线周期，色彩一到两天，尺寸四到六天且其中三天在等图，位置五到八天且有一半时间在跟内容方拉锯。如果项目卡着展会或招商节点倒排期，这个差距会直接决定选哪条。

一年后的维护成本刚好反过来。位置方案最省，槽位一做好，运营基本改不坏；尺寸方案中等，每次换图四十分钟，可预期；色彩方案最贵，它消耗的不是工时而是拒绝的次数。同一份网站设计交付出去，三年之后三张账单的结构完全不同。

出事的方式也不一样，这点比成本更值得先想清楚。尺寸方案是一次性塌方，换上一张分辨率不够的图，当天首屏就垮，但换回来也快。色彩方案是慢性稀释，每个月退让一点，没有哪一天算是出事，半年后回头看已经认不出原来的样子，要救得做一轮全站清理，一般两到三天。位置方案是被内容撑爆，某次活动加了两块内容，间距被吃平，而它最难救——撑爆它的通常不是设计问题，是几个部门谁都不肯让出首屏那一格。

按四个问题往下走，别从颜色开始挑

第一个问题：这一屏里，用户真正只能做一件事吗。如果核心动作只有一个，尺寸和色彩两条路都成立，选便宜的那条即可。如果并列三个以上的入口，放大和上色只会互相抵消，剩下的选项只有位置分组，别在这上面浪费两轮评审。

第二个问题：手上有没有一张放到 1920 像素宽还不虚、还不用替它解释两句的图。没有就别选尺寸主导。这个判断要在定方案之前做，不要等设计稿铺开了再回头找图，那时候整版结构都是按大图搭的，撤不下来。

第三个问题：品牌主色在白底上能不能一眼跳出来。有个很土但管用的办法，拿主色填一个 120 乘 44 的方块打印在白纸上，贴墙后退两米还认得出、还不刺眼，它才够格当指示色。做不到就老实把颜色降格成辅助信号，主力交给位置。

第四个问题：三个月后是谁往这个页面加东西。答案如果是不懂设计的同事，那么无论选哪条路，网站设计交付时都必须连同槽位规则一起交，并且当面演示一遍加内容会发生什么。守不住维护端，前面三条路都只能撑一个季度。

三者要叠加时有个顺序：先定位置，位置分不开再动尺寸，还分不开才上颜色。绝大多数返工是反着来的——先挑中了一个好看的主色，发现不够突出就把字号往上加，加到标题占了半屏还是乱，最后才发现问题出在两块内容压根就没分组。

做完之后有个十秒钟的验收动作：把稿子截图，缩到手机图标那么大，或者干脆眯起眼睛看到只剩色块。这时候还能一眼指出哪块是重点，就算过了。指不出来，回去先改位置，别急着把按钮调得更红——颜色是用来确认答案的，不是用来找答案的。