「实战」易信星币商城改版设计分析

本报告为笔者学习网易云课堂《交互设计师·微专业》课程期间的实践作业，仅供学习交流，严禁盗用。

报告共分为四大板块：改版需求分析、页面结构分析、业务流程设计、交互页面设计。通过可视化的表现，将如何对一个已有产品进行改版设计的思考逻辑直接呈现出来。

---

01 改版需求分析

易信是网易与电信公司合作开发的一款手机聊天软件，特有高清语音、免费短信、电话留言等通讯功能。结合【晒一晒】、【聊呗】、【偶遇】等功能，主打社交生活，同时利用电商，进一步提高用户粘性与活跃度。

这里将对星币商城的改版需求进行如下分析：

1.01 业务需求分析

业务需求：

• 对星币商城进行改版设计

业务目的：

• 提高用户在商城的活跃度，进而提高各类商品的购买转化率

业务目标：

• 有更多用户在星币商城下单购物

1.02 用户需求分析

用户需求：

• 获取更多星币
• 选择想要的商品购买或兑换
• 参与更多优惠活动

目标用户：

• 王杰，易信的忠实用户，经常使用易信打电话，需要星币兑换更多通话时长。喜欢参与星币商城的优惠活动，赢取奖励。

使用场景：

• 用易信给好友打完电话后，发现通话时长只剩下几分钟了。于是打开星币商城，看看能不能用星币兑换更多时长。

用户体验目标：

• 能够快速赚到更多的星币。
• 更便捷高效的找到需要的商品，并顺利下单购买。
• 快速查看订单，掌握物流信息。
• 更方便的了解优惠活动信息。

02 页面结构分析

根据需求分析，对商城可以进行如下页面结构的调整：

2.01 首页

星币商城-首页

• 做任务赚星币可以促使用户每天到商城，提高用户活跃度，所以可以将赚星币的优先级提高，重点展示。同时告知用户自己已经拥有多少星币，让用户一眼就能了解自己的星币情况。

• 我的战利品即商城的订单信息，是电商系统重要的环节之一，必不可少。它与赚星币一样，属于用户的特有信息，需要重点展示。

• 推荐活动与首页的其他活动专题属于同类，可以合并起来，一起展示，这样让用户立马就能找到所有的优惠活动。

• 目前商城的商品分类比较杂乱，大致有电话短信类、易信周边类、联盟推广类。按照用户等级，还有特权好礼类。需要将这些商品按照类别重新排列，让用户快速了解商品类目，便捷的找到自己想要的商品。

根据以上分析，调整后的页面信息架构如下所示：

首页信息架构

2.02 商品详情页

星币商城-商品详情页

• 用户进入商品详情页后，最想要了解的信息有商品属性（图片、规格）、价格、详细介绍、使用规则等，所以详情页需要重点突出这些内容，并让用户便捷的查看。

• 为了让用户直观的了解商品情况，原详情页面的图片区域占据大半屏，以至于其他信息无法在首屏及时展现，需要将它们重新调整。可增加用户评价模块，让其他用户对该商品有更直观的了解。

• 电话短信类商品图片的留白过多，使整个页面看起来太过空旷与浪费，需要从视觉设计层面进行图片调整。

• 某些特殊产品限购一件，且不需要选择规格，系统可以自动判断，直接跳转到确认订单页，以缩短购买流程，提高用户体验。

根据以上分析，调整后的页面信息架构如下所示：

商品详情页信息架构

2.03 确认订单页

星币商城-确认订单页

• 确认订单页的信息较少，页面布局较为空旷，使整个页面感觉过于单调，可以突破常规设计方法，将订单中的重要信息更加突出展示，不仅能让用户快速确认信息，也能让整个页面看上去清晰而饱满。

根据以上分析，调整后的页面信息架构如下所示：

确认订单页信息架构

2.04 购买成功页

星币商城-购买成功页

• 当用户确认支付后，系统自动扣除星币，并提示购买成功。此时用户还剩多少星币？还剩多少时长？他是否还想继续浏览？原购买成功页并没有提供此类信息，只是为用户提供了两种不同方式的分享入口，用户场景的完整性还需优化。

根据以上分析，调整后的页面信息架构如下所示：

购买成功页信息架构

2.05 订单详情页

星币商城-订单详情页

• 当用户查看订单详情时，是希望了解这个订单基本状态与商品信息及使用有效期，但原订单详情页突出了查看时长的入口，导致其他重要信息弱化，增加了用户寻找信息的难度。

根据以上分析，调整后的页面信息架构如下所示：

订单详情页信息架构

03 业务流程设计

综上可得，新版星币商城的业务流程可调整为下图所示：

新版星币商城业务流程

04 交互页面设计

经过一系列的分析，最后形成对星币商城首页及购买流程改版的交互设计文档，部分页面如下：

星币商城-购买电话时长流程.png

以上。感谢阅读！