Michaels 官网新平台是 2022 年的官方网站升级设计。我担任 UI/UX 设计师，负责商品列表、商品详情、购物车和结账，工作包括业务逻辑梳理、交互优化、高保真设计、开发交付及页面走查。设计同时考虑桌面与移动端的内容重排。
我把商品信息当作贯穿页面的基本单元：图片、名称、规格、价格和收货方式，在不同场景里重新组合。列表适合比较，详情适合展开，购物车和结账更强调分组。统一感来自这些信息关系的持续呼应。
Michaels官网新平台
Michaels品牌官方网站。
业务逻辑 / 用户体验 2022
让不同屏幕，共享同一种购物语言
响应式，调整的是关系而不只是尺寸
四档布局 / 保留内容优先级，改变组织方式
我围绕 1440、1024、640 和 375 四个宽度安排导航、分类、活动与商品集合。宽屏允许图文和分类并列，小屏则收拢导航、调整内容顺序。我保留核心信息的优先级，让布局变化来自空间，而不是简单缩小尺寸。
| 内容层 | 宽屏中的安排 | 小屏应继续保持的规则 |
|---|---|---|
| 导航与分类 | 全局导航、搜索及侧边分类分工 | 入口可以收拢，但当前分类、返回路径和搜索能力仍须明确 |
| 活动与商品 | 活动图文并列，商品集合提供横向比较 | 图文顺序重排，关键商品信息不依赖悬停才出现 |
| 交易操作 | 商品信息与订单摘要并列 | 优先保留当前选择、金额与下一步，长摘要可以分层展开 |
我更愿意把响应式理解为一套内容规则：哪些信息先出现，哪些可以并排，哪些需要纵向展开。宽度变化之后，页面可以换一种节奏，但商品识别与主操作仍然拥有清楚的位置。
列表负责缩小范围，详情负责建立判断
商品列表 / 从图片比较进入条件筛选
我让商品图片承担第一层识别，名称、评价、价格和优惠逐级展开，筛选区则提供另一条查找路径。卡片间距和信息行数保持节奏，让丰富的商品内容也能形成整齐的列表。
商品详情 / 把选择与购买放在同一上下文
我把商品图和购买选择并置在上方，说明、使用信息和评论向下展开。图片需要足够大的展示面，规格与主按钮也需要稳定位置；我通过两侧比例和纵向间距平衡这两种需求。
我让列表先建立商品印象，再由详情展开规格与购买信息。图片、价格和主要动作在两页之间有尺度变化，但颜色、文字层级与组件细节保持联系。浏览从快速比较转为仔细阅读，视觉语言依然连贯。
购买信息的接力关系
- 发现商品通过分类、搜索与筛选收敛候选，保留当前查找条件。
- 确认选择在详情页确定规格、数量与可用收货方式。
- 整理购物车按卖家和收货条件理解每一组商品及费用。
- 安排收货填写联系人、地址或取货人，选择各组配送方案。
- 复核并提交在支付前检查最终安排，下单后看到明确的履约信息。
我用这条路径梳理组件的接力关系：商品单元从列表进入详情，再组合进购物车和订单摘要。每到一个阶段，内容有不同的重点，但名称、规格和价格之间的关系保持熟悉。
购物车，是多种履约关系的汇总
购物车 / 分清卖家、商品与收货方式
我先按 Michaels 与 Marketplace 店铺分组，再在商品行里组织取货、配送与数量选择，右侧保留金额摘要。分组标题、商品单元和汇总面板使用不同尺度，整页既能逐项阅读，也能快速找到总体信息。
在购物车里，我同时考虑商品本身和收货安排两种分组方式。商品行保留图片、规格与数量，卖家和收货信息则通过组标题与摘要展开。让局部单元稳定，再调整组合结构，是这张页面的主要设计思路。
| 组件对象 | 需要共同呈现的信息 | 我的层级处理 |
|---|---|---|
| 商品单元 | 图片、名称、规格、数量与价格 | 主要识别信息集中，补充信息保持次级 |
| 门店信息 | 门店名称、领取安排与相关商品 | 以明确的组标题建立范围 |
| 配送选项 | 方式、费用与时间说明 | 选项和说明靠近排列，选中态保持清楚 |
| 稍后购买 | 保存的商品与返回入口 | 与当前结算区分开，延续相同商品样式 |
收货信息，围绕每一组安排填写
Getting your Order / 联系信息与履约分组
我把联系人、取货和配送安排分别组织在相邻区块。组标题说明范围，表单和选项贴近相关内容，摘要保留在独立区域。不同信息量的区块共享边距和控件样式，页面因此更有整体感。
联系人、配送地址和取货人都属于“收货信息”，但在页面里承担不同角色。我把它们放进对应的信息组，让表单顺序跟随收货安排。重复使用相近的标签与控件，也让多组内容保持统一。
- 分组我用卖家与收货方式组织区域，让相关商品和说明相邻出现。
- 对齐字段标签、输入框和辅助说明保持稳定关系，长表单也能有清楚的节奏。
- 强调费用和主操作拥有更高层级，编辑入口保持可见但相对克制。
支付页，是最后一次核对承诺
Payment & Order Review / 选择支付，同时复核订单
我让支付方式与礼品卡入口先出现，再展开取货、地址和配送摘要。编辑链接采用较轻的视觉强度，主操作则保持突出。页面延续购物车里的分组语言，让最终复核看起来仍然熟悉。
我把 Review 页看作一次信息收拢：之前分散选择的商品、收货安排与支付方式，最后在同一页面里形成摘要。组标题负责划分内容，局部编辑链接提供入口，提交按钮则成为明确的视觉终点。
确认页，把交易结果交接到领取与配送
Order Confirmation / 按接下来要做的事组织结果
我把订单确认作为页面开场，再按送达、取货和配送分别组织后续信息。会员和活动内容放在更后面，既保留品牌的延续，也让本次订单成为阅读重点。
完成页的阅读节奏可以放缓一点。我让确认信息先出现，再展开取货与配送安排，后面才是继续探索的内容。它既承接交易的结束，也延续 Michaels 的品牌氛围。
视觉一致性，来自可复用的内容规则
我让红色承担主要购买动作，蓝色承接次级链接与编辑，浅灰信息面组织商品和收货内容。字体层级、商品图比例、价格位置和组间留白一起构成规则，品牌识别不需要在每一块内容里重复用力。
| 组件对象 | 我的共同规则 | 不同页面里的变化 |
|---|---|---|
| 商品信息单元 | 图片、名称、规格与价格保持明确关系 | 列表侧重比较，详情展开选择，购物车加入数量与分组 |
| 收货摘要 | 门店或地址与方式、时间相邻 | 宽屏可以并列，小屏按组纵向展开 |
| 表单与按钮 | 标签对齐、辅助文字和主次操作一致 | 根据内容长度调整宽度与排列 |
| 响应式布局 | 核心信息的优先级保持稳定 | 导航收拢、图文重排与摘要位置随空间变化 |
我的收获：把页面关系整理成可延展的规则
这次设计让我更重视“同一个组件在不同地方怎样变化”。商品卡片、价格摘要和收货分组并不是复制过去就结束了，它们需要随着页面的阅读目的调整尺度，同时保留共同的识别特征。
我希望这套规则能让后续页面延展更自然：新的活动、新的商品组合或新的屏幕宽度到来时，仍然有一套清楚的基础可以沿用。相比逐页追求相同外观，我更在意相同的信息关系能否一直保持。