IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

案例分析|社交网络产品LOGO设计系统

Catherine • 2017-05-09 01:05 • 交互设计

在SNG(腾讯社交网络事业群)品牌系统语言里,LOGO系统承载品牌视觉的最核心容器,是整个品牌视觉系统的灵魂,是品牌的精神文化理念、信誉、服务等特点的浓缩表现,直接影响着社交网络品牌的发展。本文核心剖析社交网络产品LOGO设计系统。

文章目录[隐藏]

  • 锐变启程
  • 设计系统背后的品牌生态策略
    • 为什么要做?
    • 系统梳理
  • 系统建立 & 生态策略
    • 1. 造型
    • 2. 质感
    • 3. 色彩
  • 化繁为简
    • 华丽变身: 天天P图
    • 系统持续刷新

在SNG(腾讯社交网络事业群)品牌系统语言里,LOGO系统承载品牌视觉的最核心容器,是整个品牌视觉系统的灵魂,是品牌的精神文化理念、信誉、服务等特点的浓缩表现,直接影响着社交网络品牌的发展。本文核心剖析社交网络产品LOGO设计系统。

案例分析|社交网络产品LOGO设计系统

锐变启程

伴随着我们的成长的QQ,2016年已经成功锐变。新企鹅整体造型更加锐利、修身、简洁。企鹅的视觉角度从略带俯视变成了平视,让其图形更加的几何化。更简洁时尚的企鹅LOGO在年轻用户心中成为“潮鹅”。

QQ不是孤军奋战,是整个社交网络产品体系在一起奋进。

我们的用户群体是年轻且最有活力的一代。品牌的内涵理念要持续提升,以保证品牌贴近市场和用户。打造品牌语言系统,表层价值是让社交网络产品脱颖而出。深层价值是塑造一个专业创新的内容平台,承载整个互联网生活体系,反映社交网络产品对优质设计体验的追求。

品牌设计系统的背后是是整个社交网络品牌生态策略。社交网络品牌设计系统已经悄然进行,第一个重塑品牌的是腾讯云,接着腾讯企点、天天P图、微云等陆续刷新。

案例分析|社交网络产品LOGO设计系统

SNG品牌集群

设计系统背后的品牌生态策略

为什么要做?

SNG 打造一个丰富的内容平台,承载整个互联网生活体系。视觉体系是社交网络品牌盛放意义的容器。过去的社交网络品牌体系,没有一套成熟的品牌设计系统。我们需要打造品牌视觉设计系统,让用户认知社交网络品牌,获得用户更高的忠诚度。

案例分析|社交网络产品LOGO设计系统

旧版SNG品牌集群

系统梳理

社交网络品牌语言系统的塑造,让QQ以及社交网络产品应用群传达一个明确且一致的品牌从属关系。同时品牌系统需给用户带来时代性的印象。我们对社交网络产品LOGO体系进行彻底梳理和革新,设计系统是品牌的表象,背后寓含着整个社交网络品牌生态策略。

案例分析|社交网络产品LOGO设计系统

系统建立 & 生态策略

我们的LOGO设计系统特征为独特、简洁、年轻、友好。设计系统内容包含了造型、质感、色彩三部份。设计细节体现社交网络品牌生态策略。

1. 造型

LOGO的造型设计是品牌视觉识别的具体表现。我们要打造简洁独特的造型,给用户留下直观深刻的品牌印象,让“文字”逐渐成为LOGO配角。LOGO造型越几何化,元素越纯粹,适用性就越强。

(1)比例

LOGO规范模版对图形设计的大小、 空间安排、结构比例都具有辅助控制作用, 由4组辅助框组合而成。在规范模版生成的LOGO,整体视觉体积更一致。

案例分析|社交网络产品LOGO设计系统

(2)面

造型以”面”型设计为主,始终保持整体饱满和稳固。圆润饱满的造型更符合年轻友好的产品气质,同时饱满的LOGO更能在众多产品中凸显出来。

案例分析|社交网络产品LOGO设计系统

(3)视角

视角保持二维空间正视,禁止一切立体视角效果。代表社交网络产品是正面、稳定、可靠的。

案例分析|社交网络产品LOGO设计系统

(4)类型

社交网络产品LOGO造型需凸显业务,图形和字母类的LOGO,适用性和传播性最强。同时形体方正的LOGO利于APP的呈现,充分凸显我们是社交网络产品。

案例分析|社交网络产品LOGO设计系统

(5)元素

为了的使设计保持简洁明了,LOGO的组成元素控制在3个以内。简而不凡的LOGO,很小的尺寸也不会影响识别。个性凸显能的LOGO让用户马上记住,设计是产品精髓的表现。

案例分析|社交网络产品LOGO设计系统

(6)圆角

社交网络产品保持着年轻友好,LOGO避免使用锋利的设计,设计细节需要做小圆角处理。同时LOGO最小圆角大小一致,以达到更高的统一度。

案例分析|社交网络产品LOGO设计系统

(7)企鹅

产品名称带有“企鹅”前缀的LOGO设计,若使用“企鹅”元素,正面企鹅或侧面企鹅造型需与系统一致。 因为我们的用户只需要记住同样的企鹅,目的是塑造更一致的识别系统。

案例分析|社交网络产品LOGO设计系统

2. 质感

质感设计顺应当代扁平化趋势,去除一切繁杂的表现效果。纯净的设计,使LOGO表现更直接明朗,同时简约的设计时尚度更高更持久。去除质感带来了更大的设计挑战,因为对比七彩渐变的效果,纯色效果更难立刻凸显。

(1)扁平化

设计去除一切繁杂的表现效果,保持无投影、无渐变、无透明。打造更简约的设计,是社交网络产品对精品塑造的追求。

案例分析|社交网络产品LOGO设计系统

(2)APP - 核心产品 & 子产品

社交网络产品离不开APP的设计,APP底色需遵循统一的设计原则。社交网络产品分为核心产品、 独立产品、子产品三类。白底是社交网络风格,核心产品APP的底色推荐使用白色。因子产品为核心产品的衍生,所以子产品的APP底色统一为白色。

案例分析|社交网络产品LOGO设计系统

(3)APP - 独立产品

系统需要每个产品保持自己的特征,给以独立产品更广的设计空间。独立产品APP底色可用其品牌色,让独立产品APP更独特和凸显。

案例分析|社交网络产品LOGO设计系统

(4)SNG Brand Map

案例分析|社交网络产品LOGO设计系统

3. 色彩

设计系统的色彩库建立,能带给用户更一致的视觉感知。明亮的色彩代表社交网络产品的活力和热情,每个色系代表自己的产品属性。每个LOGO限制色彩3个以内,因为色彩越少,产品LOGO个性越鲜明。独特的品牌色能激发用户情感,让用户联想到我们的社交网络产品。正如看见Tiffany的粉绿色,就会联想到它的饰品。

(1)色环

LOGO系统色环共有30色,每一个都有它的含义,它们有无数种搭配的可能存在。根据社交网络产品类别,系统将红、黄、蓝、绿、紫5大色系进行分类。

案例分析|社交网络产品LOGO设计系统

(2)基础色

系统的6个基础色最为纯净,使用最为频繁。多数情况下,建议使用基础色。每个LOGO的彩色控制在3个以内,黑白色是无色系,不包括在色彩总数内。

案例分析|社交网络产品LOGO设计系统

(3)色系属性

每个色彩都代表着各自的属性,根据色系感知和产品类别,系统将红、黄、蓝、绿、紫5个色系进行产品属性分类,打造更一致的品牌视觉感知。

1)蓝色系

  • 产品类别:社交类、企业类、运动类、科研类(权威、可靠、安全、创新、进取)
  • 例如:腾讯云、TIM、微云、腾讯课堂、QQ运动、QQ阅读等。

案例分析|社交网络产品LOGO设计系统

2)黄色系

  • 产品类别:生活类、娱乐类(自信、积极、光明、幸福)
  • 例如:QQ空间、企鹅FM等。

案例分析|社交网络产品LOGO设计系统

3)绿色系

  • 产品类别:音乐类、媒体类、通讯类、教育类(自然、希望、生命力、时尚)
  • 例如:QQ音乐、NOW、企鹅辅导等。

案例分析|社交网络产品LOGO设计系统

4)红色系

  • 产品类别:娱乐类、美妆类、服务类(时尚、刺激、热情、帮助)
  • 例如:QQ会员、天天P图、全民K歌、闪咖、企鹅MV、QQ全城助力等。

案例分析|社交网络产品LOGO设计系统

5)紫色系

  • 产品类别:娱乐类、游戏类、女性类(神秘、时尚、梦幻)
  • 例如:花样直播、厘米秀等。

案例分析|社交网络产品LOGO设计系统

化繁为简

品牌系统塑造必须有规划有步骤地持续优化,我们优先将影响力较大的产品LOGO进行了革新。例如腾讯云、腾讯企点、天天P图这些用户量日渐庞大的产品。产品LOGO既要符合系统的规则,同时要承载产品各自的特点,这是品牌统一性的挑战。

华丽变身: 天天P图

天天P图是一款全能图像处理软件,包含美化照片、美容美妆、疯狂变妆、趣味多图等强大的图片编辑能力。旧版天天P图LOGO不符合系统设计,同时设计有提升的空间。如:1. P字线条设计较为单薄; 2. 整体颜色过多;3. 字体较细,不利于识别。

案例分析|社交网络产品LOGO设计系统

旧版天天P图LOGO

造型:新版P字造型更独特,识别性更强。同时斜角的眼睛高光设计凸显天天P图的趣味性。

案例分析|社交网络产品LOGO设计系统 

LOGO新旧对比

色彩:由8色减为3色,让品牌感知更纯粹。旧版品牌桃红色较为偏女性,新版品牌红更有吸引力,也更中性,利于天天P图覆盖更全面的适用人群。

案例分析|社交网络产品LOGO设计系统

色环新旧对比

规范:新天天P图LOGO遵循系统设计规则革新,系统设计让LOGO更规整,适应性更强。

案例分析|社交网络产品LOGO设计系统

天天P图LOGO规范

新LOGO个性更鲜明更有趣,充分传达天天P图“爱美更爱玩”的产品理念。新的品牌色红+黑组合,视觉效果更有冲击力,快速在众多LOGO中凸显出来。

案例分析|社交网络产品LOGO设计系统

系统持续刷新

社交网络品牌设计系统代表社交网络产品设计文化走向成熟。我们相信,正确与适合的设计应该坚持和推动。从一个品牌发展成一个品牌集群,需要品牌与其衍生产品一起发展影响力。互联网品牌时代,设计对于品牌的发展有着决定性的作用。单一的LOGO设计不足以支持一个社交网络品牌的发展,我们会持续优化品牌设计系统,提升设计理念和营造更优质的产品体验。社交网络品牌设计系统持续刷新中……

 

作者:飛兒

来源:https://isux.tencent.com/sng-logo-system.html

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24544/

logologo设计PSUIUXVR产品产品体验产品经理产品设计品牌字体案例分析用户系统设计视觉视觉设计设计设计原则
赞 (0)
CatherineCatherine
0
生成海报
针对产品UI国际化提出的7条建议
上一篇 2017-05-09 00:03
2017年度交互设计趋势
下一篇 2017-05-09 02:06

相关推荐

  • 有些话并不必说 交互设计

    有些话并不必说

    路边报亭挂着一块牌子:“本报亭有售雨伞10-30元”。这个表达有些啰嗦了,只需要写:“雨伞:10-30元”。 饭馆门口的告示:“诚聘西餐大厨,月薪XXXXXX,有意者请联系,电话:1350000XXX”。其中的“有意者请联系”是可以不…

    2016-05-31
  • 微信热点

    交互设计第一步 了解完整的知识体系架构

    交互设计师犹如一名“翻译官”,主要的使命就是让人与产品之间更容易沟通、更具有人性化,让用户的操作更加有效,这也是交互设计师的价值之所在。今天推荐的这门课程,带你全面了解交互设计的知识体系架构和工作流程,了解交互设计师应具备的能力、应掌握的工具、如何完成进阶,并掌握让你更加专业、更具逻辑性的设计思维与交互设计面试技巧。点击“阅读原文”,开启你的学习之旅~丨我将从这门课中学到什么?了解形成完整的知识体系架构的重要性了解交互体系架构包括哪些部...

    2018-03-12
  • 微信热点

    孙一民:一幅上世纪的图景,一段广州建设的“芳华” | UED设计年会

    2018年伊始,“设计·文化·艺术引领下的城市发展和乡村振兴高峰论坛”在江苏宿迁成功召开。在本次论坛上,众多先进的设计思想汇聚于此,我们不仅看到了设计师眼中的城市发展、乡村振兴脉络,更从城市管理者的角度了解到如何展开以人为本的设计。论坛上,长江学者特聘教授,华南理工大学建筑学院院长、博士生导师孙一民发表了以“设计改变广州”为主题的演讲。从华南中心城市到国家中心城市,伴随着经济的迅猛发展,广州的城市建设也在进行着大步飞跃。常人所见,城市的...

    2018-02-26
  • 阿里交互新手小记 | 交互工作流程的梳理 交互设计

    阿里交互新手小记 | 交互工作流程的梳理

    头疼就是脑子里有什么正在激烈地进行改变,可能就是你从困难上学会的东西。—— 写这篇文章的人

    2017-05-23
  •  页面停留时间和网站停留时间详解 交互设计

    页面停留时间和网站停留时间详解

    摘要:一、页面停留时间与网站停留时间是如何计算出来的? 假设用户访问了网站的主页(Home)。分析工具将这个访问者标记为一个Visit,接着这个访问者又浏览了另外两个页面(Page2和Page3),然后他离开了你的网站…

    2014-12-16
  • 微信热点

    清华美院交互设计考研相关问答

    分享考研资料集:你的问题我来答!一考研资料福利贴这是新蕾北京公众号第001篇资料帖今天分享的是清美交互设计考研相关资料汇总针对此专业考研相关问题我们一一作出解答01进入通道报考清华大学美术学院交互设计研究生,可以报考两个方向,一个是信息艺术系的交叉学科硕士的交互设计方向,另外一个是信息艺术设计系的信息艺术设计的普通硕士,但是他们的考试内容有较大差异,进校后都可以学习交互设计,导师组基本相同,由于近年来大部分招生名额倾向于交叉学科,本文重...

    2018-04-28
  • 实例分享:交互设计如何赋予产品安全感 从零开始学交互

    实例分享:交互设计如何赋予产品安全感

    作者:高广淦全文共 4235 字,阅读需要 8 分钟—— BEGIN ——做互联网金融交互设计的这两年,也算是用过上百款竞品了。尤其是一开始做设计的时候,满世界的下载注册体验竞品,以至于我这两年的投资收益还是很可观的,…

    2017-08-04
  • 卡片式设计,并不能支撑所有的设计需求 交互设计

    卡片式设计,并不能支撑所有的设计需求

    卡片式设计一直是以强兼容性和“百搭”的形象出现在大众的面前,但是它同样有无法满足用户需求的时候,今天的文章我们就在实战中聊聊这件事。

    2017-05-13
  • 针对敏捷开发中用户体验的5点建议 交互设计

    针对敏捷开发中用户体验的5点建议

    根据最近惠普针对600多个专业的软件开发人员做的一个调查,由于能够加强协作,增加用户的满意度以及缩减成本,所以敏捷开发是目前大多数被调查的组织采用的工作方式。然而当把用户体验集成到敏捷开发的周期中时,很多公司会问我们采取什么样的方式才能在满足每一个敏捷时间框架要求的同时确保成功。

    2017-05-24
  • 微信热点

    用户体验:从幽灵按钮到空心元素,它们一直在流行

    幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比,吸引力也一般,它们的视觉效果主要取决于周围的对比度和环境本身,一句话,缺点很多。即便如此,它们并没有很快消失,相反依然活跃在设计的一线。它们能够如此,很大程度上是因为我们对于这些元素已经习以为常了。它们最初出现在 UI 界面上的时候,用户所感到的迷惑和混乱,已经逐步消失,我们都知道,它是一个按钮。现在的幽灵按钮和类似的元...

    2018-05-04
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress