Back返回

JING · 静诵

把诵经的特殊性,
转化为交互规则。
Translating a devotional practice
into interaction design.

静诵是我自主发起并主导的网页产品。我从前期调研中梳理诵经与普通阅读的差异,面向年长及初学读者定义体验,再与 Codex 协作实现、检查和发布。我的工作核心,是决定该做什么、为什么这样做,以及怎样判断结果是否合适。Jing is a self-initiated web product I led from research to release. I explored what makes scripture recitation different from ordinary reading, framed the experience for older and beginning readers, then worked with Codex to implement and review it. My focus was deciding what to build, why it mattered, and how to judge the result.

角色Role
产品与 UI/UX 设计主导
视觉方向 · AI 协作交付
Product & UI/UX design lead
Art direction · AI-assisted delivery
我的责任Ownership
场景洞察 → 交互定义
迭代取舍 → 设计验收
Context → Interaction requirements
Iteration → Design acceptance
协作方式Collaboration
我定义标准并检查体验
Codex 协助实现与技术验证
I set criteria and review the experience
Codex supports code and technical checks
状态Status
网页已上线Live on the web
网站Website
打开静诵 ↗View live project ↗
领域理解Domain understanding场景化交互Contextual interactionAI 任务拆解AI task framing设计质量把控Design quality ownership
静诵 · 静心入卷
01先理解场景Context before features

先理解如何诵读,
再决定界面提供什么。
Understand the practice.
Then decide what to build.

前期,我围绕经藏、辅助读音、功课计数、伴诵与续读开展调研,并参考汉文大藏经、念佛助手等产品。功能清单只是起点;真正影响设计的是下面三种使用需求。My early research covered scripture libraries, pronunciation aids, practice counts, companion audio and resuming. I referenced products including the Chinese Buddhist Canon and Nianfo Assistant. The feature inventory was a starting point; these three needs drove the design.

INSIGHT 01

读音会打断初学者的节奏Unfamiliar characters interrupt beginners

原文里的繁体字与生僻字,可能让读者停下来查音。我需要降低入门门槛,同时保留熟悉经文者的清净版面。Traditional and unfamiliar characters can interrupt recitation while readers look up pronunciation. Beginners need support; experienced readers need a clear page.

设计判断 → 拼音可选,原文保留Decision → Optional pinyin, intact source text
INSIGHT 02

诵读需要连续的注意力Recitation needs sustained attention

反复寻找固定翻页按钮,会让注意力离开经文。我把正文区域本身定义为操作区域,让翻页和缓移跟随阅读发生。Repeatedly locating a small page button draws attention away from the text. I made the reading area itself an interaction surface.

设计判断 → 连续自动诵读,保留主动控制Decision → Continuous reading with reader control
INSIGHT 03

一次功课有进入与收尾A session has a beginning and an ending

诵前准备、发愿与诵后回向都需要被考虑;宗派及个人习惯又不尽相同。流程应提供选择与提示,而不是替用户决定。Preparation, vows and dedication belong to the experience, while traditions and individual habits differ. The flow should offer choices and guidance.

设计判断 → 诵前可选,暂停也有收尾入口Decision → Optional preparation and a pause-to-close path

研究基础:前期案头调研、同类产品参考、日常课诵资料与持续体验走查。由研究形成的设计假设,会在后续面向初学及年长读者的任务测试中进一步检验。Research basis: desk research, comparable products, recitation references and iterative walkthroughs. The resulting design hypotheses can be further evaluated through task-based testing with beginning and older readers.

REFINING THE READING RHYTHM

从“翻得动”,
到“念得下去”。
From turning pages
to sustaining a practice.

我把迭代的判断标准从“功能能否运行”,推进到“操作是否打断诵读”。最近的三次调整,都围绕同一个目标:让界面配合人的节奏。I moved the review criterion from whether a feature works to whether it interrupts recitation. Three recent decisions share one aim: let the interface follow the reader’s rhythm.

2s

等待有明确的边界Give waiting a clear limit

段末固定停 2 秒,再无动画接续。读者调节移动速度,系统不再按字数增加等待。Pause for two seconds at a passage end, then continue without animation. Speed stays adjustable; character count adds no extra wait.

让位Recede

信息随阅读状态出现Let context follow the reading state

大经名与章节信息在正文诵读时收起,暂停后恢复,也可从“经名·目录”查看。经文原文不变。The large book and section header recedes during recitation and returns on pause. Contents remain available on demand; scripture text is unchanged.

收尾Closure

把中途暂停也设计完整Design the pause as part of the practice

轻点只停止手机缓移;“暂停诵读”则保存进度、暂停计时与伴诵,并以弹窗提供有出处的回向选择。A tap only stops mobile scrolling. Pause Recitation also saves progress, pauses timing and audio, and opens source-bound dedication choices.

02先体验,再理解Experience the decisions

用一次操作,
理解一个设计决定。
One interaction.
One design decision.

选择下面任一体验。这里是可操作的设计演示,不会写入你的实际诵读记录。Choose an interaction below. These working demonstrations do not write to your actual reading history.

静诵 · 交互体验JING · INTERACTION DEMO
32
T0251 · 原文节选SOURCE EXCERPT

般若波羅蜜多心經

1 / 3

节选保留本站 CBETA 来源原字与标点。拼音为软件辅助,不属于原文;此处仅演示交互,段数不代表整部经书。Excerpts retain the characters and punctuation of the site’s CBETA source. Pinyin is a software aid, separate from the source. This demo is not the full scripture. CBETA ↗

交互演示INTERACTIVE DEMO

为这次课诵做准备Prepare for this session

按平日所学习惯选择,确认后查看流程。Choose according to your usual practice, then preview the sequence.

演示的是有出处的节选选择,并非完整仪轨。来源:灵鹫山课诵本第 55、56、108 页;本页不额外加入忏悔偈与四弘誓愿。This previews source-bound excerpts, not a complete ritual. Source: Ling Jiou Mountain booklet, printed pages 55, 56 and 108. No extra repentance or Four Great Vows are inserted.

查看所依课诵本 ↗View the source booklet ↗
T0235 · 暂停流程演示PAUSE FLOW DEMO

暂停诵读,妥善收尾Pause with a considered closing

金剛般若波羅蜜經 · 示范情境:进度已保留,计时与伴诵已暂停。本演示不产生实际记录。Diamond Sutra · Sample state: progress retained, timer and audio paused. This demonstration creates no real record.

出处:灵鹫山《金刚经》课诵本,印刷页 108。两版择用,不套用到其他经书;未核定来源时不自动配文。Source: Ling Jiou Mountain Diamond Sutra booklet, printed page 108. Choose a version; these are not assigned to other scriptures. No verse is automatically supplied without a verified source.

查看所依课诵本 ↗View source booklet ↗
03我的 AI 协作方法How I worked with AI

把“我想要什么”,
推进为“怎样才算做好”。
From what I wanted
to what good meant.

我负责场景判断、任务拆解和体验验收,Codex 协助编码与技术检查。每轮协作都围绕具体问题展开:表达约束,让结果可体验,再根据结果继续取舍。I owned context, task framing and design acceptance; Codex supported implementation and technical checks. Each cycle focused on a specific problem: define constraints, make the result testable, then decide what to change.

CASE A

把领域知识转成产品约束Turn domain knowledge into constraints

“一定要保证经文的正确性,不要随意乱改经文。”“Keep the scripture accurate. Do not arbitrarily rewrite it.”

项目对话中的需求摘录;省略部分语句。Excerpts from my project requests, shortened for clarity.

我定义I framed
原文准确性是硬约束;读音辅助可以加,原文不能随意改。Source fidelity is a hard constraint. Reading aids can be added; source text cannot be freely rewritten.
AI 实现AI built
接入官方文本,分离拼音,加入来源与文本一致性检查。Official text integration, separate pinyin, provenance and consistency checks.
我验收I reviewed
追查“目录有名字却读不到正文”,移除不可读入口;发现通用注解没有实际价值后,要求删掉。I challenged catalog entries with no readable text and removed unusable entries. Repeated generic annotations were also removed.
体现能力Capability
领域约束定义 · 内容治理 · 质量判断Domain constraints · Content governance · Quality judgment
CASE B

把感受转成可执行的反馈Translate experience into actionable feedback

“有 2 秒的停顿就翻页。不要让人等太久。”“Turn the page after a two-second pause. Do not make people wait too long.”

项目对话中的需求摘录;省略部分语句。Excerpts from my project requests, shortened for clarity.

我定义I framed
把交互位置、触发方式与反馈写清楚;悬停速度需要支持连续诵读。Specify target regions, triggers and feedback; hover speed should support sustained recitation.
AI 实现AI built
实现区域翻页、五档缓移与跨段、跨卷接续;区分移动速度与段末等待时间,保留停止条件。Implement page regions, five scrolling speeds and continuation across passages and volumes, separating movement speed from the end pause and preserving stop conditions.
我验收I reviewed
先用倍数反馈校准缓移速度,再加入五档调速;发现段末等待仍然打断诵读,明确改为固定 2 秒。根据实际体验重新定义规则,而非一次生成后接受默认值。I calibrated scrolling through proportional feedback, then added five speed choices. When the end pause still interrupted recitation, I set it to two seconds. The rules evolved through experience instead of accepting the first generated defaults.
体现能力Capability
交互规格表达 · 原型评估 · 细节迭代Interaction specification · Prototype evaluation · Iteration
CASE C

把桌面与手机视为不同情境Treat desktop and mobile as different contexts

“手机版本……仅显示我的经书……确认之后进去专注诵读模式。”“On mobile … show only My Books … confirm before entering focused reading.”

项目对话中的需求摘录;省略部分语句。Excerpts from my project requests, shortened for clarity.

我定义I framed
电脑保留并列信息;手机先选经、再进入专注诵读。读经时收起次要工具。Keep parallel context on desktop. On mobile, choose a text before focused reading; collapse secondary tools while reading.
AI 实现AI built
建立手机独立入口、确认弹窗、工具收起与恢复状态。Implement the mobile entry, confirmation and collapsible tool states.
我验收I reviewed
用截图统一工具栏与弹窗边距;当跨段自动诵读成为目标,我重新定义恢复条件:段末继续保持沉浸,由轻点正文来停止缓移、展开工具。I used screenshots to align tool rows and modal margins. Once continuous recitation became the goal, I revised the reveal condition: stay immersed across passages; tap the text to stop movement and restore controls.
体现能力Capability
响应式信息架构 · 视觉验收 · AI 协作闭环Responsive information architecture · Visual QA · AI iteration
CASE D

发现 AI 的过度概括,并建立内容准入规则Challenge AI generalization with an editorial gate

“请再次确认每个经文对应的开经偈、忏悔、发愿、回向偈。”“Recheck the opening, repentance, vows and dedication for each scripture.”

项目对话中的需求摘录;省略部分语句。Excerpts from my project requests, shortened for clarity.

我发现I noticed
不同经书被套用同一份回向文,功能可运行,但内容对应缺乏依据。One dedication had been applied across texts. The feature worked, but its assignment lacked evidence.
我要求I required
重新查证课诵本、译本与可选版本,不能仅按经名或类别推定。Recheck booklets, translations and alternatives instead of inferring rituals from titles or categories.
AI 修正AI revised
撤下未经核定的默认配文;以来源限定可选节选,保留出处和核对范围,并兼容旧记录。Withdraw unverified defaults, constrain excerpts by source, expose provenance and audit scope, and preserve existing records.
体现能力Capability
批判性审查 · 领域内容治理 · AI 输出验收Critical review · Domain content governance · AI acceptance criteria

这些案例呈现我的设计决策与协作方式;实现代码和自动检查由 AI 辅助完成。技术检查通过不等于目标用户已经验证,二者在验收中需要分别看待。These examples show my decisions and collaboration process. Implementation and automated checks were AI-assisted. Technical checks and validation with intended users are separate forms of evidence.

04双端推敲Refining both contexts

同一个设计意图,
在两种屏幕上分别落实。
One design intent.
Two considered contexts.

桌面支持书架、正文与功课并列;手机把选择与诵读分成两个清楚的阶段。宣纸与水墨建立安静的气质,布局则围绕当下任务组织。Desktop keeps the library, reader and session context together. Mobile separates choosing from reciting. Paper and ink set the tone; layout follows the task.

手机交互演示MOBILE INTERACTION DEMO

般若波羅蜜多心經

1 / 3

SCROLL → FOCUS → CONTINUE

滑动开始,
轻点停下。
Swipe to begin.
Tap to take control.

向上推经文、继续向下读,自动缓移随即开始,周边工具收起。到达段末停 2 秒后自动接续;轻点正文,缓移停止、工具恢复。再次向下阅读即可重启。Swipe the text upward to read down: automatic scrolling starts and tools recede. After two seconds at a passage end, the next begins. Tap the text to stop movement and restore tools; another reading gesture restarts it.

  1. 向下阅读 → 自动缓移,工具收起Read downward → Auto-scroll, tools recede
  2. 段末 2 秒 → 无动画自动接续Two seconds at the end → Continue without animation
  3. 轻点正文 → 停止缓移,操作恢复Tap the text → Stop movement, restore controls

可直接滑动或使用按钮体验,轻点经文或按空格暂停。此处仅有三段节选,结束不计整部完成;演示不控制浏览器地址栏。Use a gesture or the buttons to begin; tap the text or press Space to stop. This three-excerpt demo never counts a full work and does not control browser chrome.

布局迭代留档 · 电脑端的信息组织
布局迭代留档 · 电脑端的信息组织Layout iteration archive · Desktop information hierarchy
布局迭代留档 · 手机端工具分组
布局迭代留档 · 手机端工具分组Layout iteration archive · Mobile control grouping

按功能分组,减少识别负担Group by purpose

这轮布局调整将目录、伴诵、拼音与字号等操作按任务分组,统一行高并补充文字。后来加入调速与暂停,也沿用同一原则:需要时看得清,诵读时收得起。This layout iteration grouped contents, audio, pinyin and type controls by task, with consistent heights and labels. Later speed and pause controls followed the same principle: clear when needed, unobtrusive while reading.

让边界状态也成立Design the edge states

把验收延伸到连续状态:段末不打断、轻点能停止、再滑动可重启,切走页面会暂停。自动翻到结尾也不能替代“完整诵读一部”的确认,进度与完成次数分别处理。Review continuous states: no interruption at passage ends, tap to stop, swipe to restart and pause when the page is hidden. Reaching the end automatically cannot confirm a fully recited work; progress and completed counts remain separate.

05交付与判断Scope, evidence & next steps

交付一个可用版本,
也清楚它的边界。
Ship a working release.
Know what remains to validate.

已落地的设计结果What shipped

网页无需登录;支持可选拼音、20–52 号字、五档自动缓移、段末 2 秒接续、暂停回向及本机续读。记录到卷与段;完整诵读并确认后才计一遍,自动翻页不会代替确认。当前目录含 4,830 部可直接诵读典籍与 848 条对应版本入口。A web release without sign-in: optional pinyin, 20–52 type sizes, five scrolling speeds, two-second passage transitions, dedication on pause and local progress. Records identify volume and passage; a completed count requires confirmation of full recitation, not automatic page turns. The catalog includes 4,830 directly readable works and 848 version references.

我主动控制的范围The scope I chose

暂缓登录、数据库、收费资源与商店上架,先把核心诵读路径做好。本机记录保存在当前浏览器;仪轨只开放有明确来源的节选,未核定的经书不自动配文。删掉没有有效内容的注解,比保留一个空功能更符合首版目标。I deferred accounts, databases, paid hosting and app-store distribution to focus on the core journey. Records stay in the current browser. Only source-checked ritual excerpts are offered; unverified scripture assignments are withheld. Removing empty annotations better served the release than keeping a nominal feature.

我的专业贡献My professional contribution

将前期调研转化为领域需求,把需求拆成界面、状态和规则,用截图与具体反馈控制 AI 输出质量,并在预算和实现条件下持续收敛范围。我的角色贯穿问题定义、交互设计与最终体验判断。Translate research into domain requirements, break those requirements into screens, states and rules, direct AI output through precise visual feedback, and manage scope against cost and implementation constraints. My ownership spans problem framing, interaction design and experience judgment.

下一轮需要什么证据What evidence comes next

邀请初学及年长读者完成“选经—开始—暂停—续读”,观察拼音是否帮助连续诵读、区域翻页是否容易发现、可选仪轨是否被理解。记录任务完成、误触与口头反馈,而不预先声称效率或留存提升。Invite beginning and older readers to choose, start, pause and resume. Observe whether pinyin aids continuity, page regions are discoverable and optional ritual steps are understood. Capture completion, mis-taps and feedback before claiming gains in efficiency or retention.

成果依据为已交付功能、界面走查与技术检查;截图中的诵读数据来自演示操作。后续将通过真实任务测试补充用户层面的证据。Evidence consists of shipped functionality, interface walkthroughs and technical checks. Screenshot records are demonstration data; future task-based testing will add evidence from intended users.

JING / ELAINE XIAO

以设计判断,
引导 AI 把体验做完整。
Design judgment.
AI collaboration.
A working experience.

从理解特殊场景,到定义交互与推动交付。
这是我作为产品与 UI/UX 设计师带来的价值。
From understanding a specific context to defining interactions and guiding delivery.
This is the value I bring as a product and UI/UX designer.

Project sources & credits项目来源与鸣谢

More projects更多项目

View all projects ↗查看全部项目 ↗
LUMA AnatomyProduct UI/UX
FOLDLIGHT
FOLDLIGHTGame UI/UX
TAVELLA
TAVELLAApp UI/UX
SplitKaki
SplitKakiApp UI/UX
VV Life
VV LifeApp UI/UX