原文链接 腾讯SMAD

    前言

    腾讯地图是由腾讯推出的互联网地图服务,伴随其9.0版本的迭代,设计侧希望提炼出地图品牌的核心符号,规范符号的设计语言,并借助不同的媒介触点来传播品牌的核心价值。

    品牌内核
    2013年品牌创立之初,logo设计采用了拟物化的思路,将追求光明、勇于探索的北极燕鸥确定为logo的主体;2017年的logo升级中,秉持传承与创新的理念,提取了原logo中燕鸥红色的喙与身体躯干,进一步抽象出指南针造型,意在体现与用户共同体验世界的概念,这也是腾讯地图首次将品牌价值以抽象化的符号进行展现。

    image.png腾讯地图品牌logo演化阶段

    设计目标

    本次品牌升级在现有logo基础上提出了三大目标:【打造超级符号】、【视觉年轻化】、【强化探索精神】。
    【打造超级符号】是本次品牌升级的重心,意在加深用户认知,打造品牌辨识度;【视觉年轻化】顺应时下设计趋势,准确迎合目标用户的审美品味;【强化探索精神】是未来设计、运营、传播上希望主推和体现的主题。

    image.png
    三个核心目标

    品牌标志系统

    1 构思与草案

    经过脑暴讨论后决定,指南针将作为超级符号得到凸显;地图底纹会从“自由与探索”、“去繁为简”、“传承与延续”三大概念出发进行设计。

    image.png草案设计过程

    **

    2 超级符号-指南针

    在应用图标内,为了凸显指南针的份量感,我们将它的整体视觉占比从原来的3/5调整至4/5。

    640.gif
    image.png
    指南针占比调整示例

    为了保证指南针腹部的曲线美感,并为底纹的设计保留足够的发挥空间,我们尝试了多种弧度的设计,最终保留和原版指针弧度相对接近的最优方案。

    640-1.gif

    image.png
    指南针中部弧线造型调整

    在配色上我们大胆地使用了红蓝配色,凸显出指南针的主体地位。其中蓝色代表科技,意味着腾讯底层技术对地图服务的能力支持;红色取自传统指针的颜色,代表周边生活,彰显出地图服务与日常生活的关联。两者的结合传达科技与传统的碰撞,“一面科技,一面生活”的概念也应运而生。

    640-2.gif
    指南针色彩定义概念演示
    **

    **

    3 底纹设计方案

    在体现“自由与探索”的设计中,我们将具象的路网进行了提炼和淡化,用简单的布局和干净的色彩来体现自由探索无障碍。

    image.png【自由与探索】设计方案

    在体现“去繁为简”时,我们更多地运用了抽象的造型和丰富饱满的色彩,意图体现包罗万象的世界和自由丰富的周边生活。

    image.png
    【去繁为简】设计方案

    在体现“传承延续”时,我们最大程度保留了原方案的造型与布局,对道路板块进行细节上的微调,尽可能延续用户对腾讯地图已有的品牌认知。

    image.png
    image.png
    【传承延续】设计方案

    为了更好地衬托和凸显超级符号,底纹设计均选择相对简洁的样式,讨论比对后决定使用与地图关联度最高的【十字路网】、【井字路网】和【T字路网】进行深化。

    image.pngimage.png
    标志底板类型的6个设计样式

    **

    **

    【十字路网】可最大程度简化路网的线条且富有形式感,但容易出现视觉中心过于集中死板的问题;【井字路网】很好地平衡了背景与指南针的关系,但容易产生琐碎的负空间;【T字路网】延续了原方案的路网布局,保留用户对原品牌元素的感受认知,但可拓展的空间较小。

    image.png
    目标方向的设计关键点

    针对上面提到的三大路网存在的问题,我们对路网线条进行了分级调整,寻求与指南针搭配时视觉效果最佳的宽度参数,保证了路网底纹的可视度与记忆度。

    image.png
    路网道路比例分级调整

    经过多轮的尝试对比,我们将井字路网确定为最终方案。针对其道路比例以及细碎负空间等问题,在与指南针叠加后进一步进行细节的参数调整,最后敲定了道路比例为50/30、中心偏离9点的方案。

    image.png
    井字路网线条比例及分布分级尝试
    **

    **

    4 底板配色
    **

    敲定了井字路网参数后,我们对现有方案的色彩进行优化,在不改变蓝灰调色彩的前提下增加一些细节让整体背景底板更有层次。

    image.png
    井字路网方案色彩优化方案

    在最终定稿的方案中,底板使用了能联想到路面的蓝灰调色彩,道路在蓝灰调的基础上加入了一些湖蓝和湖绿色进行中和,和前景的红蓝指南针组合后相互衬托却又互不干扰。

    image.pngimage.png
    腾讯地图品牌升级定稿方案

    品牌超级符号的触点使用

    1 启动页
    **

    在地图9.0版本的启动页上,我们使用超级符号来承载和反映产品功能与品牌价值。

    image.pngimage.png
    应用端9.0版本启动页包含功能示例

    image.png
    应用端9.0版本启动页示例

    **

    2 应用市场功能页

    在应用市场功能页中,超级符号化身路面,搭配行驶的轿车、走路的行人、入站的巴士等元素,清晰形象地展示出地图9.0版本的功能点,并在无形中加深了超级符号的印象。

    640.gif640-1.gif640-2.gif640-3.gif
    **

    3 品牌形象手册

    image.png
    image.png
    image.png
    image.png
    图片内容仅做样例示范

    image.png

    **

    写在最后

    本次品牌升级的重心落实在打造和强化超级符号上,通过对指南针的占比、配色的调整,底图纹路、色彩的斟酌,打造出了具有辨识度的品牌符号,也将超级符号运用在地图功能的视觉化介绍中。在日后的地图迭代中,我们会沿用符号化的设计语言,对品牌符号的功能进行深化探索。