• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 实战案例!腾讯QQ支付品牌重塑设计背后的经验总结

实战案例!腾讯QQ支付品牌重塑设计背后的经验总结

作者:腾讯设计 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含QQ支付,品牌设计,改版设计,经验分享,设计改版等相关知识,腾讯设计希望在学习及工作中可以帮助到您

大家见到的大部分支付类产品,在视觉系统上大都选择较沉稳、低调的风格,对产品的可信任度上会产生一定的影响,不过,是不是意味着,支付类产品只能选择这类的配色风格呢?

QQ 支付品牌设计想探寻不大一样的风格,面向年轻的用户群体,使用鲜明的色彩对比,希望能增强大众的认知度和识别度。

我们也针对 QQ支付的品牌设计做了不同的设计尝试。

设计 Logo 是需要考虑定位的,因为 Logo 会一直跟随在各个场合或角落,比如广告牌上、宣传单上、网站上、各种周边产品上,你会发现一个 Logo 就是由这些肉眼看得见的东西;比如颜色、形式、质感、形状等组成的,同时向人们传递出一种无形的东西;比如产品的性质、气质、理念、愿景等等。

所以在设计 Logo 之前,最好是能考虑到这三个层面:无形的定位层面、有形的视觉层面、视觉延展层面。也就是 QQ 支付品牌设计进行的三步骤(如下图所示)

一. 品牌调研及定位

Logo 的设计需要对整个行业与市场进行研究,摸索出这个行业中产品品牌的固有特征与行业属性,这些调研信息能够帮助设计师在视觉设计时思路更加明朗。

1. 国外支付类品牌

2.色彩分析

3. 图形分析

4. 相关产品收集分析

通过对支付类 Logo 的市场调研并得出相关结论,结合 QQ 支付该产品的目标人群与产品特性,得出以下品牌设计模型。

二. 品牌标志设计

从第一步的品牌调研与定位中得出了相关结论,并结合品牌设计模型,需要清晰的价值体系和全新的识别系统,第二步便从品牌标志设计开始,标志的立意要表达清楚,让使用者很容易懂或很容易识别,介于这个基础之上,再以更美的姿态表达出来。

1. 品牌关键词的搜索

2. 标志设计草图

接下来,设计师们开始绘制标志的黑白草图。草图标志的设计元素较为多样,包含:卡片、钱、平台、支付手势、支付状态与完成等。

3. 标志设计提案

设计师做了以下的风格尝试:

方案 1 : 扣在一起的两个方形元素寓意着不同的文化与平台,抽象的几何方形元素与 QQ 的剪影达到比较巧妙的结合,意在传达出 QQ 支付品牌的主要内容。

方案 2 : 将倾斜的两个方形元素重叠在一起寓意着具象的卡片元素,重叠的几何形体搭配深浅不一的色彩组合,丰富 Logo 的层次与深度,还提取了QQ 图形中的眼睛元素,较为简约。

方案 3 : QQ 招手的形态剪影与支付成功的图形结合,清晰传达给用户讯息:QQ 支付,喜欢就付,传达出年轻、热情、支付、以人为本的视觉语言。

4. 优化标志设计

在提案了多种方案之后,设计师们挑选出并打磨更加中意的方案 3。方案 3 中运用了QQ 的剪影,辨识度非常高,这样能较大的降低宣传成本,同时打勾的图形寓意着支付完成的结果,代表满意并安全的支付信息。

不过打勾的图形似乎割裂了QQ 的身体,设计师们又在方案 3 的基础之上尝试多一些,接着就是优化标志设计这一步了。

在色彩的选择上,对不同色值的蓝色与黄色也进行了多种尝试。

5. 最终方案

设计师们决定用 QQ 的剪影、支付成功的图形组成一个独特标志,图形与 QQ 之间达到平衡,更好的传达所提供服务的重要性,以确保 Logo 能够传达出品牌的内在品质,希望能体现出它应该给人带来的安全、活力、以人为本,尝试让品牌信息更加 “掷地有声”,语气强而有力,值得信赖。

6. 色彩设计

选择明亮的蓝色与黄色作为新的主色,能更好地体现 QQ 支付较强的生命力,充满清新活力,又有助于提高产品延展的可用性。

三. 品牌设计规范

一个好的 Logo 可以用来做视觉延展的,便于应用在更广泛的场景里,当人们一看到这个视觉元素,在脑海中立马就会想起它,也就是占领了用户心智,从而增加了用户与品牌之间的情感粘性,品牌形象深入人心。

1. 图形元素

视觉延展的图形元素来源并不是凭空捏造的,图形元素需要与品牌、Logo 之间是有规律可循的,QQ 支付用简约的抽象图形表达 QQ 支付的品牌特性,这样的视觉延展更具有流动性。

2. 图形结合

3. 辅助图案

4. 设计元素

5. 应用设计

QQ 支付品牌系统设计,设计师们希望能兼顾功能与审美,尝试建立清晰的价值体系与全新的识别系统,从无形的定位层面、有形的视觉层面、视觉延展层面三个方向建立值得信赖的 Logo、友好的配色以及丰富灵活的视觉延展。

我们希望以全新的形象对外展示 QQ 支付,也期待大家会喜欢全新的改变。

「经典案例!看这些知名品牌如何重新设计」

  • 《涅磐之路!Aviary设计师的Material Design改版实战》
  • 《腾讯有30多个LOGO的重设计,都是靠这个思路完成的》
  • 《幕后的故事!数字银行品牌升级的设计过程全揭秘》
  • 《用一个实战案例,帮你学会讲述重设计作品的思路》
  • 《能过稿的LOGO!谷歌设计师如何为Squared做品

您可能想查找下面的文章:

  • 实战案例!腾讯QQ支付品牌重塑设计背后的经验总结

相关文章

  • 2018-08-23莺飞草长,这个三月将会流行这3种网页设计趋势
  • 2018-08-23从了解用户的注意力开始,创造更优秀的用户体验
  • 2017-08-06web前端工程师入门须知 推荐
  • 2017-08-06CSS3的几个标签速记(推荐)
  • 2017-08-06网页设计中设计出有层次感的界面的经验介绍
  • 2018-08-23用腾讯高手的交互自查表,快速搞定设计中的分支流程和异常情况
  • 2018-08-23换了很多家公司还是在打杂,问题究竟出在哪里?
  • 2017-08-06常用的几个单页应用程序网站分享
  • 2017-08-06网页变灰的笔记 细节问题处理
  • 2018-08-23如何写出拥有“带货”能力的产品文案?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 工作复盘:从四大角色带你了解H5制作流程
    • PS教程!教你绘制优设吉祥物之獠麝鸡放鞭炮
    • 如何解决外边距margin叠加的问题探讨
    • 这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
    • 用腾讯企鹅电竞的案例告诉你完整的品牌设计该怎么做
    • 从image/x-png谈ContentType(s)
    • 如何打造极简设计?来看英才APP的实战案例!
    • 如何设计更高效的筛选器?来看网易设计师的总结!
    • 网易设计师:6个技巧让用户参与到你的设计里
    • 好的网站文案 良好的用户体验

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有