IFM Overview · Section 01

Core System Architecture & Product Value
我们造的是什么

3 版并排,都是 Wefunder 正文栏 720px 的真实上屏尺寸。 下面每个数字都是脚本现场量的,不是做的人自己报的。

← 回六节总入口
这一节的判断 · 摘自 STRATEGY.md

那段话的毛病不是写得不好,是它把「我们是什么」和「行业为什么烂」搅在一起了

Banner 的活是把前者单独拎出来、配一张真机器的照片,让人 1.5 秒内知道这家公司干什么——

剩下那 60% 骂行业的内容留给正文,banner 不背。

A · Cinematic —— 全景照片压字
A-cinematic
上屏高度404px预算 420px
横向溢出必须无
图片清晰度够 2×上屏宽 ×2
压字对比度过 AAWCAG ≥4.5:1
Wefunder 正文栏 · 720px 真实宽度 单开这一版 ↗
用了哪张照片
  • 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 版字要少。

B · 三层堆栈(Stack)
B-stack
上屏高度360px预算 420px
横向溢出必须无
图片清晰度够 2×上屏宽 ×2
压字对比度过 AAWCAG ≥4.5:1
Wefunder 正文栏 · 720px 真实宽度 单开这一版 ↗
用了哪张照片
  • 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.jpgobject-position:50% 82%

选它是因为机械臂 + 触屏 + 真顾客同框。但居中裁(50%)会把机器整个裁掉,只剩顾客、

木台面和绿植,那条带子就变成「一家咖啡店」,跟下面的三层堆栈接不上。82% 把横条切在源图

y≈404–721 那一层:左边机械臂和夹爪、中间冲煮头和杯子、右下触屏(蓝色 UI 看得出是屏),

右上还留着坐着的顾客和长凳。遮罩右半边收着压 —— 压狠了会把臂和屏一起洗没。

脚注色用 --soft 而非 --faint--faint 落在 --void 上只有 3.1:1,不过 AA。

C · 编辑式分栏(Editorial)
C-editorial
上屏高度268px预算 420px
横向溢出必须无
图片清晰度够 2×上屏宽 ×2
压字对比度过 AAWCAG ≥4.5:1
Wefunder 正文栏 · 720px 真实宽度 单开这一版 ↗
用了哪张照片
  • 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 预算)。

读这一节完整的策略 ↗