图形特效实验室：用 ArkUI 做一个可交互的视觉效果选择页

写在前面

打开这个页面，首先看到的是一块深色背景。页面顶部放着“图形特效实验室”几个字，中间是一块带圆角、带阴影的彩色矩形，矩形中央写着当前效果的名称。再往下是一行说明文字，最底部则是五个纵向排列的按钮：阴影、模糊、波纹、发光、玻璃。

这不是一个复杂的图形编辑器，也不是一个真正接入 GPU 渲染管线的特效工具。它更像一个小而完整的视觉演示页：用户选择不同按钮，页面马上切换卡片颜色、卡片标题、按钮选中状态和说明文字，让人能够直观看到“不同效果选项”在界面中的呈现方式。页面把重点放在可见反馈上，适合用来理解 ArkUI 中状态变化如何影响多个界面区域。

这个页面最值得观察的地方，不是某个复杂 API，而是一个很小的状态如何贯穿整个界面。当前选中的效果决定了中央卡片显示什么颜色和文字，也决定了哪一个按钮使用高亮色，还决定了下方说明文字如何变化。用户只点了一次按钮，却能同时看到四处内容发生一致变化。这种关系正是声明式 UI 适合表达的场景。

下面从用户能看到的界面开始，逐步拆解页面的视觉层次、五个选项的实际表现、点击后的状态变化、颜色与阴影的关系，以及这个演示页明确没有实现哪些能力。阅读时需要把“选项名称”与“真实渲染能力”分开：页面中的“模糊”“波纹”“发光”“玻璃”是用于演示选择反馈的标签和说明，并不代表页面已经调用了完整的高斯模糊、矩阵波纹、多层光晕或玻璃材质系统。

一、先从页面整体认识它

1.1 深色背景建立了实验室氛围

整个页面使用接近黑色的棕黑色作为底色。这样的背景有两个直接作用。第一，它让中间的蓝色、紫色、青绿色和橙色矩形更醒目；第二，它让白色标题和浅蓝灰色说明文字形成较高对比度，用户进入页面后可以快速分辨标题、效果预览、提示信息和操作入口。

深色并不是单纯为了“好看”。如果背景与卡片颜色相近，切换选项时颜色变化会被削弱，用户很难确认自己是否点中了按钮。当前页面把背景压暗，把卡片和按钮的颜色作为主要视觉信号，因此即便不看说明文字，也能从颜色和选中按钮判断当前状态。

页面边缘留出了统一的内边距，内容没有贴着屏幕边界排列。标题、预览区域、说明文字和按钮面板都处在同一条纵向内容轴上。对于只有一个主要任务的页面来说，这种布局让用户不需要寻找入口：标题负责说明主题，中央卡片负责展示结果，下方按钮负责改变结果。

1.2 顶部标题是稳定的上下文

“图形特效实验室”在切换效果时不会变化。它不是状态反馈的一部分，而是页面的固定上下文。固定标题很重要，因为中间卡片的名称会不断变化，如果标题也跟着变化，用户可能会误以为自己进入了不同页面。当前设计把主题固定，把效果名称放在预览卡片内部，把说明放在卡片下方，形成“页面主题—当前选项—选项解释”的三层信息结构。

标题使用较大的字号和较粗的字重，颜色偏暖白，与黑色背景形成明显对比。它没有放置额外编号，也没有显示其他页面的信息，因此这个页面单独打开时仍然完整，不需要依赖一组文章或一串示例的上下文。

1.3 中央卡片是视觉焦点

页面中央的预览区域有一个固定高度的展示空间，彩色矩形位于这个空间的中间。矩形宽度约为展示区域的四分之三，高度保持一致，圆角也保持一致。切换效果时，卡片的位置、尺寸、圆角和内部文字位置都不变，变化主要集中在颜色、阴影强弱、文字和下方说明。

这种“固定形状、改变状态”的设计很适合展示差异。如果每个选项都使用不同大小的图形，用户无法判断变化究竟来自效果还是来自尺寸。如果每次切换都重新排列页面，视觉焦点会移动。当前页面保持几何结构稳定，让用户把注意力放在当前效果名称和颜色变化上。

卡片内部的文字使用白色和较大字号，文字居中显示。无论卡片切换到哪一种名称，文字都在同一位置出现，不会因为名称长度不同而破坏布局。阴影、背景色和文字共同组成一个最小视觉样本：卡片负责承载变化，文字负责告诉用户当前选项是什么。

1.4 说明文字承担解释作用

预览卡片下面是一行居中的浅蓝灰色文字。初始状态显示“阴影：偏移与模糊半径”，点击其他按钮后会显示对应的说明，例如“模糊：高斯滤镜实时预览”“波纹：矩阵变换预览”“发光：多层光晕叠加”“玻璃：半透明背景模糊”。

这行文字不是日志，也不是系统提示。它的职责是把按钮名称和视觉区域联系起来。用户看到“波纹”两个字时，未必知道演示页准备表达什么；说明文字进一步给出一个概念提示。需要注意的是，说明中的“高斯滤镜”“矩阵变换”“多层光晕”“半透明背景模糊”属于效果描述，页面本身并没有为这些文字分别实现对应的底层渲染过程。这个边界在阅读页面时必须保持清楚。

二、五个效果选项到底改变了什么

2.1 阴影是默认选项

页面首次打开时，中央卡片显示“阴影”，卡片颜色是明亮的蓝色，说明文字是“阴影：偏移与模糊半径”，第一行按钮处于高亮状态。默认值选择阴影有一定合理性：阴影最容易通过卡片边缘观察，用户不需要先点击就能看到一个有立体感的矩形。

阴影状态与其他状态有一个实际差别：卡片的阴影半径在这个状态下使用较大的值，其他四个状态使用较小的值。阴影颜色保持为蓝色，偏移量也保持不变。因此切换到其他选项时，并不是整个阴影消失，而是阴影半径收窄。这个差异比较克制，不会让卡片从有阴影突然变成完全没有阴影，页面视觉仍然保持连续。

默认状态还同时决定了三件事：中央文字是“阴影”，说明文字是阴影描述，第一按钮是橙色高亮。三个区域互相对应，用户可以通过其中任意一个区域确认当前状态。

2.2 模糊选项主要体现颜色与文本反馈

点击“模糊”后，中央卡片会切换为紫色，卡片中央的名称变成“模糊”，说明文字变成“模糊：高斯滤镜实时预览”，第二个按钮变成橙色，第一按钮恢复深色。页面在视觉上完成了“从一个选项切换到另一个选项”的闭环。

但是，当前页面没有真正对卡片内容施加高斯模糊滤镜。卡片仍然是一个纯色圆角矩形，文字依然清晰，背景也没有出现扩散或柔化的纹理。这里的“模糊”是选项名和说明语义，是一个适合讲解状态切换的占位效果。如果把它写成已经实现了实时高斯模糊，就会超出页面实际行为。

这反而提供了一个有价值的观察点：一个演示页面可以先把交互框架搭好，再逐步替换视觉实现。当前版本已经解决了选项选择、状态保持、选中反馈和说明联动，真正的模糊渲染可以作为另一项独立工作，不应在页面已有表现之外被臆测。

2.3 波纹选项仍然使用稳定的几何结构

选择“波纹”后，卡片变成青绿色，名称改为“波纹”，说明文字显示“波纹：矩阵变换预览”，第三个按钮获得橙色背景。卡片没有发生缩放、旋转、扩散或波纹动画，预览区域也没有出现从中心向外扩散的圆环。

从用户体验角度看，第三个按钮仍然有明确反馈：名称改变、颜色改变、按钮高亮、说明文字改变。也就是说，页面能够演示“选择波纹效果”这一交互，但没有演示波纹本身的运动。描述页面时，应使用“波纹选项”“波纹标签”“波纹预览入口”这类准确说法，而不要写成“点击后生成了真实波纹”。

这个状态还说明了视觉演示的一个常见边界。按钮名称可以先表达产品概念，但视觉实现可能仍处于占位阶段。只要页面把概念状态表达清楚，用户就能理解交互结构；但文章必须把概念和已实现效果区分开。

2.4 发光选项使用橙色卡片

选择“发光”后，卡片会显示橙色，中央文字为“发光”，说明文字为“发光：多层光晕叠加”，第四个按钮高亮。橙色卡片在深色背景中对比很强，切换结果非常明显。对用户来说，这个选项的颜色变化可能比文字变化更容易感知。

当前页面的阴影属性仍然沿用同一组颜色和偏移参数，没有增加多层光晕，也没有在卡片周围绘制若干半透明层。橙色只是卡片背景色数组中与第四个选项对应的颜色。它可以作为发光概念的色彩占位，却不能代表真正的光晕叠加。

如果后续要把它升级为真实的发光演示，需要新增多个绘制层、透明度控制或专门的光晕效果；这些都不属于当前页面已经展示的内容。当前文章只讨论已经能观察到的橙色卡片、选中按钮和说明文字联动。

2.5 玻璃选项使用灰蓝色卡片

选择“玻璃”后，卡片变成灰蓝色，名称变成“玻璃”，说明文字变成“玻璃：半透明背景模糊”，第五个按钮高亮。灰蓝色与深色背景的对比相对柔和，因此这个状态看起来没有橙色那么强烈，但仍然通过颜色、文字和按钮高亮完成了状态表达。

卡片本身仍然是一个不透明的纯色区域，没有透出后方内容，也没有出现背景模糊、折射、高光边缘或半透明叠加。页面没有提供可被玻璃效果影响的复杂背景，因此“玻璃”更准确地说是一个玻璃效果选项的视觉占位。文章中明确这一点，既不会削弱页面价值，也能让读者知道当前演示的真实范围。

三、点击一个按钮时，页面发生了哪些变化

3.1 一个点击对应一个索引

五个按钮按照从一到五的顺序排列，按钮文字包含数字和名称。这个数字不是文章编号，也不是设备编号，而是帮助用户快速识别五个选项的序号。点击任意一行后，页面把当前选项记住，并用这个选项去决定卡片颜色、卡片标题、说明文字和按钮样式。

五个选项在数据上是并列的。它们没有层级关系，也没有“开启后才能使用”的依赖关系。用户可以从阴影直接点玻璃，也可以连续点击同一个按钮，还可以按任意顺序把五个选项都体验一遍。每次点击都会按照相同的规则更新界面。

3.2 中央卡片的变化

中央卡片的颜色与当前索引一一对应。阴影是蓝色，模糊是紫色，波纹是青绿色，发光是橙色，玻璃是灰蓝色。卡片尺寸、圆角、文字字号和文字颜色保持不变，所以用户不会把位置变化误认为状态变化。

卡片标题直接使用当前选项名称。点击后标题马上切换，不需要额外确认按钮，也没有弹窗。这个反馈非常直接：按钮是操作入口，卡片是结果展示。由于两者同时变化，用户可以在屏幕上部看到结果，在屏幕下部看到操作位置。

3.3 说明文字的变化

每个效果都有一条固定说明。说明文字不会根据用户点击次数累加，也不会形成历史列表。用户从一个选项切换到另一个选项时，旧说明被新的说明替换，页面始终只保留当前状态的解释。

这种替换式反馈适合当前页面，因为页面任务是查看当前效果，不是记录操作历史。如果说明不断向下追加，页面会越来越长，用户反而难以找到当前选项的解释。当前设计把状态信息保持在一行，信息密度低但足够清楚。

3.4 按钮颜色的变化

当前选中的按钮使用橙色背景，其余按钮使用深棕色背景。所有按钮的文字都保持白色，按钮宽度和高度保持一致。切换时，旧按钮从橙色回到深色，新按钮从深色变成橙色。

按钮颜色和卡片颜色并不完全相同。卡片使用五种不同颜色来区分效果，按钮只使用“高亮橙”和“未选深色”两种颜色来表示选择状态。这样的设计避免了按钮颜色过于复杂：卡片负责表达效果的色彩，按钮负责表达当前选择。

3.5 重复点击的结果

如果用户重复点击当前已经选中的按钮，页面仍然会把同一个索引和同一条说明重新写入状态。视觉上不会出现新的变化，因为当前卡片、按钮和文字本来就是这个状态。这个结果是稳定的，不会因为重复点击而产生重复卡片、重复说明或错误计数。

如果用户快速地在五个按钮之间连续点击，最终界面会停留在最后一次点击对应的选项。页面没有异步任务，也没有延迟回调，因此不存在旧请求晚于新请求返回的问题。每一次点击都是一次简单的本地状态切换。

四、页面布局为什么这样安排

4.1 纵向结构适合单一任务

页面从上到下依次放置标题、预览空间、说明文字和按钮面板。所有内容都在一列中，组件之间有固定间距。用户的阅读路径自然形成：先知道这是一个图形特效实验室，再看当前效果，再读解释，最后选择其他效果。

如果把按钮放在顶部，用户点选后还要向下寻找结果；如果把说明放到按钮面板内部，说明会被按钮列表打断。现在的结构把结果放在操作入口上方，符合“先看结果，再做选择”的直觉。

4.2 预览区域需要足够留白

预览区域的高度大于彩色矩形本身，矩形被放在区域中央。上下留白让阴影有空间展开，也避免卡片与标题、说明文字直接贴在一起。即使阴影半径较大，仍然不会碰到相邻文字。

预览区域没有增加多个装饰图形。这样做是为了保持实验对象单一：用户看到的主要对象就是一个卡片。如果同时出现圆形、线条和复杂背景，用户很难判断切换的是哪一部分效果。

4.3 按钮面板是独立的深色区域

五个按钮放在一个带圆角的深色面板中，面板内有内边距，按钮之间有间隔。面板与页面背景颜色接近但不完全相同，能够形成一个独立区域。面板顶部还有“选择渲染效果”这行标题，告诉用户下面的五行内容是操作入口。

面板宽度占满可用内容区域，按钮也占满面板内部宽度。这样每行的可点击区域比较大，用户不需要精确点到文字笔画上。按钮高度固定，五行之间的节奏一致，页面看起来整齐。

4.4 圆角在页面中的统一作用

页面使用了多处圆角：中央卡片是较大的圆角，按钮面板和按钮也有各自的圆角表现。圆角让深色背景、彩色卡片和按钮之间的边界更柔和，也让页面更接近卡片式工具面板，而不是一组生硬的矩形。

圆角并没有随五个效果变化。无论选择哪一个选项，卡片都是同样的圆角，这一点保证了视觉结构稳定。当前演示通过颜色和文字表达选择，不用改变几何形状来制造噪声。

五、从状态角度理解这个页面

5.1 当前选项是页面的核心状态

页面需要记住“用户当前选择了哪一个效果”。这个值用一个数字表示，初始为零，代表第一项阴影。点击第二项后变成一，点击第五项后变成四。数字本身不会直接展示给用户，但它会被用来取出当前名称和当前颜色。

用一个索引表示选项有一个好处：五个按钮、五种名称、五种颜色和五条说明可以通过相同位置对应起来。页面不需要为每个按钮写一套完全不同的布局。用户看到的是五个独立按钮，页面内部则把它们视为同一组选项中的不同位置。

5.2 当前说明是与选项同步的文字状态

说明文字单独保存，是因为它不是简单的名称重复。名称只有两个字，说明还包含效果概念。每次选项变化时，名称和说明会一起切换，避免出现卡片显示“发光”但说明仍然停留在“波纹”的不一致情况。

这是一个很小但重要的同步关系。状态更新时，先确定新的选项，再确定与之对应的说明，页面的多个区域就能保持一致。用户不会看到“按钮已经选中但说明还没变”的中间状态。

5.3 普通数组负责不变的选项内容

五个名称和五条说明在页面运行期间不会因为用户点击而新增、删除或修改。它们属于固定的展示内容。变化的是当前索引和当前说明的显示结果，而不是选项集合本身。

因此，页面没有提供新增效果、删除效果、重命名效果或自定义颜色入口。它是一个固定五项的选择页。把它理解成可扩展的特效编辑器，会超出当前界面提供的能力。

5.4 状态变化如何传到界面

用户点击按钮后，当前索引发生变化，当前说明也被更新。中央卡片读取新的索引，重新选择背景颜色和中央名称；五个按钮根据“自己的位置是否等于当前索引”判断是否高亮；下方文字读取新的说明。由于这些界面元素都依赖同一组状态，页面会在一次操作后保持一致。

这种方式与手动查找某个按钮、手动修改多个视图属性不同。页面描述的是“当前索引是什么时，每个区域应该显示什么”，而不是“点击第二个按钮时去修改哪些对象”。对于这种小型选择器，状态驱动的表达比较清晰。

六、视觉效果与真实渲染能力的边界

6.1 阴影是当前最接近真实效果的部分

卡片确实设置了阴影属性，阴影有固定颜色，有横向和纵向偏移，并且在默认阴影选项下使用更大的模糊半径。用户能从卡片边缘看到柔和的投影，因此“阴影”不只是文字标签，它至少有可见的阴影差异。

但它仍然是一个固定参数的阴影。页面没有提供阴影偏移滑块、颜色选择器、模糊半径输入框，也没有展示实时数值。说明文字中的“偏移与模糊半径”是概念描述，用户不能在页面中逐项调节这两个参数。

6.2 其他四项是选项反馈占位

模糊、波纹、发光和玻璃都具备名称、颜色和说明反馈，但没有分别调用独立的视觉处理逻辑。切换这些选项时，卡片的圆角、大小和阴影配置基本保持不变，主要变化是背景颜色、中央文字、说明文字和按钮高亮状态。

这种实现范围适合用来讲解交互闭环，不适合宣称“已经完成五种图形特效”。更准确的表述是：页面提供了五种效果选项的可视化选择体验，其中阴影通过卡片阴影属性体现了一定的视觉变化，其他选项当前以颜色和文字反馈表达概念。

6.3 页面没有动画时间轴

点击按钮后，颜色、文字和选中状态会直接切换。页面没有显示进度条，没有播放按钮，也没有动画开始、暂停和结束状态。波纹没有扩散过程，发光没有呼吸过程，玻璃没有实时模糊过程。

因此，用户如果连续点击按钮，看到的是离散状态切换，而不是一段连续的特效动画。文章和页面说明都应该使用“切换”“预览”“展示”这些词，不使用“播放完成”“动画帧”“实时渲染帧”等超出实际的说法。

6.4 页面没有真实图片或视频作为被处理对象

中央对象是一个纯色矩形，不是一张图片，也不是一段视频。页面没有上传入口、相册选择入口、素材列表或导出按钮。它展示的是效果选择本身，而不是对外部媒体进行处理。

这让页面的行为更容易复现：同一个初始状态下，点击同一个按钮总能得到同样的颜色、名称和说明。没有外部资源就没有加载失败、素材格式不支持或处理耗时等状态，当前页面也不需要展示这些内容。

七、按五种路径体验页面

7.1 路径一：打开页面观察默认状态

首次进入时，先确认标题是否显示，中央矩形是否位于预览区中间，卡片名称是否为“阴影”，说明文字是否为“阴影：偏移与模糊半径”，第一项按钮是否为橙色。此时其他四个按钮应该保持深色。

这一步不需要点击任何控件。它验证的是页面初始状态是否完整：主题、对象、说明和默认选中项都应该同时出现。如果只有卡片而没有说明，用户无法知道默认状态；如果按钮高亮与卡片名称不一致，状态关系就已经出现问题。

7.2 路径二：从阴影切换到模糊

点击第二行“模糊”。观察中央卡片是否从蓝色变成紫色，中央文字是否变为“模糊”，说明是否切换到高斯滤镜描述，第二行按钮是否高亮，第一行是否恢复深色。

这个过程可以帮助理解页面的四处同步：卡片颜色、卡片标题、说明文字和按钮颜色应该同时指向模糊状态。如果只发生其中一两处变化，用户会感觉页面没有形成完整反馈。

7.3 路径三：连续浏览波纹、发光和玻璃

接着依次点击第三、第四、第五行按钮。波纹会显示青绿色卡片和波纹说明，发光会显示橙色卡片和发光说明，玻璃会显示灰蓝色卡片和玻璃说明。每次只保留一个按钮高亮。

连续浏览的价值在于观察选中状态是否会残留。如果点击发光后第三个和第四个按钮同时高亮，说明选中判断没有跟随当前索引；如果点击玻璃后卡片仍显示发光，说明卡片内容与选择状态脱节。当前页面的设计目标是始终只有一个当前效果。

7.4 路径四：从第五项回到第一项

从玻璃直接点击第一项阴影，页面应恢复蓝色卡片、阴影名称、阴影说明和第一项橙色高亮。这个回到初始状态的过程不需要重新打开页面，也没有单独的重置按钮。

它说明五项之间是平等的，页面没有把初始项锁定为只能在首次加载时出现。任何时候用户都可以回到阴影，页面会重新按照阴影对应的规则展示状态。

7.5 路径五：重复点击同一个选项

连续点击当前已经高亮的按钮，页面内容不会额外增加，也不会出现第二条说明。它保持当前状态即可。对于这种选择页来说，重复操作不产生副作用是合理结果，因为页面没有计数、历史或提交动作。

八、颜色设计要看整体关系

8.1 五种卡片颜色形成可辨识序列

蓝色、紫色、青绿色、橙色和灰蓝色分别对应五个选项。这些颜色的色相差异比较大，用户即便只看到中央卡片，也能大概判断状态是否发生变化。尤其是蓝色到紫色、紫色到青绿色的变化，能够清楚地提示选择已经改变。

颜色不是效果的完整证明。橙色不等于发光，灰蓝色也不等于玻璃。颜色在这里承担的是状态区分，而不是物理材质模拟。理解这一点，可以避免把视觉占位误认为底层效果。

8.2 橙色被专门用于选中反馈

按钮选中态统一使用橙色，恰好与发光状态的卡片颜色相近，但两者职责不同。按钮橙色表示“这一行是当前选择”，卡片橙色表示“当前效果对应的预览色”。当选择阴影或玻璃时，按钮仍然是橙色，卡片则使用自己的颜色。

这种统一的选中色让用户学会一次就能理解五个按钮。用户不必记住每个效果的按钮颜色，只需知道橙色代表当前选中。

8.3 深色未选态降低视觉干扰

未选按钮使用深色背景，和面板及页面背景接近。五个按钮中只有一个高亮，其他四个被压低，视觉焦点自然落在当前项上。如果所有按钮都使用强烈颜色，用户就会看到一组彩色列表，很难判断谁是当前项。

8.4 文字颜色保持稳定

标题、卡片文字和按钮文字都保持较高亮度，说明文字稍微降低亮度。这样一来，主要操作和当前结果最醒目，解释性内容退后一级。文字颜色不会随着效果变化，阅读习惯不会被打断。

九、这个页面适合用来理解哪些 ArkUI 思路

9.1 状态应该对应用户能感知的事实

当前选项是用户能直接感知的事实，所以它需要参与界面刷新。说明文字同样会变化，也需要作为状态的一部分。相反，五个固定名称和固定说明集合不会因为点击而改变，它们只是页面的静态选项内容。

这类划分并不是为了追求复杂的状态管理，而是为了让变化范围清楚。一个值负责“选中了谁”，一个值负责“当前说明是什么”，视图根据它们生成结果。用户操作和页面变化之间有明确对应关系。

9.2 重复选项结构可以保持一致

五个按钮的宽度、高度、文字颜色、点击行为和未选状态一致，只有文字和当前选中判断不同。这样的重复结构适合用统一的数据驱动出来。页面不需要为五个按钮设计五种布局，也不需要为每个按钮编写完全不同的交互逻辑。

从用户角度看，这种一致性表现为五行按钮像一个整体；从维护角度看，它减少了五份近似但容易出现差异的配置。

9.3 视图只描述当前状态的样子

卡片应该是什么颜色、标题应该是什么、按钮是否高亮，都由当前选择决定。点击事件只改变选择和说明，页面的其余部分根据新状态自动呈现。这样的写法适合小型演示页，因为它让界面行为和状态关系一眼可见。

这里不需要讨论复杂的组件拆分、后台数据和跨页面状态。页面只有一个选择任务，保持结构简单就是合理做法。过早加入无关的抽象，反而会让读者难以理解五个按钮如何影响一个卡片。

十、实际边界与不能从页面得出的结论

第一，这个页面不能证明已经接入了真正的图形特效引擎。能看到颜色和阴影变化，只能说明当前卡片样式发生了改变。

第二，这个页面不能证明“模糊”已经使用高斯算法。说明文字中出现高斯滤镜描述，不等于页面已经对像素进行高斯处理。

第三，这个页面不能证明“波纹”存在矩阵动画。点击波纹只会切换到对应状态，页面没有显示扩散轨迹或连续运动。

第四，这个页面不能证明“发光”使用多层光晕叠加。当前可见的改变主要是橙色卡片、标题、说明和按钮。

第五，这个页面不能证明“玻璃”已经实现半透明背景模糊。卡片没有读取或模糊背后的真实内容。

第六，这个页面没有保存用户选择。重新进入页面后会回到阴影默认状态，页面也没有设置保存、历史记录和恢复上次选择的入口。

第七，这个页面没有外部数据和网络请求。五个效果名称、颜色和说明都属于页面内置内容，切换不依赖服务器。

把这些边界写清楚，文章会更可信。一个小型 UI 演示的价值在于把交互关系表达清楚，而不是把尚未存在的能力写得很宏大。

十一、适合实际体验的检查清单

打开页面后，可以按照下面的顺序观察：

1. 标题是否位于页面顶部，颜色是否与深色背景形成对比。
2. 中央矩形是否位于预览区域中间，圆角是否完整。
3. 默认名称是否为“阴影”，说明是否与阴影对应。
4. 第一项按钮是否高亮，其余按钮是否保持深色。
5. 点击“模糊”后，卡片是否变为紫色，说明是否同步变化。
6. 点击“波纹”后，青绿色卡片、波纹名称和第三项高亮是否同时出现。
7. 点击“发光”后，橙色卡片与第四项高亮是否能够区分。
8. 点击“玻璃”后，灰蓝色卡片与玻璃说明是否同步出现。
9. 在五个按钮之间来回点击时，是否始终只有一个按钮处于选中态。
10. 从第五项回到第一项时，默认阴影状态是否能够恢复。
11. 重复点击同一个按钮时，页面是否保持稳定，不额外添加内容。
12. 说明文字是否居中显示，是否因为切换而出现错位或残留。

这些检查都围绕页面实际提供的内容，没有假设上传素材、真实滤镜、动画时间线或导出结果。对一个固定五项的视觉演示来说，这样的检查已经覆盖了首屏、选择、反馈、回退和重复操作等主要路径。

十二、如果后续要继续完善，应先保持现有交互不变

如果要把这个页面发展成真正的图形效果实验室，第一步不是直接增加很多按钮，而是保持现有五项选择关系不变，再为每个选项补充真实视觉实现。例如，模糊选项可以增加一个可观察的模糊对象，波纹选项可以增加时间变化，发光选项可以增加光晕层，玻璃选项可以准备可被透视和模糊的背景内容。

但这些增强会带来新的状态：播放中、播放结束、参数数值、强度、半径、透明度、动画进度等。新增状态后，页面还要考虑用户切换选项时旧动画是否停止，参数是否重置，说明是否仍然对应当前效果，按钮是否还保持单选关系。当前页面之所以易于理解，正是因为它没有提前加入这些复杂状态。

如果增加参数控制，也应该让参数只影响当前效果，避免用户修改阴影半径后切换到玻璃却出现无法解释的残留。若增加重置入口，重置应该恢复蓝色阴影卡片、阴影说明和第一项高亮，而不是只清空文字。若增加保存功能，则需要明确保存的是当前选择还是每种效果的参数。这些都是后续产品设计问题，当前页面没有给出答案。

十三、从读者视角看这个小页面

对于刚接触 ArkUI 的开发者，这个页面的价值在于它足够小，却包含了一个完整的交互闭环。用户有五个选择，页面有一个当前状态，点击会改变中央展示和说明，按钮会反映当前选择。读者可以先不关心复杂绘图，直接观察状态如何映射到 UI。

对于做界面设计的人，这个页面展示了如何用固定预览对象表达多种概念状态。卡片结构稳定，颜色负责区分，文字负责命名，说明负责补充，按钮负责操作。四种视觉信号互相配合，但没有让每个区域承担过多信息。

对于调试页面的人，这个页面也容易定位问题。若卡片颜色正确但按钮错了，应检查当前选择与选中判断的关系；若名称正确但说明错误，应检查名称与说明的位置对应；若所有按钮都高亮，应检查选中条件；若阴影状态和其他状态阴影强度没有差异，应检查阴影半径的条件。因为页面状态少，现象和原因之间的距离较短。

结语

这个“图形特效实验室”页面用一个彩色圆角卡片和五个效果按钮，完成了一个清晰的视觉选择演示。页面初始显示阴影状态，用户可以在阴影、模糊、波纹、发光、玻璃之间切换；每次选择都会同步更新卡片颜色、中央名称、说明文字和按钮高亮。页面的核心不是复杂图形算法，而是让一个选择状态在多个视觉区域中保持一致。

真实实现范围也很明确：阴影具有可观察的阴影样式差异，其余效果主要通过颜色、名称和说明进行概念展示；页面没有真实高斯模糊、矩阵波纹、多层光晕、玻璃材质、动画时间轴、外部素材处理或数据持久化。把这些边界说明白，读者就能准确理解页面当前能做什么、不能从页面推断出什么。

如果把它当成一个学习案例，最值得带走的不是某个夸张的“特效能力”，而是三个朴素的做法：先确定用户能选择的内容，再让当前选项成为唯一事实来源，最后让卡片、文字和按钮都围绕这个事实刷新。对于小型 ArkUI 页面，这样的结构已经足够清楚、稳定，也足够容易继续扩展。