首页版式方案 · 第 8 节 / 共 10 节 · ← 三款设备 · 出杯流程 →

第 8 节 · 软件 #software

下面有这一节的现状截图和 4 个骨架不同的新版式。推荐:方案 D——前一节产品介绍信息很满,这一节收成窄栏、深一档纸色,只说一句话配一段短视频,给读者喘气。

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

看完这一节,访客应该知道机器靠自家软件管着:点单收银、库存、监控、设备自检、排班、会员,一套全包。
看完这一节,访客应该去做点「Explore Software」看软件页,或「Book a demo」约演示。

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

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

现状

标题块 → 左边一句话+按钮、右边带阴影的视频框(框里 3×2 模块方格)。左边大片空白。

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

方案 A · 视频居中,六个模块左右各三个围着

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

适合:屏幕是主角,六个模块像围着它的功能说明,一眼看出「一套软件管全部」。 代价:两侧文字列窄,模块说明只能很短。

桌面
// Software · Store OS

Effortless by design.

  • POSOrders, payment, menu — one register.
  • InventoryCounts the hoppers. Writes the restock list.
  • MonitoringEvery cup leaves a trace.
视频 · Store OSOrdering on the machine's touchscreen
  • EquipmentThe machine checks itself.
  • StaffShifts, permissions, handoffs.
  • CustomersRegulars, remembered.
Explore Software Book a demo
手机 390 宽
// Software · Store OS

Effortless by design.

  • POSOrders, payment, menu — one register.
  • InventoryCounts the hoppers. Writes the restock list.
  • MonitoringEvery cup leaves a trace.
视频 · Store OSOrdering on the machine's touchscreen
  • EquipmentThe machine checks itself.
  • StaffShifts, permissions, handoffs.
  • CustomersRegulars, remembered.
Explore Software Book a demo

手机上视频在上,六个模块两两一排在下。

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

方案 B · 满版点单屏实拍,模块名压在底边

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

适合:真人在机器上点单的画面最有说服力,页面在这里有一次「开窗」。 代价:暗底;六个模块只剩名字,说明看不到。

桌面
视频Ordering on the machine's touchscreen
// Software · Store OS

Effortless by design.

Point, tap, done — the software runs the machine so you can focus on the craft.

Explore Software Book a demo
POSInventoryMonitoringEquipmentStaffCustomers
手机 390 宽
视频Ordering on the machine's touchscreen
// Software · Store OS

Effortless by design.

Point, tap, done — the software runs the machine so you can focus on the craft.

Explore Software Book a demo
POSInventoryMonitoringEquipmentStaffCustomers

手机上画面变竖,模块名两行排。

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

方案 C · 竖排模块页签:左边点模块,右边换画面

骨架:页签切换底色:纸色宽度:常规宽标题左上

适合:六个模块每个都能配自己的截图,将来软件页的内容能直接复用。 代价:现在只有一段点单视频,其余五个模块没有画面,得先补截图。

桌面
// Software · Store OS

Effortless by design.

  1. POSOrders, payment, menu — one register.
  2. InventoryCounts the hoppers. Writes the restock list.
  3. MonitoringEvery cup leaves a trace.
  4. EquipmentThe machine checks itself.
  5. StaffShifts, permissions, handoffs.
  6. CustomersRegulars, remembered.
POS · 视频Ordering on the machine's touchscreen
Explore Software Book a demo
手机 390 宽
// Software · Store OS

Effortless by design.

  1. POSOrders, payment, menu — one register.
  2. InventoryCounts the hoppers. Writes the restock list.
  3. MonitoringEvery cup leaves a trace.
  4. EquipmentThe machine checks itself.
  5. StaffShifts, permissions, handoffs.
  6. CustomersRegulars, remembered.
POS · 视频Ordering on the machine's touchscreen
Explore Software Book a demo

手机上模块变成横划小按钮,画面在下。

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

方案 D · 居中窄栏:一句话+一段小视频+两个按钮推荐

骨架:居中窄栏底色:深一档纸色宽度:窄栏标题居中

适合:最短的一节,给读者喘气;前后都是信息很满的节时特别需要。 代价:六个模块只剩一行名字,软件的「全」看不出来,要靠软件页补。

桌面
// Software · Store OS

Effortless by design.

Point, tap, done — the software runs the machine so you can focus on the craft.

视频Ordering on the machine's touchscreen

POS · Inventory · Monitoring · Equipment · Staff · Customers

Explore Software Book a demo
手机 390 宽
// Software · Store OS

Effortless by design.

Point, tap, done — the software runs the machine so you can focus on the craft.

视频Ordering on the machine's touchscreen

POS · Inventory · Monitoring · Equipment · Staff · Customers

Explore Software Book a demo

手机上几乎不变,视频宽度占满窄栏。

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

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