传送门：《猫眼看戏》设计复盘（上篇）—— 0-1设计背后的故事

项目背景

随着项目的多期进行，栏目运营在主推剧目的包装上沉淀出固定模块；也与多平台达成推广合作意向，多渠道联合呈现；最后，栏目的筹备流程更清晰专业、宣传全链路初见端倪。设计师也就以上运营打法持续改进设计流程，并设计包括栏目logo、落地页及配套资源位模版，快速响应业务需求。

回顾之前的合作过程，通过对负责设计师与业务伙伴的访谈，收集运营与设计层面存在的问题。

整理反馈，得出现阶段栏目在操作体验与品牌曝光所存在的问题：

1. 定制人力成本高：每一次直播落地页视觉定制化，虽能够契合每期的项目视觉风格，但是设计成本高，时间久；

2. 品牌输出待强化：栏目处于推广早期，需通过强曝光、强输出树立猫眼品牌以及《猫眼看戏》栏目的形象与调性，目前《猫眼看戏》栏目的品牌渗透只通过logo的露出，需要在色彩、图形等视觉语言增强栏目品牌渗透性；

3. 栏目logo可优化：1.0版本栏目logo艺术型较强，但是在多渠道、多界面的延展时，字形的通用性与识别度有待提高。

升级目标

根据上诉问题点，并结合“宣发品质新剧”的栏目宗旨，整理出栏目2.0阶段的迭代方向：

○ 产品功能上做到“减负、高效”

○ 设计映射上做到“品质、包容”

升级过程

○ 产品层面如何做到“减负”与“高效”？

结合2.0版本的栏目规划，我们对栏目包装流程中的设计需求进行整理，针对落地页进行“减负”: 

1. 信息模块化； 2. 新增往期视频内容池。

1. 信息模块化

回顾以往推广的落地方案，罗列剧目推广内容中共同项目，提炼出项目基础信息、直播信息、营销信息共3大属性，并将这些项目分类模块化展示，降低未来反复设计的成本。

○ 直播信息 | 产品化布局：项目的直播信息进行产品化设计，后台调取直播时间、标题、封面图等信息，并且根据时间维度展示直播前/中/后3个状态。

○ 剧目信息 | 定制化设计：针对剧目的基础信息，将包括主创人员、出品单位、正式或花絮照片等共性信息提前布局定制专项模板，提升设计能效。

○ 营销信息 | 人性化响应：“巡演站点”板块收集意向用户所在城市与手机号，以进行用户染色，在项目开票或邻近演出时短信触达。优惠券或折扣作为营销刺激点，可加速用户决策，完成营收闭环。考虑到剧目成本和站点数量、上架情况不可控，营销类板块需后台灵活配置。

2. 新建往期视频内容池

往期直播完成后形成完整视频，进入落地页“精彩回顾”板块，形成视频可回放，增添栏目落地页的丰富度。运营伙伴从拍摄素材中剪辑出花絮、采访等内容投放在视频网站与短视频平台， 合理利用长尾效应，闭合栏目宣发链路，扩大宣发影响力。以上素材进入猫眼内容素材库，为猫眼内容宣发沉淀素材积累。

搭建B端后台，设置“付费直播/免费直播/视频/付费外跳”等标签分类管理；配置“标题/亮点/时长/标签（独家/自制）”等信息在C端前台展现。

○ 视觉层面如何感到“品质”与“包容”？

品牌升级不是虚喊口号，而是应该通过各个设计触点的配合给用户传达融合、一致的感受和体验。

因此，我们从以下几个场景进行品牌识别渗透：1. logo优化；2. 落地页焕新 

1. 栏目logo优化

《猫眼看戏》栏目是一档探班戏剧台前幕后现场的栏目，原logo字形使用曲线传达戏剧的艺术感，字形美感十足。但是，在线上物料制作中，受制于广告图与硬件的尺寸不一，logo往往在缩小后出现比划磅数失真的情况，导致字体模糊出现虚边，所以本次logo迭代发力点，集中在增强字体的识别与通用性。

无衬线字体在互联网传播中即能保证字形结构，也能在大小变形过程中保证识别性，所以在迭代过程中选取方正兰亭中粗黑作为字体骨骼，借鉴宋体的比划规则，调整笔画粗细，形成字体韵律；同时，搭配优雅的艺术几何图形作为装饰，丰富字形。

栏目logo在宣发过程中于各平台投放，基于各渠道资源的尺寸不同，考虑到logo在缩放情况下的识别性，调整不同屏幕下的logo细节，保证字体比划清晰，不出现虚边；并给出字体的最大、最小的极限规范，与各屏幕宽度下适合的logo尺寸建议。

2. 落地页视觉迭代

a. 主题色

颜色是用户感知品牌最直观的方式。之前栏目落地页的视觉跟随项目的画面延展，没有固定配色。本次产品化升级，栏目搭建固定落地界面，给用户更统一与直观的栏目感知。结合“品质、包容”的设计迭代目标，收集体现“台前幕后”的戏剧场景进行讨论、筛选，通过参考图制定情绪版，最终提取具有质感、尊贵感的黑金作为主题色。

○ 黑色：落地页背景选取黑色，减低色彩干扰，减少项目视觉不可控因素，帮助用户更迅速了解项目直播相关信息；同时，深色也能打造沉静神秘的戏剧氛围。

○ 金色：在深色模式下，选取金色形成渐变色调搭配点缀，传递“高品质”的栏目理念，功能上更突出重点信息，在浏览过程中向用户渗透设计理念。

b. 画面延展

主视觉设计伊始，方案输出时候绘制了两版草稿，分别是左右布局的戏剧面具与中心聚焦的抽象舞台两版画面。在方案评审阶段，从画面构成、信息布局、创意手法、风格质感四方面评判方案的适配性与审美性。考虑以下原因：

1. 头图作为栏目品牌露出，在功能重要级上应次于核心的直播内容，整体视觉表现需要含蓄、兼容，画面不能太过真实，又需要体现一定质感；

2. 项目直播海报的布局可能会有各种板式的排列顺序，头图的信息布局需要高适配性，同时猫眼看戏作为栏目标志，需要考虑画幅与视觉焦点平衡；

3. 栏目内容核心是一档具有戏剧属性的栏目，直播内容包含话剧、歌剧、音乐剧等9个类目，视觉语意需要涵盖更多；

基于以上的三点考量标准，我们把改版的视觉风格定位在了“云上剧场”这一概念版本上。

c. 字体

新版落地页中字体统一调整为苹方，此字体是移动端常用的文字，棱角分明，干净利落，具有品质感。 
在文字层级梯度上用拉开字重及字号比例来提高内容的可读性；为使信息在深色界面下重点更突出，层次更强烈，根据页面不同层级的内容，定义了文字规范层级颜色。

d. 圆角卡片

旧页面更偏运营页面，内容决定模块布局，板块间的间距不统一，缺乏产品调性，造成产品缺少品质感。 
新页面更偏产品页，注重圆角卡片、结构透气、层级分割，减少界面中过于复杂的装饰元素，赋予视觉元素秩序感，使频道更轻量化、精致感。

落地页在经历栏目初创期与页面定制期的不断调整后，根据“减负、高效”与“品质、包容”的升级目标下，重新解构定义新的页面颜色、主画面、字体与圆角结构等视觉元素，《猫眼看戏》落地页2.0版本全新登场。

总结

项目回顾

以上就是本次《猫眼看戏》2.0设计升级背后的原因与思考过程。从前期明确产品功能升级方向“减负、高效”，到梳理出“品质、包容”的栏目品牌设计理念，再到实际落地产品化过程的框架重构新增（信息模块化、新增内容池），以及品牌升级中重新迭代logo与落地页，最终呈现出全新的2.0栏目升级。

落地页通过模块产品化配置与定制化设计模板的建立与规范制定，节省了设计师的设计时间、降低了设计难度，落地页的制作时长在产品化后由3人/日下降为1人/日，人效提升300%；同时搭建运用后台，给予运营人员更灵活的配置能力，缩短项目制作时间，达到快速上线推广目的。

项目成果

以上《猫眼看戏》栏目与猫眼品牌所做出的努力，只为更精准服务项目宣发；同时，给用户持续提供优质的演出服务体验，挖掘剧类演出的优质内容；也优化了平台运营与设计等幕后人员的工作效率。

随着《猫眼看戏》栏目与各演出主办方的合作深入，栏目已打造完整的直播宣发全链路，从台前幕后内容制作，到多端直播吸引关注，再到海量宣发平台曝光与完整视频分发矩阵，完整链路助力剧类主推项目取得流量与项目购票转化双提升的显著成果。

本次《猫眼看戏》栏目2.0升级，是猫眼演出设计部营销小分队所有同学的共同努力，同时也是猫眼演出提供给用户更多好戏品质内容、高效演出服务的新一步，它不再是机械的信息展示和冰冷的支付平台，而是更懂用户、提供给用户更多元服务的聚集地。

目前还有很多不足和待完善的地方，我们也在尽最大努力为用户与合作主办提供更好更有价值的服务，感谢大家一致以来的支持与陪伴 。