A1 落地页 唯一目标是注册
不用出镜,
也能做人设 IP。
给一张照片、录 30 秒朗读,剩下的交给它。
一条能直接发的口播视频。
这屏在验证
- 主 CTA 只有 1 个,首屏除它全是辅助信息
- 「领 30 积分」由后台配置下发,界面不写死
- 样片入口在 CTA 之后,且写明是外链——跳出去就回不来
c-heroc-ib--solidc-listc-rowc-hlc-footbar--stackc-tabbar这一份是可点击的界面原型:不是效果图,是可以开着看的 HTML。36 页按 A–H 八个区排开,全部由 07 组件库拼装,零自制类;下面还有两个可点着走的演示和一个状态专章。
演示人设固定为一位家庭教育指导师(陈颖),所以 36 屏里的选题、文案、档案字段是同一套内容——换人设也能跑,但保持同一套内容才看得出界面在真实内容下成不成立。
c-shot 都是骨架占位,系统二定稿后整块替换,界面骨架不动。游客第一眼看到的三个页面。唯一目标是让游客注册——他不注册就什么也做不了,所以 A 区不设「试用」,也不放任何需要登录才能完成的操作。
给一张照片、录 30 秒朗读,剩下的交给它。
一条能直接发的口播视频。
c-heroc-ib--solidc-listc-rowc-hlc-footbar--stackc-tabbarc-inputc-errc-alert--infoc-alert--warnc-checkc-footbar--stackc-cardc-patternc-ib--lgc-listc-rowc-alert--warn建档向导六页。这一段路的敌人是「填表疲劳」,所以必填只留三项,照片和声音都可以跳过,且每次跳过的后果都写在按钮旁边。
c-ring 在这里首次出场:它替代没有信息量的转圈。c-navc-steps--compactc-ringc-listc-row--barc-alert--okc-labelc-inputc-textareac-tag--brandc-tag--ec-alert--infoc-card--tintc-subheadc-cardc-hlc-btn--secc-btn--ghoc-rowc-shot--plainc-uploadc-errc-alert--infoc-alert--warnc-wave 只在音色相关页出现,别处不撒。c-card--liftc-ringc-wavec-alert--okc-alert--infoc-card--tintc-listc-row--bar-warnc-kvc-alert--warnc-footbar出片主链七页,是产品的心脏。每一步都能看到「扣多少、剩多少」,且三个扣分点各自确认一次,不让用户在最后一步才发现总账。
c-navc-alert--infoc-card--liftc-btn--pric-listc-rowc-tabbarc-alert--infoc-card--tintc-cardc-ib--linec-btn--secc-footbarc-stepsc-card--tintc-segc-textareac-counterc-alert--infoc-shot 都是占位。c-stepsc-shotc-pick--compactc-sw--lgc-alert--warnc-cardc-pickc-segc-wavec-tag--brandc-stepsc-ringc-listc-row--barc-tag--brandc-alert--infoc-alert--okc-shotc-kvc-subsc-btn--pric-footbar出片之后的三个页面。站内不播放视频,所以「看到成片」这件事必须靠封面、关键帧、完整字幕与时长来补足;下载是唯一出口,也是最显眼的那一个。
c-row--bar-err 是列表行的状态条,用来标过期这类「需要留意但不用处理」的状态。c-segc-listc-row--bar-errc-tag--sc-cardc-statc-card--liftc-shotc-subheadc-inputc-subsc-listc-rowc-alert--infoc-cardc-rowc-segc-tag--brandc-shot声音相关三页。「声音像他」是六条标准的地基,所以这一段的关键是:试听永远免费、授权必须主动勾选、失败不阻断出片。
c-listc-row--selc-wavec-tag--solidc-alert--infoaria-disabled,保持可聚焦),点下去给出原因而不是静默。c-checkc-ringc-wavec-card--liftc-tag--ec-card--accent-err 在本屏只出现一次,不与 tint 卡混用。c-ib--okc-wavec-alert--infoc-card--accent-errc-tag--s模板两页。两类模板共用一个库:视频风格模板管成片画面,图片模板管封面与配图。预览必须本地渲染,改一眼看一眼。
c-segc-card--tintc-shotc-tag--sc-alert--warnc-shotc-sw--lgc-selectc-rowc-subheadc-card--lift积分与账号七页。资金对用户透明是这个区的全部主题:余额拆可用与预扣中、明细三态可查、订单只读且驳回必给原因。
c-balancec-listc-rowc-tabbarc-card--liftc-segc-statc-ib--okc-tag--brandc-tag--wc-alert--info| 档位 | 积分 | 赠送 | 单价 |
|---|---|---|---|
| ¥100 | 100 | 0 | ¥1.00 |
| ¥300 | 300 | 20 | ¥0.94 |
| ¥500 | 500 | 60 | ¥0.89 |
| ¥1000 | 1000 | 180 | ¥0.85 |
| ¥2000 | 2000 | 460 | ¥0.81 |
c-segc-card--tintc-tbc-kvc-tag--sc-alert--warnc-card--tintc-tag--brandc-shotc-listc-rowc-tag--sc-cardc-listc-rowc-card--accent-errc-inputc-alert--infoc-segc-cardc-tag--wc-bar__ic-kvc-alert--errc-alert--infoc-cardc-inputc-textareac-tag--brandc-tag--e消息与内容五页。通知是「跟你有关的」,公告是「平台说的」,两类分开走;外链一律纯链接且不带身份参数。
c-segc-listc-rowc-tag--brandc-tabbarc-listc-rowc-tag--wc-cardc-alert--infoc-card--accent-errc-ib--errc-tag--solidc-tag--ec-alert--infoc-tag--ec-cardc-alert--infoc-btnc-hintc-alert--infoc-cardc-shotc-tag--brand状态不是页面的附属,是页面的一部分。这一章用六屏把「空 / 加载 / 排队 / 失败 / 超限 / 无权限」摆在一起,每一屏都标了它属于哪一页的真实状态。
c-emptyc-empty__figc-segc-btn--pric-skel--animc-ringc-card--tintc-alert--infoc-queuec-costc-alert--okc-card--liftc-btn--pric-card--accent-errc-alert--okc-costc-ib--errc-btn--pric-card--accent-warnc-kvc-alert--okc-ib--warnc-stepsc-alert--warnc-alert--infoc-cardc-btnc-check下面的手机屏是可以点着走的:绿点标出的位置都能点,会真的翻页、弹确认层、改余额。它不是另做的一套页面,用的就是上面这批组件。
点穿一遍就能看出三件事:扣分前一定先给「本次扣 N,剩余 M」并要一次确认;文案确认只扣文案那 2 分,成片确认只扣成片那 10 分;生成中可以离开,取消文案随状态变。
点这些位置
这一条链在验证什么
同一部手机里走一遍「换一批选题(-1)→ 确认文案(-2)→ 确认生成(-10)」,每一步都能看见余额怎么变。
点这些位置
这一条链在验证什么
c-shot 占位与 C4 / F2 的实时预览内容。render_target 字段。