余时行最近接了个练手项目，要从零做一个购物界面。网上模板虽多，但真正从需求到落地的完整流程，反倒没人系统讲清楚。这篇就记录一下我做购物页面的完整思路和实操过程，从信息架构到视觉细节，从静态页面到前后端交互，适合刚入门前端、或者想自己做点东西练手的同学参考。
1. 内容整体设计与思路拆解
1.1 先搞清楚购物界面到底在解决什么问题
很多人拿到“购物界面”这个需求，第一反应就是打开PS或者直接抄一个模板，结果做出来东西看着挺花哨，但真正用起来浑身别扭。我习惯先问自己：这个界面要帮用户完成什么任务？
购物界面本质上是三个动作的集合：浏览商品、了解商品、完成下单。所有设计都要围绕这三个动作展开。比如首页的轮播图、分类导航，目的是让用户快速找到东西；商品卡片的信息层级，决定用户能不能在3秒内判断“这东西适不适合我”；购物车和结算按钮的位置，直接影响转化率。
我做这个项目时，明确了两类用户：一类是“有明确目标”的，进页面直接搜或点分类；另一类是“随便逛逛”的，需要靠推荐、爆款列表留住他们。所有布局和交互都是围绕这两类行为设计的。
1.2 方案选型：为什么不自研全部组件
动手之前先选技术方案。现在做购物界面无非几条路：纯HTML+CSS+JS静态页面、用前端框架（Vue/React）+组件库、或者直接用现成的商城系统改。
消费级方案选择，要先看目标是“学习”还是“上线”。这次项目定位是个人练手+可演示，我选择了原生HTML/CSS/JavaScript + 少量localStorage。原因有三个：
- 不依赖构建工具，双击index.html就能跑，部署到任意静态空间都行。
- 把购物车数据存浏览器本地，不用写后端，也能完整演示加购→结算流程。
- 代码完全自己控制，方便在博文里把每个细节讲透。
注意：如果目标是做一个可落地的电商项目，还是推荐React/Vue加组件库，效率高得多。但想搞懂购物界面底层的交互逻辑，原生实现一遍是提速最快的路径。
1.3 信息架构设计：导航、商品、购物车三者的关系
购物界面的信息架构，我见过很多新手搞砸——导航恨不得列20个分类，首页塞满各种模块，购物车入口藏得极深。真正合理的结构是“少而清晰”。
我最终定的结构是这样：
- 顶部：logo + 搜索框 + 购物车入口（带角标数量）
- 导航栏：一级分类控制在6个以内
- 主体：轮播图、分类入口（金刚区）、商品推荐列表
- 底部：简单版权信息
购物车单独做成侧滑抽屉，而不是独立页面，这样用户在商品列表页就能快速看到已选商品，减少跳转次数。这个设计在移动端尤其重要——每多一次跳转，就多一次流失。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心细节解析与实操要点
2.1 商品卡片的设计：图片、价格、标题的层级怎么排
商品卡片是整个购物界面的核心单元，它的好坏直接决定页面美观度和转化率。我在设计卡片时说几个关键点：
图片占比最大，通常是正方形或4:3，这是电商共识——用户先用图像判断，再用文字确认。价格要突出，我用了加粗的红色，和标题的深灰色形成对比。标题限制两行，超出用省略号，避免卡片高度参差不齐。
实现上，图片我用object-fit: cover保证裁剪比例统一。价格用flex左侧排列，促销标签（如“限时折扣”）用绝对定位放在图片左上角。加入购物车按钮我默认隐藏，鼠标悬停才显示，这样卡片整体干净，又不影响交互效率。
实操心得：隐藏按钮的方案在触屏设备上不友好，移动端一定要常态显示按钮，否则用户根本不知道能点。我这次做的是响应式，所以在小屏用媒体查询强制按钮可视。
2.2 购物车交互：数量加减、删除、总价实时计算
购物车是最容易出逻辑bug的地方。数量加减、删除商品、总价计算、空状态提示，每一环都要做边界处理。
我的购物车数据用数组存对象，每个商品包含id、name、price、image、count。渲染时遍历数组生成DOM，每次交互后调用同一个renderCart()函数，避免逻辑分散。
数量加减有两个细节要特别注意：
- 最小值为1，再减就是删除确认，而不是变成0或者负数；
- 库存上限用
max属性控制，超过就禁用按钮并给提示。
总价计算我统一用reduce，遍历购物车累加price * count，保留两位小数。删除商品时用filter排除掉对应id。每次更新完都调用saveCart()写入localStorage，刷新页面数据不丢。