源根商城APP首页界面展示
APP设计 · 电商体验

源根商城APP页面设计

从首页浏览到下单支付的全链路电商APP设计,涵盖商品展示、分类导航、积分体系、消息中心等核心模块,打造流畅的移动购物体验。

我的职责
UI 设计师 独立完成全链路设计
技术栈
Figma · Sketch iOS + Android 双端适配
项目周期
6 周 用户调研 → 视觉交付
项目类型
APP · 电商设计 移动端全页面设计
源根商城商品分类列表页
01 · 项目背景

以用户体验为核心的电商设计

源根商城作为一款综合型电商平台,需要在视觉呈现与功能实用性之间取得平衡。设计目标是为用户提供高效的商品发现路径与流畅的购物决策体验。

从首页瀑布流推荐到分类导航、再到商品详情与购物车结算,每个环节都需保持视觉一致性,同时确保关键转化节点上的操作顺畅无阻。

  • 清晰的信息层级与商品展示策略
  • 多维度分类导航体系设计
  • 从浏览到结算的全流程体验闭环
源根商城商品详情页设计
02 · 核心浏览体验

沉浸式商品发现 · 精准决策引导

首页采用上下分区布局,顶部 Banner 轮播承载营销活动,中部快捷入口引导高频场景,下方瀑布流推荐精准匹配用户兴趣,让"逛"的体验自然流畅。

商品详情页聚焦于购买决策关键信息——多角度图片轮播、规格选择、价格对比、用户评价——以清晰的视觉权重引导用户完成从兴趣到下单的转化。

  • 瀑布流式商品推荐,无限浏览体验
  • 多层级商品分类与筛选体系
  • 商品详情信息层级优化,减少决策负担
购物车商品失效状态页面
03 · 交易与会员体系

购物车管理 · 登录与积分联动

购物车设计考虑了完整的商品管理场景——正常商品编辑、失效商品标记与一键清除、批量选择与结算——让用户在结账前对商品状态一目了然。

登录流程采用简洁的手机号验证方式,与会员积分体系无缝衔接。积分明细页清晰记录每一笔积分的来源与去向,领币活动与签到任务引导用户持续互动。

  • 购物车失效商品清晰标记与快速处理
  • 手机号一键登录,降低注册门槛
  • 积分明细追踪,透明化的权益体系
04 · 界面一览

全场景覆盖 · 移动端多页面展示

签到页面
每日签到
领币活动页面
领币活动
积分明细页面
积分明细
个人中心页面
个人中心
消息中心页面
消息中心
活动通知详情页面
活动通知详情
05 · 设计流程

从需求到交付

STEP 01
用户调研
分析电商用户购物行为路径,梳理核心场景与关键转化节点
STEP 02
信息架构
构建首页浏览→分类→详情→购物车的购物主线,串联积分与会员支线
STEP 03
视觉设计
定义品牌色系与组件规范,设计全页面视觉稿并保持跨页面的一致性
STEP 04
交付标注
输出设计标注稿与切图资源,配合开发完成视觉还原验收
06 · 项目成果

设计驱动价值

30+
交付页面数量
iOS+
双平台适配
100%
组件复用率
返回作品集首页