当前位置: 首页 >  视频营销

重设计链家TabIcon:用品牌基因法搞定图标设计

发布日期:2019-10-19

​​​相信很多同学会有,看理论的时候觉得很有道理,看完后却不知该怎么实践,久而久之便会产生「看↹过很多设计理论,却仍做不好设计」的困惑ぷ。今天静雯就来带你从理论到实践,用菜心设计铺的《经验分享|利用品牌基〧因法进行图标设计》理论来Л重设计链家Tab Icon。

文章大纲​:

提取理论 选择合适的设计对象 实例展示

一. 提取理论​

文章∥使用的「用品┈┉牌基因法做图标」理论源自菜心设计铺。从理论到实践的第一步是吸收理论关键点,┊┋从菜心的品牌基因法做图标的方法中做了提炼。为方便阅读本文,此处简要介绍部分理论,详情请⊿同学们看原文好好吸收。​

品牌基因ы的定义:视觉层面的品牌基因就是通过一件事物提取出一个(或一组)视觉符号。

?

将品牌基因应用到图标中的方法如下:​

1. 提取特定形状,直接应用​

支付宝将Logo应用为Tab首页图标,same将Logo应用为我的图标。​

△ 支付宝&same Logo在Tab图标的应用

​2. 吸取品牌颜色

闲鱼Tab图标使用了品牌色——黄黑色。​

△ 闲鱼Logo在Tab图标↔的应用

​3. 抓取风格特点

网易美学Tab图标使用了品牌的心形图形和品牌色红色г。​

△ 网易美学Logo在Tab图标的应用▀

​理论经过初步吸收后,实践既可以检验你是否真的掌握了理论,又可И以强化对理论的深入理解。下面我们开始实践●·吧!

二. 选择具有明显特征的设计对象​

​选择合适的品牌形и象来提取基因。要求:

品牌特征明确,易提取易设计。 该品牌的Tab图标缺少品牌特征。 比较熟悉了解│┃的产品。

按照上述的三点,选择了链家tab图标进行重设计。

1. 品牌特征明确,易提取易设计

链家是二手房新房交易平台,其品牌Logo是一所房子的剪影,App Icon直接应用了这个图形๑·ิ.·ั๑。

△ 链家Logo及App Icon

经过Ⅷ分析,我们提取出4个特点:

一条线:一条转角圆〣润的矩θ形线条·构成了房屋的剪影。 一个点:点睛之处,将图形连为一体。 断线:点与线之间断开。 绿色:链家的品牌色。​

△ 链家Logo的4个特点

​2. 链家的Tab图标缺少品牌特征

链家目前Tab图标只有绿色这一个品牌基因在里面,这使它无法很好的与其他应用的图标区分。因此尚存较大优化空间。

△ 链家App Tab图标缺少链家品牌基因

​3. 比较熟悉了解的产品

只有比较熟悉了解的产品,你对其的重设计才会相对不浮于表面。不过此次Icon的优化主要是从视觉层面优化。

三. 重设计展示​

链家的κ4个Tab图╭╮标分别是首页、消息、看房、我。接下来我们便用♂提取的理论来指导设计。​

1. 提取特定形状,直接应用——首页图标设计​

链家现在的首页图标与网上搜索的首页图标,缺乏识别性,甚至和第一排第三个非常相似。​

△ 链家首ↇ页图标与网上搜索的首页图标对比

​实际上,链家Logo本身就是房屋的剪影,可以说已经具有首页的含义,其自身的4个特点,使它比网上的图形更具识别性。

△ 链家Logo与网上搜索的首页图标

​《用品牌基因作图标》理论的第一条,提取特定形状直接应用,对于链家首页icon十分受用,于是我们确定使用logo图〡形作为首页icon。

我们把链家Logo的放到750*1334px的界面里,将其尺寸调整至42px后,链家Logo粗细为8▌px,而链家首页icon≮≯粗细为3px,经过优化后将链家Logo粗细调整为4px。

△ 链家Logo直接应用于界面

△ 链家Logo粗细调整为4px

2. 抓取风格特点——消息图标设计​

消息图标的设计,※结合我们上面提取的链家Logo的4个特点 :一条线、一个点、断线、绿色。按下面的步骤逐◇一完成。

第一步:画好基础形。 第二步:在图标右下的位置断开(链家Logo的断开位置)。 第三部:添加点,添加品牌色。

△ 消息图标设计过程

​3. 度的把握——我的图标设计

在设计我的图标时,一开始我是很执着的使用之前提取的4个品牌特征,转角圆润的矩形、小圆角、右下角断点、一条线构成整个图形,但总是有点不对。​

△ 我的图标设计探索

​最后选择使―用大一些圆角来过度,断点也不执着于右下角后,整个Icon视觉◥上就舒服Ⅱ多了。所以品牌特征也不能强加,协调、整体风格符合即可。

△ 我的图标▅▆确定稿

剩下的图标如法炮制,4个Tab图标就搞定了。图标完成后更需要放入应用的场景ρ检查是否与之匹配。​

△ 具有链家品牌特征的Tab图标⿻

△ 优化后的Tab图标在界面的应用

​4. 度的把握——8个入口图标设计

Tab图标完成后,我们发现链家首┌页的8个入口图标也存在一些优化空间。8个图标都使用了尖锐的转角,与Logo的圆润转角不符。使用了矩形元素,而非Logo的圆点,缺乏一定的品牌特征。此外整个首页的其他控件等也是比较圆润,这使得8个有着尖锐直角的图标有一点突兀。此外视觉大小不一,部分图标细节繁杂。

△ 链家首页8个入口图标

​由于Tab图标的设计已经有了明显的特征,链家首页的8个入口图标的优化便会更克制,仅添加了圆润转角、圆点●2个品牌™特征,使其有所呼应即可。

△ 优化后的链家首页8个入口图标

△ 优化б后的图标效果应用效果

四. 思考总结

从「用品牌基З因作图标」理论到实践,关键是品牌特征的︹︺︻提取,其次则是对品牌特征的灵活运用,而对品牌特征的运用程度把控是使整个图标协调的重点。

纸上得来终觉浅,绝知此事要└躬行。理论经过初步吸收后,实践既可以检验你是否真的掌握了理论,又可以强化理论的深入理解。所以快去操作来巩固理论吧!​​​​​

 

作者:$Jenny黄静雯(微信公众号:「Jenny黄静雯」),平安银行视觉&插画设计师◁。微博设计美学博主,花瓣认证设计师,优优网入驻设计讲师,深圳市插画协会专业会员,视觉中国签约设计师。

本文由 @Jenn↑y黄静雯 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Pixabay〾,基于 CC0 协议

  • 勒克斯:预计2025年3...

              具国外研究机构勒克斯昨日发布的数据表明,3D打印的市场规模将翻倍,至2025年其市场产值将达到120亿美元。其中3D打印机将交织32亿美元,打印的材料将占20亿美元,70亿美元来自其它延伸的价值。   勒克斯研究分析师采访了近100家企业在3D印刷业,并开发了一个模型结合特定行业的材料和市场需求,以及新材料的历史的采用...

  • 故宫回应上元夜活动票秒光...

      【环球网科技综合报道】故宫博物院官方微博今天(2月19日)凌晨发布《关于“紫禁城上元之夜”文化活动的特别公告》,公告称,本次活动采取实名制免费预约方式,参观人数每晚限定3000名,请广大观众给予理解,勿相信其他任何渠道出售的门票,以免上当受骗。   其中,2月19日晚,有2500名驻华使节、劳动模范、北京榜样、快递小哥、环...

  • Localytics:目...

            199IT原创编译         过去,用户对应用非常挑剔,现在却比以往任何时候都更加沉浸其中。个性化的消息传递、不显眼的广告、丰富的内容以及大量其他功能是实现卓越用户体验的关键要素。         Localytics发布了应用用户留存率和放弃率的最新数据。留存率是指返回应用10次以上的用户比例,放弃率是指一次会话后...

  • 复盘:100份简历中4人...

    本文笔者通过对自己的一次产品经理招聘的复盘,从招聘方的角度来分析:产品经理招聘从筛选简历到面试的种种需要注意的问题。 从去年年中开始,接手了一块新业务,在这半年时间中,我搭建了一个新的产品团队,并带领团队。在兼顾原有产品线工作的同时,从零开始设计了一个全新的saas系统。在这期间,整个人处于非(pi)常(yu)忙(ben)碌(ming)的状态,文...

  • 设置网站TDK的办法有哪...

        对于网站优化,网站的标题、描述、关键词的设置非常重要,要建立合理的有利于站点优化的能力,SEO优化公司应该告诉你如何下步的设置。网站描述的合理定义有利于网站优化。描述必须基于公司名称+业务或服务项目结合关键字匹配词。         先...

  • 沈梦辰闲鱼店铺二手大衣被...

      2月10日消息,有妹子称在沈梦辰闲鱼店铺花7200元购买的GUCCI(意大利时装品牌)白色大衣经鉴定后是假货。对此沈梦辰微博回应称:我在闲鱼上卖的所有物品均是自用,来源于专柜或代购。如果有凭证鉴定是假货,我坚决无条件退货,并且鉴定费用我出,退货后我也会找专业人士再次鉴定,一定负责到底,从售出到售后一条龙服务,绝不做一锤子买卖。   沈梦辰表示,一直以...

  • 头号运营:玩转三端,运营...

    什么是头号运营的必备素养呢?——掌握前端资源的把控力、中端交易平台的认知力、后端私域流量的维护力。 古话说:不谋万世者,不足谋一时;不谋全局者,不足谋一域。 这句话在四五年前就听说过,当时对其理解仅停留在字面的意思上。 直到最近深度剖析完美日记和李佳琦的成功经验,才发现今时与彼时的运营概念已经不可同日而语,此时对运营进行全局思考显得格外重要——明...

  • 2014年广交会成交额3...

    当第115届广交会(Canton Fair)落下帷幕时,成交额数字证实了主办者此前的担忧——中国的出口仍在继续面临经济逆风。广交会是中国最大的外贸展会。 本届广交会成交金额为310亿美元,比去年春季广交会减少了13%,采购商也从20.2766万家下降至18.8119万家。 广交会发言人刘建军表示,“这表明传统市场复苏乏力,新兴市场需求疲软”。 主办者此前曾警告称,中国出口正面临来自其他国家“更.....

  • 对于nofollow标签...

    nofollow是什么意思?nofollow的添加方法有哪些?nofollow的具体作用是什么?nofollow与robots的区别有哪些?这一系列关于nofollow的问题,相信是许多SEO新手比较想了解的,那么,我们 […]nofollow是什么意思?nofollow的添加方法有哪些?nofollow的具体作用是什么?nofollow与robots的区别有哪些?这一系列关于nof...

  • CB Insights:...

    今年第一季度,金融科技领域获得的风险投资大幅减少,中国受到的打击最为严重,该领域投资额几乎比上一季度减少了一半。 最初,投资者纷纷涌向中国的金融科技初创企业。这些企业承诺,将通过部署区块链和其他技术,彻底改革从支付到合规的各个方面。但监管层发起的一场整顿行动——部分出于对金融体系中的系统性风险的担忧——打击了投资者情绪。 追踪风险资本和初...

  • 可以检测你年龄的面部识别...

    如果不看某些女明星的资料,就看脸,你能猜出她们的年龄吗?比如周慧敏,潘迎紫,孟庭苇,还真的很难猜,她们就像从某个山顶洞修炼几百年出来的,还是那么年轻。有没有一种软件能够识别出她们的真实年龄?根据面部识别判断年龄的Face.com能猜出来吗? Face.com最新更新的API能通过扫描照片识别年龄的最大值与最小值,取一个估计值,虽然不是很精确,但也能...

  • 单身经济专题之二 :人设...

    报告下载:添加199IT官方微信【i199it】,回复关键词【人设与陪伴经济学】即可 95-05后是富足的一代,也是孤独而焦虑的一代:目前,全国95后-05后群体共有2.64亿人,占总人口的18.9%。他们是移动互联网的原住民,成长于物质富足的年代,乐于接受新鲜事物;但是他们又处于持续的孤独和焦虑之中。国金证券研究所-消费升级与娱乐研究中...