任务路线

起手搭页面

先做出别人看得懂的第一屏:结构、文案层级和主操作。

转化页面

6 个条目

首屏Hero

起手搭页面

「用户打开页面的前 5 秒,能看懂这是什么、有什么用、下一步点哪里吗?」

CodeNow产品工作台
从想法到上线把想法变成能用的产品

拆成清楚的步骤,今天就做出第一版。

免费开始
① 这是做什么的② 我能得到什么③ 下一步做什么
起手搭页面

「首屏按钮文案模糊、主次没层级,用户不知道点了会发生什么,也不知道该点哪个。」

产品落地页 · 标题下方把想法变成能用的页面

今天搭出第一版,随时回到工作区继续改。

免费试用 14 天看示例

结论:主按钮要写清动作和收益;「看示例」只做文字链,不抢下一步。

起手搭页面

「三档方案长得太像,切年付后只有推荐档价格变了,试用和结算按钮也不告诉用户为什么点不动。」

Starter免费1 位成员
Scale¥66/月50 位成员

结论:三档并列对照,推荐档抬起并带购买按钮;年付价格写在卡上。

起手搭页面

「页脚放了 8 条 FAQ,用户还是来问客服——他们到底没找到,还是没看?」

落地页 · 页脚前的问答
如何导出项目数据?

设置 → 数据管理 → 导出,完成后下载压缩包。

试用结束会自动扣费吗?+
如何取消订阅?+

结论:FAQ 是可展开的问答项;问题用用户口吻,答案给出下一步。

社会认同SocialProof

起手搭页面

「老板让我在落地页放一排客户 logo 和一个使用人数,可它们大多没有授权、也查不到来源,堆上去真能涨信任吗?」

用户评价UserVoice

起手搭页面

「评价只有空泛夸奖,没有署名场景和来源,读者判断不了是不是真的。」

上线后每周少花两小时整理报表,团队终于能专注分析。
林晓 · 运营负责人电商团队 · 上线 6 周 · 访谈 INT-042

结论:评价卡要同时看见结果、是谁、在哪用、从哪来。

页面结构与适配

6 个条目

页头Header

起手搭页面

“活动页的促销、社媒和合作链接都塞进页头,用户反而找不到报名。”

06
SEP
造物
周末
本周六日立即报名
80+ 独立设计摊主河岸仓库 · 10:00–20:00

结论:页头负责识别、主导航与唯一行动。促销、社媒和合作入口不该挤进主信息带。

导航栏Navbar

起手搭页面

“手机底部五个图标都没有文字,用户总点错账单,当前在哪也只靠颜色猜。”

响应式设计Responsive Design

起手搭页面

“桌面版直接缩小到手机就乱套——列数、导航、横向溢出没有可循规则。”

Responsive按宽度重排,不等比缩小
桌面 1280
概览 · 功能 · 定价
平板 780
概览 · 功能 · 定价
手机 390
≡ 菜单
✓ 断点按内容需要✗ 不是设备型号清单

结论:列数、导航、字号随宽度重新排布;同一内容在三种空间都能完成主任务。

卡片网格Card Grid

起手搭页面

「卡片排成网格后列数一变就乱:末行被拉宽变形,空数据留一片空白,我说不清该按什么规则收口。」

项目精选 · 5 个条目
作品 A作品 B作品 C作品 D作品 E

当前 3 列· 末行 2 张等宽不拉伸 · gap 统一

单页布局Single Page

起手搭页面

“单页区段没有顺序,点导航也不知道现在在哪儿、下一步该看什么。”

产品落地页 · 一页纵向滚动
  1. 1首屏
  2. 2功能
  3. 3定价当前
  4. 4FAQ
区段导航首屏功能定价FAQ
结果:当前在「定价」(第 3/4 段),区段导航标出位置;点导航只跳到对应区段,页面不重新加载。

排版与视觉样式

1 个条目

排版Typography

起手搭页面

“标题、正文和辅助信息挤成同一层,放大文字或读长段落时也没有舒适的字级与行高。”

字阶标尺 · 比例 1.6
  1. 28产品更新说明700
  2. 16正文要足够字级和行距400
  3. 13辅助信息 · 日期400
当前正文 16/1.6 通过长文可读;层级靠字级·行高·字重,不靠颜色。

视觉基础

2 个条目

视觉层级Visual Hierarchy

起手搭页面

“页面元素都在,用户却总先看到错的那个——怎么排才让人一眼看到最重要的?”

山海剧场 · 秋季首演夜航船9 月 21 日 · 19:30 · 海风厅立即选座 ↗

当前顺序:节目名 → 场次地点 → 选座大小、位置与留白把观看顺序写进节目单。

留白Whitespace

起手搭页面

「页面挤成一团看不清主次,可又怕留太多显得空站——留白到底是在留什么?」

SLOW JOURNAL6 MIN
穿过雾岭

清晨的路从一片松林开始。

FIELD NOTE · 04
收藏这篇 ↗

当前结果:标题、正文、收藏入口各有呼吸空白建立分组和焦点,不是“没填满”。

内容与数据展示

2 个条目

卡片Card

起手搭页面

「案例卡看起来像按钮却只有一小段文字能点,缺图后整张卡片布局也塌了。」

作品 · 8 分钟把模糊需求变成可验证页面
设计验收
查看详情 →

对照封面、标题、标签、入口属于同一个对象边界——卡片是摘要,不是圆角加阴影。

图片Image

起手搭页面

「商品图加载慢或加载失败时,图片位要么跳一下、要么剩个破图标,用户不知道是在加载、没图、还是坏了。」

对照同一个商品图位,加载中、成功、失败、空四态都长在物件上,尺寸始终不跳、alt 始终可读。

布局基础

1 个条目

间距Space

起手搭页面

“间距没有统一标尺,相关项和区块的亲疏关系读不出来。”

对照

同组相关项用小档位(紧),区块之间用大档位(松):当前间距不靠随机值,而是从有限 token 读取亲疏。

本地场景

2 个条目

小程序Mini Program

起手搭页面交付上线

「打开就弹授权、返回不刷新、分享卡片落到首页——小程序页面到底该把数据挂在哪?」

小程序 · 首页好物清单
今日花束

公开可看 · 分享落到 /pages/home

个性化推荐 · 拒绝仍能逛

结论:回前台才刷新列表;拒绝授权不能整页空白;分享要带落地路径。

飞书应用Feishu App

起手搭页面交付上线

「在飞书里打开应用后可查待办;发送结果用卡片消息,失败要可重试。」

飞书工作台我的待办
需求评审已完成 · 已通知 3 人

结果用消息卡片回执,不另开网站

结论:在飞书里打开就能办事;结果用消息卡片回执,失败可重试且不重复发。

做完这一步之后

知识点可以反复查;任务则建议按「搭页面 → 交互 → 数据 → AI → 上线 → 协作」推进。