技法|高级的设计技法，UI设计师应该有品牌意识！
_原题是：高级的设计技法 ， UI设计师应该有品牌意识！
前言
UI设计师不是品牌设计师 ， 但是得有品牌思维 ， UI设计中融入品牌基因 ， 会让你的设计更具有独特性 ， 拥有品牌元素的页面更容易让用户记住 ， 会带来更大的附加价值 ， 有信任感 ， 优秀的UI设计师不仅能够把控视觉美感 ， 更重要的是做对方向 ， 准确的表达！
这篇文章会从品牌色、功能图标、装饰性元素、品牌形象映射 ， 这几个方面讲解UI设计中的品牌概念！
案例解析
文章图片
首先分享一款优秀的作品 ， 韩国的电商产品11街 ， 有鲜明的品牌色 ， 一致性的商品吊牌图形强化品牌 ， 这个图形在各个地方都出现 ， 用户只要看到这个图形就能快速的认出11街 ， 这样不断的强调品牌 ， 用户的认知上就会留下产品专属的品牌印象！
1）品牌色
当我们提到可口可乐、星巴克 ， 脑海中会自然而然联想到和这些品牌相关联的颜色 ， 可口可乐的红色瓶身；星巴克的绿色logo；这就是品牌色的作用！
色彩作为品牌传达中非常重要的要素 ， 在UI设计中有着不可小视的作用 ， 看一下网易云音乐界面传达的品牌印象——红色 ， 整个产品就一个色相 ， 让用户很容易能认出这是哪款产品 ， 视觉上更为舒服 ， 听歌也能更加沉浸其中！
文章图片
很多UI设计师喜欢用很多颜色来丰富页面 ， 这样其实并不能有效的传递品牌概念 ， 因为越简单的颜色越容易让用户记住！色彩是品牌在用户心中构建品牌辨识度的第一步！
文章图片
上图为一致性很差的产品 ， 整个产品很难辨识主色调的色彩特征 ， 设计师可以说根本没有品牌概念 ， 这样的设计用户很难对产品留下印象 ， 也不会有信任感！
产品界面中一般分为两种元素：
1、系统元素
文章图片
系统元素不会随着内容变化而变化 ， 是固定在界面中的元素 ， 例如图标、标题等！这些元素对品牌起着非常大的作用 ， 所以一定要设计好 ， 后面会分享一些系统元素设计经验！
2、非系统元素
文章图片
非系统元素是一些随时变动的内容 ， 例如banner、直播封面等 ， 这些非系统元素对品牌的影响小很多 ， 但也要能与系统元素保持和谐！
系统元素的设计经验：
在设计系统元素时 ， 界面的非系统元素可以先用灰色图片代替就好（例如把banner位用灰色图片代替） ， 这样非系统元素的色彩不会干扰到你的设计 ， 系统元素最好能有明显的色彩特征 ， 能够突出品牌印象！
就上图而言 ， 没必要把所以图标都设计成各种颜色 ， 可以用中性色（黑白灰）没有色相的颜色来代替 ， 这样能有效的保证品牌色彩印象 ， 同时区分了主次功能 ， 整个产品会更有层次！
2）功能图标
在产品设计中 ， 要善于在图标中加入品牌元素 ， 这样更容易给用户留下专属的品牌印象！
文章图片
文章图片
“11街”的功能图标提取了logo的图形特点 ， 这样的图标设计很好的区别于竞品 ， 有自己的调性 ， 大大提高用户认知品牌形象！
文章图片
“想去”APP品牌元素 ， 提取启动图标的拐角箭头在Tab图标、刷新、加载更多中 ， 使产品有品质感、一致性 ， 具有独特性！
文章图片
Yoho!now的Tab图标跟启动图标是一样的风格 ， 很好的建立用户对产品的认知 ， 导航栏产品的名字 ， 强调品牌概念！MONO直接把产品名称作为Tab图标 ， 都是在强调品牌基因！
3）装饰性品牌元素
最近老罗发布会上重点讲的“子弹短信”成了一款爆品 ， 熟悉锤子产品的用户 ， 相信很多人在没打开“子弹短信”产品时 ， 可能就已经猜到页面的风格了 ， 这就是锤子在设计方面做的品牌概念 ， 锤子专属轻拟物的风格 。 这就是品牌印象带来的附加价值 ， 有效建立了用户对品牌的忠诚度！
文章图片
锤子的产品一直有自己设计风格 ， 就是强调老罗的工匠精神！
文章图片
一个简单的线框 ， 虽然只加了1像素的高光 ， 但给人的感觉就是精心设计过的 ， 跟老罗宣扬的工匠精神似乎是那么吻合 ， 所以UI设计中这些品牌元素概念 ， 会带来很强的品牌印象！
文章图片
在各大品牌手机都在跟着行业老大苹果的风格走时 ， 锤子手机独树一帜 ， 找准定位 ， 坚持自己风格 ， 不盲目跟随 ， 这就是做老大的思维 ， 未来强者的行为！
当苹果iphoneX齐刘海出来 ， 各大品牌手机纷纷效仿 ， 这样的企业一直跟随强者永远是老二思维 ， 跟着强者走可以减少研发的投入 ， 实现盈利最大化 ， 但其实只是看中眼前的利益 ， 很难成为行业的引领者！
同理 ， 要想成为优秀的设计师 ， 要有做老大的思维 ， 要有意识培养自己的设计风格和自我品牌的塑造 ， 不盲目跟随 ， 这样才能拥有设计师核心的竞争力！
4）品牌形象映射
文章图片
“得到”APP品牌形象猫头鹰映射是创始人罗振宇的“罗” ， 这是品牌设计中很常见的技法 ， 一个自带流量及向心力的创始人 ， 一定要好好利用个人品牌！
文章图片
“得到”首页最醒目的六个图标 ， 给用户透露出浓浓的书香气 ， 配色带有高品质知识的气息 ， 这就是“得到”要给用户的品牌印象 ， 更是一种视觉营销 。
总结：
UI设计中的品牌元素 ， 能够增强用户对产品的认知和记忆 ， 一致性的视觉设计更具有美感和提高使用的效率！
UI设计的三个品牌概念：
1、产品视觉的关联性
从产品的品牌概念中提取颜色 ， 从logo中提取图形 ， 建立产品的品牌属性 ， （例如产品中的吉祥物） ， 保证视觉上的统一与关联性 ， 把品牌概念渗透到产品基因中！
2、品牌元素的一致性
一致性的设计 ， 要有明显的色彩特征 ， 图形的一致性 ， 功能图标的一致性 ， 这样品牌做延展会更容易匹配用户的心理模型 ， 降低认知成本！假如为产品做广告也会有更加理想的效果！
3、差异化设计
从品牌入手创造设计的独特性 ， 是差异化设计最有效方法 ， 能够区别于竞品 ， 避免同质化！
【技法|高级的设计技法，UI设计师应该有品牌意识！】 最后
优秀的产品都有很强的品牌属性 ， 产品有品牌概念会带来更大的附加价值 ， 吸引用户 ， 建立品牌忠诚度 ， 提升产品的魅力价值！
推荐阅读
- 宇宙|科学家发现神奇图案，被称为“上帝指纹”，宇宙是被设计好的吗？
- 临床试验|案例实战｜手把手教大家做“TITE-BOIN”设计
- 闺蜜家的晚餐，晒圈引来无数点赞，网友：普通中透着高级的仪式感
- 迎角|高速直升机的旋翼系统设计为什么比较难？复杂的涡运动了解一下
- 宁德时代|宁德时代前沿技术解析：极片层级微结构设计
- 太空|早安太空·网罗天下｜探月工程总设计师吴伟仁讲解探月计划新动向
- 磁带|设计成果曾承载几代人回忆 盒式磁带发明者去世
- 猪场|目前主流4种出猪台的设计，如何体现防非意识？
- 王贻芳|王贻芳代表：“十四五”争取完成CEPC所有技术设计和关键技术预研
- 史上最详细的熬汤技法大全，看完后再也不用为熬汤发愁了！