首页版式方案 · 第 9 节 / 共 10 节 · ← 软件 · App 与团购 →

第 9 节 · 出杯流程 #how

下面有这一节的现状截图和 4 个骨架不同的新版式。推荐:方案 A——上一节是窄栏安静的一节,这一节放满版视频,四步压在底边——全页最后一次「开窗」,也是三节暗底里的最后一节。

怎么用:点右上角「✎ 批注」按钮(按钮上那串英文是这一页批注的存档名),在任意方案、任意一句话上点一下写意见(比如「选 B,但标题换居中」)。选定后这一节可以单独再开一轮。

看完这一节,访客应该知道亲眼看机械臂怎么做一杯:接单 → 磨粉称重 → 萃取 → 出杯。
看完这一节,访客应该去做看视频(滚到就自动播);第一屏「See the robot」按钮会跳到这里。

内容大纲(照现在线上预览版的原文)

内容问题(不是版式问题,要 Jack 定)

现状

标题块 → 左视频、右 4 行步骤(细线框)。跟上一节「软件」都是左右对半,还挨着。

骨架:左右对半底色:纸色宽度:常规宽标题左上
现状 · 桌面 1280 宽
现状 · 桌面 1280 宽 · 截自预览分支 首页预览版(09-14 那一版,分支 claude/homepage-picks-2026-09-13,版本号 8597c24)
现状 · 手机 390 宽
现状 · 手机 390 宽

方案 A · 满版视频,四个步骤压在底边一排推荐

骨架:满版照片/视频压字底色:满版照片/视频宽度:满版贴边标题压在图上

适合:机械臂动起来就是最好的说明,画面最大、最有冲击;第一屏「See the robot」跳过来正好接上。 代价:暗底;步骤说明只能很短,字压在视频上要加暗角才读得清。

桌面
手机 390 宽

手机上视频 4:5 竖着放,四步排到视频下面变成一列。

两个框里是同一份小样,按框的宽度自动排版——跟真网页在手机上的表现一致。

方案 B · 宽幅视频条在上,四步大编号横排在下

骨架:标题在上·宽幅图在下底色:纸色宽度:常规宽标题左上

适合:视频和步骤分开,浅色主题下字最清楚;像产品说明书一样一步一步读。 代价:四步横排是四个等宽格,有点回到老模子;视频比满版小。

桌面
// Technology

Inside the Pull

视频The SCARA arm working the bar
  1. 01
    Order Routed

    Request enters the queue from app, screen, or pickup. Bean hopper selected by recipe version.

  2. 02
    Grind & Dose

    Conical burr grinds on demand. Dose weighed to under 1 gram. Tamp force logged per cup.

  3. 03
    Extraction

    SCARA arm docks the puck. Pressure profiled to 9 bar. Yield monitored to target ratio.

  4. 04
    Finish & Serve

    Milk textured or ice dosed. Cup delivered to pickup shelf. Queue rotates.

手机 390 宽
// Technology

Inside the Pull

视频The SCARA arm working the bar
  1. 01
    Order Routed

    Request enters the queue from app, screen, or pickup. Bean hopper selected by recipe version.

  2. 02
    Grind & Dose

    Conical burr grinds on demand. Dose weighed to under 1 gram. Tamp force logged per cup.

  3. 03
    Extraction

    SCARA arm docks the puck. Pressure profiled to 9 bar. Yield monitored to target ratio.

  4. 04
    Finish & Serve

    Milk textured or ice dosed. Cup delivered to pickup shelf. Queue rotates.

手机上四步变竖排,编号放大在左。

两个框里是同一份小样,按框的宽度自动排版——跟真网页在手机上的表现一致。

方案 C · 超大编号清单:01–04 占满版面,视频缩成右上角小窗

骨架:竖排清单底色:深一档纸色宽度:常规宽标题左上

适合:四步读起来最清楚,编号本身就是装饰;视频变成「证据小窗」。 代价:视频太小,机械臂的动感没了,跟「See the robot」的期待不符。

桌面
// Technology

Inside the Pull

视频The SCARA arm working the bar
  1. 01Order Routed

    Request enters the queue from app, screen, or pickup. Bean hopper selected by recipe version.

  2. 02Grind & Dose

    Conical burr grinds on demand. Dose weighed to under 1 gram. Tamp force logged per cup.

  3. 03Extraction

    SCARA arm docks the puck. Pressure profiled to 9 bar. Yield monitored to target ratio.

  4. 04Finish & Serve

    Milk textured or ice dosed. Cup delivered to pickup shelf. Queue rotates.

手机 390 宽
// Technology

Inside the Pull

视频The SCARA arm working the bar
  1. 01Order Routed

    Request enters the queue from app, screen, or pickup. Bean hopper selected by recipe version.

  2. 02Grind & Dose

    Conical burr grinds on demand. Dose weighed to under 1 gram. Tamp force logged per cup.

  3. 03Extraction

    SCARA arm docks the puck. Pressure profiled to 9 bar. Yield monitored to target ratio.

  4. 04Finish & Serve

    Milk textured or ice dosed. Cup delivered to pickup shelf. Queue rotates.

手机上小窗视频在标题下面,编号一行一个。

两个框里是同一份小样,按框的宽度自动排版——跟真网页在手机上的表现一致。

方案 D · 竖幅视频居中,前两步在左、后两步在右

骨架:中间主图·两侧配字底色:深一档纸色宽度:常规宽标题居中

适合:视频竖着放更像门店里看到的机械臂高度;左右步骤读起来像绕着机器走一圈。 代价:视频是横拍素材,竖着裁会切掉两边;两侧文字列很窄。

桌面
// Technology

Inside the Pull

  1. 01Order Routed

    Request enters the queue from app, screen, or pickup. Bean hopper selected by recipe version.

  2. 02Grind & Dose

    Conical burr grinds on demand. Dose weighed to under 1 gram. Tamp force logged per cup.

视频The SCARA arm working the bar
  1. 03Extraction

    SCARA arm docks the puck. Pressure profiled to 9 bar. Yield monitored to target ratio.

  2. 04Finish & Serve

    Milk textured or ice dosed. Cup delivered to pickup shelf. Queue rotates.

手机 390 宽
// Technology

Inside the Pull

  1. 01Order Routed

    Request enters the queue from app, screen, or pickup. Bean hopper selected by recipe version.

  2. 02Grind & Dose

    Conical burr grinds on demand. Dose weighed to under 1 gram. Tamp force logged per cup.

视频The SCARA arm working the bar
  1. 03Extraction

    SCARA arm docks the puck. Pressure profiled to 9 bar. Yield monitored to target ratio.

  2. 04Finish & Serve

    Milk textured or ice dosed. Cup delivered to pickup shelf. Queue rotates.

手机上视频在上,四步在下一列。

两个框里是同一份小样,按框的宽度自动排版——跟真网页在手机上的表现一致。

照片和文案全部取自官网已有的内容;小样里的数字只用现在线上预览版出现过的(测试会查)。回总览 →