从“免费试用”模块设计反思UI的设计思路

@Jenny黄静雯 ：​​​在App大版本迭代，免费试用作为小模块，交互逻辑不变，仅做视觉层优化。然而在视觉优化过程，免费试用体验问题浮出，此时免费试用设计从表层进入相深层。设计过程也引发静雯于视觉设计师职能思考，抛砖引。

章大纲：​

• 背景
• 设计后的再思考
• 竞品析，寻找普适的解决方案
• 输出新的设方案
• 小结与反思​

一. 背景​

美5.0的风格确定后，App其页面的视觉计也需要跟进，免费用的优化也由此展开。因美5.0版本改动大，工作量大，所以免费用的交互逻辑旧版本保持一致。通过状，依次是进行中、预热中、已结束，用户进入活动详情页可以进行享报名，查用名及用报告。​

△ 免费用交互逻辑

因此免费试用主视觉层面的优化，包括导航的统一，icon的调整，使之视觉轻盈。视觉的优化极完了，但原本的逻辑真的结合免费试用本身的作用与功能吗？于我们停下了一些思考。​

△ 速新视觉层面的设图

二. 设计后的再思考

首先分析免费试用的作用，因免费，所以对用户也比较的吸引力。吸引用户流，增加活跃度，给试用活动的产品多的曝光，引导用户种草。吸引的流就应当尽其用尽增加产品曝光。

分析用户来到免费试用的目的：一是看看有什么喜欢的产品在做试用活动，参加该活动；其次，果没有喜欢的产品，就看看以前的试用活动，而以前的试用活动里比吸引用户的内容便是优质试用报告。

分析完免费试用本身作用及用户目后，我们发现了两个问题：

第一，免试的tab栏分别是进行中、预热中、已结束，进入免试后默认是进行中。在极端情况，会现容较或没有容的空状态，破灭了户来免试的目的，浪了免试重要的曝光位置。已结束的案及banner图的已结束标签，降低了户的点击欲。这些细微的体验问题都会间接减户在免试的留存。

第二，经过对免试的使挖掘，沉淀在已结束页面的分优质试报告，即于产的使结果反馈，是除了试，对户较有值，同时可引导户种草的容。但目前查看试报告的路径较长：点开免试、点击已结束、点击某个、拉2屏左右的距离，点击查看试名单和报告按钮，点击试报告，进入试报告feed页，查看某条试报告。需要操作8个步骤才看到，路径较深，户在中任何一个环节都可离开免试。

​

△ 查看试用报告路径

三. 竞品分析，寻找普适的解决方案

由于有免费试用竞品较少，此选择了网易严选样品试用、京东试用、淘宝里试用、天猫美妆试用。这几个平台免费试用虽然是web端，是于美啦免费试用设计参考是相。

我们对4个平台的免试使后，得如分析：

第一，四个，网易严选品用、猫美用的用产品比较少，网易严选品用将所有的用活动放置于一个页面就没有页面冷清的受，猫美用就会觉得内容冷清。用、淘阿用的用活动多，没有上述问题。​

△ 竞品的免费用页面

第二，京东试用、淘宝阿里试用、网易严选样品试用给予了试用报告比较高的优先级。展示优质试用报告，对于电商平台的转化理论一的帮。

△ 试用报告的优先级

三，网易严选样品试用及天猫美妆试用在已结束的活动页面，提供查看报告的按钮，引导用户查看试用报告，对电平台而言，以间接提高用户转化。京东试用已结束页面比隐藏，也只显示文案「名单已」，用户难以判断内部是否有值得查看的内容。淘宝阿里试用已结束页面没有任何文案提示。

△ 已结束页面的试用报告口

​由上述竞品分析，我们出这样结论：

• 在使用产品少的极端情况下，将所有活动放置一个页面以营造出热闹的活动氛围，以比大程度避免极端状态。
• 提高优质试用报告展示优先级，3个竞品予了试用报告较高优先级，2个竞品在试用结束页引导用户查看试用报告。

四. 输出设计方案

我们把竞品分析所得到的结论应用到啦免费试用的优化：

• 将所有的用活动放置于一个页面，顺序按照进行中、预热中、往期用，去掉已结束的标签，增加查用报告的标签，引导查用报告。
• 将同样吸引力的试用报告优先级提高，置精华试用报告。

​

五. 小结与反思

​面对设计迭代的优化，视设计师除做出视面的更新，也需要从更深次的考虑产品的功能是否顺畅的现、用户的使用感受是否良。具备一定的产品思，挖掘设计优化深处的需求与视面的设计同样重要。​​​​

欢迎关注作者微信公众号：「Jenny黄静雯」