Michaels线下店自助结算系统。
业务逻辑 / 用户体验 2021-2022
设计自助结账时，我会沿着顾客的视线想一遍：手中的商品、屏幕上的清单、旁边的扫描器，再到刷卡机。界面只是其中一环。我希望通过清楚的层级和位置关系，把这些动作自然地接起来。
在这个项目中，我负责需求沟通、竞品调研、全流程高保真设计，并协助前后端开发落地。回看方案，最值得展开的并非页面数量，而是三个判断：何时允许直接行动，何时需要停下来核对，遇到例外时怎样把控制权交给店员、再交还顾客。
自助结账的整体设计涵盖欢迎、商品明细、付款、小票与设备维护。顾客操作是交易的一条主线，店员接管与设备状态则是另一条保障线。我希望两者在需要时自然衔接，让异常能够被处理，而不是让顾客从头开始。
我用三种典型购物情境整理设计侧重点：小额购买需要直接，谨慎操作需要清楚，批量采购需要便于核对。它们代表不同的任务节奏，不是用年龄划分操作能力。人物插画则让这些情境更具体一些。
我把小额购买的重点放在直接开始与快速核对上。商品扫描成为主要动作，会员与优惠入口保留在容易发现的位置。人物场景表达的是一种轻快的购物节奏，界面也随之保持明确的主线。
我让谨慎操作的场景强调可读性、明确动词和稳定位置。较大的按钮配合清楚说明，品牌插画保留亲近感，界面则通过层级让当前动作先被看见。
我用批量采购情境突出数量、优惠与总额的关系。逐项明细负责细读，金额摘要负责概览，相关入口贴近对应信息，让购买内容较多时仍然有清楚的核对顺序。
国内成熟方案提供了“扫描—付款—离店”的参考，但美国门店里的会员识别、银行卡、礼品卡及多种优惠，不能简单换一套语言就完成适配。设计保留会员卡、手机号与邮箱识别方式，并重点处理银行卡支付指引与实体设备位置之间的对应关系。
当时我参考过 Target、Walmart、Home Depot 与 IKEA 的相关方案，关注简洁反馈、设备支持、人工协助和视觉引导。对我最有帮助的，是把观察转成自己的设计取舍：哪些动作可以轻，哪些信息值得突出，以及自助与店员怎样接续。
五个步骤用于说明主要任务，具体交互还需要灵活衔接。折扣确认可以发生在商品列表内，不一定独立成页；一次扫码也可能引出年龄限制或改价需求。主流程保持容易理解，在相关商品旁进入必要分支。
欢迎页既要传达 Michaels 的创作氛围，也要让拿着商品的人立即知道从哪里开始。横屏欢迎页把扫描提示放在靠近操作区的位置，会员注册保持为次级入口。我希望减少开始前的判断，把注意力从展示内容引向手上的商品。
我用 Start scanning here 将欢迎信息与扫描入口连接起来。横屏有较充分的横向空间，品牌画面和开始提示可以分别占据不同区域，让第一眼既有氛围，也有方向。
我在竖屏里用 Tap Here to Begin 建立明确的开始位置，品牌内容沿纵向展开。相比横屏，阅读路线更集中，所以按钮、说明与画面的间距成为控制节奏的重要部分。
我把扫码看作连续操作，界面则负责让新加入的内容有清楚的位置。商品图片、名称、数量与金额组成一个可以反复读取的单元；主操作和求助入口保持稳定，顾客的视线就有熟悉的落点。
扫描阶段最频繁的视线移动，是从手中的商品回到清单，再从清单转向总额。横屏将商品放在左侧、结算摘要与操作集中在右侧；竖屏将摘要放在清单下方。两种形态都在努力保留“这件是什么”与“这单多少钱”的联系。
我把商品图、名称、数量和价格组织在左侧清单，右侧集中 Purchase summary、权益入口与 Finish & Pay。清单适合逐项阅读，摘要与主按钮更醒目，取消和求助保持次级位置。
我让竖屏的 Total、Savings 和 Finish & Pay 集中在下方，商品信息向上展开。横屏与竖屏采用不同布局，但金额靠近操作、明细沿行排列的关系保持一致。
| 顾客关注的信息 | 画面中的表达 | 我的视觉取舍 |
|---|---|---|
| 当前商品 | 图片、名称、数量与行金额 | 同一商品的信息就近组织，列表保持稳定节奏 |
| 会员与优惠 | 促销说明及 Rewards、Coupons 入口 | 权益入口清楚可见，次于当前购物与付款动作 |
| 整体金额 | 小计、税额、Total 与 Savings | 摘要独立成组，最终应付靠近主操作 |
我更倾向于让清单和摘要拥有不同的阅读速度。清单可以逐件查看，摘要要在短暂抬头时就被找到。两者都重要，但不需要同样醒目；固定摘要、稳定行结构，再把解释留在对应商品附近，是我在这页的主要取舍。
按下 Finish & Pay 之后，注意力会从触屏转向支付设备。我用银行卡、礼品卡与扫描器的图示承接这个变化，让界面中的选择能够对应门店里的具体位置。
我通过刷卡机和扫描器图示区分不同支付方式，并将短说明贴近对应设备。图形在这里承担空间指引，文字补充动作，帮助界面从屏幕内的选择转向屏幕外的操作。
我在竖屏中将刷卡机和电子礼品卡扫描器沿纵向安排，保留明确的取消入口。设备图占据主要展示面，说明紧随其后，让这一屏集中表达动作位置。
我将每张礼品卡的使用金额与余额放在同一组，再把订单 Amount due 独立呈现。相近的数字通过标签、位置和字号区分对象，既能逐卡阅读，也能快速找到订单摘要。
| 信息对象 | 主要内容 | 我的组织方式 |
|---|---|---|
| 订单待付 | 本次交易需要支付的金额 | 与订单摘要保持联系，形成较高视觉层级 |
| 礼品卡信息 | 卡片标识、使用金额与余额 | 按卡片成组，文字与数字就近排列 |
| 设备引导 | 下一步使用的设备与动作 | 图形和简短说明配对，主信息集中呈现 |
我把支付阶段看作信息逐步收拢的过程：先选方式，再看设备指引，最后确认本次使用的金额。卡片、数字摘要和主次按钮延续同一套语言，让不同支付情境保持熟悉的结构。
付款结束并不等于顾客已经知道可以离开。完成页先给出明确的结束信号，再提供不出小票、电子小票与纸质打印。把这些选择放在付款之后，可以减少开始结账时的决策，也让没有会员账户的人仍然拥有清楚的离场路径。
我用感谢信息和购物车插画建立完成感，再把三种小票方式并列在下方。纸质打印采用更强的按钮样式，其他选择保持清楚但克制，让结束页拥有较舒展的节奏。
我把竖屏的小票选项纵向排列，Assistance 和 Exit 保留在底部。相同按钮宽度和规律间距让几种选择容易比较，完成阶段的文字与品牌插画则延续前面的视觉语言。
我用“已发送”和脱敏邮箱组成一个简洁的结果区域。状态先出现，发送对象随后说明，其余元素保持安静。这一屏更适合明确收尾，而不是继续展开复杂内容。
我让 Printing 成为页面焦点，通过简短状态与设备相关图形承接等待过程。它与前面的完成、发送页面沿用相近结构，文字变化时仍然保留同一种结果页语言。
我希望离场页面比扫描和付款阶段更从容一点。明确的完成信息建立结束感，小票选项提供后续动作，品牌插画则让最后一屏保留温度。操作已经收拢，视觉上也可以更舒展。
年龄限制商品和店员改价需要人工接管。我的重点是保留导致停顿的商品、原因与可选动作，让店员能够直接接手，也让顾客知道当前为什么不能继续。
我把年龄限制提示放在相关商品附近，同时在操作区显示协助状态。局部提示说明对象，全局状态说明当前进展，两种信息互相配合，让顾客侧仍然围绕这笔交易展开。
我让改价弹窗集中呈现数量、单价、折扣与原因，底部以 Cancel 和 Save 收尾。表单内容与动作保持紧密联系，店员可以围绕当前对象阅读和处理，背景交易仍保留上下文。
我把人工协助理解为一次角色交接。顾客侧保留商品和当前进展，店员侧展开处理所需的信息，再把结果带回交易。两个角色共用同一套视觉基础，但内容和动作有各自的重点。
自助设备需要被配置、排查和维护。页面把门店与设备标识、版本和数据更新时间集中展示，再提供补打小票与礼品卡重新激活入口。这些信息服务于店员任务，不应与顾客正常购物操作混在同一层。
我把设备标识、版本与数据更新时间集中在维护页。标签和值采用稳定排列，相关入口独立成组，让店员侧的信息更偏工具化，同时沿用全局字体与按钮样式。
我将查询条件放在列表之前，手机号、邮箱和金额提供不同的检索起点。订单信息沿行排列，操作跟随具体记录，让补打任务形成从查找到处理的清楚布局。
我围绕 Gift card reactivation 组织标题、说明与 pinpad 示意。店员任务聚焦一个具体设备动作，所以页面保留较少但明确的信息，让操作说明成为视觉中心。
截至 2023 年底，项目累计上线一千多台设备，周流水超过 1500 万美元。随着使用规模扩大，我更能体会到这类设计的特点：界面需要和设备、门店环境及不同的操作习惯共同工作，而不只是完成一组屏幕画面。
我比较看重这套方案里的几种联系：商品与清单、金额与付款、屏幕提示与实体设备，以及顾客与店员。大字、清楚的操作区域和具体图示，都围绕这些联系展开。视觉选择不是孤立的装饰，它们服务于现场动作。
| 设计维度 | 我的处理方式 | 页面之间的联系 |
|---|---|---|
| 横竖屏布局 | 调整清单、摘要和按钮的位置关系 | 保留相同的信息优先级与操作语言 |
| 触屏与设备 | 图示和短说明共同指向具体动作 | 扫描、付款与出票形成连续的场景表达 |
| 顾客与店员 | 根据角色组织内容和操作重点 | 共享商品与交易上下文，沿用基础组件 |
这个项目让我觉得，自助设备上的精致感来自很具体的细节：站在一定距离能否读清，手伸过去时按钮是否容易找到，视线转向刷卡机时提示是否自然。把这些关系和品牌语言一起考虑，才是我想呈现的设计完整性。