优惠券任务领取H5-小程序设计

金融保险案例ID：231486

设计师-黄海燕

8 年经验· 云采链（广州）信息科技有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

视觉风格定位设计：结合优惠券任务领取场景 “incentivizing、便捷、清晰引导” 的核心属性，确定视觉关键词（如活力吸睛、轻量化、直观易懂）。主色调选用高饱和度的橙色（传递优惠、福利感）与黄色（增强活力与紧迫感），搭配白色作为背景基底，辅助色采用绿色（表示任务完成、可领取）和灰色（用于未完成任务、失效状态），强化任务进度与优惠券状态的区分；字体选择醒目易读的无衬线字体（如思源黑体、Montserrat），优惠金额与任务标题采用加粗字重突出重点，说明文字保持中等字号确保可读性，明确字体层级（页面标题、优惠券面额、任务描述、规则说明）；图标系统采用面性与线性结合的风格，线条简洁有力，涵盖任务类型（签到、分享、消费、评价）、优惠券状态（待领取、已领取、已使用、已过期）、操作指引（箭头、勾选、倒计时）等，通过视觉符号快速传递任务与优惠信息。页面布局与元素设计：基于核心流程（任务列表页、任务详情页、优惠券领取页、我的优惠券页）设计布局。任务列表页采用 “顶部 Banner + 卡片式任务区” 布局，Banner 展示核心优惠活动主题（如 “每日任务赢 50 元券”），任务卡片按 “进行中 / 未开始 / 已完成” 分组，每张卡片包含任务图标、标题（如 “分享好友得满减券”）、进度条（显示完成比例）、奖励预览（优惠券缩略图 + 面额）及 “去完成” 按钮；任务详情页采用 “任务说明 + 操作区 + 奖励预览” 结构，顶部为任务标题与进度提示，中部用图文结合方式拆解任务步骤（如 “1. 点击分享→2. 好友打开链接→3. 完成任务”），底部固定 “立即参与” 按钮与奖励优惠券大图；优惠券领取页聚焦 “领取动作”，采用居中布局，核心区域展示优惠券全貌（含面额、使用条件、有效期），下方突出 “立即领取” 按钮，底部附加简短使用规则；我的优惠券页采用列表式布局，按 “可使用 / 已过期 / 已使用” 分标签页，每张优惠券卡片包含品牌 Logo、面额、满减条件、有效期及 “去使用”/“已失效” 状态标识，支持搜索与筛选功能。