如何做好品牌设计？来看腾讯短视频的实战案例！

编者按：一个完整的品牌设计流程是怎样的？本文用腾讯DOV 视频的实战案例，告诉你高手是如何做品牌设计的！

项目概述

2017年短视频产品爆发，有别于一般短视频产品，DOV 主要讲求透过短视频记录生活，并且将短视频分享给熟人关系链好友，透过短视频本身作为媒介达到社交的目的。目标族群明确的定位在于高中以上的年轻族群。设计的任务除了基础的体验之外，更应该将分享生活的轻松感以及时下年轻人的生活态度结合至产品之中，藉由视觉的手法提升用户的记忆与认同。

本次 DOV 的品牌设计在基础UI 已具备的条件下，上线前两周经过讨论，以QQ family 中人气最高的多福熊作为吉祥物，品牌LOGO 也沿用了多福的形象，为了有更全面的品牌感受，本次 DOV 品牌的设计包含了 LOGO、吉祥物、图形系统、动效系统、常规运营规范等等。

回顾 DOV 品牌设计，主要可分为提案前准备、图像系统设计、界面控件优化、动效主题铺陈、运营规范制定等五个环节。

提案前准备

含，骤切，故必须至图系统及界控件确户验。况，案准备至，准备避免弯，将准投创。

首先提案前准备阶段是关键页面的选择，以及明确设计方向。

  1. 提案关键页面选择

提案关键页面的抉择有几个要点：

高效率：若要提高效率则不能在任何地方浪费设计资源（人力、时间），品牌风格提案建议在3帧画面以内，免去不必要的工作量，除此之外，三帧画面也是移动端设计在 PPT 上展示最理想应用空间的帧数。

高检视：必须确保方案的呈现可以概览日后延展的各种可能，以品牌方案阶段为例，必须兼顾图像与 UI 的协调、大面积展示时的效果，以及最小限度展示时是否还能延续品牌的感受。在 DOV 提案中，设计选择了具有最大面积展示空间的 Login场景，保证最好的视觉效果可以被检视。其次选择资料卡，验证图像与UI面积各50%时的协调性。最后选择消息列表，确认即使几乎没有图像辅助是否还能延续品牌感受。

  2. 明确设计目标

必须目标，DOV  slogan ，目标族群18-25岁轻，故视轻群顶端潮流族群，另则众流。此刻简，键散象，虽键散象帮勾勒致，被收敛或被形，亦或者被类图键词基法形共识，符互敏捷质。敏捷确 DOV 。

图像系统确定

准备，则图系统确阶，此阶散及细节挖掘。

  1. 风格的发散

案程确共识往往难挥，纯义往往复或者命题导致难问题， DOV 采+散。谓，即指基视、巧归纳。视典法引户视观反应，纯粹视冲击。谓，则属象征 DOV 目标群符，符往往透符锚效应户深认。

除此之外，此次提案也使用极度繁复的原则。在众多社交产品中，过度干净纯粹的设计在当下各种日益娱乐化营造视觉氛围的竞品app 中已经难以取得优势，且一些朝向年轻化或是潮流化的时尚品牌或者艺术家近年来也大量的使用极繁的手法来影响设计的走向，这是一个趋势。

透过容器+内容的设计方式，可以简单的提炼出可能的手法。如下：

经由这些设计方式的组合，顺应设计的目标，依照大众化的口味以及潮流的风格分别有以下五组方案。

方案A：简数割画，画切割模组填潮流纹、X符，形稳肌 DOV熊形，致冲击饱画。

方案B：透过反复的方式在画面背景中铺陈稳定的节奏营造热闹的社交氛围，另外透过前方特写的多福形成强烈对比，制造出强烈的视觉冲击感吸引用户目光。

方案C：同方案B利用对比的手法塑造视觉冲击感受，同时简化了 DOV 的形象并带入了类似潮流公仔翻玩造型内材质的手法，兼顾了品牌符号的印象也带入潮流氛围。

方案D：利用具有涂鸦手感的字体设计手法填满背景，透过字体形塑潮酷的氛围，背景前景以资讯量多寡、面积差异等方面做对比处理，形成有态度且丰富的画面感。

案E：将潮流中常用的 X符号与多福熊做组合，安排在等比级数分割的框架之中形成韵律之美，同时部分元素加上了潮流常用的流光材质，让 DOV 的意象完全与潮流形象贴合。

最后方案整体全览如下，在跨度上包含了潮流与大众流行，透过拦访验证，左起2、4、5方案也受到了用户明确好评，反馈，但基于4、5的用户好恶较极端，故最终选了方案2作为DOV的主视觉。

  2. 设计细节挖掘

整体品牌风格定案后，选择用户在体验过程中最高频的下拉上滑场景以及必经的登录流程中植入彩蛋，在上线前以有限的精力内用最小的设计投入换得最多的精致感以及情感传递。

界面调性重塑

大面积的图像氛围以及体验路径上必经的关键点品牌化之后，界面本身的品牌调性也必须跟进，让静态的平面上达到图像与界面最大的契合，此次 DOV 分别在界面的造型以及界面的效果中做调整。

  1. 造型统一

造型上统整了所有界面的轮廓，以大圆角呼应了图像系统亲和的特质。

  2. 效果统一

效致采取Y轴偏移投，透漂浮程减硬隔，亲质。

动画主题铺陈

除了图像元素以及控件元素外，由于动画可以透过结合品牌印记、动效曲线、情节设计等部分，形成令人有记忆点并且愉悦的效果，所以在品牌化的过程中是画龙点睛的环节。

  1. 动效曲线

UI 操作的场景之下，DOV 利用了特别的动效曲线，将减速度的时间延后，加上适当的位移塑造动效快速到位且有惯性回弹的动感效果，让整体的氛围高效率与高趣味性共存。

  2. 品牌印记

一般动效主题大多止于动效曲线，而 DOV 除了共同的动效曲线外，融入了品牌吉祥物以及更生动活泼的挤压形变，让动效的记忆点更加鲜明。

  3. 情节设计

除了令人有记忆点的动效曲线以及融入品牌识别的形变，动效本身因为具有时间轴的特性，在适当的场合中可适度加入简单的动作情节，让 APP 的氛围更轻松有趣。（备注：DOV1.2.1版本后已无消息列表下拉刷新）

运营规则制定

APP 身视，切宣传需户固认，透、及辅图形，确义挥域， DOV 质半功倍，深户 DOV 印象。

  1. DOV运营字体

DOV 「素」，取圆润标题幅减况需写标准困扰，另立画法， DOV 充，冲击。

  2. DOV运营图形

DOV 运营场景拥有专属的 monogram pattren，除了可以让背景丰富以外，每个单元都可以依照运营的需要替换，由此去保证共同的设计手法。

设计总结

品牌化设计在过去往往发力于 Logo、吉祥物，以及部分线下场景的组合运用，这类组合体现品牌传播效果上稍嫌不足，但若能全盘铺陈线上落地的场景，严格把控设计方向，不仅可以在多人协作的情况下轻松地把控一致调性，更可以让软件本身以及运营项目持续的强化用户记忆与设计的效率。DOV 上线后经历了两次大改版，在精简视觉设计师的投入下，仍保持同样的气质以及配合产品高效的产出，证明了方法的可行也保证了后续设计体验的一致。让用户从应用中的各个场景体验到品牌精神，这可能将会是品牌化设计的重要趋势。

下面是DOV APP的二维码链接，欢迎大家下载体验！

欢迎关注「腾讯ISUX」的公众号：