恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
网易设计大咖带你3小时玩转ICON设计
0.0°
2018-09-29 原创文章 教程 举报 2086 7 4 0

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


Image title


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



1.icon设计


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


2.icon演变史


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


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

Image title


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

Image title


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

Image title


使用Icon的好处:


● 节省空间

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


● 简洁易懂  

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

● 易识别

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

● 增强美感

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

● 建立品牌形象

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


3.icon与标志的区别


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

Image title

Image title



4.icon的种类

Image title



5.icon设计的注意事项



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


形状统一

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

Image title


色彩统一

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

Image title



风格统一

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

Image title


黑马设计答疑解惑交流群:172178479


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

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

Image title




相关课程链接:

《UCS版式设计法则》

《平面版式设计》

《网页UI设计》零基础入门篇

《零基础学LOGO设计》

《配色原理》

《平面排版印刷设计》



更新:2018-09-29

收藏

7人已收藏

黑马UI

设计交流Q群172178479

  • 37

    作品

  • 57

    粉丝

  • 2

    关注

  • 干货分享!平面版式设计必修课!大厂设计师13年经验总结分享!
  • 图标icon设计必修课-零基础入门
  • 网易设计大咖带你学万能排版技巧
  • 13年设计总监带你了解配色原理!

    猜你喜欢

      2018-09-29 原创文章 教程 举报 2086 7 4 0

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

      0.0°

      你确定要举报网易设计大咖带你3小时玩转ICON设计

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年09月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      7
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录