网站 · 设计概念
电商网站
以音响商品为例，研究商品发现、详情页和购物袋摘要的界面设计，并提供选购及库存状态示例。
以下是概念设计，并非客户项目。展示内容为静态效果图，名称和数据均为虚构。
设计出发点
通过商品摄影建立视觉风格，让用户从浏览自然进入已选商品的核对环节。示例是一家虚构音响商店，不支持实际下单。
- 面向谁
- 比较音箱、确认商品选项并准备购买的消费者。
- 需要考虑的限制
- 商品款式与库存信息需要对应当前选择。概念只展示到购物袋，不包含结算、配送或支付流程。
建议的操作流程
- 01
浏览商品系列
商品网格结合图片、简短名称和价格，通过筛选条件缩小范围。
- 02
查看商品详情
详情区放大音箱图片，将款式选项安排在加入购物袋按钮附近。
- 03
检查购物袋
购物袋摘要与浏览内容并列，方便用户检查已选商品。
结算前核对商品
为什么这样设计？
统一商品展示方式
中性背景和一致的图片比例便于比较不同产品。商品外观与少量红色强调共同构成视觉风格。
呈现选择结果
购物袋为已选商品提供明确位置。实际产品应显示具体款式及数量，不能仅靠缩略图传达。
细看视觉设计
以下为建议的设计样式，均为静态示例，不是可操作功能或正式开发规范。
配色用途
商品背景
#F6F5F2
购买操作
#C8442E
文字与结构
#242424
字体与间距
信息清楚，下一步明确。
建议使用简洁的无衬线字体，突出商品名称与价格。规格说明作为次级信息，但仍需保持清晰可读。
商品卡片统一对齐，图片留有足够边距。款式控件与购买按钮放在一组，购物袋与商品介绍保持分隔。
正常流程之外的状态
购物袋为空
购物袋里还没有商品。浏览系列并添加喜欢的产品。
添加成功
已加入购物袋。继续前请确认款式和数量。
款式缺货
该款式暂时无货，请选择其他款式。
为什么要在结算前提供购物袋摘要？
购物袋让用户在继续浏览时核对已选商品及其选项。它不能替代结算环节，配送信息、最终费用和付款仍需要单独确认。
