美特好
MEITEHAO
日常购物，顺手完成。
生活零售
正在呈现画面项目介绍
ABOUT THE PROJECT日常购物，顺手完成。
美特好是一款面向日常采购的零售 App。本次基于已有界面改版，沿选店、选品与结算的购物路径，重新组织商品、优惠和订单信息，统一页面布局与操作样式。
- 产品类型
- 生活零售
- 设计类型
- 已有界面改版
- 主要场景
- 选店 / 购物 / 支付
设计流程
DESIGN PROCESS基于已有界面，沿着选店、选品与结算的顺序，调整购物信息的呈现和操作衔接。
- 01
梳理现有结构
以已有的门店、商品分类、购物车与个人账户页面为基础，重新整理购物路径的内容层级。
结构规划 - 02
统一商品规则
延续红色品牌识别，统一商品图片、价格、优惠和购物操作的样式。
视觉规范 - 03
组织购买信息
围绕商品、券包与订单，安排购买前需要比较和确认的信息。
界面设计 - 04
检查结算衔接
连接门店选择、购物车与支付结果，让结算前后的位置和状态清楚。
交互细节
设计规范
VISUAL SYSTEM红色突出购物操作与优惠信息，商品图片和价格保持直接易读。
主要强调色Red
#E9362F选中状态 / 主要操作 / 重点信息
深色基础Charcoal
#101113内容背景 / 场景衬托
浅色基础White
#FFFFFF主要文字 / 深色背景中的内容
辅助信息Gray
#8C8C8C说明文字 / 次要状态
布局规范
LAYOUT & SPACING依据真实页面组织照片、内容、入口和操作，标注相应的布局关系。
门店与搜索位于顶部，促销横幅和两排购物分类依次展开；下方以三列方形商品图呈现推荐商品，名称、优惠、价格和加购按钮组成完整卡片，列表在底部导航上方继续滚动。
12pt
促销横幅商品图片
10pt
优惠标签加购按钮
12pt10pt
- 左右边距
- 16 pt
- 三列间距
- 10 pt
- 分组间距
- 12 pt
核心界面
MAIN SCREENS从主要使用场景开始，查看产品的核心界面。点击图片可以查看完整大图。
更多设计细节
MORE SCREENS沿着使用路径，继续查看内容、操作与不同状态。
