ArkUI 自定义页面转场效果：从效果选择到详情展示的完整交互

在很多应用里，用户点击一个入口后，界面会进入另一块内容。这个动作很容易被描述成“页面转场”，但真正影响体验的并不只是某一个动画属性，还包括入口列表、当前选项、标题变化、返回路径以及进入后用户能不能立即理解自己看到了什么。

这篇文章介绍一个专门演示转场效果选择的 ArkUI 页面。它没有接入真实的路由栈，也没有调用系统页面转场 API，而是把所有内容放在同一个页面中：首屏展示四个效果入口，点击其中一个入口后切换到对应的详情状态，详情区域用不同颜色、图形和静态动画属性表达该效果，顶部右侧提供返回按钮。这样的实现很适合观察“选择状态如何驱动界面变化”，也能帮助开发者区分真正的页面导航与单页面条件渲染。

一、先看清楚这个页面到底做了什么

打开页面时，顶部显示“自定义页面转场”，下面有一句简短说明：“选择一种路由切换效果，进入独立详情页。”再往下是四张纵向排列的白色卡片。四张卡片的名称分别是“淡入淡出”“缩放进入”“右侧滑入”和“3D 翻转”。每张卡片左边有一个图形符号，中间是效果名称与一行解释文字，右侧是指向详情的箭头。

这里的“独立详情页”更准确地说是一个独立的详情状态，而不是新的系统页面。点击卡片之后，首屏的列表不再显示，页面中间出现一块大尺寸的彩色展示区域，中央放置当前效果对应的符号，下面继续显示效果名称、效果说明以及“转场已完成 · 当前详情页保留独立上下文。”这条绿色提示。顶部标题也会从总标题变成当前效果的名称，右侧出现“返回”按钮。

因此，整个交互可以分成两个稳定状态。第一个状态是“选择状态”，用户在四个入口中做选择；第二个状态是“详情状态”，页面围绕已选的一个效果展示结果。返回操作会让页面重新回到选择状态，四张卡片再次出现。页面没有输入框，没有网络请求，没有动态数据列表，也没有真正切换到第二个路由。这些边界很重要，因为它决定了文章应该讨论状态切换和视觉反馈，而不是讨论不存在的路由管理或跨页面通信。

二、四个效果入口各自表达什么

四张卡片的设计并不是把四个名字简单堆在一起。每一张卡片都由“图形符号、效果名称、解释文字、右侧箭头”四部分组成，阅读顺序从左到右非常明确。用户先看到符号，再读取名称和说明，最后通过箭头判断这张卡片可以继续进入。卡片使用相同的内边距、圆角和间距，区别主要来自颜色、符号和文字，这种一致的布局让四个入口看起来属于同一组操作。

第一项“淡入淡出”配有一个类似圆环的符号，蓝色是它的识别色，下面的说明是“透明度从 0 到 1”。这句话表达的是视觉概念：内容从不可见逐步变为可见。进入详情后，蓝色展示卡片中仍然使用这个符号，标题和说明也保持一致。页面没有展示透明度曲线，也没有让用户调节起始值和结束值，因此读者不应该把它理解成可配置的透明度编辑器。

第二项“缩放进入”使用类似圆点的符号，识别色为绿色，说明是“中心点放大进入”。详情区域会保持绿色，并通过更接近正常尺寸的缩放参数表现与其他选项不同的视觉倾向。这里的重点不是给出一个完整的缩放动画编辑面板，而是让用户在选中之后马上看到“这个选项与放大有关”。由于页面使用固定参数，用户不能调整放大比例、中心点或持续时间。

第三项“右侧滑入”使用向右的箭头符号，识别色为橙色，说明是“位移从屏幕右侧进入”。详情页仍然保持橙色和箭头，文字直接告诉用户它要表达的方向。页面没有绘制真实的屏幕外元素，也没有提供拖拽距离和速度曲线，所以这是一种效果概念展示。它更适合用来理解入口选择后的内容替换和颜色反馈，不适合被描述成完整的位移动画组件。

第四项“3D 翻转”使用菱形符号，识别色为紫色，说明是“带透视感的旋转过渡”。详情展示区域会增加一个轻微的旋转角度，以便在静态界面上保留一点方向感。这个旋转角度是固定的，页面没有透视距离、旋转轴、背面内容或手势控制。它所表达的是“当前选择属于带旋转倾向的效果”，而不是一个完整的三维场景。

四个入口的说明文字同时承担了导航提示和结果预告的作用。用户在点击之前已经知道进入后会看到什么方向，进入之后名称和说明再次出现，前后信息保持一致。这样的重复不是多余，而是为了让选择状态和详情状态之间建立连续感。

三、active 状态怎样控制整个页面

页面只有一个真正需要响应界面的状态：当前选中的效果。它使用一个数字表示当前选择，初始值为负数，表示尚未选中任何效果；当用户点击四张卡片中的一张时，这个数字变成对应的位置。四个入口按照从上到下的顺序分别对应 0、1、2、3。这个数字既决定顶部显示什么标题，也决定页面显示列表还是详情，还决定详情卡片使用哪一种颜色、哪一个符号以及哪一条说明。

把初始状态设为负数有一个直接好处：它与四个有效位置自然区分开。页面不需要额外再维护一个“是否已经选择”的布尔值，判断当前数字是否小于 0 就能知道应该展示选择界面；判断当前数字是否大于等于 0，就能知道应该展示详情界面。这样，标题、返回按钮、列表区域和详情区域共享同一条状态来源，减少了多个状态之间互相不同步的可能。

状态与界面的关系可以这样理解：当当前选择小于零时，顶部标题是总标题，右侧不显示返回按钮，说明文字和四张卡片可见；当当前选择等于某个有效位置时，顶部标题改为对应效果名称，右侧出现返回按钮，列表被详情内容替代，详情中读取同一位置的符号、颜色、名称和说明。用户不需要刷新页面，状态改变后界面会按照新的条件重新组织。

这种状态设计还带来了清晰的返回逻辑。返回按钮只需要把当前选择重新设回负数，页面就会恢复到初始状态。它不需要记录上一次选中的内容，也不需要维护返回栈，因为这里始终只有“选择状态”和“详情状态”两个层级。对于一个专门演示单次选择的页面来说，这种状态模型足够直接。

需要注意的是，数字本身并没有业务含义，它只是数组位置。真正显示给用户的是四个名称、四条说明、四个符号和四种颜色。数字只承担“当前选择是哪一个”的内部映射职责。理解这个页面时，应当把重点放在状态与视觉结果的对应关系上，而不是把数字误认为路由地址或页面编号。

四、初始选择界面的布局细节

初始界面最上方是一个横向标题区域。标题占据主要宽度，文字字号较大并使用粗体，给出页面主题。由于初始状态没有选中效果，标题固定为“自定义页面转场”。标题区域有统一的内边距，让文字不会贴近屏幕边缘，也为详情状态出现返回按钮预留了相同的布局位置。

标题下方是辅助说明文字。它的字号较小，颜色偏灰，内容只有一句，作用是告诉用户下一步应该做什么。它不承担状态反馈，也不会随着卡片选择而变化。这样的文字放在列表上方很合适，因为用户在看到选项之前先得到操作方向，不必通过试错理解页面用途。

卡片列表使用纵向排列，每张卡片之间留有固定间距。列表整体具有内边距，卡片本身使用白色背景和较大的圆角，与浅灰蓝色页面背景形成对比。由于卡片内容高度不大，四张卡片可以连续阅读；卡片之间的空隙又能避免它们看起来像一整块难以区分的区域。

卡片内部是一个横向行布局。左侧符号拥有固定宽度并居中对齐，这让四张卡片的文字起始位置保持一致，即使不同符号的视觉宽度不同，也不会造成标题左右跳动。中间使用纵向列布局，上方放效果名称，下方放说明文字，两行之间有小间距。中间区域占据剩余宽度，保证说明文字不会挤压两侧元素。最右侧的箭头使用浅灰色，表达“可以进入”，但不会抢过效果名称的视觉重点。

这种布局有两个优点。第一，四张卡片可以快速比较：名称都在同一列，说明也在同一列，颜色和符号成为辅助识别。第二，点击区域并不局限于箭头，整张卡片都可以响应点击。用户点名称、说明或空白区域，都能进入相同的详情状态，减少了操作精度要求。

五、点击卡片后发生的变化

用户点击“淡入淡出”卡片时，页面的当前选择变为第一项的位置。此时顶部标题显示“淡入淡出”，右侧出现返回按钮，原来的说明文字和列表被详情列替换。详情上方是一块蓝色的大卡片，中央显示圆环符号，下面再次显示效果名称、透明度说明以及绿色的完成提示。

点击“缩放进入”时，页面变化方式完全相同，但所有与当前选择相关的内容换成绿色版本。顶部标题变成“缩放进入”，详情中央换成圆点符号，说明改为“中心点放大进入”。详情卡片的缩放参数也与其他选项不同，所以即使用户只看视觉区域，也能感知这不是上一项内容被简单换了一个标题。

点击“右侧滑入”时，详情区域变成橙色，中央符号变为箭头，说明文字强调从右侧进入。点击“3D 翻转”时，详情区域变成紫色，中央符号变为菱形，并呈现轻微旋转。四种结果都保留相同的垂直结构：大卡片、效果名称、效果说明、完成提示。结构稳定，内容变化集中在当前选项相关的数据上。

页面顶部标题和详情区域内容同时变化，形成了两个位置的确认。顶部标题告诉用户当前处于哪一个效果；详情区域则用颜色、符号和说明进一步确认。如果只有其中一个地方变化，用户在页面切换后可能需要寻找变化来源；现在两处同时变化，理解成本更低。

完成提示使用浅绿色背景和深绿色文字，位置紧跟在效果说明之后。它不是系统通知，也不代表真正的路由动画已经由系统执行完成，而是页面对当前选择状态的静态反馈。把这一点说清楚很重要：这里的“已完成”表示详情状态已经显示，不能推断出存在真实的页面栈变化、页面生命周期切换或设备级转场执行。

六、详情卡片中的 rotate、scale 与 animation 表现

进入详情状态后，页面中央的大卡片拥有统一的宽度和高度、较大的圆角以及当前选项对应的背景色。中央符号字号很大并使用白色，因此能在深色背景上保持清晰。大面积的颜色让四个选项之间形成明显区分，同时又不改变详情结构。

四个效果并不是完全相同的视觉参数。第三项的“右侧滑入”虽然在文字上描述了位移方向，但详情区域本身并没有用独立的位移值把卡片放在屏幕外再移入；它主要通过橙色和箭头符号表达该概念。第一项和大多数选项使用略小于正常尺寸的缩放值，第二项则使用正常尺寸，以此形成“放大进入”与其他选项的参数差异。第四项额外带有一个小角度旋转，突出翻转主题。

详情卡片还设置了固定时长和缓动曲线。固定时长让演示效果不会因为用户操作快慢而改变，缓动曲线则让状态更新不至于显得生硬。不过，页面中并没有为四种效果分别配置四套完整的动画轨迹；同一处动画属性服务于详情卡片的状态变化，具体差异主要来自选项对应的旋转和缩放参数。

更准确的理解是：页面通过条件渲染替换“列表区域”和“详情区域”，同时让详情卡片带有统一的动画声明和少量参数差异。这种做法可以演示状态驱动的视觉变化，但不能等同于导航系统的页面转场。真正的页面转场通常涉及路由栈、页面生命周期、入场页和退场页的协同，而这里没有这些内容。

七、返回按钮为什么是这个页面的关键

返回按钮只在详情状态出现，位于顶部标题区域的右侧。它使用普通按钮样式，但通过蓝色文字和浅蓝背景突出可操作性。初始状态不显示它，避免用户误以为自己已经进入了一个需要返回的子页面；进入详情后它才出现，与当前状态保持一致。

点击返回按钮后，当前选择恢复为未选择状态。标题重新变为总标题，返回按钮消失，详情区域被四张卡片替换，辅助说明文字重新出现。页面不会保留上一次详情的完成提示，也不会自动选中刚才点击的卡片。这样的返回行为相当于“回到效果选择首页”，而不是“返回到上一条详情记录”。

返回逻辑的价值在于它验证了状态模型是否闭环。进入操作把未选择状态变成四个有效状态之一；返回操作把任意有效状态统一变回未选择状态。如果返回后页面仍残留某个标题、颜色或提示，说明界面中存在没有跟随状态更新的内容。在这个页面中，标题、按钮、列表和详情都由当前选择决定，因此返回后的结果比较容易预期。

用户也可以连续进行“选择—返回—再次选择”。例如先进入第三项，再返回，随后进入第四项。每一次选择都会按照当前索引重新读取名称、说明、符号和颜色，不依赖前一次详情。这样的重复操作可以观察页面是否出现旧内容残留，也能确认详情区域不是只在第一次点击时才更新。

八、四种颜色与符号如何帮助理解结果

颜色是这个页面最直观的区分方式。蓝色对应淡入淡出，绿色对应缩放进入，橙色对应右侧滑入，紫色对应 3D 翻转。列表卡片左侧只使用小尺寸的彩色符号，详情状态则把对应颜色扩展到大卡片背景。颜色从小范围提示变成大范围确认，形成了进入前后的视觉呼应。

符号也承担了简化说明的作用。圆环让人联想到渐变或出现，圆点强调中心与缩放，箭头表达方向，菱形和轻微旋转则暗示空间变化。这些符号不是完整的动画预览，也不能替代文字，但当用户快速浏览列表时，它们能帮助用户记住四项内容的差异。

符号使用较大的字号并居中显示，说明它们在详情状态中不是辅助小图标，而是视觉主体。符号颜色为白色，背景色由当前选项决定，前景和背景之间形成足够对比。列表状态中的符号使用对应的识别色，详情状态中的符号使用白色，这种变化说明同一个符号在不同区域承担不同角色：列表中是分类标记，详情中是主视觉。

九、这个页面与真实页面转场的边界

页面标题和文案容易让人联想到完整的路由跳转，但实际行为必须以可见交互为准。这里没有新建第二个系统页面，没有展示两个页面同时滑动，也没有使用路由栈保存多个访问记录。点击卡片后，页面只是进入另一种条件分支；点击返回后，页面又回到列表条件分支。

“右侧滑入”的说明也不能直接证明存在真实位移动画。页面通过标签、箭头、颜色和详情状态表达效果名称，而不是把详情卡片从屏幕右侧之外移动到中心。类似地，“淡入淡出”并没有展示可调透明度进度，“3D 翻转”也没有提供完整的前后面翻转过程。只有明确这些边界，才能准确理解页面。

页面里的动画属性属于详情卡片的视觉表现，用来配合状态变化，不能延伸成系统级导航能力。它没有处理页面栈、页面销毁、页面恢复、返回手势、深层链接或跨页面参数。若把这些没有出现的能力写成已实现功能，读者运行时会发现描述与实际界面不符。

这个边界并不削弱示例的价值。恰恰相反，单页面演示把最重要的部分缩小到了可观察范围：一个选择状态如何驱动标题、按钮、列表、颜色、符号、说明和完成提示；一个返回动作如何恢复初始状态；不同选项如何使用不同的静态视觉参数。对于理解声明式 UI 来说，这些内容已经足够具体。

十、从用户角度完整走一遍

第一次打开页面时，用户看到的是一个没有选中项的列表。标题告诉用户这是一个自定义转场效果选择页，辅助说明告诉用户需要选择一种效果。四张卡片从上到下排列，名称和说明都可直接阅读，右侧箭头让用户知道卡片可以点击。

如果用户点击第一张卡片，列表消失，蓝色详情区域出现，顶部标题和详情标题都显示“淡入淡出”。用户还会看到“透明度从 0 到 1”的说明，以及绿色的完成提示。此时返回按钮位于顶部右侧，表明可以离开详情状态。

如果用户点击返回，列表重新出现，四张卡片的顺序保持不变，页面回到最开始的阅读状态。再点击第二张卡片，绿色详情区域出现，标题变成“缩放进入”，符号、说明和视觉参数同时切换。这个过程不需要重新打开页面，也不需要等待网络数据。

第三张卡片和第四张卡片的操作路径相同。用户可以分别查看橙色和紫色详情，也可以随时返回再切换到其他选项。无论选择顺序如何，当前页面只保留一个当前选项，不会显示多个详情，也不会累积选择历史。这正是单选择状态页面的特点。

十一、适合观察的边界场景

首先可以观察初始状态。页面打开后不应该显示返回按钮，顶部标题应该是总标题，列表上方应该出现辅助说明，四张卡片应该完整显示。如果一打开就出现详情，说明未选择状态的判断不正确。

其次可以观察四项逐一点击。每一项都应该进入详情，标题、符号、颜色和说明必须同时对应。尤其要留意第二项与第四项，因为它们除了更换名称外，还分别体现缩放和旋转的参数差异。如果点击后颜色变了但说明仍然是上一项，用户就无法建立选择与结果的对应关系。

再次可以观察返回。进入任意详情后点击返回，页面应该恢复为列表，而不是只清空详情文字或保留一个空白区域。返回按钮也应该随之消失。连续执行多次进入和返回，可以确认状态切换没有依赖一次性初始化。

还可以观察重复选择。同一张卡片连续进入、返回，再进入，结果应保持一致；先选择一项再返回，然后选择另一项，第二次详情不应混入第一次的颜色、符号或说明。这些都是当前页面实际具备的可观察行为，不需要额外构造数据。

十二、为什么这个示例适合学习声明式界面

页面内容不多，但每个可见区域都与一个明确状态有关。标题由是否选择和当前索引决定，返回按钮由详情状态决定，列表和详情使用互斥条件显示，颜色和符号通过当前索引读取，完成提示在详情状态中固定出现。用户操作只改变当前选择，界面则根据选择重新描述自己应该呈现的样子。

这就是声明式界面容易理解的一点：不必手动逐个隐藏标题、删除卡片、创建详情块、改变颜色，再把返回按钮加回来。只要当前状态改变，页面的条件关系就会重新计算。初始状态和详情状态的差异不是一连串命令，而是两种界面描述之间的切换。

同时，这个示例也提醒我们不要为了讲概念而扩大功能。页面没有列表数据加载，没有复杂组件复用，没有真实路由，也没有后端响应。它的学习重点就是“一个状态、四个选项、两种显示分支以及返回闭环”。把范围控制好，读者才容易理解每个变化来自哪里。

十三、视觉层次与可读性

页面整体使用浅灰蓝色背景，卡片使用白色，文字使用深色和灰色两种主要层级。总标题和详情标题字号较大并加粗，效果名称位于卡片内部的主要阅读位置，解释文字字号较小且颜色更浅。用户可以先扫标题，再读说明，不会被所有文字挤在同一层级。

卡片的圆角让它们更像可点击的独立入口，固定间距则把四个效果分隔开。详情状态中的大卡片圆角更大，能够承载中央符号和颜色，同时与列表卡片形成尺寸层级。完成提示使用浅绿色底色，不会抢走主视觉，但可以被快速识别为状态信息。

标题区域在两个状态中保持相同高度和内边距。初始状态没有右侧按钮，详情状态增加返回按钮后，标题仍然不会明显跳动。布局中的主要宽度由标题占据，按钮放在剩余空间，这样不同效果名称切换时也能保持顶部结构稳定。

十四、对“独立详情”的准确理解

详情内容看起来像一页单独的效果说明，但它实际上是同一页面中的另一种显示状态。这里的“独立”主要体现在阅读上下文：进入后不再看到四张选项卡片，而是集中展示当前选中的一项；顶部标题也切换为当前效果名称；返回按钮提供明确的回到列表路径。

它不是独立路由，所以不会产生新的页面实例，也不会保存独立的生命周期状态。返回也不是系统返回栈的弹出，而是一次状态重置。理解这一点后，用户可以把它作为“单页详情模式”来阅读和使用，而不必期待真实的导航动画或跨页面参数传递。

这种方式在演示交互结构时很实用。它用最少的状态展示了选择页与详情页之间的关系，也让所有视觉差异集中在一个页面中。对于初学者而言，可以先学会如何组织状态、条件内容和返回，再逐步把同样的交互迁移到真正的路由场景。

十五、运行时应该看到什么

页面首次显示时，背景是浅色，顶部标题为“自定义页面转场”，下面是选择提示，四张白色卡片按顺序排列。每张卡片左侧的符号颜色不同，名称分别对应四个效果，右侧都有浅灰色箭头。此时不存在详情大卡片，也没有返回按钮。

点击任意一张卡片后，标题变为被点击的效果名称，返回按钮出现在右上角，选择提示和卡片列表被详情区域替代。详情区域的背景颜色、中央符号、效果名称和说明必须保持同一项对应。绿色完成提示显示在说明下方，表明当前详情状态已经建立。

点击返回后，详情区域消失，列表恢复，标题还原，返回按钮隐藏。再次点击其他卡片，页面应该显示新的效果，而不是继续显示上一次的标题或颜色。整个过程只需要点击列表卡片和返回按钮，不依赖网络，也不需要输入内容。

十六、容易产生的误读

第一个误读是把四个标签当成四个真实路由。页面没有给每个标签建立独立地址，它们只是四个数组位置对应的选择项。第二个误读是把“右侧滑入”当成已经完成的真实位移动画。当前界面主要通过文字和视觉样式表达方向，不能据此推导出完整的位移过程。

第三个误读是把完成提示当成系统动画回调。提示文字由详情状态直接显示，并不是某个系统转场事件返回的结果。第四个误读是把中央大符号当成真实图片资源或动态预览。它是页面中的文字符号，作用是配合颜色和标签表达效果类型。

第五个误读是把返回按钮当成系统返回键的替代品。它只是当前页面里一个明确的状态重置入口。页面没有展示手势返回、系统返回键或深层页面栈，因此这里的返回仅指这个按钮带来的状态恢复路径。

十七、这个页面的交互闭环

一个完整闭环包含四个步骤：先看到选择列表，再点击一个效果，随后查看详情，最后点击返回重新选择。四个步骤之间没有隐藏操作，也没有需要等待的异步过程。用户可以在一次浏览中完成任意数量的选择和比较。

闭环的核心是同一个当前选择贯穿始终。点击卡片时，它决定进入哪一项；进入详情后，它决定标题、颜色、符号和说明；点击返回时，它被清除；清除后，列表重新出现。只要这一条关系成立，页面就能保持可预测。

从体验角度看，入口与结果之间有足够的对应关系。用户不会只看到一个抽象的“成功”，而是会看到自己选择的名字、专属颜色、专属符号和解释文字。即使没有真实的复杂动画，这种反馈也能让交互过程完整。

十八、总结

这个 ArkUI 页面用一个当前选择状态组织了四种效果入口和一个详情展示区域。初始状态提供四张卡片，卡片分别代表淡入淡出、缩放进入、右侧滑入和 3D 翻转；每张卡片都有自己的符号、颜色和简短说明。用户点击卡片后，页面进入对应的详情状态，顶部标题、返回按钮、彩色展示区域、中央符号和结果说明共同完成反馈。点击返回后，状态清除，页面回到选择列表。

页面中的动画属性只用于详情卡片的视觉表现，当前实现没有调用真实页面路由转场，也没有建立多页面导航栈。所谓“独立详情”是单页面中的独立阅读状态。这个边界既是页面的实际能力，也是阅读这类示例时最应该保持的准确性。

从学习角度看，它展示了几个清楚的关系：一个负数表示尚未选择，四个有效位置分别对应四个效果；条件内容决定列表和详情哪个可见；当前选择同时驱动标题、按钮、颜色、符号和说明；返回操作把页面恢复到可再次选择的初始状态。对于理解状态驱动 UI、条件渲染和交互反馈，这个小页面已经提供了完整而具体的观察对象。

只要把这些真实可见的内容说明清楚，文章就不需要额外添加不存在的路由、网络、设备或生产服务。读者打开页面后，可以按照“查看四项、进入任意一项、观察详情、点击返回、再次选择”的顺序复现全部效果，并准确理解每一次变化来自当前选择状态。

十九、四个选择结果的对照观察

把四个效果连续打开一遍，可以更清楚地看到页面的共同结构与差异。淡入淡出的详情使用蓝色背景，主符号是圆环，说明文字强调透明度变化；缩放进入使用绿色背景，主符号是圆点，说明文字强调中心点放大；右侧滑入使用橙色背景和箭头，说明文字强调从右侧进入；3D 翻转使用紫色背景和菱形，详情卡片带有轻微旋转，说明文字强调透视感。除了这些与选项相关的内容，四个详情状态的上下间距、提示卡片和返回位置保持一致。

这种对照能够说明“数据变化”和“结构变化”是两回事。当前选项发生变化时，页面没有重新设计一套不同的详情布局，而是让同一套布局读取不同的名称、说明、符号、颜色和少量视觉参数。这样做可以保持体验稳定：用户在第一项中学会如何阅读详情，切换到其他项后仍然知道标题在哪里、说明在哪里、如何返回。对于一个效果选择页来说，稳定的结构比每一项都做成完全不同的页面更容易理解。

连续对照还可以观察返回后的恢复效果。无论上一项是蓝色、绿色、橙色还是紫色，返回后背景都恢复为浅色，列表卡片重新排列，顶部标题也恢复为总标题。重新进入另一项时，页面不会把上一次详情的符号或颜色带到新状态中。这个现象说明页面的视觉内容都服从当前选择，而不是依靠手动保留的旧内容。

二十、为什么静态说明也要写清楚

四条说明文字看起来很短，但它们决定了用户怎样理解每一个入口。说明不是泛泛地写“这是一个动画”，而是指出了各自的视觉方向：透明度、中心放大、右侧位移和旋转透视。用户在列表页就能预先建立预期，进入详情后又会再次看到同一说明，前后信息没有断裂。

静态说明还有一个边界作用。它告诉用户页面正在演示哪一种概念，却没有承诺页面已经提供完整的参数调节。例如“透明度从 0 到 1”描述的是淡入淡出的方向，不代表页面有透明度滑块；“位移从屏幕右侧进入”描述的是右侧滑入的概念，不代表页面有距离输入框。准确阅读这些文字，可以避免把简短的效果标签扩展成页面没有的功能。

图形符号与说明文字一起使用时，作用也不相同。符号负责快速识别，文字负责给出具体含义。列表中四个符号的大小接近、位置一致，用户可以通过颜色和形状快速区分；详情中符号放大并置于彩色区域中央，成为当前选项的视觉确认。文字则始终承担解释任务，哪怕用户不熟悉某个符号，也能从说明中理解它表达的方向。

二十一、从一次点击理解状态驱动的界面

以点击“3D 翻转”为例，用户动作本身非常简单，但它会带来一组同步变化。当前选择被设为第四项，顶部标题读取第四项名称，返回按钮因为进入详情状态而出现，列表区域不再显示，详情区域读取第四项的颜色、符号和说明，展示卡片应用轻微旋转，完成提示也随详情一起出现。这里没有一个单独的“更新标题”按钮，也没有一个单独的“显示提示”按钮，所有变化都来自同一个选择结果。

再点击返回，变化方向相反。当前选择回到未选择状态，标题恢复总标题，返回按钮消失，列表区域出现，详情区域不再显示。之后如果点击“淡入淡出”，页面从相同的未选择起点进入第一项。这样的往返过程可以帮助读者理解，状态不是某一块文本的开关，而是整个页面的当前上下文。

当页面只保留一个当前选择时，状态关系尤其清楚。四个效果不会同时变成选中状态，也不会在详情中叠加四块彩色卡片。用户每次只查看一项，返回后再选择下一项。这个约束让界面的行为更像一个明确的选择器，而不是一个同时播放多个效果的控制台。