中国联通 toobar 流量充值管理系统 China Unicom toobar — Mobile UI/UX
面向中国联通 toobar 的移动端产品设计，聚焦流量套餐的查看、选购与管理。围绕流量主页、套餐商店、话费服务、我的与消息盒子等模块，把复杂的资费信息与业务流程，梳理为层级清晰、操作顺畅的移动端界面系统。
概览 · Overview
项目围绕流量充值与套餐管理这一核心场景展开：以流量主页为入口呈现套餐余量与资费详情，以套餐商店承接升档与订购的完整流程，并延展到话费服务、账户中心与消息通知等模块。负责核心页面的视觉设计、信息层级梳理、页面布局与组件样式，把多模块、多状态的移动端产品，收敛为统一、易读、可扩展的界面系统。
设计重点 · Focus
高密度资费信息，看得清、买得顺
电信类产品的信息密度高、状态多——资费、套餐、余量、订购与退订都需要清楚表达。处理重点是先把信息架构与核心购买流程理顺，再用一致的组件与状态设计，让用户在查看、选购与管理之间顺畅流转。
把流量、套餐、话费、账户与消息等模块，组织为清晰的底部导航与页面层级，让高密度的资费信息各归其位、易于查找。
围绕查看余量 → 选购升档 → 二次确认 → 结果反馈组织核心流程，用清晰的资费详情与确认环节，降低套餐订购的决策门槛。
统一卡片、列表、按钮与弹窗样式，覆盖订购成功、退订指引、签到有礼等多种状态页，保证不同模块在同一套视觉语言下一致。
关键判断
重点是让复杂的资费信息看得清、买得顺：用清晰的信息层级承接高密度内容，用一致的组件与状态设计贯穿购买与管理流程，让移动端产品在多模块之间保持统一的操作体验。
流量主页与套餐商店 · Core Flow
一条清晰的流量选购路径
从流量主页到套餐商店的核心流程：主页呈现套餐余量与资费详情，商店承接升档、订购、二次确认与结果反馈，形成一条清晰、低门槛的购买路径。点击查看整屏。
账户 · 服务 · 消息 · Account & More
流量之外的完整使用场景
账户中心、增值服务与消息通知：我的页面整合财富、红包、签到与设置，配合话费服务、应用市场与消息盒子，覆盖流量之外的完整使用场景。点击查看整屏。
项目沉淀 · Takeaways
一套覆盖完整场景的移动端界面
这套设计沉淀为一套覆盖完整使用场景的移动端产品界面——从流量查看、套餐选购，到账户管理与消息通知，可在多模块间保持统一的信息层级与视觉规范。实际交付：
- 流量主页与套餐详情
- 套餐商店与升档流程
- 订购 / 退订状态页
- 我的账户中心
- 签到 / 会员 / 红包等增值模块
- 话费服务与应用市场
- 消息盒子与通知
- 移动端组件与视觉规范
方法复用：这套信息架构与组件设计，适用于运营商类、充值类与会员类移动端产品，可按业务替换模块内容，快速搭建结构清晰、状态完整的界面系统。
方法资产移动端信息架构、核心购买流程与组件 / 状态设计规范，可复用于运营商、充值与会员类产品的界面设计。