网易设计大咖带你3小时玩转ICON设计

大家好,欢迎大家学习黑马带你学设计-3小时玩转ICON设计的系列课程,本季课程主要讲述如何在最短的时间内设计出优秀的ICON。

大家好,欢迎大家学习黑马带你学设计-3小时玩转ICON设计的系列课程,本季课程主要讲述如何在最短的时间内设计出优秀的ICON。

1.icon设计

图标,英文名称为icon。它起源于拉丁词 ‘ eikṓn ‘意思是 “likeness, image”。 图标是全世界最通用的语言。这是一种人人都能理解的语言,不论国籍、种族、年龄或性别。图标无国界。计算机系统代表图标的文件后缀名为.ico。icon是具有明确指代含义的计算机图形,它具有高度浓缩并快捷传达信息、便于记忆的特性。我们狭义的理解icon设计就是计算机交互界面上的图形,当然广义上还有交通指示牌等等.

2.icon演变史

icon设计到今天大致经历了三个时期。在早期的操作系统中,图形和色彩相对简单,主要通过简单的渐变和阴影来绘制交互界面。我们可以看到这张图就是早期计算机的交互界面。

那个时候的计算机内存和CPU的效能和今天都没办法比拟,所以人们的审美也受到技术的限制,我们只能设计出这种相对简陋的icon设计元素,现在看起来相对单调乏味,不过在当时呢,已经算是里程碑式的跃进了。

随着计算机成像能力的发展,在中期icon设计发展出了以拟物化为风格的界面设计。设计师可以设计出色彩更加丰富细腻,更加真实的icon设计元素。在中期主要以写实的设计风格为主。让icon看起来更加生动贴近现实。

到了后期随着网络的普及但受到带宽的限制,计算机软件界面要求能最快时间加载并呈现给用户,拟物化风格icon显然加载会很慢并大量消耗流量,人们也看腻了拟物化的icon。根据现实需求,扁平化icon问世了。就是我们现在依然在用的扁平化设计风格。

使用Icon的好处:

● 节省空间

一个icon可以代替一个语义,但只占一个字符位置

● 简洁易懂  

比如一个房子,无论各种语言,认不认识,都知道点击带房子图标的东西可以到“首页”。

● 易识别

人脑处理图形的速度很快,也不需要像文字一样去阅读,扫一眼就知道,快速理解。通常带图标的项目优先级较高,起着重提示、引导作用。

● 增强美感

一套好的设计界面,搭配美观合理的icon设计对提升视觉体验非常有帮助。

● 建立品牌形象

独特的视觉语言也是建立品牌形象非常重要的因素,这一点在企业logo和vi系统 的设计上有很好的体现。

3.icon与标志的区别

icon与标志的关系是同源关系。可以说icon是被包含在标志范畴内。标志一般是企业文化和企业灵魂的高度凝聚。而icon我们泛指是计算机交互界面上的图形。他们的相同点都是具有明确指代意义的图形,不同点在于他们的用途和表达方式及风格等都略有差异。看图例

4.icon的种类

5.icon设计的注意事项

我们在绘制icon的时候也应该遵循形色质三个维度去绘制和考量。首先我们应遵循

形状统一

在日常设计工作当中我们绘制的icon都是成套出现的,很少会有让设计师只绘制一个icon。所以我们在绘制icon的时候要保证所有icon的设计风格是高度统一的,看图例

色彩统一

我们在绘制成套icon的时候要遵循UI设计规范中对颜色的规定。如果是单色的icon,那么整套icon应该是一个色值,如果是彩色的icon,在颜色的明度和饱和度上也应该保持高度的统一。

风格统一

同样的道理,我们在绘制成套icon的时候icon的风格必须保持高度统一,不能出现线条宽度不一致,色彩不一致,有线性的块面甚至是拟物化的icon混杂在一套icon当中,这个是绝对不允许的。

以上内容实例均附视频教程,点击链接即可观看学习:

https://study.163.com/course/introduction/1006083854.htm

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容