3 版并排,都是 Wefunder 正文栏 720px 的真实上屏尺寸。 下面每个数字都是脚本现场量的,不是做的人自己报的。
← 回六节总入口STRATEGY.md那段话的毛病不是写得不好,是它把「我们是什么」和「行业为什么烂」搅在一起了。
Banner 的活是把前者单独拎出来、配一张真机器的照片,让人 1.5 秒内知道这家公司干什么——
剩下那 60% 骂行业的内容留给正文,banner 不背。
new-hero-hardware-hi.jpg 2160×1215 · 上屏 720px赌的是气势。 一张满栏真机器撑住整块,字退到左侧楔形暗部里,读者第一眼看到的是那条机器阵列,
第二眼才读到「We build Intelligent Food Machines.」——它是那堵墙的门牌,不是一张 SaaS hero。
用 new-hero-hardware-hi.jpg。 三个理由:2160×1215,满栏 720 上屏 2 倍要 1440,只有它够;
它是整条机器阵列的侧视,一眼看懂「我们造的是机器」;左上那面亮墙是全套素材里唯一一块能压字的大负空间。
遮罩是楔形,不是一层平铺黑。 两层叠:轻的 .ifm-scrim(左侧软洗,55% 就收干净 + 底部一点压脚
托住三层横条),深的 .ifm-plate(96° 楔子,只管压字那一侧,向下用 mask 渐隐,让左下角的机器浮回来)。
右半照片不归任何一层管。三层标签压在照片下缘本来就暗的那条上(原图该处 avg RGB 20),
三等分 + 细竖线,不配长句 —— A 版字要少。
new-arm-gantry-up.jpg 1440×810 · 上屏 718px这版赌的是结构。 「三层原生一体」是个结构性主张,文字讲不清、图一眼就清楚 ——
所以把三层画成一张架构图:一个盒子被三条 1px 细线切成三格,层与层之间没有缝,
外面一圈边框把照片带和三层箍成同一个物件。顺序按原文 "sitting on top of these two
foundational layers" 走,03 AI 在最上,画反了就是把论点画错。amber 在堆栈里只出现一次
(03 那条 3px 竖边),标题里只上在 "Intelligent" 一个词上。
照片:../media/new-paloalto-arm-up.jpg,object-position:50% 82%。
选它是因为机械臂 + 触屏 + 真顾客同框。但居中裁(50%)会把机器整个裁掉,只剩顾客、
木台面和绿植,那条带子就变成「一家咖啡店」,跟下面的三层堆栈接不上。82% 把横条切在源图
y≈404–721 那一层:左边机械臂和夹爪、中间冲煮头和杯子、右下触屏(蓝色 UI 看得出是屏),
右上还留着坐着的顾客和长凳。遮罩右半边收着压 —— 压狠了会把臂和屏一起洗没。
脚注色用 --soft 而非 --faint:--faint 落在 --void 上只有 3.1:1,不过 AA。
new-paloalto-arm-up.jpg 1440×810 · 上屏 299px赌的是什么 —— 赌「贴脸不违和」:不往页面上加视觉重量,赌最像招股书本身的那一版最有说服力。
读者不觉得看到了广告,只觉得这份备忘录写得讲究。赢法是精致,不是响亮。
用了哪张照片 —— ../media/new-paloalto-arm-up.jpg(1440×810),不是原定的 new-arm-gantry-up.jpg。
换的理由是量出来的:龙门臂那张右侧 25–30% 被一整块深色设备侧板占满,整块看着往右歪;
object-position 从 55% 一路扫到 26%(十档)最右一条竖带始终是全场最暗——那块黑一直延伸到源图右边缘,
挪裁切根治不了。Palo Alto 这张暖光均匀、右侧是木饰面和座位区,且画面里机械臂 + 触屏 + 真顾客同框,
正好照应 deck 那句三层一体。照片上一个字都不压,只在右下角挂一个等宽小标签。
实测上屏高度 268px(≤420 预算)。