小程序怎么才好用？15个交互名词看图懂

上一期，我们用咖啡馆小程序讲了页面的信息怎么摆。标题、图片、价格、按钮排齐以后，还有一件事要继续往下做：用户点了以后，页面怎么回应？

选了大杯，有没有明显的选中状态？加入购物袋，杯数和总价有没有更新？点了提交，是正在处理、已经成功，还是请求失败？如果这些没有交代，用户就会停在屏幕前，猜自己到底有没有点上。

这一篇继续用模拟的Punk咖啡馆点单小程序，把导航、组件和反馈里的15个常见名词放回具体页面。菜单里有美式18元、拿铁24元、摩卡28元；拿铁选大杯加4元，两杯合计56元。沿着“选咖啡 → 选规格 → 加入购物袋 → 确认订单”的路径，看看每一步该出现什么。

01. 导航栏 Navbar 与胶囊：返回、标题和微信菜单各有位置

Navbar是Navigation Bar，导航栏，通常位于页面顶部，帮助用户辨认当前页面、返回上一页。在拿铁规格页，左侧是返回，中间是“拿铁”，右上角还有微信提供的胶囊菜单，也就是带“···”和圆形图标的那一块。

胶囊属于微信的平台入口，页面中的“选规格”“购物袋”属于我们自己设计的功能。自定义导航栏时，要根据胶囊的实际位置避让；微信提供了获取其位置的接口，不能拿一台手机的坐标套所有设备。

这里要检查两件事：标题是否被胶囊挡住，返回以后是否回到刚才的菜单。用户选了规格、又回去看其他咖啡时，已加入购物袋的内容应当保留。

02. TabBar：几个主要页面之间怎么切换

TabBar是标签导航栏，小程序里常见的是底部主导航。我们给咖啡馆安排“点单、订单、我的”三个平级入口，用户可以随时去看菜单、查自己的订单或查看个人信息。

微信原生TabBar配置允许2—5项。但入口数量要跟功能一起决定：咖啡馆的“杯型、冷热、提交订单”都属于点单过程，不适合占据底部的三个主入口。进入规格页以后，也不必把每一步都包装成一个主页面。

选中“订单”，图标和文字一起表达当前所在页面。切回“点单”时，购物袋里原来的两杯拿铁还在；只切换入口，不应顺手清空用户已经做出的选择。

03. Tabs：同一页里的内容怎么分类

Tabs就是页内标签，用于切换当前页面的不同内容。进入“订单”页后，上方可以再放“全部、待取、已完成”，这三个标签都在筛选同一份订单列表。

TabBar让你从点单页去订单页，Tabs让你在订单页里看待取的订单。它们的层级不同，画在一起时也要让人分得清：底部主导航始终指向主要页面，页内标签紧跟当前页面的内容。

切换“待取”后，没有符合条件的订单，就说明“暂无待取订单”。不要因为筛选结果为空，让用户误以为自己之前的所有订单都消失了。

04. 卡片 Card：一杯咖啡的信息放成一组

Card就是卡片，把相关信息收在一个有边界的区域里。菜单中的一张拿铁卡，可以包含图片、“拿铁”、起价24元、简短介绍，以及“选规格”的操作。

卡片要先讲清这个对象是什么，再让用户决定下一步。比如“大杯加4元”可以在规格选择时详细说明；如果菜单标的是起价，写“¥24起”，避免让用户把它当作所有规格的统一价格。

一张卡能承载多少内容，要看它出现在哪里。菜单里让人快速比较商品，介绍可以短一点；详情页已经进入具体饮品，可以展开更多说明。同一套卡片换成较长的商品名，也要能看清主要信息。

05. 单元格 Cell：一行信息为什么可以点进去

Cell是单元格，在界面里通常指列表中的一行。左侧写项目名称，右侧显示当前值、状态或箭头，比如确认订单页的“自取门店｜Punk咖啡馆”“取餐时间｜请选择”。

整张商品卡适合介绍一杯咖啡，单元格适合扫读订单里的几个设置项。右侧有箭头时，用户通常会理解成“这一行可以进入下一步”；整行都能点，比只让最右侧的小箭头生效更好操作。

不能修改的信息，也可以排成一行，但要去掉暗示可点击的箭头。这里如果门店支持切换，切换后应当重新检查该门店的商品和取餐时间，不能只改屏幕上的店名。

06. 按钮 Button：能点、按下、处理中、不能点是四种情况

Button就是按钮，用来执行一个明确动作。拿铁规格页的主按钮写“加入购物袋”，确认页写“提交订单”，让用户直接知道这一点会做什么。

同一个按钮也有状态：Default是默认，Pressed是按下，Loading是加载中，Disabled是禁用。点击提交后，文字变成“提交中…”并出现加载提示，同时阻止再次提交。微信的按钮组件分别提供loading和disabled属性；只显示转圈，并不会自动完成防重复处理。

禁用也要交代原因。门店当前不接受新订单，就在按钮附近提示“门店暂不接单”，不要只把按钮变灰。成功和失败属于提交后的结果，接下来还要安排订单详情或错误说明。

07. 点击热区 Touch Target：图标很小，能点的范围不必很小

Touch Target是触摸目标，也就是点击真正生效的范围。购物袋里的“＋”“－”看起来只是两个小图标，实际可点击区域可以比图标更大。图上用淡色框把这块看不见的范围画出来。

两杯大杯冰拿铁共56元，用户点“－”减到一杯，数量和总价应当一起变成1杯、28元。扩大点击范围时，也要给相邻操作留距离，避免“＋”和“－”的热区重叠。

开发者工具里鼠标能精准点中一个小图标，手机上的手指未必能。预览时要实际点几次，看看是否容易碰错；点进商品详情和修改数量的区域也要分清，避免点“＋”却跳到另一页。

08. 表单校验 Validation：哪里没填好，就在哪里说明

Validation就是校验，检查用户当前填写或选择的内容是否满足要求。表单也包含选择项：本例切到“预约取餐”，就需要选一个门店允许的时间；如果未选，提交时应当提示“请选择取餐时间”。

提示贴近对应的时间单元格，再把页面带到这一区域，用户才知道该改哪里。已经选好的拿铁大杯冰、两杯数量和56元总价都保留，不要报一次错，就要求用户重选整张订单。

前端检查能及时提醒漏选，提交时服务端还要检查时段、库存和价格是否仍然有效。服务端就是接收请求、处理订单的数据系统；最后一杯已经卖完时，界面需要说明哪杯不能买，并给修改订单的入口。

09. 选择器 Picker：从门店允许的选项里挑

Picker就是选择器，让用户从给定的选项里选择。预约取餐时间可以展示“14:00、14:15、14:30”，选择14:15并确认以后，订单页的时间单元格也要更新为14:15。

微信picker提供普通选择、时间、日期等模式。本例的门店只允许若干具体时段，可以把可用时段传给普通选择器；如果用能自由滚动小时、分钟的时间选择器，还要额外检查用户选的时间是否可预约。

打开面板又取消，原来的选择保持不变。选择完成以后，临时选中值才写入订单；到提交那一刻，还要再次确认这个时段有没有变成不可用。

10. 轻提示 Toast：操作完成了，短暂告诉用户

Toast是短暂出现的轻提示，适合“已加入购物袋”“已复制取餐码”这种简短结果。用户把一杯拿铁加入购物袋，屏幕上出现“已加入购物袋”，同时购物袋数量和总价也更新，反馈就完整了。

Toast里的英文名称常来自组件库，微信对应的接口叫wx.showToast。本例用它通知一个已经完成的动作，不让用户再确认一次；提示消失以后，页面上的杯数仍然能证明操作已经生效。

缺货、提交失败和订单状态不明，需要用户继续处理，不能只闪一下就结束。错误说明和处理入口应当留在页面里，用户才有时间读完并采取下一步。

11. 对话框 Dialog：有后果的操作，先把后果说清楚

Dialog就是对话框，覆盖当前页面，要求用户阅读或作出选择。用户要清空购物袋里的两杯拿铁，可以问“清空购物袋？”再说明“将移除当前2杯饮品”，按钮分别写“保留”和“清空”。

微信提供wx.showModal来显示模态对话框；Modal表示模态，即处理这层内容期间，背景页面的操作被挡住。弹出以后应当让人看懂操作对象，关掉对话框则回到原来的购物袋。

对话框适合需要明确确认的操作。选一个杯型、加入一杯咖啡这类日常动作，用选中反馈或轻提示就够了；每点一步都弹窗，会让点单过程反复停下来。

12. 操作面板 Action Sheet：对当前对象，可以做哪几件事

Action是操作，Sheet是面板；Action Sheet就是操作面板。点订单上的“更多”，底部出现“查看订单详情、复制取餐码、联系门店”，用户选其中一个动作，面板随后关闭。

这几个选项都针对当前订单，数量少，才适合放在这种面板里。微信原生接口叫wx.showActionSheet，选项列表最多6项。本例只用3项，点击“复制取餐码”后，再用Toast提示复制结果。

Picker回答“我要选哪个时间”，Action Sheet回答“我要对这张订单做什么”。如果要选择杯型、冷热、数量，还要实时看价格，使用规格面板会更清楚，不必把复杂选项全塞进“更多”。

13. 骨架屏 Skeleton：内容没回来时，先留出它的位置

Skeleton是骨架，骨架屏用简化的占位块表示即将出现的内容结构。菜单还在加载时，图片位置先放一个灰块，名称和价格放短灰条。数据回来以后，拿铁图片、名称和24元起价填到对应的位置。

图片区域提前留好，页面就不容易在加载完成时突然把按钮挤到别处。骨架也应当接近真实商品卡的尺寸；真实内容是两列商品，就用两列占位，不要先给用户一种完全不同的布局。

骨架表示正在等待内容。请求已经失败，就应当结束等待，显示“菜单加载失败”和重新加载的入口；不停闪烁的灰块会让用户一直等下去。

14. 空状态 Empty State与错误状态 Error State：没内容和没加载出来怎么区分

Empty State是空状态，表示当前确实没有符合条件的内容。购物袋里没有商品，就写“购物袋还是空的”，给一个“去选咖啡”的入口。

Error State是错误状态，表示本来要获取内容，却因为网络或服务异常没拿到。菜单请求失败，应该写“菜单加载失败，请检查网络后重试”，按钮写“重新加载”。用户看见这两种页面，需要采取的动作不同。

订单加载失败时，不要写成“你还没有订单”。先保留已显示的信息，或清楚说明暂时无法获取；这样用户不会因为一个网络问题，误以为自己的订单被清掉了。

15. 无障碍 Accessibility：能看清、能点准、能听懂

Accessibility是无障碍，也常被称为可访问性，让不同能力和使用条件的人都能理解并操作界面。拿铁规格页的大杯选项，可以同时用边框、勾选图标和“大杯28元”表达选中状态；用户即使分不清两种颜色，也能看出选了什么。

文字变大以后，杯型和冷热选项允许换行，底部“加入购物袋”仍能看清、点到。读屏软件会朗读界面信息，“＋”按钮需要有“增加一杯拿铁”这样的可理解名称，当前数量变化也要能被感知。

这张图只能展示可见的部分。读屏名称、阅读顺序和动态反馈，还要在小程序里检查实际效果；看起来清楚的一张截图，不能证明这些能力已经完成。

一个容易踩的坑：点了提交，一直转圈，也没有订单结果

正常演示时，很容易只安排“点击提交 → 订单成功”这条路径。网络慢一点，按钮就一直显示“提交中…”；用户重新进入页面，看不见结果，还可能再提交一次。这时缺少的是等待、异常和恢复之间的关系。

把提交后的情况分开处理：处理中保持一次请求，明确创建失败时保留购物袋并提示原因，收到成功结果时进入订单详情。请求超时只说明这次没等到回复，订单可能已经创建。这时先查询或核实订单状态，不能直接断言失败，再让用户盲目创建一张新订单。

页面防连续点击只是第一层。真实订单还需要服务端避免同一次提交被重复创建，通常用同一次操作的唯一标识进行核对；这个做法常叫幂等，指同一操作重复请求，也不会重复产生那张订单。模拟页面可以展示这些状态，接真实业务时要把状态查询和防重复创建一起接好。

把这些名词放回一次完整的点单

继续用两杯大杯冰拿铁、合计56元的例子，制作时按下面的顺序写清楚。每一步都要有画面和回应，返回修改时也要保留已经完成的选择。

1. 进菜单，找咖啡。顶部能确认当前门店，底部主导航说明所在页面。菜单有加载、加载失败和正常商品卡三种情况。
2. 进规格，选大杯冰。杯型和冷热有明显选中状态，单价更新为28元。点击“加入购物袋”，轻提示出现，购物袋杯数同步增加。
3. 进购物袋，改数量。数量改成2杯，总价更新为56元。“＋”“－”方便点击，清空前说明将移除哪些商品。
4. 进确认页，核对取餐。门店、取餐方式和时间用单元格展示。预约时间从允许的选项里挑，漏选时在该字段附近提示。
5. 提交，看到结果。按钮立即回应，处理中不再连续发请求。成功去订单详情，明确失败给修改或重试入口，结果不明先核实订单。

把下面【】里的内容换成自己的小程序信息，就可以让AI按你的业务补交互。已有代码或截图也一起提供；不涉及的业务规则写“无”，让AI判断哪些组件和状态适用。

请完善【小程序名称】的交互与状态。

小程序类型：【你的类型】
目标用户：【谁会使用】
主要任务：【用户打开后要完成什么】
页面流程：【入口页 → 操作页 → 结果页，按实际情况填写】
现有内容：【已有页面、代码文件或截图】
业务规则：【必填项、可选项、权限、时间或数量限制；不涉及的写“无”】

请按我的业务补齐以下内容：
1. 根据页面层级安排导航。需要时使用TabBar（主导航）和Tabs（页内标签），入口名称按实际功能确定。
2. 写清每个可点击区域的作用、点击反馈、下一步去向，以及返回后保留哪些输入和选择。
3. 对列表或内容区安排加载中、正常、空状态和加载失败。空状态说明下一步，失败提供恢复入口；不适用的状态说明原因。
4. 有输入或选择时，明确选中状态与校验规则。错误提示放在对应字段附近，保留已填写内容；有关联的数据同步更新。
5. 主要按钮区分默认、按下、处理中和禁用，禁用时说明原因。需要确认后果的操作使用对话框，简短成功反馈使用轻提示。
6. 涉及保存、报名、发布或其他提交时，防止重复触发。成功说明结果与去向，明确失败给修改或重试入口；超时或结果不明先核实状态，避免重复执行。
7. 检查点击热区、文字放大、颜色之外的状态提示，以及不同屏幕下的显示。

先列出“页面/操作 → 触发条件 → 界面反馈 → 下一步 → 异常恢复”的对应表，
再据此完善页面与交互。只添加与上述任务有关的内容。
最后给出需要核对的页面状态，并在微信开发者工具和手机预览中检查；
无法实际运行的部分说明待验证，不把HTML效果当作小程序验收结果。

下一次页面“点着不对劲”，先把那一步的回应描述清楚：点哪个区域、等待时显示什么、成功去哪里、失败怎么继续。AI拿到这些具体要求，才能把交互补到对应位置。

关于作者

Punk｜中科大管理学硕士｜AI提示词、AI小白教程｜Punk系列Skills作者｜3个月赚了8位数｜Learn in Public｜FDE文章浏览量240w｜@AdrianPunk115