如何给老外打造高级感——出海APP的付费视觉策略

流利说设计团队流利说设计团队 2020-12-29 23:19

在UI设计中，打造高级感总会想到黑金搭配？那么国外用户是否认可呢？来看看我们出海APP的设计师是如何解决这个问题的吧!

LingoChamp 是流利说在海外英语学习市场上的重要尝试，服务于多个不同国家的用户，它包含免费的口语课、配音课以及高级的付费订阅课程。
近期我们新增了学习计划功能，将多个维度的内容进行整合，形成一个完整的学习闭环，其中高级订阅课程是学习计划的重要组成部分。这样就要求APP整体的视觉策略也要变得更加尊贵和高级，同时，也要将视觉策略与权益体验很好的结合。

改版前Lingochamp的部分页面

尊贵感=黑金？

▼

首先，我们从历史文化的层面去重新理解尊贵高级。

在第一次接触国际化产品的付费升级的设计时，初期的视觉探索中很容易犯了惯性思维所导致的设计错误，比如会不自觉地忽略掉海外用户对于付费尊贵概念的认知差异。从历史文化层面上来看，中国（包括其他亚洲部分国家）是一个拥有比较持久的皇权社会的文明古国，长久以来人们对于金色或黄色的所代表的权利和荣耀感的高级认知一直存在，而其他国家没有或很少有相关的历史，所以大部分人们没有皇权或金色崇拜。这就导致了两种截然不同的用户心智模型对产品设计的投射。下面是国内大部分产品对体现尊贵设计的一套相对成熟的做法，无论是从配色和图形标识上来看区别不大。

国内大部分的VIP功能界面为黑金配色

反观海外，个性化突出的标识图形以及丰富多变的色彩会贯穿到整个产品的设计中。

个性化图形标识

国外的vip界面更丰富多变

基于这样一个事实判断，只有视觉语言足够大胆和丰富才有可能standout，满足海外用户的需求，同时也能支持我们丰富多变的权益以及内容。于是，我们抛弃了传统的黑金搭配，把视觉的显著性作为我们首要的设计目标。与此同时，我们发现过往的等级页面中，将颜色与等级关联的视觉策略非常符合上述的设计目标。这给了我们很大的启发。于是，我们在此基础上，用同样的视觉策略去延展。

首先，我们使用了大量渐变色让整体的视觉看起来更丰富及更具冲击力。

不同的等级对应不同的颜色

其次，应用了大量的留白以及结构上的对比，这样不仅使关键内容和信息更加凸显，也让用户浏览起来更加轻松舒适。

不同维度的内容区分用了大量留白来处理

视觉策略与权益结合

▼

视觉语言定义好了，那么如何将如丰富多变的视觉策略与产品的功能权益以进行深度整合呢？
最开始，我们以常见的用户测试和订阅状态为区分点进行分类，并做了不同的引导和视觉策略：

1.未进行等级测试，未付费订阅——引导用户进行等级测试

2.已进行等级测试，未付费订阅——引导用户进行付费订阅

3.已进行等级测试，已付费订阅——展示完整功能体验及身份标识

紧接着，我们从用户的全局触点考虑，对不同的权益以及能力的用户在整体视觉上进行了显著的区分，使用不同的主题色配合星星地图的图形延展，强化英语能力等级这个概念，并在学习内容上也做了精准推送，不同等级的用户推送不同的学习内容，让用户全局沉浸在这种视觉氛围的变化与差异当中，加强自己在英语能力水平提升与变化上的感知，推动学习以及升级订阅的欲望。

未进行英语能力测试的用户

英语Lv.3用户

英语Lv.5用户

丰厚的收获

▼

丰富多变的视觉策略对研发团队也带来了非常大的挑战，整个项目节奏非常很紧凑，好在最终我们的努力也获得了相当丰厚的回报，整个App在重构上线以后不仅在商业转化上取得了显著的增长，同时在设计这个层面上也赢得了不错的用户口碑。

国际化产品的付费升级体验是一个持续摸索的理解的过程，并不是某一次的调研得出结论。尤其是在海外项目调研成本比较高的情况下,除了在历史文化这个层面上进行分析洞察以外，保持身体力行的试用了海外产品付费版对于理解这个设计命题也起到了至关重要的作用。此次版本我们只初步解决了视觉策略问题，还有更多体验有待完善。后续我们也会持续将遇到的问题和解决方法及时和大家分享探讨，敬请期待吧！