39 个引用来源 · 约 24 分钟阅读 · 2026-05-25

诗画 · 同类产品 UI/UX 流程与界面设计调研

为「诗画」（把唐诗用 AI 画出来、核心是"自我决策→看到影响"的游戏化产品）的体验重构提供界面与流程层面的参考。
调研日期：2026-05-25　｜　聚焦：UI/UX 流程与界面设计（非商业模式、非心理学综述）

摘要（Executive Summary）#

把「诗画」从"工具/表单"重构成"游戏/旅程"，问题不在视觉皮肤，而在流程结构、关键时刻的呈现、以及长期成长的可见化。本次调研拆解了 Wordle、Duolingo、Reigns、Monument Valley/Alto、Midjourney、Lensa/WOMBO、Neko Atsume/旅かえる、以及 gacha 开箱等产品的具体界面做法，归纳出八条可直接迁移的设计模式：

  1. 1. 入口要"递一道题"，不要甩目录——Wordle 每天只给一题，把选择过载换成仪式感。
  2. 2. 核心循环要连续、要转场——共享元素转场（缩略图放大成大图）制造"走过去"而非"跳过去"的连续心智。
  3. 3. 三个关键时刻最该加戏：等待要变成"仪式"（gacha 把等待本身做成价值）、揭晓要有蓄力和渐显（dopamine 峰值在揭晓前）、收藏入库要让用户"看着它飞进收藏"。
  4. 4. 收藏/画廊是留存引擎——Pokédex/Neko Atsume 把"集齐度"做成炫耀和回访的理由。
  5. 5. 成长要可见——Duolingo 用技能路径、连胜、等级把"我在变强"画出来。
  6. 6. 限次要正向包装——"lives（命）"比"energy（能量损耗）"留存更好，因为框定为"持有"而非"扣减"。
  7. 7. 微交互/juice 是手感的根——每个动作配 1-3px 震动、粒子、音效、定格帧。
  8. 8. 决策流程：分步向导更适合"有重量的连续决策"和小屏——进度条 + 可回退是关键。

最后一节给出针对「诗画」的可迁移建议清单，对应之前定的重构优先级（P0 画册闭环 → P1 核心爽点 → P2 留存引擎 → P3 沉浸外壳）。

引言（Introduction）#

范围：只看界面与流程——入口与信息架构、页面流转与转场、等待/揭晓/收藏三个关键时刻、收藏画廊、成长可见化、资源系统表达、微交互反馈、决策流程（分步 vs 一页）。不涉及变现、不做心理学理论综述（心理机制由另一份并行调研覆盖）。

方法：3 批共 18 组网络检索，覆盖 9 类对标产品 + 跨产品的设计模式文章；优先取设计拆解、游戏 UX 专文和开发者复盘。

关键假设：①「诗画」目标用户是对古典文学有兴趣的成年人，非硬核玩家，因此借鉴对象偏"轻、治愈、仪式感"一端（Wordle/Neko Atsume/Alto），而非重度 gacha 的成瘾设计；②出图 2-3 分钟的等待是物理约束，必须当成体验设计对象而非待消除的瑕疵。

一、导航与信息架构：入口怎么设计#

核心模式：把"在目录里找"换成"被递上一道题"。

小结：入口设计的目标不是"让用户找到诗"，而是"让用户感到被邀请进入一件有分量的事"。聚焦、有序、由浅入深、首轮即有成就感。

二、核心循环的页面流转与转场#

核心模式：用共享元素转场制造"连续的场"，消除硬跳页的断裂。

小结：核心循环的七个环节（接题→读诗→决策→出图→揭晓→去留→入册）之间要有转场把它们"缝"成一条连续旅程，而不是七个互相瞬移的独立网页。

三、三个关键时刻：等待 / 揭晓 / 收藏入库#

这是「诗画」最该加戏、当前最平的地方。

① 等待 —— 把"干等"变成"仪式"#

② 揭晓 —— 蓄力与渐显#

③ 收藏入库 —— 让"存"被看见#

四、收藏 / 作品集 / 画廊 UI#

核心模式：收藏是留存引擎——让"集齐度"可见、可炫耀、可回访。

小结：当前「诗画」保存了画却没有地方回看，等于把最强的收集钩子直接扔掉。画册要让人"看着自己的收藏越堆越多"，并能展示。

五、成长可见化的 UI#

核心模式：把"我在变强/在积累"画出来。

六、资源系统：从"扣减"到"持有"#

核心模式：同样的限次，"持有正向资源"比"扣减惩罚"留存更好。

七、微交互 / 反馈 / Juice#

核心模式：每个动作都要有"回应"，这是手感（爽感）的来源。

八、决策流程：分步向导 vs 一页式#

核心模式：有重量的、连续的、小屏上的决策，分步向导通常更好；进度条 + 可回退是命门。

综合与洞察（Synthesis）#

把八条放在一起，浮现三个贯穿性的判断：

  1. 1. "工具→游戏"的本质差别是"反馈密度"和"连续性"。游戏不是多了花哨视觉，而是：每个动作有回应（juice）、每个屏幕之间有转场（连续）、每段等待有仪式、每次成果有归属、长期有可见的积累。「诗画」当前这五条几乎都缺，所以才"像表单"。
  1. 2. 「诗画」的天然气质偏"治愈/仪式"一端，不是"成瘾/gacha"一端。可以借 gacha 的揭晓蓄力技法，但整体心法应学 Wordle（每日一题的稀缺与慎重）、Neko Atsume/旅かえる（低压力、收集、等待中的牵挂与归来时的喜悦）[36][37]、Alto/Monument Valley（减法沉浸）。把"等待 2-3 分钟"和"每首 2 次"这两个本来像缺点的约束，正好做成"值得等的仪式"和"值得慎重的稀缺"。
  1. 3. 留存引擎在"成长循环"而非"核心循环"。核心循环（画一张）决定单次爽不爽；但让人明天再来的是画册在变厚、辞典在点亮、风格画像在成形、章节在推进。当前「诗画」核心循环有骨架、成长循环是零——这是最该补的结构性缺口。

对「诗画」的可迁移 UI/UX 建议（Recommendations）#

按之前定的重构优先级组织，每条标注借鉴来源。

P0 · 先把闭环合上#

P1 · 核心爽点#

P2 · 留存引擎（成长可见）#

P3 · 沉浸外壳#

局限（Limitations）#

参考文献（Bibliography）#

[1] UX Magazine — The Fascinating Psychology Tricks That Make Wordle So Addictive. https://uxmag.com/articles/the-fascinating-psychology-tricks-that-make-wordle-so-addictive

[2] Bootcamp (Medium) — Why Wordle works: a UX breakdown. https://medium.com/design-bootcamp/why-wordle-works-a-ux-breakdown-485b1dbba30b

[3] ikangai — Wordle: How a simple UX Design just feels right. https://www.ikangai.com/wordle-how-a-simple-ux-design-just-feels-right/

[4] Blake Crosley — Duolingo: Gamification as Design Language. https://blakecrosley.com/guides/design/duolingo

[5] Orizon — Duolingo's Gamification Secrets (Streaks & XP +60%). https://www.orizon.co/blog/duolingos-gamification-secrets

[6] Premjit Singha (Medium) — Duolingo Streak System Breakdown & Design Flow. https://medium.com/@salamprem49/duolingo-streak-system-detailed-breakdown-design-flow-886f591c953f

[7] UserGuiding — Duolingo: in-depth UX and user onboarding breakdown. https://userguiding.com/blog/duolingo-onboarding-ux

[8] Game Developer — Game Design Deep Dive: Creating an adaptive narrative in Reigns. https://www.gamedeveloper.com/design/game-design-deep-dive-creating-an-adaptive-narrative-in-i-reigns-i-

[9] Gamezebo — Reigns Review: Decisions, Decisions. https://www.gamezebo.com/reviews/reigns-review-decisions-decisions/

[10] Macworld — Swipe right to rule: Reigns is a Tinder-style choose your own adventure. https://www.macworld.com/article/229318/swipe-right-to-rule-reigns-is-a-tinder-style-choose-your-own-adventure.html

[11] indiexp (Tumblr) — Monument Valley and UX. https://indiexp.tumblr.com/post/174697082035/monument-valley-and-ux

[12] Krasamo — Game Design Inspiration: Monument Valley I and II. https://www.krasamo.com/game-design-inspiration-monument-valley-i-and-ii/

[13] UX Collective — Games UX: Building the right onboarding experience. https://uxdesign.cc/games-ux-building-the-right-onboarding-experience-a6e99cf4aaea

[14] Nick Babich (UX Planet) — UI Design with Midjourney. https://uxplanet.org/ui-design-with-midjourney-df78eaa2d292

[15] MindStudio — Midjourney v8.1 vs MAI Image 2: speed in 2026. https://www.mindstudio.ai/blog/midjourney-v8-1-vs-mai-image-2

[16] Mezo Istvan (Medium) — Juicy UI: Why the Smallest Interactions Make the Biggest Difference. https://medium.com/@mezoistvan/juicy-ui-why-the-smallest-interactions-make-the-biggest-difference-5cb5a5ffc752

[17] StraySpark — Game UI/UX Design Principles: HUD, Menus, and Feedback Systems. https://www.strayspark.studio/blog/game-ui-ux-design-principles

[18] Pixune — Best Examples in Mobile Game UI Designs (2026). https://pixune.com/blog/best-examples-mobile-game-ui-design/

[19] Space Ape Games (Medium) — UI Breakdown: Pokemon Sun/Moon (Pokédex collection). https://medium.com/the-space-ape-games-experience/ui-breakdown-pokemon-sun-moon-87c5fd7d3370

[20] Elegant Themes — Lensa AI App: Guide to Magic Avatars. https://www.elegantthemes.com/blog/design/lensa-ai

[21] WOMBO Dream — AI Art Generator (Google Play, gallery/folders feedback). https://play.google.com/store/apps/details?id=com.womboai.wombodream

[22] SkillTree Platform — Skills Display / Overview. https://skilltreeplatform.dev/overview/

[23] Sam Liberty (Medium) — The 31 Core Gamification Techniques (Progress & Achievement). https://sa-liberty.medium.com/the-31-core-gamification-techniques-part-1-progress-achievement-mechanics-d81229732f07

[24] Mockplus — Gamification in UI/UX: The Ultimate Guide. https://www.mockplus.com/blog/post/gamification-ui-ux-design-guide

[25] Reverse Nerf — Mastering Mobile Game Design: Choose the Best Energy System. https://reversenerf.com/mastering-mobile-game-design-choose-the-best-energy-system/

[26] Mobile Free To Play — Understanding Energy Systems. https://mobilefreetoplay.com/understanding-and-eliminating-energy-systems/

[27] Zigpoll — Seamless transitions between screens to enhance engagement. https://www.zigpoll.com/content/how-can-app-developers-ensure-seamless-transitions-between-screens-to-enhance-user-engagement-in-a-mobile-application

[28] Canopas — Exploring Shared Element Transition with Navigation in Compose. https://canopas.com/exploring-shared-element-transition-with-navigation-in-compose-7a4c5885deb2

[29] NN/G — Progressive Disclosure. https://www.nngroup.com/articles/progressive-disclosure/

[30] Numinam — Multi-Step vs. Single-Page Forms (2026). https://www.numinam.com/en/blog/multi-step-vs-single-page-forms-which-really-generates-more-leads-complete-guide-2026

[31] PatternFly (Medium) — Comparing web forms: a progressive form vs. a wizard. https://medium.com/patternfly/comparing-web-forms-a-progressive-form-vs-a-wizard-110eefc584e7

[32] Yu-kai Chou — Decoding the Mystery Box: Reward Design. https://yukaichou.com/advanced-gamification/decoding-the-mystery-box-a-dive-into-the-intricacies-of-reward-design/

[33] William Lam (Medium) — Anatomy of a loot box animation. https://medium.com/@w.lam/anatomy-of-a-loot-box-animation-4fab432ba9fb

[34] Uism — Why Are People Obsessed with 'Gacha'? Waiting as ritual. https://uism.co.jp/en/blog/why-are-people-obsessed-with-gacha-what-capsule-toys-can-teach-us-about-ux-engagement-strategy/

[35] Kotaku — Why Opening Loot Boxes Feels Like Christmas. https://kotaku.com/why-opening-loot-boxes-feels-like-christmas-according-1793446800

[36] Pocket Gamer — Tabikaeru review: "The secret to a rewarding life". https://ee.pocketgamer.com/articles/084114/tabikaeru-review-the-secret-to-a-rewarding-life/

[37] Kotaku — Neko Atsume Developer's New Game (Tabikaeru). https://kotaku.com/neko-atsume-developers-new-game-is-about-a-traveling-fr-1821784010

[38] Udonis — First-Time User Experience (FTUE) In Mobile Games. https://www.blog.udonis.co/mobile-marketing/mobile-games/first-time-user-experience

[39] Keewano — First-Time User Experience (FTUE): 5 Tips for Mobile Games. https://keewano.com/blog/first-time-user-experience-ftue-mobile-games/

方法论附录（Methodology Appendix）#

</content>