转:用品牌基因法做图标设计,高级UI设计师才会的手法!(升级篇)

转自:http://www.uisdc.com/brand-gene-icon-design-pro

图标设计如何具有品牌性?这可能是设计师工作中经常会遇到的问题。

但很多新人也许并不了解什么是品牌性,更不知道如何将品牌性融入到图标当中,不过没关系,看了这篇文章你就不会那么困惑了!

前一阵子写了一篇《用品牌基因法做图标设计,这是高级UI设计师才会的手法》,但只讲了一种提取视觉基因的方法,不够全面。菜心担心大家因为方法的不全面而导致设计效果过于死板,所以近期将整个品牌基因法的体系重新梳理了一遍,增加了一些提取基因的路径,可以扩展我们的设计思维与制作方法。

需要强调一点,文中所讲的品牌基因是指视觉上的哦!

来看下大纲:

1. 提取特定形状

2. 吸取品牌颜色

3. 抓取风格特点

1. 提取特定形状

通过对logo或品牌元素提取特定形状,这个形状是固定的、具象的,例如圆形,三角形、字母甚至是logo本身等等。

提取出形状基因后,如何与图标相结合呢?有三种方法:

1.1 直接应用

最常见的用法就是直接将整个logo作为图标(比如首页),如下图:

再比如MONO的标签栏图标,设计的非常大胆,提取logo上面的4个字母——M、O、N、O后,直接将其作为图标,如下图:

但是这种方法还是有很大的风险,因为毕竟每个字母与功能本身的含义没什么联系,如果不是非常个性化的app,还是尽量少用吧!

1.2 做为外轮廓

将提取的形状作为整套图标的外轮廓,例如谷歌play一样,提取出三角形后,整套图标都是以三角形作为外形,如下图:

再比如你提取出一个圆形基因,也可以将其作为外轮廓使用,如下图:

1.3 将图形与图标巧妙融合

假如我在logo上面提取出一个圆形作为基因,我们可以将这个圆形巧妙的与图标进行融合,如下图:

但这里必须要强调一点,很多时候,我们很难将一个特定形状融入到所有的图标当中,如果强行融合,难免会让人觉得死板生硬,所有一定要有所取舍,例如案例中的图标也不是所有都融入了圆形,如下图:

有同学可能会问,为什么案例中有些图标没有融入圆形基因,也不影响整套图标的和谐统一呢?

因为它们融入了另外一个品牌基因——颜色。也就是我们接下来要讲的内容。

2. 吸取品牌颜色

这招是最简单直接的方法,直接吸取品牌色作为视觉基因,以此来进行图标设计,举几个例子:


颜色基因,我就不多讲了,比较容易理解。

但是大家仔细观察优酷这套图标,我们会发现除了颜色基因以外,好像在logo上还提取了一个叠层的效果,而这种叠层的效果又属于另外一种品牌基因——风格特点,我们继续往下看。

3. 抓取风格特点

这部分是今天内容的重点,也是我最近做图标的一些感受。

我们先来讲讲如何抓取风格特点!

又要开始拿我的作品来举例了,还是iwork那个logo:

除了颜色以外,我在logo上面提取出两个特点:

断:是指整个logo有两个断开的地方

层:是指logo有三个不同颜色的深浅,形成前后关系,也就是层级。

那如何将这两个特点运用到图标上呢?我们看下图:

第一步:先画好基础形;

第二步:将合适的地方断开;

第三步:将局部(小块)调整颜色,以区分层级;

这样一个具有品牌基因的图标就诞生了!

其它的图标也是一样的道理,最后得到整套图标如下图:

上面这个案例只是抓取风格特点的一种结果,不同的案例会有不同的结果,例如网易云音乐的图标,是抓取logo上圆润的风格特点,如下图:

而优酷的图标则是抓取叠层的风格特点,如下图:

小密圈则是抓取断线的风格特点,如下图:

以上就是菜心近期总结的《品牌基因法做图标》整套知识体系,后期会不断的优化改进,如果你有什么好的想法也欢迎和我私下交流,我们一起将这个系统完善起来,帮助那些需要帮助的好朋友们。

最后再提醒大家一下,当一种品牌基因无法突显品牌性的时候,我们可以使用多种基因相互组合。方法一定要灵活运用,切记不要钻牛角尖,不然菜心就白总结了!

学习图标设计的同学,建议先掌握设计流程:《聊聊图标设计流程及小技巧》

设计完成后从这四个方面来审视你的图标:《好图标怎么做?教你从四个方面来评价图标设计的质量》

想让图标出彩,可以从顶尖设计师的分享汲取经验:《顶尖设计师分享的6个图标设计优化指南》

动效图标已是趋势,来这看基础的图标动效设计:《高手常用的六种图标动效设计思路(附大量实例)》

欢迎关注作者的微信公众号:「菜心设计铺」

时间: 2024-08-27 03:41:37

转:用品牌基因法做图标设计,高级UI设计师才会的手法!(升级篇)的相关文章

UI设计师需要做些什么?原来并不难

UI设计师的工作流程--产品/交互/设计.换句话说,我们收到的是互动草案.此时,UI会看到交互设计,需要考虑:1 .这样合理的布局 2 .信息焦点在哪里? 3 .它是什么类型的用户组?等分析是你自己的事.此外,通常我们得到的互动草案是这样的:UI设计问题UI设计师UI设计交互设计师产品交互设计输出必须如下:UI设计问题UI设计师UI设计交互设计师产品交互设计然后中间的坑和分裂由我们自己填充.解决了上述问题后,我们开始设计UI: 1 .从产品要求开始,考虑我们想要使用的主要颜色. 例如,同一组购买

找人做LOGO设计、代人做商标设计、代人做企业公司品牌标志图标、找人做创意名片设计

为了更好地对logo的设计规律进行梳理分析, 探究其创新趋势.本论文将细致分析logo的设计元素的分类及不同元素所代表的含义, 同时对logo的未来创新趋势做出探讨与研究.论文将以国外著名logo网站Logolounge提出的最新logo设计元素趋势图为例, 将其图片含义文字化.书面化分析, 向读者们展现不同类型设计元素的重要性及其应用方式, 同时提出对logo的未来发展创新发展趋势的预测. 1. LOGO的设计定位logo设计即标志设计, 指的是商品.企业.网站等为了自己主题或者活动等目的设计

五步打造APP节日主题设计:以Lofter新年图标设计为例

我们需要做有依据,有逻辑,有理念的设计,需要发散思维,整合创意,严谨输出,让设计经得起推敲 前言 ? 2018年春节已远去,一直想把Lofter新年Logo设计思路分享给大家,直到现在才整理出来,希望这篇文章能给大家一些思路和参考. 每当过节的时候,市场上大大小小的APP icon都进行了节日换装,作为视觉设计师,如何设计出与产品品牌相符合并能营造出节日氛围的设计是我们需要思考的.下面以Lofter新年图标设计为例,分享一下当时的设计思路和方法. Lofter是网易产品中资历比较老的一款产品了,

[计算机图形学] 基于C#窗口的Bresenham直线扫描算法、种子填充法、扫描线填充法模拟软件设计(一)

一.首先说明: 这是啥? —— 这是利用C#FORM写的一个用来演示计算机图形学中 ①Bresenham直线扫描算法(即:连点成线):②种子填充法(即:填充多边形):③扫描线填充法 有啥用? ——  无论是连点成线还是区域填充在高级编程中基本上都提供很高效的库函数来调用.这里拿出这些算法一方面有利于大家理解那些封装的函数底层是实现:另一方面是方便嵌入式TFT屏幕底层驱动开发时借鉴的. 是啥样? ——  如下面的操作,不言而喻. 二.进入正题: 2-1.直线的扫描转换 图形的扫描转换实质就是在光栅

如何应用AxureRP做原型设计

什么是原型呢?这个在之前介绍为什么需要进行原型设计当中有提到,原型是产品的最初形态,确认用户对产品界面和操作功能可用性的需求,高保真的原型接近于产品的最终形态,但仍只是原型.产品原型简单的说就是产品设计成形之前的一个大体框架,对网站来讲,就是将页面模块.元素进行粗放式的排版和布局,深入一些,还会加入一些交互性的元素,使其更加具体.形象和生动. 一般在进行主要页面原型设计之前,设计师需要了解设计需求,如果身兼了需求分析或产品分析等角色,设计过程就会稍微简单一些,因为已经了解了从用户需求到转化成可实

什么是响应式图标设计?

响应式设计主要讲的是布局,那么什么是响应式图标?响应式图标设计是一种根据屏幕尺寸来改变图标类型.从而达到更好可读性的设计. 图标为什么要响应式设计? 怎样阅读内容?时至今日,我们用来阅读内容的平台越来越多.设备.屏幕分辨率.浏览器.平台——我可以拿着5S+Safari+iOS7.0浏览网页,也可以拿着1020+Chorome+WP8浏览网页. 各种选择,各种搭配实在是太多了,这些都或多或少的影响了内容的可读性.而图标作为一种视觉语言,可读性非常重要. 图标设计,首先要满足易于理解.其次,图标的可

架构设计三部曲之如何做架构设计

架构设计不是架构师的专属工作,对非技术人员甚至是开发人员来说,从实实在在的需求到高神莫测的架构设计仿佛是一个神秘的过程,只有具有架构师头衔的人才能掌握各中玄妙,这篇文章就是从最基本的事物关系来回答如何根据需求进行架构设计的问题. 根据我前面的文章,架构的本质是事物与事物之间恰当的关系,不同领域的架构,其事物的指代不同,比如对于组织架构而言,事物指的是人与机构:建筑架构,事物指的是钢筋混凝土与空间.那在软件领域,事物指的是什么呢?我们知道,软件系统的本质是人类将自身无法处理的大量业务相关的数据进行

你会喜欢的20个使用汉堡图标设计的精美网站

汉堡图标用户界面设计已经有很悠久的历史,你甚至无法找到真正的原作者.汉堡图标,也就是三条小横线,一直以来被用于表示指向菜单的链接,是一个用来提醒用户那里有隐藏的菜单列表的最佳方式. 最近涌现了很多使用视频和全尺寸图片背景的网站,所以汉堡图标是这类网页的最佳选择.当点击它时,用户将被导航到网页菜单.下面是我收集的20例采用汉堡图标设计来指示隐藏菜单的网站案例. 您可能感兴趣的相关文章 带给你灵感的20个漂亮的单页网站作品 35个立体动感的视差滚动效果网站作品 10个精美的 HTML5 商业网站设计

Android中文翻译 - Iconography 图标设计概述

2014-10-30 张云飞VIR 翻译自:https://developer.android.com/design/style/iconography.html Iconography 图标设计概述 一个图标是一个图像,它占据了一小部分屏幕不动产.并且为一个活动(action),状态(status),或者一个app提供了一个快速,直观的程序. 当你为你的app设计图标时,重要的需要留下的是,你的app可能被安装在那些提供一个范围的像素密度的多种设备中,就像  Devices and Displ