美文网首页品牌营销视觉设计UI/交互设计规范
【文章】品牌的模样の出行类品牌案例分析

【文章】品牌的模样の出行类品牌案例分析

作者: UI设计鲲鹏 | 来源:发表于2017-12-08 14:48 被阅读22次

    在出行领域中选取较为印象深刻的品牌进行案例分析,找出品牌打造可遵循的方法

    (文章中截图均取自网络,如有冒犯,请见谅)

    在工作中,我们经常会遇到以下的问题:

    运营:“我们需要外包公司做线下宣传单,视觉上有没有什么品牌规范作指导?”

    设计总监:“一个app,为什么每个页面风格不统一?”

    产品:“这个页面看上去不像我们的产品宣传。”

    问题总结:品牌形象不明确

    不同人去做同一个项目需求,因为每个人心中对产品的理解不同而导致的设计风格不一致问题,大家的品牌视觉规范更多的来自各自心中的主观理解,内部会造成这种偏差,更何况对外宣传时,用户接收到这个产品的的形象就会各异。

    而本文研究学习的即是,优秀的品牌案例是如何打造的,研究如何将抽象的品牌感具象化。在此选取在出行领域品牌感较为深刻的案例作为探讨方案:uber、滴滴出行、摩拜单车、小黄车

    ———————————————————————————————————————————

    · Uber

    Uber在其logo表现方面没有太突出的印象,但其少有又独特的配色方案却是用得尽兴,甚至连简单的输入弹框都要染上品牌色,将简单做到不普通。

    Uber站内活动弹窗的规范是图文分区,这样的好处是,可以限制大面积活动其他风格对app整体风格的影响,缺点就是活动宣传氛围被压制,记住这种样式,下文还会出现

    比起我们印象中热热闹闹大红大紫的运营活动页,Uber的用色都如此简洁,比如一说到七夕节,大家第一步就是先配个粉色等等,但这样往往很难凸显自己的品牌风格,因为满大街都是粉色的七夕活动宣传页,而Uber还是一如既往的用自己的品牌色,

    那么一个新问题又出现了,当你在做一个活动页的时候,运营方肯定是不会同意这样的活动配色方案呀,因为很难一眼抓住用户眼球,不够应节。其实不用太较真,Uber也是有一些创意性的视觉方案是完全用了不同的风格,但都会打上自家的logo标签,其实是可以设定一些应用规则,规定什么类型的活动页方可不受规范限制自由发挥。

    而这一套就是不受约束的Uber旅行计划宣传画,如果不看logo,第一眼还着实不知道这是谁家的产品,就连我在采集时都质疑,这,是Uber自家设计师的产物吗,风格太跳脱了点

    综上,因为Uber对品牌色的坚持,Uber给到我们更多的模糊印象就是这两色块,就是这么简单而又不普通!

    但是单靠品牌色的应用,很难平衡众多奇奇怪怪的活动需求,很难平衡运营、产品等各方奇奇怪怪的审美,除了配色,品牌的表达是否还有其他的代言物呢,我们继续探寻…

    ———————————————————————————————————————————

    · 滴滴出行

    一开始的滴滴是向竞品学习的,但在选色方面的差异上可以看出,相对于Uber的高冷酷,滴滴是想走亲民路线的

    “中国的水果也可以改变世界,最好的致敬是超越”——小程科技CEO程维

    作为和Uber同类型产品的滴滴,如何拉开和竞品的差距,还得有自己的一套设计理念,新品牌升级从头开始,从logo改造就向苹果看起,滴滴诞生了一个新的形。

    不仅仅是logo上的借鉴,甚至是UI规范上也是遵循ios设计规范,了解原生系统规范的都知道,轻柔的线条,圆按钮的使用,单一点缀色,高斯模糊效果都是苹果原生UI的常用规范,而滴滴吸取的也正是苹果UI的精髓,整一个轻风细雨的感觉。

    滴滴新版也就是5.0版本首页又进行了一次细微的改变,从最明显的大橙色按钮变成了蓝灰色按钮,整个界面中橙色占比的降低,让人感觉滴滴要开始严肃起来了,搜了下资料发现,这种改变官方说法是为了“响应品牌升级,国际化战略。页面风格从亲民活泼向品质感倾斜”,不仅在logo上降低饱和度,除去橙色的跳跃,提升品质感。在界面色彩搭配上加入蓝灰色增强科技感。

    而5.0界面规范的改版,更像是ios规范像MD规范的靠拢:实色填充式图标设计、纸片式子的侧拉导航、卡片式设计代替更多的页面跳转、更多动效在交互指引上的使用。无论如何改版,滴滴都是在围绕主流系统的规范而设计,站在巨人的肩膀上总不会错。

    “你必须十分努力,才显得不费力气”

    品牌在运营设计方面的延续,不管是在app站内宣传还是站外宣传,logo都不同的形态出现在页面中,要么是某个角落,要么是画面中的创意之笔,要么是活动页娓娓道来的一笔落款水印,不厌其烦,重复的刷存在感

    除了品牌色的应用外,logo的延展使用也紧跟脚步,这样,在活动宣传方面,滴滴就不用再限制于品牌配色了,即使是不同的配色方案,有滴滴logo的存在,就还是能一眼看到滴滴的品牌调性。而用户能识别到滴滴的新logo,也得益于logo在站内无死角的曝光。

    滴滴官方方面也提到,“插画在滴滴快速运营中广泛应用,但风格五花八门,水平参差不齐,因此建立了一套插画体系”,一是方便对内设计质量和工作效率的管理,二是可以传递给用户品牌一致的形象

    如规定配色方案、绘制手法、可能涉及的场景,甚至可以建立插画库,方便直接托用,达到快速运营和风格统一的作用

    因此,滴滴的努力让我除了记住它的颜色外,还记住了这个想改变世界的中国水果

    当我在惊叹滴滴UBER已经改变了人们出现方式的时候,以为人类已江郎才尽,而停留在小学记忆中的自行车又以熟悉又陌生的方式改变着人们的出现方式——共享,摩拜单车、ofo、小鸣单车等等,像是一群后起之秀,代替了共享汽车的话题,历史总是惊人的相似,在品牌传播方面,总能找到前辈的痕迹,总能找到相似的设计手法。

    ———————————————————————————————————————————

    · 摩拜单车

    乍一看,这启动图有点眼熟,是的,Uber,接下来还能看到更多相似的规范,但品牌感的打造也很符合和高度一致,让用户印象深刻,相信其在后续的改版优化中会自成一套视觉系统

    运营弹窗的规范也很一致,小篇幅插画配以活动文案

    甚至于数字输入框都有相似的暗黑风界面风格和机械键式的输入反馈

    摩拜也有不那么统一的页面,比如个人中心页,总有很强的跳出感,人物风景插画手法和风格也不那么统一和明显,更多的插画印象是摩拜logo那辆单车了,或者可以把这里单车作为吉祥物做更多的延展应用,丰富场景和形态,或许是个不错的优化方向

    摩拜也是一样的吸取了滴滴的做法,不厌其烦的在活动页中放置logo标识,敬请挖掘logo位

    印象板/基因板:相比于uber的高逼格性冷淡风,摩拜在打造专业、科技的品牌感中又带点国人喜欢红红火火热闹的氛围

    ———————————————————————————————————————————

    · ofo

    ofo和滴滴类似的试着衍生出一个形

    和slogan的结合

    app中的应用:主色+圆弧形

    宣传物料中的应用

    O型的创意延展

    线上h5活动中应用:主色+圆弧形

    插画的应用:更直观的,ofo请来了鹿晗代言,主打用户和调性,一下子就清晰明朗了很多,所以在插画方面,亦或是配色的氛围打造上都是青春、活泼的感觉,这种感觉给到站内缺省页、提示插画、对外宣传插画都可以进行绘制风格上的高度统一

    还可以补充h5活动等运营坑位的规范、人物/吉祥物/场景等插画规范

    印象板/基因板:轻松、自由、温馨、年轻

    相对来说,ofo在VI规范方面做得更细致,更统一,但有个缺陷是app中的主色柠檬黄太过亮眼,感觉不那么舒适。

    ———————————————————————————————————————————

    · 基因3要素

    想象下小说里的人物设定:希望通过服饰来展现第一印象、体形来表现高矮胖瘦、出现在不同场所里言行举止的表现来传达同一个人设

    如果不知道怎么做自己,那么先找一个人设榜样,所以品牌建设也可以找一个榜样,最好还是外国的,这样更容易和国内竞品拉开差异。运营活动页大部分都是围绕主色设计,小部分会用到其他辅色,但基因3要素中总有一个在活动页中提现。

    同理,人设思维转换成品牌模样的塑造应该也就是以下基因的表达

    ———————————————————————————————————————————

    · 品牌规范清单

    审视UI规范,将一下要素至少一种体现在UI kit中,VI规范也可作为视觉设计的规范指导,或直接拖用

    · 色(品牌色)

    规定主色,并建立辅助色体系,丰富色彩选用并规范业务线辅助色彩,制定用色规则,比如尽可能的用邻近色(如,ios规范),或尽可能的用撞色(如,MD规范)

    · 形(Logo/辅助形/吉祥物)

    - logo横竖版样式(附logo推导过程)

    - 不同场景的logo模板

    - logo/辅助形的常用物料范例

    - logo/辅助形的创意组合范例

    - logo与字/slogan的结合应用(例ofo,可加深对slogan的解读)

    · 场景(人景插画/真实风格图)

    - 建立插画组件库和模板库,可供快速调用

    (拉平插画质量,简洁易学,考虑业务统一与差异,可根据不同场景、人物着装、色彩调整适应不同的业务模式)

    - 真实风格图选用范例和选用规范说明

    (限定所要选取的图片风格、色系、角度、氛围,甚至是图片色调)

    注意一点,插画和实景风格也需要保持气质调性的统一!欢迎加入UI设计群587751709

    ———————————————————————————————————————————

    END

    相关文章

      网友评论

        本文标题:【文章】品牌的模样の出行类品牌案例分析

        本文链接:https://www.haomeiwen.com/subject/ljpeixtx.html