Michaels用户APP。
用户体验 / 界面设计 2021
Michaels Buyer App 是 2021 年面向手工艺材料消费者的项目，涵盖购物、会员、账户、购物车和到店取货。我想让这些看起来很不一样的页面，既能清楚承接各自的任务，又保留同一种轻松、友好的品牌感。
对我来说，品牌感不只来自首页的大图。查看优惠时的一张卡片、上传材料时的一段说明、到店时的一幅插画，都在塑造用户对产品的感受。我更关注这些细节怎样在不同场景里互相呼应。
我用稳定的底部导航连接首页、商品浏览、Rewards、购物车和账户。不同页面的内容有变化，但卡片边距、图标尺度和标题层级保持联系。购物探索更开放，权益和订单信息更集中，导航则一直提供熟悉的方向。
我把打开 App 的情境分成找材料、看权益和取订单三类。它们需要的信息密度不同：浏览允许慢一点，查看权益需要集中一点，到店取货则需要直接一点。同一套品牌语言，可以随着当下任务调整表达的轻重。
| 进入时的情境 | 内容组织 | 我的视觉重点 |
|---|---|---|
| 寻找材料 | 分类、搜索与内容推荐 | 给商品图片充分空间，用稳定卡片建立浏览节奏 |
| 查看权益 | 奖励、优惠券和条码 | 用独立信息面突出金额与凭证，标题和说明形成层级 |
| 领取商品 | 订单、门店与到达信息 | 让阶段、位置和主按钮先被看见，插画辅助解释场景 |
我让奖励卡片、认证说明和到店表单共享红色主操作与相近的排版节奏，再按场景调整图形与信息密度。权益页面更强调金额和凭证，认证页面重视示例，取货页面则让阶段和车辆信息更加直接。
Rewards 页让我尝试把不同性质的权益放进同一套卡片语言：累积进度用图形表达，可用券额用数字强调，条码保留独立区域。我的取舍是让每个对象有自己的视觉重心，再通过边距与字体把它们连成整体。
我更愿意让一张权益卡先讲清楚一件事。金额、名称与条件靠近，条码在需要使用时容易找到，促销内容则拥有相对独立的位置。这样既能延续购物场景的活力，也能让实用信息保持清楚。
教师认证页需要比促销页更平静。我把材料示例、要求和上传动作依次展开，配合底部的 Cancel / Submit，形成从阅读到提交的节奏。这里的亲近感来自清楚的说明和适当的留白，不需要很多装饰。
| 信息层次 | 页面内容 | 我的处理思路 |
|---|---|---|
| 准备说明 | 照片要求与材料示例 | 图片和文字就近配对，先建立直观理解 |
| 上传区域 | 文件选择与已选内容 | 给操作面明确边界，让文件信息易于确认 |
| 操作区域 | 取消与提交 | 主次按钮保持稳定，和正文留出适当距离 |
到店取货用 Ready For Store Pickup、On My Way 和 I Have Arrived 建立阶段感。我把车辆、车位与到达动作放在这个语境里，让插画和表单共同解释“我现在走到哪一步”。图形带来熟悉感，文字和按钮承接实际操作。
这一段体验让我很在意插画与操作的分工。车辆和地图可以很快唤起到店场景，而具体车位、车型和颜色则交给表单。两者一起出现时，页面既不显得生硬，也能保留明确的任务中心。
购物车里有商品、暂时为空，或需要调整收货方式时，页面的语气可以不一样。我把商品列表、说明弹层和空态插画作为不同尺度的表达：列表适合比较，弹层适合聚焦一次选择，插画则让等待或停顿更有温度。
| 页面情境 | 信息组织 | 视觉表达 |
|---|---|---|
| 多个取货地点 | 将商品与对应门店放在一起阅读 | 通过分组标题和间距建立区域 |
| 配送范围说明 | 说明内容与相关商品相邻 | 弹层集中注意力，保留明确操作 |
| 空购物车 | 登录提示与继续购物入口 | 插画建立场景，短标题和按钮给出方向 |
我用地图、车辆、购物车、手机和礼盒这些熟悉的物件，组成一套围绕购物服务的插画。红色负责品牌识别，辅助色丰富场景，轮廓和细节保持相近的语气。它们既可以独立表达情境，也能作为卡片和状态页的一部分。
这组设计里，我比较喜欢插画、卡片与实际服务之间的联系。红色在关键动作中反复出现，辅助色让场景更丰富，留白与统一的文字层级则把这些变化收在一起。品牌可以有活力，日常使用也可以很清楚。
如果把这些页面继续整理成组件库，我会同时记录外观与语气：同类卡片怎样排布，插画在什么场景出现，标题多长，按钮用什么动词。对我来说，这些小规则和色值一样，都是品牌体验的一部分。