约 60 分钟阅读 · 2026-05-26

诗画首页图墙重做 · 系统性深调研报告

主题：为「画出唐诗」首页图墙重新设计展示 / 筛选 / 分组 / 对比 / 创作转化策略
日期：2026-05-26 　模式：UltraDeep（六方向并行检索 + 三角验证）
锚定的三个已确诊问题：① 默认随机墙＝噪音 ② 筛选靠改列数把画压小、丢冲击 ③ 逛和创作断裂、激发不了创作冲动

摘要（Executive Summary）#

这份调研要回答的不是"瀑布流怎么调好看"，而是一个更靠前的问题：对「画出唐诗」这台"对比发现机"来说，瀑布流到底是不是对的容器。 横扫六个方向、约 90 个来源后，证据收敛出一个出人意料但高度一致的结论——

瀑布流（masonry）擅长的事，恰恰是我们不需要的；我们需要的事，瀑布流恰恰做不好。 masonry 靠不规则高度消灭"视觉休止点"，把人无意识地往下拽 [5][6]；这套机制服务的是"停留时长"，不是"看出门道"。而我们的内核是对比——信息设计的铁律是"对比必须发生在一眼能扫到的范围内"，且"版式一致，眼睛才会专注在内容的差异上"[3][4]。masonry 的参差大小恰恰引入了"大的更重要"这种噪声，把本该用来看画差异的注意力偷走。这同时解释了 Lee 的两个痛点：随机墙＝噪音（因为什么都没固定），切筛选图变小（因为用"改列数"来分组，而错误的根子是把分组、密度、对比三件事捆在了一个按钮上）。

报告给出的核心主张分三层：

  1. 1. 拆掉那个"什么都改"的排序按钮，换成三个互不打架的独立旋钮——分组（墙上有哪些图、怎么排）、密度（图多大、看大还是看多，交给用户选离散档）、对比（独立视图）。Lee"切筛选把图压小"的痛，根子就是这三件事被捆死了 [65][66][75]。
  1. 2. 版面分两种状态、两种布局，各自最优，不互相妥协：① 逛的状态——可以保留 masonry 求氛围、做"原来这么多样"的发现入口；② 对比的状态——必须切到规整等大网格（small multiples），让"一次只变一个维度"的落差干净显形 [3][4][68]。把现在"成列＋改列数＋循环填平"那套彻底换掉。
  1. 3. 逛和画用一条天生的优势接起来：我们图墙的每张图都带 9 维参数，"黄昏→月夜会怎样"这种"可改一维的缺口"是结构化、系统能算出来的——这是 Midjourney、Civitai 都没有的先天资产 [78][79]。把"自己来画"从顶部一个孤立按钮，改成"贴在每张图上、改其中一维就生图"的原地动作，并用"留白缺口"（这格还没人画）制造创作的痒 [86][87]。

一句话定调：我们要的不是"让人停不下来"，是"让人看得进去、看出门道、还想自己画一张"。 前者靠算法和密度，后者靠编排、留白、受控对比和可改的种子——而后者正是产品早已选定的那条路。下文逐方向给证据，最后给三套可对比的整体方案。

引言：范围、方法与假设#

范围。 本报告覆盖六个方向：(1) 大众无限流为何让人停不下来；(2) 策展型视觉站怎么做出高级克制感；(3) 博物馆 / 艺术平台怎么把"对比着看出门道"做成体验；(4) 密度 vs 单图冲击力的取舍（Lee 最在意的硬约束）；(5) 图墙里的筛选 / 钉住 / 扫维度；(6) 浏览如何转化为创作冲动。每个方向都要求"具体应用的界面机制拆解 + 把感觉/为什么讲透 + 落回我们这面墙"。

方法。 六个方向并行派出研究 agent，各自用 WebSearch + WebFetch 多源取证，叠加针对底层理论（无限滚动心理学、Tufte small multiples、VTS 教学法）的独立检索做三角验证。共采集约 90 个来源，覆盖一手官方文档（Pinterest / Apple / Google Arts & Culture / Civitai 等）、设计研究机构（NN/g、Baymard）、信息设计理论（Tufte）、艺术教育方法论（VTS）、以及设计评测与工程实现文章。

关键假设（高材料性，显式声明）：

一个诚实的研究局限（先说在前面）： Cosmos / Are.na / Savee 等都是重 JS 单页应用，正文抓取拿不到像素级数据，凡涉及精确间距/字号的说法来自设计评测转述与官方功能页，不是直接量到的；要精确到 px 需用浏览器检查器实测。另外，"masonry 比规整网格更耐逛"主要是跨产品的设计共识与实践经验，没有检索到严格的同行评议眼动/留存对照实验——这条当经验法则用，别当铁律。

方向一：大众无限流为什么让人停不下来——借机制，弃成瘾#

1.1 masonry 的"停不下来"是怎么造出来的#

规整网格每一行卡片的顶边、底边对齐，眼睛扫完一行会落在行末那条对齐线上——这条线是一个视觉休止符，一个让你停下来决定"要不要继续"的点。masonry 把这条线消灭了：每列高度参差、底边犬牙交错，永远没有一条干净的横线让眼睛靠岸 [5][6]。业内对它的描述很直接：masonry 里"往往没有清晰的路径可循，用户得在版面里跳来跳去找下一个项目""缺少规整网格的清晰对齐，没有 clean rows 和 resting points（休止点）"[5]。

第二层机制是半遮挡钩子：列高不齐，下滑时下一张图总是先露顶部一截、其余还在屏幕外，这个"露一半"本身就是悬念，你为了看清得再滑一点。第三层是单卡独立评估：卡片各自独立、不强迫横向对齐，用户一张一张看、单次认知负荷低，"逛"的门槛被压到最低 [6]。

要诚实： 没有检索到严格对比 masonry vs 网格的眼动/留存论文。现有眼动研究只能旁证"图主导的版面会打破文字页的 F 型扫描、让视线被图牵着走、更分散"[25]。所以"masonry 更耐逛"是设计共识，不是被证明的硬数据。

1.2 无限滚动 + 可变奖励：成瘾发动机（也是我们要避开的东西）#

这套机制由四个咬合的原理驱动，它们和"发现"内核直接冲突，所以这里讲透是为了"认得出、躲得开"：

发明者本人的悔意反向印证机制之强：Aza Raskin（2006 年发明无限滚动）现在公开后悔，称其"为捕获用户而非服务用户"，并在 Meta 诉讼中作证 [10][11]。

1.3 卡片信息密度与点开行为：图主体路线 vs 元数据路线#

各家的取舍正好对应不同产品哲学，给我们一个清晰的选择谱：

应用卡片密度点开后哲学
Pinterest图为绝对主体，元数据近乎为零，hover 才浮 Savecloseup 详情，下方接相关 pin（又一个无限流入口）[13]把"看完一张"变成"再进入一片"
Dribbble图优先，hover 即预览（GIF 动起来）[14]shot 详情，单稿大图快速即时的视觉分享
Behance预览只是入口，hover 浮统计 [15]完整 case study 长详情页重心在详情不在网格
小红书双列，封面图 + 一行标题 + 作者/赞 [16][17]笔记详情页文字承担一部分信息

灯箱 vs 详情页——给我们的关键决策点 [18]：

1.4 加载节奏：让"加载中"这堵墙永远碰不到#

1.5 列数与单图尺寸的行业默认#

移动端两列是范式（小红书双列：最大化屏幕、保持平衡、减少留白；一列太像短视频流失去并排，三列太小看不清）[17]；桌面端列数随视口自适应，常见 4–6 列。Pinterest 硬约束参考：可保存图至少 100×200，hover 保存至少 200×200——低于这个尺寸图就丧失可读性 [24]。

【落回画出唐诗】方向一#

能用（且应该用）：

有害，主动避开：

方向二：策展审美感怎么做出来——克制如何传达品味#

2.1 留白＝画框，不是没填满的浪费#

大众流逻辑是"屏幕每一寸都要有钩子"——瀑布流贴死、一屏塞十几张；策展站反过来，故意降低单屏信息量，让每张图周围有"呼吸的空气"，这口气就是品味信号 [26][28]。Cosmos 被反复描述为"间距慷慨""干净但不冷、有情绪但不难懂"[26][27]。Are.na 最极端，频道页"没有任何东西在抢注意力"，代价是评测说它"朴素到近乎乏味"[30]。

可操作的判断角度：每屏完整可见的作品数，是高级感的第一旋钮。 大众流一屏 10–15 张；策展站压到一屏 3–6 张大图。Savee 甚至把密度交给用户调——右上角两个滑块分别调 padding 和列数，默认偏疏，等于承认"密度是审美变量"[32]。

2.2 排版克制：让文字几乎想消失#

大众站的文字是"卖货话术 + 红色数字徽章 + 大字标题党"；策展站的文字几乎想消失 [30][35]。Are.na 把"连接数"这种元信息做成很小的灰字，不做醒目数字 [30]；Cosmos 署名放图下方次级位置不抢图 [27]；It's Nice That 敢用大字标题，但永远配大量留白，元信息压得很小很灰 [34][35]。

判断角度（这是"高级"和"工具后台"的分界线）： 元信息（标签、维度名、计数）的视觉权重应比作品标题低一档、比作品本身低两档。手法：小字号、低对比（用灰不用纯黑）、不加底色色块、不加图标徽章。一旦给标签加了彩色 pill 背景或红色数字角标，就立刻滑向"菜市场"。

2.3 单张作品"郑重呈现"＝进一个安静的房间#

策展站的共同手法：点开一张图＝背景退场、图被居中被框被署名 [27][32]。Cosmos 暗场让图"视觉优先权全给图"，点开有"聚焦式浮层、最小化干扰"，整体像"一种数字冥想"[27]。Savee 的 hover 极克制——平时图上什么都不覆盖，hover 才浮一个小小的 `[+]`，对照大众站 hover 涌出一堆按钮 [32]。

判断角度： 单张呈现做对三件事——背景退场（变暗或纯色画框）、动作克制（hover 最多浮一个动作）、署名次级化（信息在图下方小字，不压在图上）。灯箱的高级感几乎全部来自"背景颜色一致且安静 + 图居中留足边距 + 周围没有按钮阵列"。

2.4 分组 = 有观点的并置，不是文件夹#

大众站的分组是文件夹（功能性收纳）；策展站的分组是有观点的并置——把哪几张放一起本身就是一句话 [30][26]。Are.na 的 channel 是"思想的歌单"，同一张图出现在不同 channel 产生语境差异 [30][77]；Cosmos 的 cluster"可拖、可重叠、能搭成活的创作系统"，体验"不像在填满信息流，更像在搭一个有意义的收藏"[26][27]。

判断角度： 分组要有"编排意图"可见——每组给一句话表明视角（不只给数量）；允许同一作品在不同组复用制造语境对比（正好契合我们的对比内核）；分组封面/排序是被"摆"过的，不是随机。

2.5 关键对比：无限流 vs 策展，版面层面的根本分歧#

维度大众无限流策展克制站
密度塞满，钩子越多越好一屏 3–6 张，留白当画框
动效弹性回弹、hover 涌出按钮阵列几乎无动效，转场淡入非弹跳
推荐算法投喂，目标停留时长无/弱算法，靠探索与人工策展
留白=浪费，要填=品味，是信息的一部分
社交信号点赞/收藏数醒目（红徽章）无点赞、无计数、无评论
滚动无限流，故意没有底有边界/分章，给"看完了"的踏实

根本分歧一句话： 大众流为"停留时长"设计，策展站为"一次有质量的观看"设计。前者要你失控地刷，后者要你专注地看。Cosmos 的 manifesto 原话可作我们的座右铭："Zero noise or distractions. No likes, comments, or ego. Just pure, harmonious expression."[28]

能否兼得？ 部分能，有真实代价。可兼得的部分：保留连续滚动的手感（不强制翻页打断），但用策展手法给质感天花板——降密度、去动效噪音、用分组制造节奏。让人一直逛的动力换成"下一段还有好东西"的好奇，而不是"再刷一下可能中奖"的多巴胺。

【落回画出唐诗】方向二#

我们的底子（米色宋纸 + 深褐衬线 + 无阴影 + 画是主角）天然站在策展站这边，不用纠结路线。要做的：

  1. 1. 把"随机铺"改成"被编排的节奏"——不是引入算法（会滑向大众流），而是按视觉维度把一首诗的画法切成若干"展区"，每个展区一句话的策展观点（"同一句诗，从清晨到黄昏的光"／"工笔的极繁 vs 写意的极简"），展区间用大留白分隔，滚动是"一区一区地逛"。这把 9 维度从"筛选器"升级成"策展叙事"。
  2. 2. 降密度：列数降一档、间距加大到"册页"感，米色留白当宣纸余白。可学 Savee 给低调密度滑块（疏/中两档），但默认偏疏。
  3. 3. 单张郑重呈现：点开不变黑（暗场和纸面冲突），而是整屏铺成更深一点的同色系宋纸画框，画居中留足天地，诗句和维度标签放画下方小字，周围零按钮。
  4. 4. hover/动效：学 Savee 的 `[+]`，平时什么都不覆盖；转场只用 opacity 淡入/位置微移，绝不弹性回弹、绝不彩色徽章。
  5. 5. 标签低调化：9 维标签做深褐小灰字，权重低于诗句、低于画本身。

方向三：博物馆 / 艺术平台怎么把"对比着看出门道"做成体验（最贴我们内核）#

3.1 引导"比较着看"的四种基本手法#

  1. 1. 并置（juxtaposition）——同时塞进视野。 Tufte 铁律直接适用："对比必须发生在一眼能扫到的范围内（within the eyespan）"——一旦要靠记忆比"刚才那张和现在这张"，对比就废了，人脑视觉工作记忆撑不住 [3]。塞尚圣维克多山的经典展陈正是把多版本一字排开挂在中央墙面，三张玫瑰色调版本并排产生"令人难忘的效果"，眼睛一横扫差异自己跳出来 [36][37]。
  2. 2. 小图序列（small multiples）——同一套版式里换内容。 Tufte 的定义精确到可当产品规格：small multiples 是"共享语境、但不共享内容"的一组图，"一旦看懂第一张的版式，所有其它张立刻读得懂；版式的一致性让用户专注在数据的变化上，而不是图形设计的变化上"[3][4]。大白话：所有图一样大、一样位置、一样边框，注意力才会全砸在"画里到底差在哪"。 任何版式不一致都会偷走本该用来看画的注意力。
  3. 3. 滑块对比（slider）——两张叠一起拉帘子。 Google Arts & Culture 对梵高临摹广重明确指示"Swipe back and forth to compare"，对毕沙罗/塞尚同景"Scroll back and forth to compare the composition, colors, and technique"[38]。因为构图位置完全重合，差异在同一块视网膜区域上闪现，比并排更狠。技术上 OpenSeadragon 的对比滑块做到 lockstep pan/zoom（锁步缩放）——两图绑定，放大左边同步放大右边，永远比同一个局部 [39][40]。
  4. 4. 时间轴/演变——给序列加方向。 GAC"早期 vs 晚期作品并排"展示艺术家如何随时间演变 [41]；北斋《富岳三十六景》完整 46 张铺成序列，同一座山在不同天气/季节/视角反复出现 [42]。特点是对比有方向性，不是"哪个更好"，而是"沿某条线在变什么"。

3.2 怎么让差异"显形"——变量隔离引擎#

最好的对比体验，都是某种"变量隔离引擎"。

隔离的敌人是噪声：想让用户看"光影"，若两张连构图、景别、颜色都不同，用户不知该看哪——差异太多等于没有差异。所以塞尚墙、赤青富士都极度克制：锁死一切，只放一个变量动。

3.3 门道怎么透出来又不吓退外行——VTS 方法本身（定海神针）#

VTS（Visual Thinking Strategies，Housen + Yenawine，1991）是这领域 30 年的方法论基石，核心可直接搬 [48][49][50][51]：

三个问题，零术语： ① 这画里在发生什么？ ② 你看到什么让你这么说？ ③ 还能再找到什么？

关键设计哲学，逐条对我们有用：

这条直接呼应既有定调"审美靠判断角度不靠术语""别自造简称当黑话用"：门道不能当知识点先甩出来，要藏在引导动作背后，让用户先用大白话看出差异，术语只在他已经"看见"之后轻轻补一刀。

3.4 高清单图 vs 看很多张——怎么并存#

这是真实张力：深度缩放的"细节冲击"和"小图扫一片看对比"是两种相反的注意力模式。Google Art Camera 拍出超过 10 亿像素的单图，"逐寸看，每次都发现新东西，像隐藏的签名或单笔的颜料"[52][62]；故宫名画记同理做超高清无极放缩 [53]。这种体验是"沉浸、独处、一张看半小时"，和"对比"反着来。

三种成功的并存结构：

  1. 1. 缩放层级＝模式切换：远景（zoom out）是"看很多/看对比"的网格态，推进去（zoom in）自动进"单图深潜"态。两个模式不是平级按钮，而是同一个缩放手势的两端。
  2. 2. 锁步缩放让深潜也能对比：两张高清并排，同步钻进同一处笔触 [39]。
  3. 3. 小图先抓眼、点开才深潜：网格让差异在 eyespan 内显形；深潜是奖励——看出某张不一样，点进去用高清确认"哦差异在这笔"。

3.5 反面：哪些艺术站做得像数据库#

学术共识很一致：

做对的人怎么救：

【落回画出唐诗】方向三（本报告最重的一节）#

我们这面墙的本质＝一台 VTS 变量隔离机。把上面收敛成可执行原则：

  1. 1. 对比的版面铁律：small multiples，不是瀑布流。 这是对"重做瀑布流"这个命题的正面回答——对比态用 masonry 是错的方向。masonry 不等高、错位，违反"share context, not content"，注意力被版式差异偷走。对比要等大、等距、统一边框的规整网格，因为"对比要发生在 eyespan 内""版式一致才让眼睛专注在内容变化"[3][4]。
  2. 2. 排序＝选哪一个维度当"动的变量"。 这是把变量隔离落地的核心动作。一面墙上只让一个维度变化，其余尽量锁死/对齐：选"冷暖"→整墙按色温从冷到暖排成梯度，其它维度差异被主轴压下去→"原来同一句诗能从这么冷画到这么暖"（Art Palette 逻辑，但维度可切换）；选"景别"→远景到特写排；"光影""画法"同理。切换排序维度时图块重新流动归位的过程，本身就是在演示"换一个角度看这批画"，呼应 VTS"还能再找到什么"。
  3. 3. 单变量对比模式：从墙里挑两张，叠起来拉滑块 + 锁步缩放。 把"一次只变一个维度"做到最纯——两张位置完全重合，差异在同一块视网膜闪（对标赤富士/青富士）。可默认帮用户配好"最佳对比对"（同构图不同色/同色不同景别），降低门槛。
  4. 4. 高清深潜 vs 看一片：用缩放手势统一，别做成两个按钮。 远景态＝网格扫差异，推进任意一张＝单图深潜看笔触（我们是 AI 画，"AI 怎么处理这处"本身就是门道），进阶两张并排同步钻同一局部。
  5. 5. 门道透出来：先看见，后命名。 墙上默认不写术语（标签糊脸＝数据库劝退）。用大白话提示对应 VTS 三问引导看，术语只在用户已经看出差异之后轻轻补一行。
  6. 6. 入口别做成搜索框。 每天一首诗的信息流首页本来就对——入口是"今天这首诗 + 它的一墙画法"，发现靠"切维度"和"系统配的对比对"，不是让用户输关键词。

方向四：密度 vs 单图冲击力（Lee 最在意的硬约束）#

4.1 核心规律：锁列宽，不锁列数#

把顶尖应用拆开看，有一个反直觉的共识：它们几乎都不让用户"选几列"，而是锁定一个理想的卡片宽度区间，让列数随屏幕自动算出来。

4.2 用户可调密度：给离散档，不给无级滑块#

三家的做法都是离散分级 + 一个直觉手势：

感觉差异：无级滑块让人犹豫"调到哪算对"；离散档（舒适/标准/紧凑）让人一下知道每档什么样，且每档都是设计师调好的、不会出现难看的中间态。

4.3 "先小后大"的层级：墙是入口，不是终点#

成熟产品都把图墙当"扫"的层，把"看细节"推到独立放大层：hover 微放大暗示可点（不改版面）→ 点击进灯箱 + filmstrip 缩略图条（左右键在同组翻、Esc 关）→ 深度缩放看笔触 [62][68]。对我们："工笔 vs 写意"用户真正想看的就是笔触级差异，深度缩放不是炫技，是核心价值。

4.4 masonry 对单图冲击力：有帮助但代价正中痛点#

4.5 关键反模式：就地改列数＝现状体验糟的根因#

现状"切排序＝改列数＝全图重排变小"踩的是最典型反模式，糟在三点：① 图尺寸跟列数突变，刚建立的"这张多大"心智被打碎；② 全图重排无过渡，屏幕一闪看不出"哪张去哪了"，对比线索丢失；③ 把"换分组"和"换密度"捆在一个按钮——用户想要"按冷暖分组"，被迫附赠"图变小"。

业界解法：锁卡片宽度不锁列数（切分组图大小不变只是归位）；FLIP / GSAP Flip 过渡动画（记录旧位置→改 DOM→用 transform 把图贴回原位再平滑滑到新位，60fps 只动 transform）——用户能"看着每张图飞到新分组"，对比关系不断 [72][73][74]。这正是既有 memory 里"瀑布流排序切换动画＝这功能全部价值"指向的东西，没有白做，只是用对地方。

【落回画出唐诗】方向四#

把现状那个"什么都改"的排序按钮，拆成三件互不干扰的事：

  1. 1. 默认列数：锁卡片宽度（~260px 自动算列），桌面默认 3–4 列（欣赏态大图少列）、平板 2–3、手机 1–2，上限 5–6（对齐 Apple Photos 判断）。无论怎么切分组，图永远是能看清细节的大小。
  2. 2. 密度：给离散档（舒适/标准/紧凑），和分组彻底解耦。"看多"是用户主动选，不是切分组的副作用。
  3. 3. 看大/看细节：走灯箱 focus 模式 + filmstrip + 深度缩放。墙负责扫，灯箱负责品。
  4. 4. 分组切换：卡片宽度全程不变，用 GSAP Flip 平滑归位，把"切换"从打断变成线索。

方向五：图墙里的筛选 / 钉住 / 扫维度（不破坏版面、不压小图）#

5.1 faceted filtering 在图墙里的好做法#

5.2 钉住一个属性、扫另一个属性＝受控变量实验#

5.3 对比模式：独立视图，不是排序按钮#

强烈建议独立视图：排序按钮就地改墙逃不掉"重排变小"的副作用（现状的坑）；对比需要受控（固定维度、等大、同尺度），跟"浏览墙"（欣赏、不规则、随便扫）是两种心理状态，塞进一个界面会互相妥协。Lightroom 把 Compare（两图）/Survey（多图）做成和 Grid 平行的独立视图，正是这个道理 [68]。

5.4 small multiples vs masonry——受控对比谁更合适#

规整等大网格胜出，没有悬念。 Tufte 原理：同尺寸、同刻度、规整排布"视觉上强制比较"，观众无需心理换算就能跨格看差异；masonry 的参差大小引入"大小=重要性"噪声，破坏"9 维平等对比"[3][4]。所以：浏览态可用 masonry 求氛围，对比态必须切到规整等大网格。

【落回画出唐诗】方向五#

方向六：怎么把"逛"转化成"想自己创作"#

6.1 核心机制：不是"邀请你创作"，是"给你一个改起来手痒的半成品"#

转化做得好的产品，共同点不是把"创作"按钮做更大，而是把起点从空白换成一张别人已做好的东西。用户不是被要求"创作"，是被允许"改一下"——两种完全不同的心理负担。

6.2 心理学：为什么"半成品 + 一个缺口"比"空白画布"更能启动#

6.3 反面：哪些创作入口形同虚设#

① 空白的 "Create" CTA 转化最差——没有上下文制造决策瘫痪，用户"不知道要创作什么"；② 入口太重/跳转割裂——冲动在跳转中冷却；③ 空状态只说"去探索一下"，不回答"现在该做什么"[89]。一句话：凡是要求用户先"想出要做什么"的入口都会失败；凡是给用户"改这一个地方"的入口都容易启动。

【落回画出唐诗】方向六#

我们的独特资产：图墙是"同一首诗的不同画法，每张带明确 9 维参数"。"黄昏 vs 月夜"这种缺口是结构化、系统能算出来的——这是 Midjourney/Civitai 都没有的先天优势（它们的参数缺口要靠用户自己想，我们的缺口是诗 × 维度的笛卡尔积）。

四种做法，按推荐次序：

关系：D 是地基、A 是主入口、B 是特色钩子、C 是 A 的文案皮。先做 D + A。一条贯穿性命门：入口必须贴在被浏览的内容上、零跳转——若"自己来画"还是独立 tab，无论文案多好，冲动都会在跳转中冷却。

综合与洞察#

洞察一：真正的分歧不是"好不好看"，是"为停留时长设计 vs 为一次有质量的观看设计"#

所有证据最后收敛到一条轴上。一端是 Pinterest/小红书的成瘾流（masonry 消灭休止点 + 无限滚动 + 可变奖励 + 隐藏停止线索），目标是停留时长；另一端是 Cosmos/Are.na 的策展站和博物馆的对比陈列（降密度、留白当画框、有边界、受控对比），目标是一次有质量的观看。我们的内核（发现、对比、看出门道、画是主角）整个站在后一端。很多现状的别扭，本质是把前一端的容器（随机 masonry + 无限流惯性）套在了后一端的目标上。

洞察二（最大反转）：瀑布流是错误的容器——但解法不是抛弃，是分层#

"重做瀑布流"这个命题，证据给的答案比"调好它"更激进：masonry 服务"逛"，规整等大网格（small multiples）才服务"对比"。 二者不是对错关系，是分工关系：

现状最坏的设计，是用 masonry 同时干这两件事，还用"改列数"在它们之间切换——于是逛也不够沉浸、比也比不干净、图还被压小。

洞察三：病根是"一个按钮改了三件事"——拆成三个独立旋钮#

现状的排序按钮同时改了分组（哪些图、怎么排）、密度（列数→图大小）、和隐含的对比意图。这三件事被捆死，所以用户想"按冷暖看"，被迫附赠"图变小"。解法是彻底解耦：

旋钮控制什么怎么做
分组墙上有哪些图、按什么轴排选一个维度当"动的变量"，其余对齐；切换走 GSAP Flip 平滑归位，不改卡片宽度
密度图多大、看大还是看多离散档（舒适/标准/紧凑），锁卡片宽度自动算列，上限 5–6
对比受控精读独立视图 + 规整等大网格 + 滑块/锁步缩放

洞察四：逛和画之间，我们有一座别人没有的桥#

我们图墙的每张图都带 9 维参数，"可改一维的缺口"是结构化的、系统能算的。这把"浏览→创作"的转化从"靠文案劝"变成"靠结构推"：每张图都是可改一维的种子（做法 A），每个没画过的组合都是一个邀请填的缺口（做法 B）。这是产品的结构性护城河，不只是一个功能。

局限与告诫#

  1. 1. "masonry 比网格更耐逛"无硬数据：是设计共识与实践经验，非同行评议对照实验 [25]。当经验法则用。
  2. 2. 策展站的精确尺寸/字号未实测：Cosmos/Are.na/Savee 是重 JS 应用，正文抓取拿不到 px 级数据，相关数值来自评测转述与官方功能页 [26][30][32]。要落地到 px 需浏览器检查器实测。
  3. 3. 数据层是更深的前提，本报告未深入：再好的展示也救不了"数据里没有干净对比对"。当前 65 张是 randCombo 随机撒进几千种组合空间，缺"只差一个维度"的成对/成列图。"重做图墙"很可能要连"该生成什么图"一起改（比如按维度成系列地生成，而非随机）——这是一条独立工作线，建议紧接本报告评估。
  4. 4. 慢生图（2–3 分钟）的体验未在本报告展开：做法 A/B 点了"你来画"之后的等待体验，需另行设计（既有 memory 里"显影/开盲盒仪式"的思路适用）。
  5. 5. 完成感的"分母"问题：洞察一建议用"共 87 种、已看全"做奖励，但若图是无限生成的就没有干净的分母；需在"策展有限集"和"无限生成"之间定清楚（建议：每天一首诗的展是有限策展集，"自己来画"才是无限）。

落地建议：三套可对比的整体方案#

下面三套不是互斥的优劣排序，而是改造幅度从小到大的三个停靠点，每套都解决三个痛点，差别在野心和工作量。

方案甲：最小手术——"拆三旋钮 + 修对比"（改造幅度小）#

保留 masonry 当浏览层，只做三件事：

  1. 1. 锁卡片宽度不锁列数，桌面默认 3–4 列、上限 5–6，切分组时图大小恒定、走 Flip 归位（直接解决"切筛选图变小"）。
  2. 2. 加密度离散档（疏/标准），和分组解耦。
  3. 3. 新增独立"对比视图"：从墙里钉两三张→切到规整等大网格 + 滑块叠加，作为"看出门道"的专用房间。

方案乙：推荐——"展区节奏 + 双层布局 + 改一维种子"（改造幅度中，最平衡）#

在方案甲基础上，把默认态从"随机墙"换成"被编排的展区流"：

  1. 1. 默认＝按维度切的展区流：一首诗的画法按一条主轴（如光影：晨→午→昏→夜）切成若干展区，每区一句白话策展观点 + 大留白分隔，滚动是"一区一区地逛"。展区内用规整等大小网格（小型 small multiples），让区内对比就已经干净。
  2. 2. 顶部一个低调的"看法"切换＝选哪个维度当主轴（光影/冷暖/景别/画法…）——这就是"排序＝选变量"，切换走 Flip。
  3. 3. VTS 大白话引导 + 术语后置：进来一句"先看看，哪几张让你觉得不一样？"；点开某张才在画下小字补维度名。
  4. 4. 每张图"改一维"种子（做法 D+A）：点开图＝列出 9 维可点值，改一个直接进生图，零跳转。

方案丙：最大野心——"VTS 对比机 + 留白缺口邀请"（改造幅度大）#

在方案乙基础上再加两件重东西：

  1. 1. 正式的单变量对比模式：系统自动配"最佳对比对"（同构图不同色/同色不同景别），两张叠加 + 锁步深度缩放看到笔触级差异（对标赤富士/青富士、OpenSeadragon 滑块）。
  2. 2. 留白缺口邀请（做法 B）：展区里故意留没画过的组合空格，"这一格还没人画"邀请用户填，把发现和创作彻底焊死。

推荐路径：先方案乙落地验证手感，对了再吸纳方案丙的对比机和缺口邀请；方案甲只在"想用最小代价先止血"时选。 三套都共享同一个地基——拆三旋钮、锁宽不锁列、灯箱当 focus、创作入口预填种子。

参考来源（Bibliography）#

  1. 1. NN/g — Infinite Scrolling: When to Use It, When to Avoid It. https://www.nngroup.com/articles/infinite-scrolling/
  2. 2. NN/g — Infinite Scrolling Tips. https://www.nngroup.com/articles/infinite-scrolling-tips/
  3. 3. Small multiple — Wikipedia (Tufte 定义). https://en.wikipedia.org/wiki/Small_multiple
  4. 4. Morphocode — Small Multiples: visual explorations. https://morphocode.com/small-multiples-visual-explorations-in-architecture-and-information-design/
  5. 5. Scott Logic — Intro to Masonry. https://blog.scottlogic.com/2025/09/17/intro-to-masonry.html
  6. 6. Patrick Brosset — The shape and flow of masonry layouts. https://patrickbrosset.com/articles/2026-02-23-embrace-the-chaos-the-shape-and-flow-of-masonry-layouts/
  7. 7. Tristan Harris — How Technology Hijacks People's Minds. https://medium.com/thrive-global/how-technology-hijacks-peoples-minds-from-a-magician-and-google-s-design-ethicist-56d62ef5edf3
  8. 8. The Psychology of Doom-Scrolling. https://rowancenterla.com/psychology-of-doom-scrolling-explained/
  9. 9. Infinite scroll & the bottomless-bowl effect. https://exp.is/expression/5-ways-to-stop-doomscrolling-with-intentional-tech-infinite-scroll-to-intentional-flow
  10. 10. The Inventor of Infinite Scroll Is Sorry. https://medium.com/pitfall/the-inventor-of-the-infinite-scroll-is-sorry-for-ruining-your-life-be953bf0ccfb
  11. 11. KOB — Inventor of infinite scroll says he regrets it (Meta trial). https://www.kob.com/new-mexico/inventor-of-infinite-scroll-says-he-regrets-it-at-new-mexico-meta-trial/
  12. 12. Flow States, Dopamine, Doom-Scrolling. https://medium.com/design-bootcamp/flow-states-dopamine-doom-scrolling-and-the-unintended-death-of-critical-faculty-f6bc24e42e2d
  13. 13. Pinterest — Explore the Home Feed. https://help.pinterest.com/en/article/explore-the-home-feed
  14. 14. Behance or Dribbble — What's the Difference. https://afipsky.medium.com/behance-or-dribbble-whats-the-difference-f8522614abd9
  15. 15. Behance vs Dribbble Ultimate Comparison. https://graphicmama.com/blog/behance-vs-dribbble-ultimate-comparison/
  16. 16. 小红书双列瀑布流设计. https://cloud.baidu.com/article/3421782
  17. 17. 两列瀑布流设计. https://docs.ffffee.com/frontend/240820-%E4%B8%A4%E5%88%97%E7%80%91%E5%B8%83%E6%B5%81%E8%AE%BE%E8%AE%A1.html
  18. 18. Understanding Web Overlays: Modals, Lightboxes, Galleries. https://medium.com/@angbuxton/understanding-web-overlays-the-power-of-modals-lightboxes-galleries-and-more-96f1f66d6654
  19. 19. Dominant Colors for Lazy Loading. https://manu.ninja/dominant-colors-for-lazy-loading-images/
  20. 20. Smashing — Progressive Image Loading & User-Perceived Performance. https://www.smashingmagazine.com/2018/02/progressive-image-loading-user-perceived-performance/
  21. 21. Cloudinary — Blur Image Loading. https://cloudinary.com/guides/image-effects/blur-image-loading
  22. 22. Skeleton Screens. https://shefali.dev/skeleton-screens/
  23. 23. Skeleton Screens vs Loading Spinners. https://www.onething.design/post/skeleton-screens-vs-loading-spinners
  24. 24. Pinterest — Save button image size requirements. https://help.pinterest.com/en/business/article/save-button
  25. 25. Codecademy — How Users Scan (eye-tracking, F-pattern). https://www.codecademy.com/article/how-users-scan
  26. 26. Wix Studio — What is Cosmos. https://www.wix.com/studio/blog/cosmos-app
  27. 27. screensdesign — Cosmos curated inspiration teardown. https://screensdesign.com/showcase/cosmos-curated-inspiration
  28. 28. Creative Bloq — What is Cosmos, the Pinterest alternative. https://www.creativebloq.com/design/social-media/what-is-cosmos-the-pinterest-alternative-for-creatives
  29. 29. Medium — Better Pinterest? Cosmos.so review. https://medium.com/@designwithvedant/better-pinterest-cosmos-so-review-as-a-graphic-designer-941039d60f0a
  30. 30. Pratt — Design Critique: Are.na iOS App. https://ixd.prattsi.org/2025/02/design-critique-are-na-ios-app/
  31. 31. Pinterest Alternatives (talkbitz). https://talkbitz.com/pinterest-alternatives/
  32. 32. Savee — Features Made For You. https://inspire.savee.com/features-made-for-you/
  33. 33. Creative Boom — Why Mymind. https://www.creativeboom.com/resources/why-mymind-is-the-visual-inspiration-tool-designers-have-been-crying-out-for/
  34. 34. Creative Bloq — Editorial design inspiration. https://www.creativebloq.com/inspiration/editorial-design-inspiration
  35. 35. It's Nice That — Typography. https://www.itsnicethat.com/media/typography
  36. 36. Mont Sainte-Victoire (Cézanne) — Wikipedia. https://en.wikipedia.org/wiki/Mont_Sainte-Victoire_(C%C3%A9zanne)
  37. 37. Apollo Magazine — Cézanne review. https://www.apollo-magazine.com/cezanne-chicago-tate-review/
  38. 38. Google Arts & Culture — Different Artists Painting the Same Scene. https://artsandculture.google.com/story/YgURr4-ZzT4miw
  39. 39. newline — OpenSeadragon image comparison slider. https://www.newline.co/@iangilman/openseadragon-how-to-implement-an-image-comparison-slider--cf17cd5e
  40. 40. IIIF Deep-Zoom Before/After Block. https://wordpress.org/plugins/iiif-deep-zoom-before-after-block/
  41. 41. Google Arts & Culture — Artists' Early and Late Works Side-By-Side. https://artsandculture.google.com/story/CQVRCfoQBIVsXg
  42. 42. Smithsonian — Hokusai Thirty-Six Views of Mount Fuji. https://asia.si.edu/whats-on/exhibitions/hokusai-thirty-six-views-of-mount-fuji/
  43. 43. Tokyo Art Beat — Hokusai's Red and Blue Fuji. https://www.tokyoartbeat.com/en/events/-/Hokusai-s-Thirty-six-Views-of-Mount-Fuji-Red-and-Blue/mogi-honke-museum-of-art/2023-05-17
  44. 44. Google Arts Experiments — Art Palette. https://artsexperiments.withgoogle.com/artpalette/
  45. 45. Wallpaper — Google Arts & Culture Art Palette. https://www.wallpaper.com/art/google-arts-and-culture-art-palette
  46. 46. Museo Thyssen — Infrared Reflectography. https://www.museothyssen.org/en/conservation/technical-images/infrared-reflectography
  47. 47. Smithsonian MCI — Infrared and Ultraviolet Imaging. https://mci.si.edu/infrared-and-ultraviolet-imaging
  48. 48. ArtMuseumTeaching — Visual Thinking Strategies (VTS). https://artmuseumteaching.com/2014/04/29/openthink-visual-thinking-strategies-vts-museums/
  49. 49. Philip Yenawine — VTS. https://www.philipyenawine.com/vts
  50. 50. Housen & Yenawine — Understanding the Basics (PDF). https://www.artsintegration.net/uploads/1/2/2/6/12265539/bp_understanding_the_basics_.pdf
  51. 51. ThinkingMuseum — VTS and Visible Thinking. https://thinkingmuseum.com/2019/09/22/visual-thinking-strategies-vts-and-visible-thinking/
  52. 52. Google Blog — Art Camera. https://blog.google/outreach-initiatives/arts-culture/art-camera-cultural-institute/
  53. 53. 故宫名画记. https://minghuaji.dpm.org.cn/
  54. 54. MW2015 — Assessing the UX of Online Museum Collections. https://mw2015.museumsandtheweb.com/paper/assessing-the-user-experience-ux-of-online-museum-collections-perspectives-from-design-and-museum-professionals/index.html
  55. 55. Pratt DX — Online Museum Collections UX. https://prattdx.org/research/online-museum-collections-ux/
  56. 56. MuseumViz — arXiv. https://arxiv.org/pdf/2106.11897
  57. 57. Send Me SFMOMA. https://www.sfmoma.org/read/send-me-sfmoma/
  58. 58. artnet — How SFMOMA Made Art Go Viral. https://news.artnet.com/art-world/sfmoma-made-art-go-viral-1023440
  59. 59. Cooper Hewitt — New Experience (Pen). https://www.cooperhewitt.org/new-experience/
  60. 60. Architect Magazine — At the New Cooper Hewitt. https://www.architectmagazine.com/technology/at-the-new-cooper-hewitt-you-are-the-designer-and-curator_o
  61. 61. teamLab — Transcending Boundaries. https://www.teamlab.art/concept/transcending-boundaries/
  62. 62. Google Arts & Culture — Zoom Views / Gigapixels. https://artsandculture.google.com/project/gigapixels
  63. 63. MDN — Realizing common layouts using grids. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids
  64. 64. RecurPost — Pinterest Pin Dimensions 2026. https://recurpost.com/blog/pinterest-pin-dimensions/
  65. 65. Apple Support — Browse your photo library. https://support.apple.com/guide/iphone/browse-your-photo-library-iph7d24753a5/ios
  66. 66. AppleInsider — Photos in iOS 26 / macOS 26. https://appleinsider.com/inside/ios-26/tips/inside-photos-in-ios-26-macos-26----refinements-in-apples-image-and-video-management-tool
  67. 67. Julieanne Kost — Grid & Loupe in Lightroom Classic. https://jkost.com/blog/2024/06/working-in-grid-and-loupe-view-in-lightroom-classic.html
  68. 68. Lightroom Killer Tips — Grid/Loupe/Compare/Survey. https://lightroomkillertips.com/grid-loupe-compare-survey-view-one-use/
  69. 69. Southern Digital — Image Gallery Layouts: Grid vs Masonry vs Carousel. https://southerndigitalconsulting.com/image-gallery-layouts-grid-vs-masonry-vs-carousel/
  70. 70. Masonry in React: A Performance Hell. https://medium.com/@colecodes/masonry-in-react-a-performance-hell-fb779f5fcebd
  71. 71. SitePoint — CSS Masonry Layout (native grid). https://www.sitepoint.com/css-masonry-layout-native-grid/
  72. 72. CSS-Tricks — Animating Layouts with the FLIP Technique. https://css-tricks.com/animating-layouts-with-the-flip-technique/
  73. 73. Codrops — Animating Responsive Grid Transitions with GSAP Flip. https://tympanus.net/codrops/2026/01/20/animating-responsive-grid-layout-transitions-with-gsap-flip/
  74. 74. GSAP — Flip Plugin Docs. https://gsap.com/docs/v3/Plugins/Flip/
  75. 75. Baymard — Ecommerce Filter UI. https://baymard.com/learn/ecommerce-filter-ui
  76. 76. Simple Pin Media — Pinterest Visual Search. https://www.simplepinmedia.com/pinterest-visual-search/
  77. 77. Are.na — How do you use Are.na. https://www.are.na/are-na-commons/how-do-you-use-are-na
  78. 78. Midlibrary — How to Use Midjourney Remix Mode. https://midlibrary.io/midguide/how-to-use-midjourney-remix-mode
  79. 79. Civitai Education — Using the On-Site Image Generator. https://education.civitai.com/using-civitai-the-on-site-image-generator/
  80. 80. Canva — The Ultimate Design Tool. https://www.canva.com/learn/ultimate-design-tool/
  81. 81. CapCut — Duet Template. https://www.capcut.com/explore/duet-template
  82. 82. Skai — Pinterest Social Commerce. https://skai.io/blog/pinterest-social-commerce/
  83. 83. Figma — Duplicate Community files. https://help.figma.com/hc/en-us/articles/360038510873-Duplicate-Community-files
  84. 84. Lead Alchemists — The Zeigarnik Effect. https://www.leadalchemists.com/marketing-psychology/ziegarnik-effect/
  85. 85. Write Better Articles — The Curiosity Gap. https://www.writebetterarticles.com/learn/curiosity-gap
  86. 86. LearningLoop — Intentional Gaps. https://learningloop.io/plays/psychology/intentional-gaps
  87. 87. Design Bootcamp — The Zeigarnik Effect in UX. https://medium.com/design-bootcamp/the-zeigarnik-effect-the-art-of-keeping-users-engaged-in-ux-design-dac5c653c20f
  88. 88. dev.to — Curing Blank Canvas Paralysis with 1-Click Templates. https://dev.to/rocketsquirreldev/curing-blank-canvas-paralysis-with-1-click-templates-deskflow-update-3pbc
  89. 89. SetProduct — Empty State UI Design. https://www.setproduct.com/blog/empty-state-ui-design
  90. 90. Flow (psychology) — Wikipedia. https://en.wikipedia.org/wiki/Flow_(psychology)

方法论附录#