35

上亿人使用的腾讯微视,是如何做品牌体验设计的?

 5 years ago
source link: https://www.uisdc.com/wesee-brand-experience-design?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

eEjIruR.jpg!web

编者按:微视作为今年腾讯对抗抖音的核心产品,其重要性不言而喻。在短视频App 百花齐放的今天,腾讯微视该如何做品牌设计才能避免同质化,给产品带来价值呢?本文来自腾讯设计师的复盘回顾,你可以看到大厂的完整设计流程是怎样的。

一、项目背景

2017年是整个短视频大爆发的时期,内容产业逐渐成为移动互联网新的生力军。短视频产品同质化,用户体验趋同,团队希望运用品牌体验的全局设计思维,从视觉识别,用户体验,线上线下推广及产品礼品等多个维度来凸显产品核心价值,搭建一套完整统一的产品设计语言。

二、目标

微视目标很清晰,需要在短时间内快速进入短视频第一集团,切入短视频社交领域,挖掘更多机会点,也希望借这个机会能成为像微信这样的腾讯战略级产品。

三、设计挑战

设计的挑战点,短视频无论是产品形态还是设计体验都已成熟,如何避免同质化,在设计上寻求自己的核心竞争力;另外短视频产品强调内容运营,设计如何能够给产品带来价值,也是微视设计在这次的最大挑战。

ZFbiuar.jpg!web

微视在刚起步阶段,品牌团队曾经给微视做过1.0版本的设计,当时微视的设计思路没有太清晰,最终设计偏向于简洁专注的方向;但随着短视频逐步上升为腾讯的战略方向,微视单一的设计风格已经不能满足本身需求了,微视需要一个更丰富的设计语言,这给微视的新设计重新提供了一次机会。

viUJvmE.jpg!web

我们梳理了微视的设计流程,整个微视品牌设计分为三大块内容,策略,设计和体验;设计前期需要明确微视的整体品牌定位以及挖掘产品的核心价值,推导出一套符合产品气质的设计原则,品牌设计上,应该是整个产品的设计语言素材库,其中包括了标志的设计,字体库的建立,色彩系统的搭建,图形延展设计,插画风格的提炼,动效概念等核心设计元素;在最后一环的品牌体验,代表了微视所有的场景媒介,都需要从设计语言素材库内提取设计元素并适配对应的设计,保证所有媒介场景的高度统一。

bEzInqA.jpg!web

「做年轻人的潮流分享社区」是整个微视的品牌定位,让年轻人感知玩微视是一种潮流,在微视里能够挖掘更多很酷的事情和有趣内容,成为年轻人分享潮流和趣味的平台;微视的 slogan 是「发现更有趣」,发现更多有趣的人,和事,或者说是一种生活态度;基于整个品牌定位,我们挖掘微视的三大核心价值:保持好奇,寻找生活趣事;微视展现与众不同的自我;打造微视达人的潮流文化。三个核心价值,我们构建出微视的基础设计原则:微视是具备丰富内容和玩法多变的产品;它应该有个性化的标签来彰显自己的态度;微视是一个自带潮流属性的平台,在潮流圈中有很好的认可度,通过它来传播自己的态度和生活方式。

nuMvEfv.jpg!web

四、微视slogan:发现更有趣

通过整体的品牌策略与其它短视频拉开差异化,当下主要竞品的品牌定位都是强调记录生活,记录美好时刻;微视则强调用户自己,主动去挖掘更多有趣的人,有趣的玩法,生活趣事,探索世界,发现更多精彩。

iENN7zr.jpg!web

我们在设计的第一阶段,logo设计,就是围绕「有趣」来展开发散设计。设计方案是否有趣,是我们的第一标准;它可能是一个实际存在的事物,它也有可能是一个抽象的造型,但它必须是有趣值得玩味的,也可能是别的概念会引起你的兴趣点。最终我们决定使用一个特别的播放键来代表微视,播放键的造型能让用户感受它是拥有多个维度的,2D,3D甚至是异度空间等,寓意着用户可以从多个维度来看世界,寻找有趣的内容。

2Uji6vR.jpg!web

我们针对这个大方向再进行了几轮细化,右边是最终的设计方案,这个 logo 希望它在多数的 app 当中表现的足够抢眼,所以色彩纯度足够高,渐变四色的搭配能让它从众多 app 中跳跃出来。

ruuEJvu.jpg!web

rayIVv6.jpg!web

Zn2iaiV.jpg!web

logo设计确定后,接下来补充 logo 在各使用场景中的基础设计规范,另外会增加一个不带 app底的场景,微视不只是单纯的应用在 app 上,它还需要有很好的扩展性。

FFVNbm7.jpg!web

四色渐变是微视的品牌色,确定了微视红是它的主品牌色,紫色,蓝色和桃红则是它的子品牌色。

aIbeQjI.jpg!web

另外在品牌字体的选择上,我们选择了三款原生字体作为微视的标准品牌字体。Fugaz-One 是一款能够广泛用于各种书刊画册的艺术字体,它的大写字体具有强烈的视觉冲击力,选择它作为微视标准英文字体;汉仪雅酷黑也是一款用于艺术设计方面的简体中文字体,字体线条粗壮,字形端正大方,并且字库相对其它艺术字体更完整;汉仪旗黑系列则作为微视信息类字体的补充,汉仪旗黑是汉仪字库推出的一款非常庞大而完整的家族字体,字体的各类粗细度都很齐全,并且能完美的实现各类终端环境的呈现。

eeEnEzj.jpg!web

微视的 pattern 是从 logo 的造型延展出来的纹理设计,这套 pattern会 应用在许多应用场景上,包括广告,内容模版,周边产品等需要辅助设计的场景中。

MZZvaqm.gif

△ 微视网站

AV3iqyB.gif

△ 微视内容模板

Mv2IbyV.gif

△ 品牌视频结束页

Pattern 也会结合激光动效的理念运用到微视的场景中,例如官网设计,内容模版,视频结束页等,Pattern 会作为底层展现品牌形象,在整个过程中会有品牌色激光动效,让整个场景丰富立体起来。

a2maian.gif

EBvEbmF.gif

EN7Fvu7.gif

微视logo 具备多维度的特性,将这种特性运用到 UI场景的 loading 和微视水印效果上,增强品牌的独特性和趣味性;另外我们也会将 logo 做成霓虹灯的立体装置在线下活动中展出,让用户感受 logo 的丰富多变。

Vza2Ujj.jpg!web

点击 查看完整视频

品牌视频通过多个几何维度来诠释 logo 理念,强调微视品牌趣味性。

IbqAFvq.gif

M3eYfar.jpg!web

结合 logo 的造型特征,我们打造了一套完整的图形系统素材库,里面包含了完整的字母与数字,还有结合短视频特性的图标体系;目前这套素材库仍在不断完善中,所有的图形设计都会运用到后期微视的广告和运营活动当中,霓虹灯的实体效果会结合线下的活动装置中使用,这套图形系统素材库,不但具备很好的品牌识别度,而且强调了微视有趣的设计理念。

URvANbY.jpg!web

品牌体验模块把我们确定的这套设计语言结合到与用户面对面的场景中来。品牌体验主要阐述微视的广告,活动和礼品三大块内容上。

qa2aumB.jpg!web

在整体的微视广告设计中,我们把微视达人的个性拆成六大类别,每一类型都会拥有一个抽象的图形来代表这一类人群,向往美好生活和生活趣事的人;作风个性炸裂,酷炫的人;有才华的人;潮流网红;二次元;甚至是闷骚奇葩的人等。

IriQZvN.jpg!web

每类个性标签的人群都有与之对应的风格与设计手法匹配,例如美趣标签的设计风格偏向暖色氛围与立体化图形的搭配;炸裂标签的达人,风格酷炫,广告整体运用撞色叠加的手法+霓虹灯的视觉效果;每种标签的设定都会有不一样的定义,让微视的广告语言更丰富和多元化。

jIjArmf.jpg!web

yuEvMr6.jpg!web

微视官方品牌广告采用微视的标准品牌风格,对比其它标签的设计,它需要更加微视的风格。在首波微视推广中都采用了标准风格。我们给每套风格设定一套设计规范,方便后期CP 和其他设计师介入制作广告提供一套标准。

EjAzaiI.jpg!web

另外在微视的 IP形象微视狗的推广上,也采用微视的品牌风格来宣传。

NbaUzir.jpg!web

j2AJVby.jpg!web

微视中期的推广投放量非常巨大,所以也是微视广告语言需要多元化的原因,只有一套风格设定,不能满足微视的推广需求,美趣风格也是专门为101打造的微视广告,设定的糖果色氛围和3d设计很符合101女团的风格。

3Qfuyy3.jpg!web

uuqMvqq.jpg!web

rum2qu3.jpg!web

酷炫风强调撞色对比来体现氛围感,搭配品牌霓虹灯的视觉效果来呈现,霓虹灯设计也是运用微视图标素材库里提取出来的元素设计。在 NBA总决赛推广期,微视狗与 nba 合作的广告采用了这套风格设定。

QFJN7rn.jpg!web

UzAfyae.jpg!web

微视广告在后期陆续补充了未来概念,街头时尚等风格,都是围绕大量不同个性的明星设定。

yaYJVfA.jpg!web

AnYBBfq.jpg!web

二次元作为近几年影响力逐渐壮大的群体,微视也打造了一套插画风格的设计,风格抽象,色彩纯度高,画质的细节多,适用于年轻搞怪的明星使用。

auuyQj7.jpg!web

微视官网也采用插画作为主要设计的风格,这套推广插画偏向潮流感科技感,服装特地设计成 wesee 出品,让用户看到微视和其它竞品不一样的设计定位。

aEvI3qa.jpg!web

微视设计原则的第二条是微视拥有很强烈的个性标签,代表微视自身的态度。

rUN7RvF.jpg!web

qu2iEv2.jpg!web

MfuEr2Z.jpg!web

我们采用了警示带的概念,作为微视品牌的专属元素,警示带能够彰显一个人的态度,同时又有趣味性和潮流感。我们结合了微视达人的特性,提炼出6段个性的词语作为警示带内容(拒绝雷同,发现有趣,忠于态度,潮流支配,躁动时代,极度爆炸)让警示带的设计更多选择和多样化。

6Rz2m2Z.jpg!web

在 vans 和微视的联名活动中,微视采用了警示带概念来对整个活动场馆进行铺装。

bMz2euj.jpg!web

警示带概念还运用到微视线下潮流商品的设计中,背包,帽子,tee,手机壳等单品。

26NFV3R.jpg!web

微视的最后一条设计原则,阐述微视的潮流文化。最主要的场景是在微视的达人商品设计上。

ruiURnU.jpg!web

qQniAvY.jpg!web

uu6732M.jpg!web

我们不希望只把微视当作是一个短视频的产品来做,设计师希望把它打造成一个新生的潮流生活品牌,无论是在选择产品的类型,到设计,打样,还有拍摄推广,都和普通的公司文化衫,或者纪念品拉开差距。

7RVrQ3u.jpg!web

EjUVJv2.jpg!web

QnyMJ3Z.jpg!web

微视的潮流贴纸,除了作为线下达人活动的礼品,也作为线上APP 贴纸库的内容资源,提供给用户使用。

uUVfEjy.jpg!web

qeaEVzV.jpg!web

微视后续会继续生产更多的周边商品,比如拖鞋,背包,卫衣,毛巾等,这些都属于生产周期短,没有复杂工艺,性价比极高,属于潮流圈的基础单品,人手一件。这些单品都拿到能够触达用户的官方线下活动和品牌联名活动中,手递手传播微视的潮流品牌影响力。

总结

微视设计不仅包含了APP的体验设计,还包含了市场营销,运营活动,达人推广,周边商品等多个设计环节,环环相扣,缺一不可,一起构建了整个大微视的设计体系;互联网品牌体验在这几年逐渐显得重要,在如何设计同质化严重的产品上,如何打造竞品差异化的设计上,整体规划清晰的品牌设计能够让产品有更好的唯一性和专属感。

「腾讯团队品牌设计实战案例」


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK