SpeaKing

「流利说王者」作为流利说举办的全民性英语比赛。覆盖了小学、初中、高中、大学、企业等全年龄层的用户,低门槛的参赛条件鼓励每个人勇敢开口,大胆 Show 出自己的英语才艺。

在本次的项目中,设计部的任务是建立一套有识别性的品牌视觉,并提供轻松有趣的比赛体验,使其可以被各个年龄层的受众所接受,且具有后续活动延展的可能性。期望通过这次比赛活动触及更多的用户和企业伙伴,提升流利说的品牌形象。

Logo

「流利说王者」的 LOGO 设计是整个项目设计环节中关键的第一步,也是确定整体视觉方向的基础。考虑到这是流利说首次大型的英语比赛,因此为了达到快速传播信息降低认知的成本,LOGO 设计采用了以文字图形为主、标志图形为辅的方式。其好处在于对受众来说更能直观快速得从文字图形中了解到明确的信息(因此这种 LOGO 展现方式多用于综艺节目、活动比赛等)。

在与项目组的同事讨论完后提取了一些具象的关键词作为 LOGO 的设计思路。包括皇冠、话筒、对话框、嘴巴、语音、舞台、达人、字母、奖杯、手势等。

在 LOGO 视觉表现的方向上,我们尝试了从简洁递进到复杂的三种风格方向来进行比较。每种方向采用的都是将文字元素与最重要的几个关键词来进行结合的思路。鉴于比赛全年龄层的属性,相比于更偏向成人化视觉表现的后两种方案,第一种方案简洁直观,更容易为全年龄层的受众所接受,且简洁的图形也更利于后续活动的延展。

文字图形部分,融合了对话框和皇冠的元素,诠释了英语达人秀比赛开口说的主题。通过连接「流」「利」2 字的比划,希望借此传达出「顺畅灵活」说英语的感觉。「倾斜」的比划都使用了 45 度的倾角增加了统一性和形式感,「倾斜」比划的整体走势是从左下角到右上角的上升趋势。所有比划的的边角都做了「圆角」处理,让文字图形整体更加圆润自然。标志图形部分,再次重复使用了对话框和皇冠来进一步加深印象,其中的皇冠是文字图形中皇冠去掉三个圆的简化版。

最终的 LOGO 效果和设定:

KV

「流利说王者」的主 KV 的设计方向是想传达出这是一个任何人都可以来参加的全民性的英语比赛。希望受众第一眼看到的感受是轻松活泼的,减少比赛带来的心理压力。为此我们用卡通线框画风的人物和场景作为画面的主体。人物上使用了男女青少 4 个形象代表了各年龄层,通过动作和神态传达出积极的感受。场景上我们建立了一套由「盒子」拼成的背景图形,每个「盒子」中间是活动的图形 LOGO,「盒子」代表了房间的含义,象征每个参与活动的个人。

主体部分的「盒子」用装饰元素更具象化出房间的概念,不同的元素表达出不同个性喜好的人物。也切合了比赛英语达人秀的主题,鼓励表现出个性化的你,在复赛阶段还会比拼参赛者英文诗歌朗诵、歌曲等才艺。

Visual Setting

由于是跨部门合作的项目,且涉及线上线下多种场景。因此为项目建立一份大家都可以参考并使用的基础视觉设定是很有必要的,保证项目整体视觉风格的统一性。

COLOR

TYPO

SHAPE

「盒子」作为构成 KV 结构的重要部分,在涉及到 KV 相关的延展的设计中,我们重复使用了统一倾角的元素来构成画面的层级或空间关系,同时也增加了画面整体的统一性。

CHARACTER

在项目最初的讨论阶段,我们就打算在比赛的小程序中内嵌一个换装小游戏,这个小游戏的逻辑基本参照了 17 年草莓音乐季的换装 H5,用户可以在参加完比赛后制作属于自己的一个参赛形象。目的是为了增加比赛的趣味性,激发用户的转发与分享。

在确定了卡通线框的画风后,我们设定了男青年、女青年、小男孩、小女孩 4 个基础人物造型。在人物的设定上为了增加人物的识别性和差异化,有意了做了一个大圆脸、看起来没脖子、溜肩的圆润造型,希望这种「矮壮」的画风能带给用户「蠢萌」的感受。

设定好的卡通形象可以很方便快速运用到各种物料中,例如下面与合作企业的预热海报。

UI

「流利说王者」线上比赛的载体依托于微信小程序,鉴于用户的多年龄层分布,我们在 UI 的大框架上遵循了已经有共同认知和使用习惯的微信小程序 guidelines。从交互到视觉都尽可能简化多余信息,无论是小学生还是老年人都可以无障碍地顺利走完整个比赛流程。

在界面的控件上我们统一使用了圆角来减少一些纯列表界面造成的框架感。希望在整个流程中给到用户的是轻松的体验。

我们还为成人组的「名人名言」口语题设计了一套名人配图,在照片的基础上再绘制,使其与活动的整体画风保持统一。

在这个项目中,设计工作量的大头是用户完成比赛后的换装小游戏,我们以 KV 设定的卡通人物为基础,按照「流利说王者」比赛的参赛用户组别,将小学、初中组别归为小孩的身体造型;将高中、大学、成人组归位为大人的身体造型。

相比于去年的草莓音乐节的换装游戏,为了简化整个小程序的流程,我们把原本更适合多个页面来操作的路径压缩到只用 1 个页面来完成,因此在页面布局的排版上着实花了一番功夫。为了保证用户有足够的选择空间来展示个性化的自己,我们提供了从发型、上装、下装、鞋子、表情、配饰、背景 7 个分类,每个分类下都有约 30 个选项供搭配选择。

SpeaKing from Zijun Wang on Vimeo.

用户所选择造型将会生成一张对应的分享海报,而占海报背景大版面的背景是分享图在朋友圈是否吸睛的重要因素,因此背景的处理上我们设定了 9 个主题,对应不同的颜色造型。且用户对背景主题的选择会与生成海报上的文案挂钩。无论是蠢萌的造型还是搞笑的梗,如果能 GET 到让用户去分享的点,那我们的目的就达到了。

除了分享海报以外,在用户生成的参赛造型还会用在「我的参赛作品」、「排行榜」中。在排榜的设计中,除了突出重要的分数信息外,我们还给予了足够大尺寸的用户头像来展现每个人的造型。用户在浏览排行榜看到的不只是冷冰冰的数据,还能通过头像感受到每个参赛者有趣的「灵魂」。当然我们也不会忘记给 1、2、3 名带上金、银、铜的皇冠来表示「王者」的象征。

我们希望通过个性化的设计和品牌传播,进一步拉近与用户之间的距离,提升在企业伙伴及目标用户群体心中的品牌形象。这次的项目历时 3 个月,其中多少会有一些的坑点和遗憾,在后续或许会举办更多届的「流利说王者」英语达人秀,未来我们将在现有品牌视觉的基础上继续优化,填坑补遗。