2020-11-25 周周
今天分享的题目是从品牌到UI,用设计的思想与这个世界和解;这里的我说的和解比较宽泛,大家可以理解成与客户和解,也可与产品经理和解,也可以是与自己和解;
为什么选这个主题呢,原因是之前在网上听一群人总是说互联网走到了下半场,我和好奇,就去查这个下半场到底是什么,后来总算知道了,互联网行业走到现在,已经从增量时代转为存量时代,这个存量时代就是下半场,人口、流量、资本的红利都逐渐收紧。
在这种情况下我的产品如何从同类产品中脱颖而出,或许增加品牌属性是种方法,希望大家在听完这个分享后,会有一些启发。
在互联网的增量时代,品牌设计与UI设计是两条平行线,几乎没有交集,你做你的画册、slogan、包装,我做我的网站、app、微信小程序,偶尔互相模仿,但也不是主流,毕竟两者载体不同,目的不同,用户也不同;
但是到了存量时代,影响用户选择的一个重要因素是「品牌」,一个产品要想从同类产品中区别出来,需要有个性,UI+品牌成为产品生命周期中重要的一环,下面我们看看如何在用户心中植入产品品牌;
在在品牌植入方便,国外很多产品已经走在了我们前面,我们来看看谷歌,谷歌开发者大会上对 Material( Design做了更新,我印象特别深刻的是Google对图形语言单独拿出来做一个模块解释它,它提取了圆形作为视觉DNA,并沿用到产品的每一个控件;
当然,如果我们想传达我们产品的品牌理念,只在图标组件里运用是远远不够的。
诞生于1886年的可口可乐,每年都做产品运营推广,不断大量的重复它logo的弧线元素和瓶子的外形;
还有刚刚过去的双11,从2012年11月11日开始的天猫节,现在是全球最大的B2C平台,天猫猫头运用也是渗透到全产品线里面去了,问大家个问题,大家有没有人知道这个猫头品牌是谁创立的?其实就是马云的继任者,现任阿里巴巴集团董事局主席张勇;讲的有点远了,我们再回到我们的主题;
这个图很好的解释了品牌与产品与用户的关系,产品需要品牌牵引、支撑,现在互联网产品越来越趋于同质化,UI 设计师已经不能局限于界面的表现层,更要了解产品背后的逻辑,然后以业务为依据设计品牌,以品牌为基准去设计产品。
第一章意义Significance,这个章节我们讲讲从品牌到UI的意义
第一个意义是对内:可以规范统一,协作
品牌本身就可以作为设计规范的一个重要指导原则,通过对配色、文字、图标、控件等建立设计规范,可以有效减少设计决策时间,传达一致的品牌调性。
第二个意义是对外:可以提高认知,溢价增值
如果一个产品失去了个性,不看 logo,单纯看界面的话,很多时候根本分不清是到底是哪一家公司的产品。如果能够关注设计细节对品牌的影响,肯定能更好地提高用户对产品的认知,当你对一件产品注入了感情,同时也就为产品提供了营销推广的立足点;也可以这么说,设计师创造的情感性价值,直接实现了产品的溢价增值;
第二章感知Perception
有位设计界的前辈讲过,品牌知名度其实就是信任度的体现,他说世界上最成功的品牌就是宗教,这里没有诋毁任何宗教的意思,但是宗教建立的品牌信任度,远远超过了任何商品;
这里我们从用户的角度出发,看下用户是如何从产品感知品牌的;
在设计产品的时候常常会发现我们觉得理所当然的地方,用户往往没按我们想的方式去使用。那是因为设计师通常有整体观,站在金字塔顶端去规划一个产品的设计,而用户则恰恰相反,在金字塔底端往上爬,他们不知道这个金字塔多高,也不知道从哪一面开始最好爬,所以会遇到各种问题。
同样,用户对品牌的感知由低向高的,用户通过各种场景接触到产品,再通过产品的视觉呈现、功能体验、信息内容等感知品牌,最后在心中形成印象,构建品牌信念,从而影响下次产生相应需求时对产品的选择;
可以联想下我们的购物体验,是不是总是从同一个地方shopping,这就是购物APP品牌价值已经使你已经形成了习惯选择;
作为设计师,我们需要充分理解品牌内核,由内向外将抽象的品牌内核转化为具象的视觉符号,再延伸到用户与产品的各个接触点,从而将品牌理念植入用户内心。
第三章融合Integration既然上面我们讲品牌和UI最终要走的一起,这一章我们讲他们如何在工作融合
第一步,明确定位,提取关键词,建立情绪板
当代广告教皇,美国奥美广告创始人大卫.奥格威说,“最重要的决定是如何定位你的产品。”
在大师的指引下,我们发现首先找到品牌定位,定位自己的细分市场和目标用户;
2.围绕品牌定位提取关键词;
3.建立情绪版,将抽象的概念转化为可感知的视觉;
第二步,提取视觉表现元素,并设计融入品牌定位。我们重点从颜色、图形、纹理、字体四个方面讲一下。
有时甚至不需要任何图形,单凭颜色就能产生对某一事物的联想。
现在UI设计流行的极简风,我们发现这些应用采用极简化设计的同时,图标也变得更鲜艳,更引人注目,说明这些产品也在寻求一个平衡,在 UI 设计变得极简趋同的同时,仍然能保留核心的品牌基因。
颜色在 UI 中的表现有 logo、导航栏底色、图标、文字、可视化图表、插图、按钮等等。
现在UI设计流行的极简风,我们发现这些应用采用极简化设计的同时,图标也变得更鲜艳,更引人注目,说明这些产品也在寻求一个平衡,在 UI 设计变得极简趋同的同时,仍然能保留核心的品牌基因。
图形
我们知道颜色是抽象感知,图形是相对具象的表现方式。
一旦某个特有的图形在用户心中形成烙印,用户见到相似的图形组合都能往该图形联想,从而关系到图形背后所代表的品牌,这也是很多企业做品牌升级的时候 logo 都越来越简洁的原因,因为这样能有效降低用户的认知负担,提高品牌认知。
图形通常从 logo 本身提取,并在 UI 中延伸应用。比如马蜂窝、百度网盘、京东做品牌升级的时候都不约而同地从 logo 中提取了一个代表微笑的弧度,传递友好、温暖的品牌形象。
飞猪提取了 logo 中「猪的发型」用于搜索框,韩国的电商品牌11街也将 logo 延长作为界面中的搜索框。
纹理
在 UI 设计或者运营推广运用中,通过提取品牌图形元素,再运用分形、排列、重复、平铺等设计手法形成品牌纹理。
我们看看京东的启动页用 Joy 的外形旋转做成的纹理背景;
国外著名的聊天应用 Whatsapp,在聊天页的背景用涂鸦插图纹理做背景;
还有腾讯文档的启动页、登录页用了渐变的菱形作为纹理,辅助品牌的视觉表现。
我们还在聊图形复制变形的时候,国外的UI设计已经细化到了十分惊人的程度
例如UBER 在做的品牌升级,设计师出来将每个国家富有代表性的图形提炼, 然后重复运⽤平铺,形成带有地域特色的⼏何纹理,运⽤到闪屏和线上线下的产品当中。
字体
字体是最容易被忽视的设计元素,很多人会认为 UI 中的字体用系统默认的就行。其实字体对于产品气质的体现着很大的作用,很多品牌都把字体设计当成品牌基因中重要一部分。
字体的选择需要契合产品功能特点与品牌调性。
微信读书使用了方正宋三,让人阅读起来有种文字秀丽的浸入感;每日故宫使用了方正清刻悦宋体,字里行间隐含着历史古韵,渗透着文化气息;澎湃新闻使用方正准雅宋体,体现其作为新闻产品「专注时政与思想」的严肃一面。
英文字体也可以使用契合产品气质的英文字体。比如常被用作数字字体的 Din、经典的衬线字体 Playfair Display、⾕歌御用的 Roboto 等。
第三步,融入品牌触点
这里我解释下品牌触点这概念,是指一款产品中品牌信息接触点,是决定用户对产品品牌印象的关键;
我们看几个案例,
启动页:知乎的启动页采用 slogan 加 logo 的方式来体现品牌,这也是绝大多数应用的做法;每日故宫启动的时候伴随着一声钟声,页面会有一个光线流动的动画,极具仪式感,一下子就把用户带入故宫庄严的氛围当中。
图标:东家的每一个图标都融入了印刷式字体的元素,体现其匠人的品牌基因;mono 则直接把产品名称「 M O N O」用于导航栏。
插图:Dropbox 的儿童风格的插画与 B站 的二次元插画都非常契合品牌特征。
品牌触点式多样的,除了上面的启动页、图标、插图之外,还有预加载图、loading、动效、新手引导等等都能体现品牌触点,这些品牌触点,都是讲述品牌故事的关键载体,帮助产品从同行业中脱颖而出,这里由于时间的关系我们就不展开讲了,有兴趣的同学,我们可以单独交流哦
互联网行业已经过了拓荒时代,行业沉淀下了许多有价值的知识,也有许多非常好的 UI 组件和规范文档可以直接使用;
另一方面,很多公司对于 UI 设计在整个产品生命周期中的价值,普遍觉得不是非常重要,UI 设计部门只是一个业务支持部门,起不到主导作用。而如果 UI 设计师做的工作还是停留在把产品的原型文档变漂亮,肯定是不行了。
设计师不仅需要对产品业务和商业有深入了解,更重要的是对于品牌在整个产品链路中的应用与把控。
我们需要走出舒适圈,主动去挖掘更深层次的设计价值,提升自我价值。
诚然改变一个大的设计生存环境是非常漫长的过程。要不停的尝试,就像不停的迭代做新产品一样,不能因为一两次的失败打消掉设计的积极性。
设计的终极最后就是和解 Compromise
开篇我提到了与世界和解,分享下我是怎么和这个世界和解的,我相信三句话,可以跟这个世界和解
再次谢谢大家听我叨叨,如果大家喜欢,下次我们可以叨叨点关于设计的更有意思的事,谢谢
文章来源:tob.design 作者:无名大师29aef85c40
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务