赞助商
立即赞助

用品牌基因法,三步帮你搞定图标设计!

UI设计3年前 (2021)更新 流光
2.6K 0 0

@Jenny黄静雯 :​​​相信很多同学会,看理论的时候觉得很道理,看完后却不知该怎么实践,久久之便会产「看过很多设理论,却仍不好设」的困惑。今天静雯就从理论到实践,用设的《用品牌基因法图标设计,是高级UI设计师才的手法!》理论来重设计链家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粗细为8px,而链家首页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黄静雯」

用品牌基因法,三步帮你搞定图标设计!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

9月4日,Google 终于发布了Android 10的正式版本。此前的内测阶段它一直以 Android Q 的名字示人,无论是交互、使用体验的优...
Android 10
作为一枚设计民工,不仅要面对甲爸们的百般刁难,遇到难搞的数据图表时更是苦不堪言:一份合格的数据图表,在有创意、让信息...
UI
有什么方法可以极速适配iPhone X ?今天这篇好文腾讯设计师以QQ空间H5的项目为例,给大家分享最快的适配方法! 一. iPhone X...
H5页面
在提高可用性的建议中,如何优雅、清楚的告知用户哪里出错了是非常重要的。当然,如果能够一开始就避免他们犯错是最好的。 ...
交互设计
编者按:无论是APP还是网页或者某项服务,在完成设计之后,投入市场之前,总需要通过专业的测试和评估来尽可能减少潜在的问题...
Adam Fard
文章分享了弹出框都有哪些,以及弹出框应该怎样使用。 前言 任何一款应用程序都少不了提示。当我们需要告知用户某些特殊消息...
交互控件
现在,当你打开 Instagram、Airbnb、Apple Music、Twitter、Dropbox 这些应用的时候,乍一看很难区分清楚彼此的区别:带有圆...
App设计
编者按:这篇文章来自 Taras Bakusevych 的文章《How to simplify your design》 如今的数字产品,在不断迭代过程中,会加入...
App改版