赞助商
立即赞助

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

品牌设计3年前 (2021)发布 流光
3.2K 0 0

编者按:一个完整的品牌设计流程是怎样的?本文用腾讯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」的公众号:

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

由于B端产品的特殊性,也由于各类React组件盛行,设计发挥的空间没有C端那么直接,更多隐藏在使用体验的过程中。面对改版,我...
B端产品
为什么要做品牌升级? “效率一直是公共舆论中的一个重要话题:在古希腊人眼中,它是政治和社会运转的方式;工业革命早期,亚...
品牌升级
导读 品牌体系的长期价值是什么?如何构建完整品牌体系? 本文将以网易智企品牌设计体系的建立过程为案例,与大家分享一下品...
品牌体系
​​@N可可洛N、@爆炒地瓜​​​​:Ramotion (https://dribbble.com/Ramotion)是一个从事品牌和 UX 设计的专业工作室,服务客户...
专访
本期译文,是一篇 App 改版干货,有具体步骤,方法,分析,最后还有结论,值得学习。 我热爱旅行,就和千千万万踏上旅行的人...
App改版
编者按:大厂的改版设计都是怎么做的?今天腾讯这篇干货用一个完整的设计流程告诉你,一个优秀的改版案例应该这么来! 一、定...
App改版
设计没有想法?不知道该怎么发挥自己的创意?想到了一点什么内容,但不知道该如何下手? 今天跟大家分享的一个A+B的创意图...
LOGO创意
QQ 阅读作为国内较大的数字阅读平台,拥有海量的数字正版图书资源,随着产品内容不断丰富,图书资源已覆盖网络文学、历史、教...
改版实战