手机端奶茶点单小程序 高保真UI设计
尺寸：750×1334px（移动端标准适配）
色值规范
- 主色： #7850EE （主题主色调）
- 辅助色： #A77AEA 、 #1F1244 （深紫）、 #0084FF （浅蓝）
- 提醒色： #FD67D0 （粉紫，用于角标、优惠、提醒文字/按钮）
风格：极简色块风、分区清晰、功能轻量化，底部固定四栏导航
底部导航（全局通用）：主页、点单、订单、个人中心
共8套高保真界面（标注布局、元素、配色、尺寸逻辑）
所有页面统一底部导航栏：高度100px，底色#FFFFFF，图标+文字组合，选中态主色#7850EE，未选中#1F1244
界面1：启动欢迎页（750×1334）
1. 背景：全屏渐变 #7850EE → #A77AEA
2. 居中区域：品牌LOGO+名称（字体大号，白色）
3. 中部：简约奶茶饮品色块插画（纯色块绘制，无复杂图案）
4. 底部：立即进入按钮（圆角矩形，底色#FD67D0，白色文字）
5. 功能：纯启动引导，无其他操作入口
6. 字体：标题40px，按钮文字28px
界面2：主页（首页，默认首页）
页面分区（从上至下）：
1. 顶部状态栏+搜索栏（高度80px）
- 背景#7850EE，左侧品牌名（白色32px），右侧搜索图标（白色）
- 下方嵌入搜索框：圆角矩形，白底浅描边，提示文字#1F1244
2. 轮播活动区（高度240px）
- 纯色块轮播海报，主色+提醒色搭配，展示新品/满减活动，活动标签用#FD67D0
3. 快捷分类入口（宫格布局，2行4列色块图标）
- 图标底色分别用辅助色#A77AEA、#0084FF，文字#1F1244
- 分类：热门饮品、果茶、奶绿、纯茶、小料、甜点、冰饮、热饮
4. 人气推荐区（标题栏+横向卡片）
- 标题文字#1F1244，右侧“更多”#0084FF
- 饮品卡片：白底色块，饮品名称、价格，价格标签#FD67D0
5. 最底部：全局四栏导航（主页/点单/订单/用户）
字体：常规正文26px，标题30px，价格28px
界面3：点单页（核心选购页）
1. 顶部导航（高度80px）：底色#7850EE，页面标题「在线点单」白色居中
2. 左侧分类栏（固定左栏，宽度160px）
- 底色#F8F8FF，分类文字#1F1244，选中分类底色#A77AEA、文字白色
- 分类列表：全部、招牌奶茶、鲜果茶、咖啡、小食、加料
3. 右侧商品列表（主体区域）
- 单品模块：白底色块分区，上为饮品图（纯色块），下为名称、简介、售价
- 「加购」按钮：小型圆角块，底色#7850EE，白色文字
- 新品/爆款角标：小三角色块，#FD67D0
4. 底部悬浮购物车（高度70px，在导航栏上方）
- 左侧购物车图标#1F1244，数量角标#FD67D0，右侧「去结算」按钮#0084FF
5. 最底部：全局导航（选中「点单」栏目）
界面4：商品详情页
1. 顶部返回栏（高度80px）：底色#7850EE，左侧返回箭头，中间商品名（白色）
2. 商品展示区（高度320px）：大尺寸纯色块饮品图，背景浅紫#A77AEA浅渐变
3. 信息区
- 商品名称（34px，#1F1244）、售价（#FD67D0 醒目展示）、简介（24px）
4. 规格选择区（色块按钮组）
- 甜度：三分糖/五分糖/全糖/无糖（选中#7850EE，未选#EEEEEE，文字#1F1244）
- 温度：冰/少冰/常温/热（同样式）
- 加料选择：多选色块标签
5. 数量加减：左右加减按钮（#A77AEA），中间数字
6. 底部操作栏（高度90px）
- 左：加入购物车（#A77AEA），右：立即购买（#7850EE）
7. 最底部：全局导航
界面5：购物车页面
1. 顶部栏（80px）：底色#7850EE，标题「我的购物车」白色居中，右侧编辑按钮
2. 购物车列表
- 单条购物项：白底分块，左侧饮品色块图，中间名称+规格，右侧数量加减
- 单品单价、小计文字#1F1244
- 无商品状态：居中空白色块+提示文字#1F1244
3. 结算汇总区（固定中下位置）
- 左侧：合计金额（金额数字#FD67D0）
- 右侧：去下单大按钮（底色#7850EE，白色文字）
4. 底部：全局导航
界面6：提交订单/结算页
1. 顶部栏（80px）：#7850EE，标题「确认订单」白色
2. 取餐信息（色块分区）
- 取餐门店：下拉选择框，底色#F5F0FF，文字#1F1244
- 取餐时间：预约时间选择，标签#0084FF
3. 订单商品清单：逐条展示已选商品、规格、单价、数量，分割线分区
4. 优惠模块
- 优惠券入口：色块条，右侧箭头，优惠标签#FD67D0
5. 费用明细：商品总价、优惠减免、实付金额（实付高亮#FD67D0）
6. 支付方式（单选色块）：微信支付/支付宝，选中态#7850EE
7. 底部提交按钮：「提交订单并支付」通栏色块，底色#7850EE
8. 最底部：全局导航
界面7：订单列表页（我的订单）
1. 顶部栏（80px）：#7850EE，标题「全部订单」白色
2. 订单分类标签（横向色块标签组）
- 全部、待取餐、已完成、已取消
- 选中标签底色#7850EE，白色文字；未选白底+#1F1244文字
3. 订单卡片列表（独立白色色块卡片，圆角分区）
- 卡片顶部：订单编号、下单时间（小字#1F1244）
- 中部：商品缩略色块图+名称
- 底部：订单状态（待取餐#FD67D0，已完成#0084FF）、实付金额
- 操作按钮：「查看详情」小型色块按钮#A77AEA
4. 空订单状态：居中简约色块+提示文案
5. 最底部：全局导航（选中「订单」栏目）
界面8：个人中心（用户页）
1. 顶部个人信息区（高度220px，背景#7850EE渐变#A77AEA）
- 居中头像（圆形纯色块）、昵称（白色34px）、会员等级标签#FD67D0
- 积分、优惠券数量展示，数字醒目#FFFFFF
2. 功能菜单区（白底，宫格+列表组合色块）
- 第一行宫格：我的优惠券、我的积分、收货地址、联系客服（图标+文字，辅助色搭配）
- 列表式菜单：订单记录、收藏饮品、设置、关于我们（每条独立分割色块，文字#1F1244）
3. 底部退出登录按钮：通栏浅色块，文字#1F1244
4. 最底部：全局导航（选中「用户」栏目）
全局规范汇总（高保真落地参考）
1. 画布尺寸：统一 750px（宽）× 1334px（高）
2. 导航栏：全局底部固定，高度100px，四栏：主页、点单、订单、用户
- 选中色：#7850EE | 未选中色：#1F1244
3. 字体规范
- 大标题：36~40px
- 页面标题/模块标题：30~32px
- 正文/商品名称：26~28px
- 辅助小字/说明：22~24px
4. 色彩使用规则
- 主色#7850EE：顶部栏、主按钮、选中状态、品牌主视觉
- 辅助色#A77AEA：次级按钮、渐变、分类选中、装饰色块
- 辅助色#1F1244：常规正文、图标、未选中文字
- 辅助色#0084FF：状态标签、更多入口、功能按钮
- 提醒色#FD67D0：价格、优惠、角标、状态提醒、重点强调
5. 视觉风格：纯色块构成，无复杂渐变、浮雕、写实图片，分区用色块分割，简洁直观。
补充原型制作提示
若使用Figma/墨刀/PS制作高保真：
1. 新建画布 750×1334px，分辨率72ppi
2. 先制作底部导航组件，全页面复用
3. 所有元素以「纯色块+圆角」为主，圆角统一 12~16px（移动端标准圆角）
4. 页面留白均匀，模块间距统一20~30px，保证类别清晰。