设备发现与连接页面的状态设计从空状态到单项连接反馈开场先把页面当成一个完整的交互设备发现类页面很容易被写成一个“点击按钮然后列出设备”的简单例子但真正决定体验的往往是按钮文字、空状态、列表出现的时机以及用户选中某个设备之后页面如何告诉他操作已经发生。一个页面如果只展示几行设备名称却没有清晰的开始、停止和连接反馈用户很难判断自己到底处在哪个阶段。这个页面把场景压缩得很小首次进入时不展示任何设备只展示标题、说明文字、开始发现按钮和一个空状态提示点击开始发现后页面显示四个固定的设备名称每一行都有一个连接按钮点击某一行的连接按钮之后这一行的按钮文字变成“已连接”。再次点击顶部按钮发现列表被收起按钮文字回到“开始发现附近设备”再次打开列表时页面仍然保留之前选择过的设备状态。这样的设计不是真实设备发现服务而是一个非常明确的交互演示。页面没有从系统读取附近设备也没有进行网络连接、身份验证、设备配对或软总线通信。它用固定数据模拟“发现结果”用一个整数位置记录当前被选择的设备。正因为范围明确这个页面很适合用来理解状态如何控制界面、条件内容如何出现、列表中的单项按钮如何显示不同文字以及为什么一个看起来很小的状态变量会影响多个位置。上图展示的是未开始发现时的首屏。页面最明显的元素是蓝色标题区域标题文字为“发现附近设备”。标题下方是说明文字提示用户点击扫描以建立分布式连接。再下面是整行的蓝色按钮按钮文字是“开始发现附近设备”。由于页面尚未进入发现状态设备列表没有出现取而代之的是居中的“扫描范围内暂无展示设备”提示。一、首屏为什么要有明确的空状态进入页面时没有设备行并不意味着页面没有内容。相反空状态承担了三个作用。第一它告诉用户页面已经加载完成。标题、说明、主按钮和空状态都能正常显示用户不会把“暂时没有设备”误解为页面卡住。第二它给出了下一步动作。按钮上的“开始发现附近设备”比一个只有图标的按钮更直接初次使用者能够立刻知道要做什么。第三它和扫描后的列表状态形成对照。用户点击按钮后看到设备行能够清楚地感知页面从“等待开始”进入了“正在展示结果”的阶段。页面背景使用浅蓝灰色内容卡片使用白色顶部标题区域使用较深的蓝色。这样的层次并不依赖复杂装饰蓝色负责表达主要动作白色负责承载内容浅色背景负责把所有内容托住。空状态卡片有圆角和较大的内边距文字居中显示使它在设备列表不存在时仍然占据一个清楚的视觉区域。空状态文字是“扫描范围内暂无展示设备”这里的“展示设备”很重要。它没有声称系统已经完成真实扫描也没有给出设备数量或连接失败原因。对于这个页面来说首屏只是没有打开模拟列表因此这句提示恰好说明了当前可见结果。它没有制造超出页面能力的承诺。如果把空状态直接去掉首次进入页面时只剩标题、说明和按钮内容区域会显得空白用户也难以理解为什么下面没有设备。反过来如果在没有开始发现之前就把四个设备名称显示出来按钮的作用又会变得含糊用户不知道这些设备是预先加载的还是点击按钮后才出现的。当前页面把列表的出现和按钮状态绑定起来因此阶段关系很清楚。二、顶部标题区域承担什么作用顶部标题文字为“发现附近设备”字号较大使用粗体和白色文字放在蓝色圆角区域内。这个区域不是一个可以点击的控件也不承载设备数量或连接状态它的作用是建立页面主题让用户一眼知道当前页面在做什么。标题区域横向占满内容宽度周围有页面内边距四角保持圆润。它与下面的说明和按钮之间留出固定间隔所以页面不会把标题、说明和操作挤成一整块。对一个只有一个主要任务的页面来说这种层次比增加多个导航标签更合适用户不需要先选择模块打开页面就能直接执行发现操作。标题没有随扫描状态切换。当用户点击开始发现时标题仍然是“发现附近设备”点击停止发现后标题也不变。变化集中在说明文字、主按钮和下方内容区域标题保持稳定可以帮助用户在状态切换时保持方向感。如果标题也随着每次点击改变页面可能会显得过于嘈杂并不能带来更多信息。三、说明文字如何表达两个页面阶段标题下方的说明文字有两种显示内容。未开始发现时它是“点击扫描建立分布式连接”开始发现后它是“正在通过软总线扫描…”。两句话分别对应关闭和打开状态。第一句话的语气是引导。用户还没有进行操作页面需要告诉他下一步应该点击按钮。第二句话的语气是进行中提示它让用户知道页面已经进入扫描阶段。这里的省略号带来一种过程感但页面本身并没有计时器、进度条或异步回调所以不能把这句话理解为真实扫描任务正在后台执行。它只是跟随状态变化的展示文本。这两种文案的切换是整个页面反馈闭环的第一环。用户点击开始按钮后不只看到设备列表出现还能看到说明文字从行动提示变成进行中提示。点击停止后说明文字又回到行动提示告诉用户现在可以重新开始发现。一个开关状态同时影响说明文字和按钮文字页面因此形成一致的上下文。这里没有“扫描成功”“扫描失败”“扫描完成”等第三种结果。列表显示也不是一次真实请求的返回结果而是状态打开后显示固定内容。因此文章和页面都不应补出加载失败、权限拒绝、超时重试等流程。那些流程在真实产品中可能需要但当前页面没有对应的显示分支不能把它们说成已经存在。四、开始发现按钮的两种身份主按钮在首屏显示“开始发现附近设备”。点击后按钮文字立即变成“停止发现”同时四个设备行出现。此时按钮不再承担开始任务的含义而是提供关闭当前列表状态的入口。再次点击按钮文字回到“开始发现附近设备”四个设备行隐藏空状态重新显示。按钮本身的宽度为整行颜色与标题区域保持同一蓝色系。它是页面最主要的操作入口因此没有和连接按钮使用同样的视觉重量。连接按钮只出现在设备列表内部而主按钮在两个页面阶段都存在始终位于说明文字下方用户不需要滚动寻找。从交互角度看按钮做的是一次布尔切换。初始值为关闭第一次点击变成开启第二次点击又变成关闭。这里的“停止发现”并不代表取消了已经建立的连接因为页面没有真实连接会话它只代表不再展示设备列表。把这个边界讲清楚很重要否则读者容易把按钮文字直接等同于系统级扫描控制。按钮文字和设备区域保持同步。如果按钮写着“开始发现附近设备”下方就不展示四个设备行如果按钮写着“停止发现”下方就展示四个设备行。两处变化来源于同一个状态避免了按钮文字已经切换但列表仍然停留在旧状态的矛盾。五、四个设备名称为什么是固定的列表中一共展示四个名称华为智慧屏 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 的开发者这个小页面提供了一条清晰的练习路径先观察空状态再打开列表先理解一个开关如何改变内容再理解一个位置如何改变单项反馈最后通过关闭和重新打开认识两个状态之间的独立性。对于需要设计类似页面的人它也提醒我们任何“发现”“连接”类界面都应该让用户看见阶段、结果和边界而不是只给一个没有解释的按钮。