合作咨询

一、全文速览图

被说任务完成页太普通。

它不就是简单的功能性界面嘛，那怎么优化？

我们今天分享一个关于任务完成页的改版案例。我们先看看原版：

我们改了一下，这是优化后的：

任务完成页突然就不简单了，其实优化思路很简单，我们先看分析。

二、分析页面问题

任务完成页不只是告知用户任务结束，更是传递奖励喜悦、引导用户继续参与的关键页面。

所以问题归为三点：

1. 顶部图标太过常规，属于功能性告知，感知偏冷静，记忆点弱。

2. 奖励信息和社交佐证的层级较弱。

3. 整体页面氛围单薄，缺少完成后的喜悦感。

分析完成后，我们就开始解决问题了。

三、优先展示核心价值（奖励）

我们将信息层级弄个排序：

1. 第一层：大标题。

2. 第二层：奖励「50 能量」。

3. 第三层：参与人数。

根据信息的特性，我们采取以下优化措施：

1. 将结果告知加入「恭喜你」情绪词，来提升用户愉悦感。

2. 用主题色块突出收益数字，提高成就感。

3. 社交从重原则，放大头像与增加头像展示数量，体现出活动热度。

这样用户对信息的识别度大大提高了。

四、添加情绪设计（IP 形象）

顶部图标太过常规，偏向系统通知，记忆点弱。所以我们用欢呼的 IP 形象传递 “恭喜” 情绪，将通知变成庆祝反馈，提升用户愉悦感。

我们再加一些小元素，丰富一下画面。

五、细节视觉增益，提升精致度

我们先看看目前界面修改的效果：

页面目前还有一些问题，特别是缺少设计细节，精致度不够。

Step1 优化按钮

目前按钮位置导致界面有割裂感，我们将其移至底部。

同时将按钮形状改为平行四边形，与上面能量值相呼应，且匹配当前主题风格。再加入闪电小图标，增强按钮的重要性。

Step2 优化背景

目前界面主视觉焦点性还不够，我们给它加上渐变色，再加上浅棋盘格，增加轻质感，不抢主体。

Step3 加上卡片质感

现在卡片缺少点通透感，我们给它加上毛玻璃质感，让卡片透出点 IP 的身体。

细化完成后我们看看最后效果：

最后我们来看看前后对比吧。

任务收尾页面容易被当成简单的 “结果通知页” 而忽略。

想要提升设计实力，可以从小小的页面改版开始，加入 IP，从细节提升精致度。

图文来源于网络，侵删。