解构与重塑——微视综艺设计盘点

导语

如果你是个综艺迷，或许你会发现在最近半年里，微视开始在一些综艺节目持续地曝光，我们为了在您面前露个脸，也真是煞费苦心。当然，为了能和节目的观众再进行深入的互动，让他们来到微视里“发现更有趣”，我们还需要一些和综艺合作的运营活动。

本文将会在设计层面围绕微视的综艺运营类活动进行总结，主要分享的案例是《快乐哆唻咪》和《吐槽大会》，来微视，和你一起快乐·吐槽。

微视的运营分类

微视在最近的半年里，推出许多运营活动，这些运营活动大致可以分为3类：基础运营类、明星合作类和综艺合作类。

基础运营类是微视自主策划的运营活动，比如《杠上开花》、《微视高校短视频大赛》等等。

明星合作类是微视与明星合作的主题运营活动，让明星参与到微视策划的主题活动中，通过明星的号召力来吸引关注和流量。

综艺合作类则是通过延展微视冠名综艺节目的主题，让观众到微视里进行互动的运营活动。

以上这些分类只是微视众多运营活动的冰山一角。对于设计师来说，参与不同类型的运营活动设计，可以开拓自己的设计思路，并从中总结一些方法。

我最近一段时间主要沉浸在微视综艺合作类的设计里，思考了一些思路和方法，和大家分享一下。

微视合作综艺

最近这段时间，微视冠名了两档综艺节目，分别是湖南卫视的《快乐哆唻咪》和腾讯视频的《吐槽大会》，随着节目播出的深入，也获得了不错的效果。

先简单介绍一下这两档综艺：

《快乐哆唻咪》是由腾讯微视冠名，在湖南卫视播出的，中国首档城市魅力创拍节目。大张伟、杨迪、刘维与短视频创作达人分别组成合拍搭档，前往全国十二座特色城市开启“潮拍”模式，记录普通人的烟火气和幸福感。

《快乐哆唻咪》致力于打造不同的城市标签。从探索再到短视频的热爱呈现，连接着短视频与城市、城市与城市、城市与人。

《吐槽大会》是时下年轻人中颇具影响力的喜剧脱口秀节目，除具备娱乐属性外，更注重传播社会正能量。“吐槽是一种重要的沟通方式，吐槽，是和生活、和自己的一种和解”，节目旨在让观众开始使用并乐于通过吐槽的方式与朋友进行沟通，“吐槽”逐步成为年轻化的社交货币，一种更加和谐轻松的语言环境正在形成。

以上是这两档综艺节目的官宣简介。

可以看出，节目的标签分别是“潮拍”和“年轻化”，这也符合了微视的产品定位。同时微视也策划了一系列与节目相关的运营活动，吸引节目的观众到微视进行互动，同时也让微视的用户获得更多与节目相关的互动玩法。

这些活动包括了《快乐哆唻咪》创作人召集、创作人投票等、《吐槽大会》吐槽接梗王等。

设计挑战

前面铺垫了那么多，其实也是为了说明，综艺虽好，设计不易。

为何不易？因为综艺节目本身会有自己的视觉体系，而微视也有自己的品牌语言，在同一个运营活动设计中，这二者如何平衡？

平衡的关键点在于解构和重塑。

解构就是拆解分析提取各自视觉体系里的关键要素，重塑则是将这些要素重新组合。

综艺节目的视觉体系，包括了整体的设计风格、色彩、图形、质感等等的元素，会应用在它们的主题LOGO、官宣海报、节目影视包装等场景。

微视也有自己的品牌视觉体系，明确了色彩、图形、字体等层面的风格和规范。

解构和重塑，首先要找到视觉关系里的关键要素。在平面视觉构成里，色、字、形、质、构是基础的构成要素。

那么解构重塑的方法就是从“字色形质构”进行拆解分析，找准比例和场景，进行组合重塑。

色、字、形、质、构，从字面含义就可以理解为：色彩、字体、图形、质感和构图。它们也将根据不同的运营需求，应用在不同的场景上。

微视 X《快乐哆唻咪》运营设计

找到了方法，那么看下怎么把它们应用起来。

首先讲一讲《快乐哆唻咪》的运营案例，我会通过这个案例详细阐述通过“色、字、形、质、构”进行解构和重塑的设计思路和方法。

《快乐哆唻咪》的运营会按照节目播出阶段，上线相对应的活动，如节目前期的“创作人招募”、节目中期的“创作人投票”及节目后期的“创作人返场投票”等，主要的运营活动形式会有H5、城市海报、运营Banner等。

色彩

首先给这些运营活动确定统一完整的色调。

用解构法提取分别来自于哆唻咪的主视觉色和微视的品牌色。

可以看出，由于《快乐哆唻咪》是微视冠名定制的节目，在设计之初，色调使用上是相对靠近微视的品牌色的，但又不尽相同。

那么得到这两组色值后如何应用？

先确定使用场景。

梳理色彩的应用场景，再根据比例分拆到对应的场景中。

在创作人召集的H5活动中，版头主题部分采用了哆唻咪的主题LOGO，而它原本的主题背景是城市与道路，这里可以巧妙的做一个道路延伸，使之成为底部内容信息的背景。

确定好整个版面的设计后，就可以把刚才解构出来的色值重塑到页面中，根据节目和微视两组色值做了两版配色。

如下图所示，以微视色为主的方案，整体色调偏深色，微视的感觉会比较强烈，但体现不出快乐哆唻咪这个主题的律动感，整体氛围和节目的气氛相去甚远。

以节目色为主的方案，延续了整个节目影视包装的氛围，色彩感觉轻松愉悦，符合快乐哆唻咪所要传递的情感，观众在H5互动过程中也能保持和节目视觉的一致性。同时在按钮、选项等处加入微视的色彩，也保证了微视色在活动中的占比。

通过方案的对比，在色彩的维度，以节目色为主，微视色为辅的设计方案会更有综艺感，同时也让微视的设计有更多的变化。

节目色为主、微视色为辅的配色比例在其他页面，如城市海报页、选择主题页等页面的应用效果。

字体

字体维度的解构重塑会相对简单一些。

综艺节目里没有强调字体的使用，可以根据主题LOGO的风格来选取搭配的字体。哆唻咪主题LOGO的字体笔画相对硬朗，这和微视品牌应用字体<汉仪雅酷黑>硬朗的字体风格是相匹配的。因此选用<汉仪雅酷黑>作为特殊字体应用在标题和选项中。

选定了字体，字体的效果可以用解构重塑法根据对应的场景来进行设计。

标题文字，属于信息的第一层级，和主题LOGO在同一层级。因此从主题LOGO中提取出扫光和立体描边效果来对其进行设计，与整体氛围相呼应。

选项里的城市信息文字，属于标题之下的第二层级的信息。选项文字注重阅读清晰性和操作感，这里从微视品牌中分析提取出空间交错字体效果来设计，既加深了微视的品牌感又让字体更加突出。

图形

图形是在整个设计中，对微视品牌印记强化的关键元素。

前面的色彩选取以节目色为主，那么微视更强烈的品牌感则需要靠图形来凸显，这也是两种视觉体系平衡的点。

微视的基础图形，是微视LOGO的图形，它可以延展出面形、线形、交错、三维等图形形态。

将延展出来的不同的图形形态应用在不同的场景中。

分享城市海报的页面，是以浮层的形式出现的。

城市海报的设计，把城市的特色景观事物，嵌套在微视的图形里，以图形作为海报的视觉中心，并做了空间破形效果，强调了微视图形，同时也加强了海报的形式感。

在H5的主页面设计中，微视图形以更多的形式和页面巧妙的融合。让用户对这个图形的印象不断加深。

质感

通过解构重塑法去提取两边的质感。

质感总的来说不会大面积的使用，信息阅读始终还是会保持在一个相对扁平的视觉框架下以保证其阅读性。因此质感的应用会在一些需要强调的效果，或者相对独立的场景，比如浮层内的信息。

微视品牌里没有定义质感的使用，因此选择从哆唻咪的主题LOGO中提取到图形的立体质感，前面在文字的应用时也阐述过，为了突出标题，也在文字上加了立体效果。

按钮作为浮动在信息上的控件，加上立体效果能够增加层次感。在选择主题的浮层页，标题、按钮和主题选项为了保持一致的质感，主题选项也采用了立体的设计效果，同时也增强主题选项的操作感。

构图

和综艺节目合作，除了需要设计和观众用户互动的H5，同时也会有Banner、闪屏等运营宣传的设计。节目的视觉体系中会包括一些宣传的材料，我们则需要用在原视觉的基础上，根据不同的投放渠道进行设计，这时候就需要通过构图去进行设计调整。

构图一般需要处理的就是主题LOGO、标题和人物之间的关系。

这是《快乐哆唻咪》官宣的主题海报。它的篇幅比较大，人物比较多。采用的是居中构图。

在微视的宣传渠道中，尺寸相对会小很多，留给设计的篇幅并不大，但主题LOGO、标题和人物是必不可少的元素，因此这里面就要对元素有所取舍。

通过解构和重塑，我们在人物上进行了取舍，只保留了主咖人物。并通过整体构图，去适应不同渠道的尺寸，保证整体效果和信息准确传达。

下面就是我们在不同推广渠道的构图方式。

《快乐哆唻咪》的一整套综艺运营设计就是解构和重塑的方法，从“色、字、形、质、构”的这些点去解构分析，再到相对应的场景去组合重塑，平衡了综艺视觉体系与微视品牌体系之间的关系，让整个设计兼顾节目的氛围又体现了微视的品牌印记。

这套规则方法，我希望它是行之有效并且可以复用的，因此我会在下一个案例《吐槽大会》的综艺运营设计中进行验证。

微视 X《吐槽大会》运营设计

微视根据《吐槽大会》的节目特性，策划了一个《吐槽接梗王》的运营活动，由嘉宾发起一段吐槽视频，让用户通过微视拍摄一段接梗视频完成挑战，每期会评选出一位最佳段子手获得“吐槽接梗王”的称号。

《吐槽接梗王》的运营活动也会包括H5、Banner、闪屏等。

根据原综艺的主题设计，采用解构和重塑的设计方法，在“色、字、形、质、构”相对应的场景中进行应用。

色彩

色彩的维度，用同样的方法，分别提取《吐槽大会》和微视的视觉主色。

和哆唻咪不同的是，《吐槽大会》的主色和微视的主色差别比较大。

把两套色值都应用到相对应的场景中，以及设定它们的配色比例。

在哆唻咪的案例中，我的方法是：以节目色为主，微视色为辅的设计方法。

从以下的两个配色方案对比中可以看出，以节目色为主，微视色为辅的设计方案在节目氛围、视觉一致性上，比微视主色为主的方案更胜一筹，变化也更多样。

字体

《吐槽接梗王》因为是单一主题活动，不像哆唻咪那样在一个H5页面有不同的主题，需要不同的标题来进行划分。因此《吐槽接梗王》把微视的品牌应用字体直接用作主题文字。

主题文字的设计同时也用上了《吐槽大会》主视觉的配色和金属质感，以及还加了微视字体规范中的空间交错效果，让主题文字兼有节目和微视的两种特征。

图形 X 质感

图形和质感会放在一起分析。它们在这个案例里是应用在同一个场景上的，分别是H5的主题设计和客户端的挂件设计。

主题和挂件的设计采用的是同样的“图形+人物+文字+质感”的结构。

图形衬托了整个主题设计，加上微视品牌应用文字配合节目的金属质感，让整个主题相得益彰。

以下是形和质在应用到主题和挂件后，在页面中的效果。

构图

运营活动的配套宣传设计，在不同渠道的发布，依然需要构图去进行调整，处理好主题、标题和人物的关系。

这是《吐槽大会》的主海报视觉。

在吐槽接梗王的运营活动宣传中，依然会采用节目的主咖人物作为主体进行设计，再搭配原视觉的其他元素，根据不同的推广渠道，进行不同的构图。

《吐槽大会》吐槽接梗王这个运营活动是完全遵循《快乐哆唻咪》通过“色、字、形、质、构”解构与重塑的设计方法，进行综艺视觉与微视视觉的平衡设计，最终的效果也完全符合我们和节目组的预期，减少了和节目组在设计环节上的反复沟通。

结语

和综艺节目的合作让微视的品牌获得了极大的曝光。综艺合作类的运营活动，也让节目观众和微视能够进行更深入的互动，产生和发现更多有趣的短视频。

在这个过程中，保持综艺的娱乐氛围和微视的品牌印象是设计师的挑战也是用户体验的关键，我们通过两个案例去推导和验证两套视觉体系解构和重塑的设计方法，接下来也将通过更多的案例去验证，完善方法，呈现最好的体验效果，让用户开心看综艺，快乐刷微视。

本文由 腾讯高级视觉设计师@Klose 原创发布于本公众号。