从一个绿色页面开始认识 HarmonyOS 原生应用

开始之前：先把页面看清楚

第一次接触 HarmonyOS 原生应用时，很容易被大量概念分散注意力。Ability、页面、声明式界面、响应式状态、构建和设备运行，每一个词都值得了解，但如果一上来就试图解释全部体系，反而不容易看清最基础的事情：一个页面究竟由什么组成，用户点击以后发生了什么，屏幕上的文字又是怎样跟着状态变化的。

这篇文章只围绕一个非常小、可以直接观察的绿色页面展开。页面顶部写着“第一个原生应用”，下面是一句“从页面状态、构建到设备运行的最小实践”。中间是一张白色卡片，卡片里有“交互计数器”、一个大号数字，以及“减少”和“增加”两个按钮。再往下是“构建输出”区域，底部是一个绿色的首次构建按钮。它没有复杂导航，也没有网络请求和数据存储，正因为功能足够集中，才适合用来理解 HarmonyOS 界面开发最基本的闭环。

页面初次出现时，计数器显示零，构建输出区域显示等待状态，底部按钮写着“执行首次构建”。点击计数器的两个按钮，数字会分别减一或加一；点击底部按钮，按钮文字会变成“构建已完成”，输出区域也会换成三行过程文字。页面没有弹窗，也没有跳转，所有结果都发生在当前屏幕上。阅读时可以把它当成一个小型实验台：每个控件都能找到对应的可见结果，每个结果也都能回到一个清晰的状态变化。

初始画面给出的信息

初始画面使用浅绿色作为整页背景，颜色并不刺眼，能够把白色的计数卡片和浅绿色的输出卡片区分开。顶部标题采用深绿色粗体，字号明显大于副标题，用户打开页面后可以马上知道这是一个入门示例。副标题字号较小，颜色更柔和，它承担的是解释作用，告诉读者这个页面想演示的是页面状态、构建反馈和运行过程，而不是某个完整的业务产品。

计数器卡片的白色背景和外部浅绿色背景形成对比，圆角让卡片看起来像一个独立的操作区域。卡片内部先显示“交互计数器”，再显示大号数字，最后放置一行两个按钮。这样的顺序非常自然：先知道区域做什么，再看到当前值，最后执行操作。数字采用绿色大号粗体居中显示，点击按钮后用户的视线不需要寻找新的位置，仍然可以在卡片中央看到变化。

构建输出卡片使用更深的绿色作为文字区域背景，浅绿色文字像终端中的输出内容，但整体仍然保持在页面的绿色主题内。初始文字是两行：第一行说明当前准备状态，第二行说明正在等待第一次构建操作。这里的文字并不代表系统已经执行了编译，而是页面给出的初始反馈。理解这一点很重要，因为页面本身只是用状态和文本演示一个构建过程，并没有连接真实构建工具。

底部按钮占据整行，绿色填充与白色文字让它成为页面最明显的主要操作入口。按钮高度固定，点击区域足够清晰。初始状态下按钮表达“现在可以开始”，完成状态下按钮表达“已经完成”。不过它没有被禁用，完成之后仍然可以再次点击；再次点击不会继续追加日志，也不会改变计数器，只会把相同的完成状态重新写回页面。

页面结构为什么容易理解

整个页面采用从上到下的垂直排列。最外层先设置统一的内边距、组件之间的垂直间隔和浅绿色背景，再依次放入标题、副标题、计数卡片、输出卡片和底部按钮。这种结构对于小页面非常合适，因为用户的阅读顺序与布局顺序一致，不需要左右来回寻找，也没有隐藏在菜单里的关键操作。

标题和副标题直接位于页面顶部，宽度铺满可用区域，并保持左对齐。计数卡片和输出卡片同样使用完整宽度，内部通过内边距留出呼吸空间。底部按钮也使用完整宽度，因此每个主要区域都具有清楚的横向边界。页面没有使用滚动列表，内容量固定，所有重点都可以在一屏内看到，这也是它适合进行第一次运行观察的原因。

计数卡片内部再次使用垂直排列。区域标题和数字之间留有较小间隔，数字和按钮之间也保持节奏。按钮所在的一行采用水平排列，两个按钮平均分配宽度，中间留出间隙。减少按钮使用默认风格，增加按钮使用更鲜明的绿色和白色文字，视觉上形成主次差异，但二者仍然属于同一个计数操作组。用户不需要学习特殊手势，点击一次就能看到一个单位的变化。

输出卡片的标题和反馈文字分开处理。标题位于卡片上方，使用普通页面文字风格；反馈文字位于较深的内层区域，使用较小字号和等宽字体。等宽字体让每一行过程信息更接近日志阅读体验，也让换行位置更加稳定。页面没有为每一行日志单独做按钮或图标，说明这里的重点是观察状态文本变化，而不是操作日志条目。

三个状态分别负责什么

这个页面的变化可以归纳为三个互不相同的维度。第一个维度是构建是否完成，它只有未完成和已完成两种结果，影响底部按钮的文字。第二个维度是计数器的数值，负责保存用户点击增加或减少之后的数字。第三个维度是构建输出文本，负责显示等待信息或完成过程信息。把它们分开理解，可以避免把“构建完成”和“计数器变化”误认为同一件事。

页面一开始构建状态是未完成，数字是零，输出是等待文本。点击增加只改变数字，构建按钮的文字仍然是“执行首次构建”，输出也不变。点击减少也一样，只改变数字，不会触发构建反馈。反过来，点击构建按钮会同时改变构建状态和输出文本，但不会把计数器清零，也不会自动增加或减少数字。三个状态各自响应自己的操作，这种独立性就是页面行为稳定的基础。

在声明式 UI 中，界面不是通过手动寻找控件然后修改控件内容来完成更新的。开发者保存页面当前需要展示的数据，当数据变化时，框架根据状态重新计算依赖它的界面部分。对于这里的计数器，数字文字依赖数值状态，所以数值改变后数字自动更新。对于底部按钮，按钮标题依赖构建状态，所以构建状态改变后标题自动更新。对于输出区域，反馈文字依赖日志状态，所以日志改变后文本自动更新。

这种方式对初学者特别友好。点击事件只需要表达“把数字加一”“把数字减一”或“把页面切换到完成反馈”，不需要再写一套查找控件、设置文字、刷新布局的操作。状态是页面的事实，界面是事实的表现。事实改变，表现自然跟着改变。

计数器的实际交互

打开页面后，先点击一次“增加”。中央数字从零变成一，按钮本身的文字、颜色和布局不变，构建输出仍然保持等待状态。再次点击，数字继续增加。每次点击只增加一个单位，不存在长按加速或连续滚动，也没有最大值提示。这个行为很适合观察最简单的状态更新：一次点击对应一次加法，屏幕上的大号数字立刻反映最新值。

点击“减少”时，数字会减少一个单位。它不要求数字必须大于零，因此从零点击减少会显示负一，继续点击可以得到更小的负数。这个边界是页面真实存在的行为，文章不应把它说成具有库存下限、余额校验或防止负数的业务计数器。页面没有设置最小值判断，也没有错误提示，减少按钮始终可以被点击。

增加和减少可以交替使用。例如先增加三次，再减少一次，数字会依次经历一、二、三、二；如果再点击减少三次，数字会继续走到一、零、负一。每一步都只影响数字，其他区域保持原样。这样的操作组合能够帮助观察状态是否被错误共享：如果计数器变化导致构建按钮文字或日志一起变化，就说明状态边界设计有问题；实际页面不会出现这种联动。

计数卡片没有重置按钮，因此想回到零只能通过相反方向的点击完成。数字也没有保存功能，离开页面或重新创建页面后不能据此推断它仍然保留。页面没有连接数据库、文件或远程服务，计数器只是当前页面生命周期内的交互状态。对入门示例来说，这个范围足够清晰，也能让读者知道“状态存在”与“数据被持久化保存”是两件不同的事情。

构建按钮的实际交互

初次打开时，底部按钮显示“执行首次构建”。点击它之后，按钮标题变为“构建已完成”，输出区域出现三行反馈。第一行表示开始编译页面，第二行表示校验应用配置，第三行表示构建成功并可以安装到设备。这三行文字按照换行顺序呈现，用户可以在一次点击后看到从开始到完成的完整叙述。

但是，页面展示的过程文字不等于真实构建过程。点击按钮没有调用编译器，也没有读取构建系统的实时输出，没有把应用安装到设备，更没有返回真实的耗时、错误码或安装结果。它只是把构建状态改为完成，同时把输出状态换成预先准备好的文字。因此，阅读这个页面时应该把“构建”理解为一个界面演示：它帮助学习如何把一次操作转化成状态和反馈，而不是一个可以替代开发工具的构建面板。

完成之后再次点击底部按钮，页面仍然保持完成状态，日志仍然是相同的三行内容。因为页面没有追加日志的逻辑，所以不会出现六行、九行不断重复的结果。按钮也没有被设置为不可用状态，因此它看起来仍然可以点击，只是点击之后没有新的视觉差异。这种行为值得在文章中明确写出，因为“完成按钮”并不一定意味着按钮自动锁定，具体表现取决于页面是否实现了禁用条件。

构建操作与计数器操作相互独立。无论计数器是零、正数还是负数，点击构建按钮产生的三行文本都一样；无论构建是否完成，增加和减少都仍然可以修改数字。这种独立性让页面具备两个并列实验：一个观察数字状态，一个观察布尔状态和文本状态。用户可以先构建再计数，也可以先计数再构建，最终两个区域都呈现各自的结果。

输出文字和视觉层次

输出区域的初始文字采用浅绿色，放在深绿色背景上，强调它是需要阅读的反馈信息。等待状态中的省略号表现出“还没有开始”的语气，但它不是动态闪烁的进度动画，也不会随着时间自动变化。页面加载后，文本保持原样，直到用户点击底部按钮。这个细节能够区分静态提示和真正的异步进度。

点击后，输出文字换成三行过程信息。它们不是逐行延迟出现，而是在一次点击回调中整体替换，因此用户看到的是一次完成的文本更新。文章可以把它作为状态切换的例子来讲，但不能写成页面真实执行了三个连续阶段。如果需要真正显示分阶段进度，还要引入定时任务、异步回调或真实构建事件；当前页面没有这些能力。

输出卡片外层采用浅绿色，深色日志内层放在卡片内部，形成两级背景。标题使用深色文字，反馈使用浅色文字，用户可以迅速区分“这是哪个区域”和“区域里当前输出什么”。卡片之间存在明显的圆角和间距，使输出区域不会与计数器卡片混在一起。页面没有显示错误红色，也没有失败分支，所以不要把这块区域描述成完整的成功、失败、警告控制台。

颜色、字号与操作重点

页面主色来自绿色系。顶部标题采用较深绿色，表达稳定和清晰；计数卡片的数字采用明亮绿色，让数值成为视觉焦点；增加按钮和构建按钮使用更饱和的绿色，把可执行的主要操作突出出来。减少按钮保留默认样式，说明它是可用的辅助操作。这样的颜色安排不是复杂的主题系统，而是一个小页面里对层次和重点的直接处理。

标题字号较大并使用粗体，副标题字号较小并使用柔和颜色，两者形成主次关系。“交互计数器”与“构建输出”属于分区标题，字号中等且左对齐，便于扫描。计数数字字号最大，居中显示，用户不需要阅读很长文字就能知道当前值。底部按钮字号保持易读，白色文字在绿色背景上具有足够对比度。

间距同样参与了信息分组。页面根部有统一的内边距，标题、卡片和按钮之间有固定垂直距离；卡片内部有比外部更小的间距，表明卡片内元素属于同一组。计数器的两个按钮之间保留水平空隙，既避免挤在一起，也让它们看起来是两个独立入口。所有这些设计都不依赖图片和图标，文字、颜色、大小和间距已经完成了基本的信息表达。

从用户动作到页面结果

可以用一条简单链路理解任何一次点击。用户按下按钮，按钮的点击事件被触发；事件回调更新对应状态；页面重新读取最新状态；依赖该状态的文字呈现新值。增加和减少的链路只涉及数字，底部构建按钮的链路同时涉及完成标志和输出文字。这个链路没有网络和后台参与，所以反馈是同步且即时的。

以“增加”为例，用户看到的动作是点击左侧或右侧按钮中的一个。页面内部把数字状态加一，中央 Text 组件读取到新的数字并显示出来。卡片标题、构建输出、底部按钮都没有依赖这个数字，因此它们不需要改变。以“减少”为例，过程完全相同，只是数字减一。正因为两条链路结构相似，初学者可以很容易比较加法与减法的区别。

以“执行首次构建”为例，用户点击底部按钮后，构建状态从未完成变为完成，日志文本从等待内容变为三行完成内容。按钮标题读取完成状态后改为“构建已完成”，输出区域读取日志状态后显示新的文字。计数器区域没有使用这两个状态，所以数字维持点击构建前的值。若之前数字是负数，构建之后仍然是同一个负数。

这样的数据流也解释了为什么页面不需要互相调用控件。增加按钮不需要找到数字文字并手动设置它，构建按钮不需要直接寻找日志区域并替换内容。每个动作只改变自己负责的数据，组件根据数据完成显示。这正是声明式界面在小型页面中最容易体会的优点。

适合初学者观察的几个场景

第一个场景是零状态观察。刚打开页面，不进行任何点击，记录标题、副标题、计数器数字、输出文字和底部按钮文字。这个场景用于确认页面的默认状态是否清楚，所有控件是否能够在没有交互时正常呈现。

第二个场景是单向增加。连续点击增加按钮几次，观察数字是否一次只变化一个单位。每次点击后暂停一下，可以看到反馈是即时的，而且没有其他区域闪烁或改变。这个场景特别适合认识数字状态和视图依赖关系。

第三个场景是负数边界。从零开始连续点击减少，观察数字是否可以显示负数。页面没有弹出提醒，也没有自动回到零，这个结果说明当前实现没有加入下限校验。它不是缺陷结论，而是页面范围的明确边界。

第四个场景是先计数后构建。把数字调整到一个容易记住的值，再点击构建按钮，观察三行输出出现时数字是否保持原值。这个操作能够证明构建反馈和计数状态相互独立。

第五个场景是重复构建。构建完成后再次点击按钮，观察标题和日志是否保持不变。页面不会累加历史记录，也不会显示第二次构建时间。通过这个场景可以理解按钮可点击与操作是否产生新结果并不是同一概念。

第六个场景是操作顺序交换。先构建，再增加和减少；或者先完成多次计数，再构建。两种顺序最终都能得到对应的两个状态结果。页面没有因为顺序不同而进入不同页面，也没有因为构建完成而锁定计数器。这个场景适合观察状态之间是否存在不必要的耦合。

这个页面没有实现什么

为了准确理解页面，必须把可见演示和真实能力区分开。页面没有真正执行编译。三行输出文字是预设反馈，不是编译器逐步产生的日志。页面没有读取实时构建进度，没有显示失败原因，也没有根据设备环境返回不同结果。

页面没有真正把应用安装到设备。输出中的“可安装到设备”只是完成文字的一部分，不能据此认为安装已经发生。真实安装需要开发工具、设备连接、签名和系统权限等外部条件，当前页面没有提供这些入口。

页面没有网络服务、账号系统、数据库和文件存储。计数器不会写入本地文件，构建状态也不会在重新打开后自动恢复。不能把这个页面当作生产应用首页，也不能把它解释为完整的项目管理、编译控制或设备管理产品。

页面没有重置按钮、最大值限制、最小值限制、撤销功能和历史记录。增加或减少只作用于当前数字，用户如果想回到某个值，需要自己通过相反方向点击。页面也没有异常提示，因此负数、重复点击和重复构建都属于可见的正常行为。

页面没有真正的异步阶段。等待状态不会自动转为编译状态，只有底部按钮点击后才会一次性显示三行文本。没有加载动画、进度百分比和耗时统计。若要把它升级为真实任务面板，需要新增数据来源和异步过程，但那已经超出当前页面能够证明的范围。

为什么这样的小页面也值得认真分析

页面很小并不意味着可以随意描述。小页面里每个文字都有明确位置，每个按钮都有明确结果，状态数量也很少，反而更容易验证一段技术说明是否准确。如果把不存在的网络请求、真实构建或持久化保存写进去，读者运行页面时马上会发现内容与结果不一致。

这个页面同时展示了三种常见数据：真假状态、数字状态和文本状态。真假状态适合控制按钮标题，数字状态适合展示可连续变化的值，文本状态适合承载一段反馈。三者的变化方式不同，但都可以由同一个响应式界面模型驱动。对初学者而言，这是比抽象概念更容易观察的例子。

它还展示了一个清晰的界面反馈原则：每个主要动作都要让用户看到结果。增加和减少通过大号数字反馈，构建按钮通过按钮标题和输出文字反馈。没有反馈的点击会让用户猜测是否成功；当前页面把结果放在动作附近，降低了理解成本。即使反馈只是演示文字，也能帮助建立交互闭环。

同时，这个页面提醒开发者保持功能边界。标题可以说“第一个原生应用”，但不能因此推断它已经包含完整应用生命周期；输出可以说“构建成功”，但不能因此推断真实编译已完成。文章描述应该跟随实际状态，而不是跟随一个听起来更大的概念。对于 CSDN 读者来说，准确说明一个小页面，比夸大一个不存在的能力更有参考价值。

页面阅读顺序与学习顺序

建议第一次阅读时从顶部向下移动视线。先看标题和副标题，理解页面主题；然后看计数器卡片，确认数字和两个操作按钮；再看构建输出，理解等待反馈的位置；最后看底部按钮，确认主要操作入口。这个顺序与页面布局一致，也与用户实际使用时的认知顺序一致。

学习时可以先只操作计数器。观察增加和减少对数字的影响，暂时不要关心构建按钮。接着把数字调整到一个明显的值，再点击构建按钮，看看构建反馈是否影响数字。最后重复构建，观察完成状态是否会继续变化。这样分阶段操作，比一开始快速乱点所有按钮更容易定位每一个状态的职责。

如果要向别人演示，可以先展示初始画面，再做一次增加、一次减少，然后展示构建完成。演示中不需要假装有真实编译设备，也不需要补充页面没有提供的功能。只要把三个状态变化和两个操作区域讲清楚，读者就能理解这个页面的价值。

运行时容易产生的误解

看到“构建成功，可安装到设备”时，有些人可能会以为按钮已经调用了系统构建服务。实际上，页面只是更新了一段文字。判断真实能力时，应该观察有没有设备选择、安装进度、失败分支或外部服务调用；当前画面中这些都不存在。

看到计数器可以不断增加和减少时，也不能把它理解成真实统计。页面没有数据源，没有日期，没有统计口径，也没有保存入口。它只表达当前页面中的一个数字值，适合学习状态绑定，不适合替代业务数据统计。

看到按钮标题变化时，也不能把它理解成按钮已经被锁定。完成后按钮仍然存在并且可以点击，只是再次点击写入同样的状态。一个按钮是否禁用，需要根据实际视觉和交互判断，不能仅凭“完成”两个字推断。

看到输出文字换行时，也不能推断存在逐步执行过程。三行文字在一次交互里整体显示，没有时间间隔和进度变化。真正的阶段任务通常需要异步状态、错误处理和取消机制，当前页面没有这些内容。

面向后续扩展的边界思考

如果把这个页面继续扩展，最先需要考虑的不是增加更多装饰，而是明确每个新能力对应什么状态。例如真实构建至少需要等待、运行、成功和失败等不同结果；如果支持取消，还需要表达任务是否可以中断。如果计数器要保存，就需要明确保存时机和重新进入页面后的恢复规则。这些都是未来设计问题，不能反过来当作当前页面已有功能。

如果增加最小值和最大值，减少和增加按钮就不再是无限操作，需要在边界处改变按钮可用状态或显示提示。如果增加重置按钮，它应该只负责把数字恢复到零，不应意外清理构建输出。这样的扩展都应保持状态职责清楚，否则页面会从简单易懂变成多个操作互相影响。

如果把输出文字改成真正的日志列表，还需要区分当前输出和历史输出；如果增加进度条，还要定义进度的来源和更新频率；如果允许设备安装，还要处理连接失败和权限失败。这些问题说明从演示页面走向真实应用需要新的数据流和错误分支。当前文章只分析已经可以看到的页面，不把未来方案包装成现有结果。

一次完整的使用体验

打开页面时，用户首先看到绿色主题和清晰标题，知道这里是一个原生应用的最小界面。向下看，白色卡片给出一个立即可操作的计数器，数字零说明还没有任何计数动作。点击增加，数字迅速变成一；点击减少，数字回到零。这个过程没有页面跳转，用户可以持续留在当前操作区域。

接着点击底部的首次构建按钮，按钮文字发生变化，输出卡片出现开始编译、校验配置和构建成功三行文字。用户能够把一次点击和一组反馈对应起来。回到计数卡片继续点击，数字仍然从刚才的值继续变化，证明构建反馈没有覆盖计数状态。整个体验由几个简单区域组成，但已经形成“动作—状态—反馈”的完整闭环。

如果用户不点击任何按钮，页面也不会自动执行任务。它不会自行增加数字，不会自行把等待文字换成完成文字，也不会自行弹出提示。这种静态等待行为让默认状态容易预测。对于初学者而言，预测性比功能数量更重要，因为只有知道什么时候会变化，才能准确理解状态驱动界面。

给读者的实践建议

阅读类似页面时，可以先建立一个三列表格：用户动作、发生变化的数据、屏幕上看到的结果。对于增加动作，数据是计数值，结果是大号数字变化；对于减少动作，数据仍是计数值，结果是数字减少；对于构建动作，数据是完成标记和输出文字，结果是按钮标题和日志区域变化。只要这张表能对上画面，说明基本理解已经建立。

不要只看标题猜功能，也不要只看按钮文字猜系统能力。应当实际点击一次，再观察哪些内容变化、哪些内容不变。页面的真实边界往往藏在“不变”的部分里：构建没有影响数字，计数没有影响日志，重复构建没有追加历史，减少没有阻止负数。把这些不变关系写清楚，文章才会比泛泛而谈更有价值。

还可以用不同顺序重复操作，验证状态是否彼此独立。先调整数字后构建、先构建后调整数字，最后都应该得到相应的两个结果。若操作顺序导致了额外变化，就需要进一步查找状态之间的依赖。当前页面的状态职责比较简单，因此非常适合用来练习这种观察方法。

不同屏幕尺寸下应该观察什么

页面使用整页高度和完整宽度来安排内容，主要区域按照垂直顺序排列，因此在常见的竖屏尺寸下仍然容易阅读。观察不同尺寸时，首先看标题是否完整显示，其次看计数器卡片中的大号数字是否仍然居中，最后看底部主要按钮是否还保持整行宽度。由于页面文字数量固定，通常不会产生复杂的滚动需求，但较小的高度可能让底部区域更靠近屏幕边缘，这时应重点确认按钮文字和点击区域是否清楚。

宽度变化主要影响卡片内部的留白和按钮宽度。计数器的两个按钮按照同一行平均分配空间，屏幕变宽时按钮会变长，屏幕变窄时按钮会变短，但它们仍然保持左右并列。数字始终位于卡片中间，不会因为按钮宽度变化而移动到一侧。输出文字使用换行显示，阅读时需要确认三行反馈没有被挤压成难以辨认的连续文字。

这个页面没有横向列表、图片墙或复杂表单，因此不需要讨论多列内容如何折叠。它的适配重点是保持垂直层次、文字可读和主要按钮可操作。对初学者来说，这也是一个很好的观察角度：适配并不总是增加复杂判断，有时只要选择合适的布局方向，并为文字和按钮留下稳定空间，就能获得基本可靠的显示效果。

状态更新中的稳定性

一个好的小页面不只是能在第一次点击时变化，还应该在连续点击和交错点击时保持可预测。计数器连续增加时，数字按照单位递增；连续减少时，数字按照单位递减；交替点击时，每一步都以当前值为基础。没有额外的动画和异步任务介入，所以用户可以很容易判断下一次点击会得到什么结果。

构建按钮则采用一次切换的方式。未完成状态下，按钮提示用户执行构建；点击以后进入完成状态，标题和输出内容一起变化。再次点击不会把状态切回等待，也不会产生新的历史项。这表明页面只有从等待到完成的一条方向，没有实现撤销和重新开始。描述页面时必须把这个方向性写清楚，不能把它说成可往返的流程。

状态稳定还体现在相互隔离上。计数值变化不会修改输出文本，构建状态变化不会改变数字。即使用户先把计数器减到负数，再点击构建，完成反馈也只负责显示完成内容，不会替用户修正数字。对于真实业务来说，是否允许这样的组合取决于业务规则；对于当前页面来说，这正是它明确展示的行为。

初次运行时的排错思路

如果页面没有显示，应该先观察最外层背景是否出现，再判断内容是否被截断。若背景存在但文字不见，可能需要检查文字颜色和可用空间；若计数器卡片出现但按钮不完整，则应关注卡片内部间距和整行布局。由于页面没有网络和远程数据，排错时不需要先寻找服务器、账号或接口响应。

如果点击增加后数字不变，可以先确认点击的是增加按钮而不是构建按钮，再观察其他区域有没有变化。如果构建按钮标题变了而数字不变，说明两个状态是分开的，这属于正常现象。如果数字从零减少到负数，也不能马上判断为错误，因为当前页面没有设置下限。

如果点击构建后看不到三行文字，应先确认是否真的触发了底部按钮，再检查输出区域是否仍然显示等待文本。正常情况下，第一次点击会把等待文字整体替换为固定反馈；它不会逐行慢慢出现，也不会根据机器快慢改变。通过“操作一次、观察一次”的节奏，更容易把视觉问题和功能边界区分开。

排错时不要把页面中没有出现的能力当作前提。没有安装进度，就不应该寻找安装进度条；没有失败分支，就不应该等待红色错误提示；没有保存入口，就不应该期待重新进入后数字自动恢复。先依据屏幕上真实存在的区域缩小问题范围，通常比凭空猜测外部系统更有效。

让页面说明保持准确

描述一个入门页面时，最重要的是让每个结论都能在屏幕上找到对应证据。说数字会变化，可以通过一次增加或减少直接看到；说按钮标题会变化，可以在构建前后对比；说输出文本会变化，可以观察等待内容和三行完成内容的差异。这样的说明既具体，又不会把页面拔高成不存在的产品。

也要把静态内容和动态内容分开。标题、副标题、卡片标题和颜色在交互前后基本保持不变，它们负责组织页面；数字、底部按钮标题和输出文本会随操作变化，它们负责反馈状态。如果把所有文字都说成动态内容，读者就会误以为每一次点击都会重新生成整个页面。

同样需要区分当前状态和历史状态。页面只显示当前数字和当前一段输出，没有显示之前点击过多少次，也没有保存构建历史。用户可以通过数字结果推测增加或减少后的值，却不能从页面得到完整操作记录。把当前值、历史记录和持久化数据区分开，能够避免对小页面产生过度推断。

最后，描述视觉效果时要以实际颜色、位置和文字为依据。浅绿色背景、白色计数卡片、深色输出区域、绿色主要按钮和居中的大号数字共同构成页面的视觉秩序。没有必要额外添加不存在的图标、弹窗、导航栏或加载动画。越是简单的画面，越应该尊重它本来的信息量。

小结

这个绿色页面用很少的元素完成了一个完整的入门演示：顶部说明页面主题，中间的白色卡片负责数字交互，深绿色区域负责显示构建反馈，底部按钮负责触发一次完成状态。数字、按钮标题和输出文字都不是孤立的装饰，它们分别对应页面中的状态变化。

计数器可以增加，也可以减少到负数；它没有上下限、重置和持久化。构建按钮第一次点击后显示固定的三行完成信息，按钮标题变成“构建已完成”；它没有真实编译、安装、设备连接或动态进度。把这些行为和边界说清楚，才能准确理解页面到底做了什么。

从学习角度看，这个例子最有价值的地方是简单而完整。用户动作可以直接对应状态，状态可以直接对应界面反馈，界面结构也能在一屏内观察。掌握这种对应关系后，再去学习更复杂的列表、表单、网络和数据存储，会更容易判断哪些内容属于页面状态，哪些内容属于外部能力。