企业官网建设流程全解析

设备发现与连接页面的状态设计：从空状态到单项连接反馈

开场：先把页面当成一个完整的交互

设备发现类页面很容易被写成一个“点击按钮，然后列出设备”的简单例子，但真正决定体验的，往往是按钮文字、空状态、列表出现的时机，以及用户选中某个设备之后页面如何告诉他操作已经发生。一个页面如果只展示几行设备名称，却没有清晰的开始、停止和连接反馈，用户很难判断自己到底处在哪个阶段。

这个页面把场景压缩得很小：首次进入时，不展示任何设备，只展示标题、说明文字、开始发现按钮和一个空状态提示；点击开始发现后，页面显示四个固定的设备名称，每一行都有一个连接按钮；点击某一行的连接按钮之后，这一行的按钮文字变成“已连接”。再次点击顶部按钮，发现列表被收起，按钮文字回到“开始发现附近设备”；再次打开列表时，页面仍然保留之前选择过的设备状态。

这样的设计不是真实设备发现服务，而是一个非常明确的交互演示。页面没有从系统读取附近设备，也没有进行网络连接、身份验证、设备配对或软总线通信。它用固定数据模拟“发现结果”，用一个整数位置记录当前被选择的设备。正因为范围明确，这个页面很适合用来理解状态如何控制界面、条件内容如何出现、列表中的单项按钮如何显示不同文字，以及为什么一个看起来很小的状态变量会影响多个位置。

上图展示的是未开始发现时的首屏。页面最明显的元素是蓝色标题区域，标题文字为“发现附近设备”。标题下方是说明文字，提示用户点击扫描以建立分布式连接。再下面是整行的蓝色按钮，按钮文字是“开始发现附近设备”。由于页面尚未进入发现状态，设备列表没有出现，取而代之的是居中的“扫描范围内暂无展示设备”提示。

一、首屏为什么要有明确的空状态

进入页面时没有设备行，并不意味着页面没有内容。相反，空状态承担了三个作用。

第一，它告诉用户页面已经加载完成。标题、说明、主按钮和空状态都能正常显示，用户不会把“暂时没有设备”误解为页面卡住。第二，它给出了下一步动作。按钮上的“开始发现附近设备”比一个只有图标的按钮更直接，初次使用者能够立刻知道要做什么。第三，它和扫描后的列表状态形成对照。用户点击按钮后看到设备行，能够清楚地感知页面从“等待开始”进入了“正在展示结果”的阶段。

页面背景使用浅蓝灰色，内容卡片使用白色，顶部标题区域使用较深的蓝色。这样的层次并不依赖复杂装饰：蓝色负责表达主要动作，白色负责承载内容，浅色背景负责把所有内容托住。空状态卡片有圆角和较大的内边距，文字居中显示，使它在设备列表不存在时仍然占据一个清楚的视觉区域。

空状态文字是“扫描范围内暂无展示设备”，这里的“展示设备”很重要。它没有声称系统已经完成真实扫描，也没有给出设备数量或连接失败原因。对于这个页面来说，首屏只是没有打开模拟列表，因此这句提示恰好说明了当前可见结果。它没有制造超出页面能力的承诺。

如果把空状态直接去掉，首次进入页面时只剩标题、说明和按钮，内容区域会显得空白，用户也难以理解为什么下面没有设备。反过来，如果在没有开始发现之前就把四个设备名称显示出来，按钮的作用又会变得含糊：用户不知道这些设备是预先加载的，还是点击按钮后才出现的。当前页面把列表的出现和按钮状态绑定起来，因此阶段关系很清楚。

二、顶部标题区域承担什么作用

顶部标题文字为“发现附近设备”，字号较大，使用粗体和白色文字，放在蓝色圆角区域内。这个区域不是一个可以点击的控件，也不承载设备数量或连接状态，它的作用是建立页面主题，让用户一眼知道当前页面在做什么。

标题区域横向占满内容宽度，周围有页面内边距，四角保持圆润。它与下面的说明和按钮之间留出固定间隔，所以页面不会把标题、说明和操作挤成一整块。对一个只有一个主要任务的页面来说，这种层次比增加多个导航标签更合适：用户不需要先选择模块，打开页面就能直接执行发现操作。

标题没有随扫描状态切换。当用户点击开始发现时，标题仍然是“发现附近设备”；点击停止发现后，标题也不变。变化集中在说明文字、主按钮和下方内容区域，标题保持稳定可以帮助用户在状态切换时保持方向感。如果标题也随着每次点击改变，页面可能会显得过于嘈杂，并不能带来更多信息。

三、说明文字如何表达两个页面阶段

标题下方的说明文字有两种显示内容。未开始发现时，它是“点击扫描，建立分布式连接”；开始发现后，它是“正在通过软总线扫描…”。两句话分别对应关闭和打开状态。

第一句话的语气是引导。用户还没有进行操作，页面需要告诉他下一步应该点击按钮。第二句话的语气是进行中提示，它让用户知道页面已经进入扫描阶段。这里的省略号带来一种过程感，但页面本身并没有计时器、进度条或异步回调，所以不能把这句话理解为真实扫描任务正在后台执行。它只是跟随状态变化的展示文本。

这两种文案的切换是整个页面反馈闭环的第一环。用户点击开始按钮后，不只看到设备列表出现，还能看到说明文字从行动提示变成进行中提示。点击停止后，说明文字又回到行动提示，告诉用户现在可以重新开始发现。一个开关状态同时影响说明文字和按钮文字，页面因此形成一致的上下文。

这里没有“扫描成功”“扫描失败”“扫描完成”等第三种结果。列表显示也不是一次真实请求的返回结果，而是状态打开后显示固定内容。因此文章和页面都不应补出加载失败、权限拒绝、超时重试等流程。那些流程在真实产品中可能需要，但当前页面没有对应的显示分支，不能把它们说成已经存在。

四、开始发现按钮的两种身份

主按钮在首屏显示“开始发现附近设备”。点击后，按钮文字立即变成“停止发现”，同时四个设备行出现。此时按钮不再承担开始任务的含义，而是提供关闭当前列表状态的入口。再次点击，按钮文字回到“开始发现附近设备”，四个设备行隐藏，空状态重新显示。

按钮本身的宽度为整行，颜色与标题区域保持同一蓝色系。它是页面最主要的操作入口，因此没有和连接按钮使用同样的视觉重量。连接按钮只出现在设备列表内部，而主按钮在两个页面阶段都存在，始终位于说明文字下方，用户不需要滚动寻找。

从交互角度看，按钮做的是一次布尔切换。初始值为关闭，第一次点击变成开启，第二次点击又变成关闭。这里的“停止发现”并不代表取消了已经建立的连接，因为页面没有真实连接会话；它只代表不再展示设备列表。把这个边界讲清楚很重要，否则读者容易把按钮文字直接等同于系统级扫描控制。

按钮文字和设备区域保持同步。如果按钮写着“开始发现附近设备”，下方就不展示四个设备行；如果按钮写着“停止发现”，下方就展示四个设备行。两处变化来源于同一个状态，避免了按钮文字已经切换但列表仍然停留在旧状态的矛盾。

五、四个设备名称为什么是固定的

列表中一共展示四个名称：华为智慧屏 V65、MatePad Pro、MateBook X Pro、Sound X。它们分别代表大屏、平板、笔记本和音箱四种设备形态，名称本身让用户能够快速区分每一行的对象。

这些名称是页面内置的固定展示数据。它们不会因为点击开始按钮而从外部增加或减少，不会根据周围环境变化，也没有设备地址、唯一标识、信号强度、电量和在线状态等字段。页面只需要把名称按照原有顺序逐行展示，因而每行的主体是一个文本和一个按钮。

固定列表带来一个直观的好处：每次打开发现状态，用户都能看到同样的四行，操作结果容易复现。它也带来明确的边界：这个页面无法证明附近是否真的存在这些设备，无法告诉用户设备是否在线，更无法完成真实的发现和连接。文章讨论时只能围绕“页面展示了四个预设名称”展开，而不能写成设备搜索结果。

四行的顺序也有意义。第一行是智慧屏，第二行是平板，第三行是笔记本，第四行是音箱。列表顺序在页面打开和关闭之间不会改变。用户如果先点击第三行，再关闭列表后重新打开，仍然可以根据名称找到同一个行位置。由于页面记录的是位置而不是设备对象，名称顺序就是识别当前选中项的重要依据。

六、列表行的布局关系

每个设备行使用横向布局：左侧是设备名称，右侧是连接按钮。名称占据剩余空间，按钮保持自己的宽度，这样长名称不会把按钮推到屏幕之外。每行有内边距，白色背景和圆角让它成为独立卡片；四个卡片之间由内容区域的间距隔开，阅读顺序从上到下非常明确。

这种行结构适合当前页面，因为每一行都只有一个主信息和一个动作。名称负责回答“这是谁”，按钮负责回答“现在能做什么”。如果把按钮放在名称下一行，四个设备会占用更多高度，用户在手机屏幕上需要移动更大的视线范围。当前横向布局把识别和操作放在同一条视觉线上，特别适合设备选择场景。

名称字号比按钮文字更大，且名称所在区域可以扩展。连接按钮字号较小，但有独立边界，用户能够准确点击。按钮文字在普通状态是“连接”，选中状态是“已连接”，没有额外图标，也没有复杂的禁用态。这样的设计把状态差异直接放在文字上，适合一个需要展示单项选择结果的简洁页面。

页面没有给每行设置第二行副标题。因此用户不会看到设备类型、地址或连接质量。阅读时不要根据设备名称推断页面提供了更多信息；能确定的只有名称和按钮文案。文章也不应该把每一行描述成包含完整设备卡片信息，因为页面可见内容并没有那些字段。

七、连接按钮的反馈逻辑

默认情况下，四个设备行的按钮都显示“连接”。点击其中任意一个按钮后，页面保存这一行的位置，只有对应行的按钮显示“已连接”，其他行仍显示“连接”。例如点击 MatePad Pro 后，第二行发生变化；点击 Sound X 后，第四行变成“已连接”，第二行会回到“连接”。

这是一个“当前选中位置”的模型，而不是多个连接集合。页面只保存一个位置，因此不会同时让两行显示“已连接”。用户可以反复点击不同设备，观察已连接文字随最后一次选择移动。这种反馈很适合说明单选状态：同一时刻只有一个位置被标记为当前选择。

连接按钮的反馈只影响文字，不会改变设备名称、行顺序、背景色或标题。页面没有弹窗、进度圈、连接成功提示和断开按钮。点击后如果看到按钮由“连接”变成“已连接”，这就是页面给出的全部可见结果。不能由这句文字推导出真实连接已经建立，更不能推导出设备之间可以传输数据。

如果用户连续点击同一行，结果不会出现新的层级变化，按钮仍然是“已连接”。如果用户先点击第一行，再点击第四行，最后状态以第四行为准。这个行为让页面很容易验证：只需记住最后一次点击的设备名称，检查它是否是唯一显示“已连接”的一行即可。

八、关闭列表后连接状态会怎样

点击主按钮停止发现后，设备行被隐藏，页面重新显示空状态。此时用户暂时看不到“已连接”文字，但这不代表选择位置已经被清除。再次点击开始发现，四行重新出现，之前被选择的位置仍可能显示“已连接”。

这个细节说明扫描状态和连接选择是两个相互独立的状态。扫描状态控制列表是否显示；连接状态控制哪一行的按钮文案。停止发现只切换前者，并没有同步重置后者。因此关闭列表更像“收起当前发现结果”，而不是“清除所有选择”。

从用户体验角度看，这种保留会让前后操作产生连续性。用户展开列表、选择一台设备、暂时收起列表，再次展开后仍能看到之前的选择，不必重新点击。另一方面，如果产品需求是每次开始都要得到全新结果，就需要在停止时明确清理选择，并且给用户可见提示；当前页面没有这个动作，所以不能把它描述成重新扫描会自动重置连接状态。

验证这个行为时，可以先打开列表，点击 MateBook X Pro 的连接按钮，再点击“停止发现”，观察设备行消失；随后重新点击“开始发现附近设备”，观察第三行按钮是否继续显示“已连接”。这条路径比只点击一次按钮更能看出两个状态之间的关系。

九、把页面的几条状态路径串起来

页面启动时处于“未发现、无可见列表”的路径。用户看到标题、行动说明、开始按钮和空状态。此时四个设备名称虽然属于页面固定数据，但不会展示出来，用户的第一步是点击主按钮。

点击开始按钮后，页面进入“正在发现、列表可见”的路径。说明文字改为“正在通过软总线扫描…”，主按钮改为“停止发现”，四个设备行依次出现，每行按钮都是“连接”。这里没有网络等待，因此列表变化是即时的视觉状态切换。

点击任意设备的连接按钮后，页面进入“列表可见、存在当前选择”的路径。主按钮和说明文字保持不变，只有被点击行的按钮文案发生变化。用户继续点击其他行时，当前选择位置移动，页面仍然停留在发现列表阶段。

点击停止按钮后，页面进入“列表隐藏、空状态可见”的路径。说明文字和主按钮恢复初始阶段的内容，之前的连接位置是否保留要等重新打开列表后才能观察。整个过程中，页面没有跳转，没有多页导航，也没有额外弹窗，所有反馈都在同一屏完成。

这张表只描述可见页面，不代表底层设备状态。尤其是“开始发现”这句话，应该理解为打开模拟发现列表；“已连接”应该理解为当前行选中反馈。这样阅读文章时，页面行为和实际能力就不会混在一起。

十、为什么用两个状态就能完成这个界面

页面的状态很少，但职责分明。一个布尔值负责表示列表是否展开，另一个整数负责表示哪一行处于选择状态。前者只回答“显示不显示”，后者只回答“哪一行显示已连接”。名称数组负责提供四行文本，它本身不需要随着点击改变。

当列表状态发生变化时，页面只需要重新判断一次条件：打开就创建四个行，关闭就创建空状态。每行按钮的文字再拿当前行位置和选择位置比较，如果两个位置相同，就显示“已连接”，否则显示“连接”。这种比较关系让所有行都能从同一个选择结果得到一致的显示。

初始连接位置使用一个不会对应任何行的负数，所以首次打开时四个按钮都会显示“连接”。如果初始位置直接设为零，第一行在用户没有操作前就会被误标为已连接，页面语义会不准确。使用负数表示“尚未选择”是一个与当前四行范围自然匹配的空值。

页面没有为每个设备分别维护一个布尔数组，这也是合理的，因为需求是单项连接反馈。若每行都有独立开关，用户可能同时看到多台设备已连接，界面就从单选变成多选；当前页面的单个位置更准确地表达“最后一次选择”。

十一、列表展示与顺序稳定性

当发现状态打开时，页面按照固定名称顺序创建四个行。四个行的数量不会变化，名称也不会被输入框修改，因此列表结构非常稳定。稳定列表让按钮和名称之间的对应关系始终清楚：第一行永远对应华为智慧屏 V65，第二行永远对应 MatePad Pro，第三行永远对应 MateBook X Pro，第四行永远对应 Sound X。

页面循环展示相同结构的设备行，避免为四个设备分别写一套几乎一样的布局。循环只负责把名称放进文本区域，把当前位置用于判断按钮文字，并把点击后的行位置记录为当前选择。它没有进行排序、过滤、分页和异步刷新，所以文章不需要引入复杂列表管理话题。

这种结构也让四行的视觉节奏保持一致。每行都有相同的内边距、白色背景和圆角，名称字号一致，按钮字号一致。用户可以把注意力放在名称和当前按钮文字上，而不必适应每个设备不同的卡片样式。对于演示“发现与连接”流程的页面来说，一致性比装饰性更重要。

十二、颜色与可见层级

蓝色标题区域和蓝色主按钮构成页面的视觉主轴。标题负责建立主题，主按钮负责触发阶段变化，两者使用相近颜色，用户很容易把它们理解为同一功能区域。浅蓝灰背景将内容和屏幕边缘区分开，白色列表卡片则从背景中凸显出来。

说明文字使用深灰色，字号明显小于标题和设备名称。它提供操作上下文，但不应该抢过主按钮的注意力。设备名称使用较大的深色文字，确保用户能识别具体对象；连接按钮使用较小文字，强调它是行内动作而不是页面主任务。

空状态卡片与设备行都使用白色背景和圆角，但它们的作用不同。空状态是“当前没有展示列表”的说明，设备行是“已经展开固定结果”的内容。相同的卡片语言让页面保持统一，文字和布局位置则区分了两种状态。

这里没有通过颜色改变来表达“已连接”，页面只改变按钮文字。因此阅读时不要期待某一行会变成绿色或出现勾选图标；当前实现给出的视觉证据就是文字变化。若截图中看到“已连接”，能确认的是按钮文案更新，不能确认额外的连接指示。

十三、几条可以复现的操作路径

最基本的操作顺序是：进入页面，点击开始发现，查看四行设备，再点击一个连接按钮。这个顺序能够覆盖页面的主要功能。

第二条路径是：进入页面，点击开始发现，点击一个设备，点击停止发现，再次点击开始发现。它能验证列表隐藏和重新出现，也能观察当前选择是否保留。

第三条路径是：开始发现后，连续点击多个设备。它能验证页面只保留最后一个位置的连接反馈。先点击华为智慧屏 V65，再点击 Sound X，最终应该只有 Sound X 的按钮显示“已连接”。

第四条路径是：开始发现后直接点击停止发现，不连接任何设备。页面应回到空状态，再次打开时四个按钮仍然都是“连接”。这条路径验证了没有选择时的初始反馈。

第五条路径是：开始发现后点击同一个设备多次。按钮第一次从“连接”变成“已连接”，后续点击不会增加新的计数、弹窗或状态文字。页面只有单项文字状态，并没有连接次数统计。

这些路径都不涉及真实设备权限、蓝牙开关、网络状态或连接失败。用户看到的结果，完全由页面自身的开关和选择反馈产生。文章如果把“连接”写成建立了设备会话，就会超出可见结果；更准确的表达是“点击后将该行标记为已连接”。

十四、页面边界：哪些事情没有发生

首先，没有真实的附近设备搜索。四个名称在页面内部预先存在，点击按钮只是控制它们是否显示。页面不会因为周围没有设备而改变四个名称，也不会因为附近新增设备而增加第五行。

其次，没有真实的软总线调用。说明文字里出现“软总线扫描”，只是打开列表时显示的阶段提示；没有连接回调、错误码、设备标识或异步结果。不能把文字当成接口执行证据。

再次，没有真实连接生命周期。按钮从“连接”变成“已连接”是选中反馈，不包含连接建立、握手、认证、断开、重连和连接超时。停止发现也不会弹出断开提示，因为页面没有保存真实连接对象。

此外，没有权限申请和系统设置引导。页面没有显示权限弹窗，也没有“请打开蓝牙”“请开启附近设备权限”这样的分支。文章不应添加这些操作步骤，以免读者按照文章操作后找不到对应控件。

最后，没有数据传输或设备控制。选中智慧屏、平板、笔记本或音箱后，页面不会发送指令，也不会改变设备内容。它的可见结果止于列表行按钮文案变化。

十五、从页面现象理解条件内容

页面最直观的技术现象是条件内容。扫描状态关闭时，页面显示空状态文本；扫描状态打开时，页面显示四行设备。两者不会同时存在。用户每次点击主按钮，都能看到内容区域在这两个分支之间切换。

条件内容的价值在于让页面结构与状态含义对应起来。页面并不是先把所有元素画出来，再逐个设置隐藏属性，而是根据当前阶段决定内容区域应该呈现哪一组内容。对于这个例子，空状态和设备列表是互斥的，所以页面在任意时刻都不会同时给出两种互相冲突的结果。

如果两个区域都可见，用户会同时看到“暂无展示设备”和四个设备名称，页面语义会发生冲突。当前页面每次只保留一个结果区域，反馈更加明确。它也让开发者在观察界面时容易建立因果关系：列表出现就说明发现开关打开，空状态出现就说明发现开关关闭。

十六、从页面现象理解单项选择

四个设备各自都有按钮，但页面只需要记录一个当前位置。按钮文字的判断规则很简单：行位置等于当前选择位置时显示“已连接”，否则显示“连接”。当用户点击另一行时，当前选择位置被替换，所有行按照新位置重新判断。

这种单项选择模型适合“当前准备连接哪一台”的场景。它不适合同时连接多台设备，也不适合展示每台设备独立的在线状态。若页面未来需要多选，就必须改变数据模型和文案，例如为每台设备记录独立选择状态；那已经不是当前页面的行为，不能在文章中提前当作现有功能。

单项选择还有一个易于理解的视觉特点：页面始终只有一个“已连接”标签，或者一个也没有。用户不需要比较复杂的状态组合，就能判断当前选择。对于初学者来说，这个例子把“列表位置”和“当前选择”之间的关系展示得很清楚。

十七、为什么没有单独的连接成功提示

在更复杂的产品里，点击连接之后通常会有加载、成功和失败三种结果。但当前页面没有异步连接过程，也没有单独的状态文字区域。它选择把结果直接写在按钮上：普通按钮显示“连接”，当前项显示“已连接”。这种反馈足够覆盖本页面的演示目标，避免增加无法由页面数据支持的流程。

如果连接按钮点击后弹出“连接成功”，文章就需要解释弹窗何时消失、失败如何处理、用户如何重试；这些问题在当前页面不存在。直接更新按钮文字反而使操作结果一眼可见，页面结构也保持紧凑。读者可以把它看作一个单选反馈示例，而不是完整设备连接产品。

十八、如何阅读两张页面图片

初始图片重点观察四点：标题是否显示，说明文字是否是行动提示，主按钮是否写着开始发现，空状态是否位于内容区域。它展示的是页面首次进入的稳定结构。

操作后图片重点观察列表区域：四个设备名称是否按顺序出现，主按钮是否变成停止发现，说明文字是否变成进行中提示，连接按钮是否都处于普通状态或有一个处于已连接状态。它展示的是状态打开后的可见结果。

图片只能证明某个时刻的界面长什么样，不能证明图片之外的真实设备通信。即使图片中出现“正在通过软总线扫描…”和“已连接”，也只能说明页面显示了这些文字。阅读图片时把文字、控件和实际能力分开，是理解这个页面边界的关键。

十九、给初学者的观察方法

第一次阅读页面时，可以先不看实现细节，只从用户角度记录操作：打开页面看到了什么，点击蓝色按钮后多了什么，点击某行连接后哪一处发生变化，再次点击蓝色按钮后什么被隐藏。这样能够先建立可见行为模型。

第二次观察时，把每个变化归类为三种：文字变化、内容出现或消失、某一行按钮变化。文字变化包括说明和主按钮，内容变化包括空状态与四行列表，按钮变化包括连接与已连接。三类变化正好对应两个独立状态的不同影响范围。

第三次观察时，尝试逆向验证边界：停止发现是否还能看到设备行，重新开始是否还会出现四行，点击第二台和第四台之后是否同时出现两个已连接。如果实际页面只保留最后一个，说明它是单选反馈；如果停止后列表消失，说明主按钮控制的是展示阶段。

这种观察方法比背诵抽象术语更有效，因为它从实际体验出发，能够避免把页面文字误读成后台能力。先理解“操作—状态—界面”的因果链，再理解实现方式，学习成本更低。

二十、页面可读性来自哪些细节

页面使用稳定的操作位置。标题始终在顶部，说明始终在标题下方，主按钮始终位于说明下方，设备列表或空状态占据后续区域。用户连续操作时，主要按钮不会跳到别处，视线不会失去目标。

页面使用直接的动词。开始发现、停止发现、连接、已连接都是明确的操作或结果文字，不需要用户猜测图标含义。说明文字也把当前阶段说出来：初始状态是行动引导，打开列表后是过程提示。

页面使用一致的卡片语言。空状态和设备行都有白色背景、圆角和内边距，视觉上属于同一个内容区域；主色按钮则从卡片中突出，提醒用户当前最重要的动作。颜色、间距和字号共同构成了层次，不需要额外的装饰图形。

页面不提供无关信息。没有设备地址、时间、信号、类型标签和操作菜单，用户在这次演示中只需要选择名称。信息量保持在功能范围内，反而使操作路径更清晰。

二十一、常见误读与纠正

误读一：看到“附近设备”就认为页面调用了系统发现能力。纠正：四个名称是固定展示项，列表由页面状态控制，不代表周围环境。

误读二：看到“软总线扫描”就认为设备已经被系统返回。纠正：这只是打开列表时显示的说明文字，页面没有真实扫描结果字段。

误读三：看到“已连接”就认为连接会话已经建立。纠正：按钮文案只表示当前行被选中，页面没有连接生命周期和错误处理。

误读四：停止发现就等于断开设备。纠正：停止发现只隐藏设备行，之前的选择位置可能保留；页面没有断开动作。

误读五：四行设备可以同时连接。纠正：页面只记录一个当前选择位置，切换到另一行后前一行恢复为连接。

误读六：每次重新开始都会重新获取设备。纠正：重新打开时仍然是同一组固定名称，页面没有动态数据源。

这些纠正不是为了削弱页面价值，而是为了准确描述它的价值。它把设备发现流程中最重要的界面阶段和单项反馈做成可观察的模型，适合讲清楚状态驱动界面，而不是冒充完整通信产品。

二十二、如果把它作为产品原型看

作为产品原型，这个页面已经具备一个清晰的最小闭环：用户看到入口，打开结果，选择对象，看到选择反馈，再收起结果。闭环中的每一个动作都有对应的可见变化，用户不会因为点击后没有反应而困惑。

原型的重点是确认交互方向，而不是证明底层服务已经完成。四种设备名称帮助产品讨论不同设备类型的展示方式，开始和停止按钮帮助确认发现阶段的入口，行内连接按钮帮助确认单项反馈是否合适。将来如果接入真实数据，可以在保留这套视觉关系的基础上替换数据来源，但真实能力需要额外的权限、设备身份、异步过程和异常反馈。

从原型评审角度看，最值得确认的是三个问题：用户是否理解开始按钮会让列表出现，用户是否能分辨当前选中的设备，用户是否理解停止按钮只是收起结果还是会清除选择。当前页面对前两个问题给出了明确答案，对第三个问题则保留了“选择状态可能继续存在”的实现特征。产品如果有不同意图，需要在交互设计上另行决定，而不是从当前页面推断。

二十三、可见行为的完整复盘

打开页面，蓝色标题区域先建立主题。标题下方的说明文字告诉用户需要开始操作。蓝色主按钮提供唯一的主要动作。内容区域的白色空状态卡片告诉用户目前没有展示设备。这四个元素组成稳定首屏。

点击主按钮，说明文字切换到“正在通过软总线扫描…”，按钮切换到“停止发现”，四个白色设备行按顺序出现。每个行都把名称放在左侧，把连接按钮放在右侧。此时用户可以选择任意一个设备。

点击某一行，只有这一行的按钮文字变成“已连接”。标题、说明、设备顺序和主按钮都保持不变。点击另一行，已连接文字移动到新行。这个变化只发生在按钮文案上，页面不展示其他连接详情。

点击主按钮停止发现，列表四行消失，空状态重新出现，说明文字和按钮文字恢复初始阶段。页面回到了可以再次开始发现的状态。重新打开列表后，页面仍然展示固定的四个名称，之前选择的位置仍可能保留为已连接。

复盘到这里，页面的能力边界已经完整：它展示状态，不读取设备；它更新选择，不建立通信；它控制列表显示，不执行后台发现服务。文章只要把这条边界保持住，就能既讲清楚界面，又不会误导读者。

二十四、写给实际使用者的操作说明

进入页面后，如果只看到“扫描范围内暂无展示设备”，可以点击“开始发现附近设备”。列表打开后，页面会显示华为智慧屏 V65、MatePad Pro、MateBook X Pro 和 Sound X 四个选项。想标记某个设备时，点击对应行右侧的“连接”，按钮变成“已连接”。

如果想收起列表，点击顶部的“停止发现”。收起后设备行不会显示，页面回到空状态。再次点击“开始发现附近设备”可以重新展开列表。页面中的连接文字是当前界面的演示标记，不代表手机已经与实际设备完成配对、认证或数据传输。

如果连续选择不同设备，最后一次选择会成为当前显示的“已连接”项。页面不会同时显示多台已连接，也不会提供连接记录、断开按钮或失败提示。理解这一点后，用户就能按照页面真正提供的交互使用它，不会期待列表之外的功能。

二十五、结语

这个设备发现页面的价值，不在于它宣称完成了多少系统能力，而在于它把一个常见的设备选择流程拆成了可观察的界面状态。初始阶段用空状态表达等待，主按钮负责打开和收起列表，说明文字表达当前阶段，四个固定名称组成稳定结果，行内按钮用“连接”和“已连接”表达单项选择。

页面还展示了一个容易被忽略的关系：列表是否显示和哪一行被选中是两件事。前者控制内容区域的条件展示，后者控制每个行内按钮的文字判断。停止发现会隐藏列表，但不自动代表清除选择；切换设备会移动当前标记，但不改变列表结构。把这些关系讲清楚，比堆砌抽象的工程术语更有助于理解声明式 UI。

同时，页面边界必须被诚实保留。四个名称是预置展示内容，扫描提示是阶段文案，连接文字是选择反馈。没有真实设备发现、软总线连接、权限申请、连接生命周期和数据传输。正是因为没有把演示写成完整产品，读者才能准确知道它适合验证什么、不能证明什么。

对于学习 ArkUI 的开发者，这个小页面提供了一条清晰的练习路径：先观察空状态，再打开列表；先理解一个开关如何改变内容，再理解一个位置如何改变单项反馈；最后通过关闭和重新打开，认识两个状态之间的独立性。对于需要设计类似页面的人，它也提醒我们，任何“发现”“连接”类界面都应该让用户看见阶段、结果和边界，而不是只给一个没有解释的按钮。