想清楚访客在你的世界里怎么逛

流水线第 2 站 · 设计师(结构线)。上一步你定好了世界的视觉气质,这一步产出这个世界在网页上的「信息架构和逛展路线」——访客先看到什么、点哪能去哪,下一步带着它进入【前端】,让 AI 照着这张结构图把页面搭出来。

by @造世界的阿罗·来自小红书 ↗·收录于 2026 / 04 / 11
拆 · DECODE

提示词原文

你是一位资深内容/产品体验设计师。我要把一个异世界设定(青春热血,魔法 × 美食,友情和梦想)做成一个能嵌入网页的展示小站,让访客『逛』一圈就能感受到这个世界。 请帮我设计内容结构和访客动线,按以下步骤来: 1. 先帮我想清【访客是谁、什么场景下打开】:是朋友点开链接随手看、还是有人专门想了解这个世界?据此定整站的基调(轻浏览 vs 深沉浸); 2. 设计【信息架构】:把世界里的内容分成几大板块(比如:世界缘起/核心法则/角色图鉴/美食魔法/主线故事),排出先后顺序,说明为什么这么排; 3. 画出【用户流程】:访客从打开到看完,理想路线是怎样的一条线(落地首屏 → 往下滚 → 点角色卡展开 → 看故事钩子 → 结尾引导); 4. 给每个板块标注【留白与节奏】建议:哪里要满、哪里要空、哪里放一句话点睛,让逛的人不累、有呼吸感。 最后用一段文字+一个简单的层级列表,把整站结构讲清楚,让前端能照着搭。每步先问我确认再继续。You are a senior content/product experience designer. I'm turning an other-world setting (youthful & hot-blooded, magic x food, friendship and dreams) into an embeddable web showcase, so visitors can walk through and feel the world. Design the content structure and visitor flow step by step: 1. Clarify who the visitor is and the scenario they open it in - a friend casually clicking a link, or someone deliberately exploring the world? Set the overall tone accordingly (light browse vs deep immersion); 2. Design the information architecture: split the world's content into major sections (e.g. Origin / Core Laws / Character Gallery / Food-Magic / Main Story), order them, and explain why; 3. Map the user flow: the ideal path from open to finish (landing hero -> scroll down -> click a character card to expand -> read a story hook -> closing call); 4. For each section, note whitespace and rhythm: where to fill, where to breathe, where to drop a single punchy line, so browsing feels easy and paced. Finally summarize the whole structure in a paragraph + a simple hierarchical list the frontend can build from. Ask me to confirm after each step.

轻点带虚线的术语,看它的解释。点右上角「译」切换中英对照。

为什么这么写

这还是第 2 站 · 设计师,但管的是『结构』而不是『颜值』。 上一条定的是世界长什么样,这一条定的是访客在网页里『怎么走』。

小白常犯的错:把《世界观圣经》里的设定一段段全贴到网页上,结果成了一面『信息墙』,访客划两下就跑了。information architecture(信息架构)的意义,就是替访客把内容理成『好逛』的几大块。

三个设计点:

第一,先问『访客是谁、什么场景』。同一个世界,给朋友随手看 vs 给同好深度沉浸,结构完全不同。脱离 scenario(场景)谈结构都是空想——这点和产品做需求时一模一样。

第二,user flow(用户流程)把内容串成一条线。网页不是一堆并列板块,而是一条『逛展动线』:先被首屏抓住,往下滚渐入佳境,点角色卡展开细节,结尾留个钩子。有了这条线,前端才知道页面怎么排。

第三,whitespace(留白)定节奏。世界观内容很容易写得密密麻麻。提前标好『哪里满、哪里空、哪里一句话点睛』,逛的人才有呼吸感——满屏全是字的世界,再好看也劝退。

这一站和上一站(视觉)合起来,就是前端的两张图纸:一张管『长什么样』,一张管『怎么逛』。带着它俩进第 3 站【前端】,世界就要变成真能打开的网页了。

这条用到的术语

  • information architecture
    信息架构 IA
    把内容「怎么分类、怎么摆」想清楚,就像图书馆把书分门别类上架。架构乱了,用户找不到东西,再好看也没用。
  • user flow
    用户流程图
    画出用户「从进来到完成目标」走过的每一步,比如「打开→搜索→下单→支付」。提前发现哪一步会卡住、会跑掉。
  • scenario
    场景
    用户在「什么时间、什么地点、什么状态」下用你的东西。同一个功能,地铁上单手用和办公室双手用,设计完全不同。脱离场景谈功能都是空想。
  • whitespace
    留白 / 间距
    元素之间的「空地」。留白不是浪费,而是让眼睛有地方歇、让重点更突出。挤在一起的界面让人喘不过气。

可替换变量

同一句话,换一个词,AI 会给你完全不同的故事。

轻浏览基调深度沉浸 / 一镜到底滚动叙事换访客基调,信息架构和动线节奏会整体变重、变沉浸
5 大板块只做 3 块(缘起 / 角色 / 故事钩子)更聚焦,适合先做个能跑的最小展示页,之后再加
点角色卡展开整页一镜到底往下滚换交互形态,AI 会把动线改成纯滚动叙事而非点击展开