设计师必看的图标(icon)设计指南

2021-7-31 23:34| 发布者: admin| 查看: 69| 评论: 0

简介:图标设计是UI设计中非常重要的环节,因为除了文字和图片的排版之外,在扁平时代能够传递给用户情绪和设计感的通道就是页面中的各种图形与图标。全文16,834字,阅读时长约35分钟。图标是UI设计中除了文字之外最不可或 ...

图标设计是UI设计中非常重要的环节,因为除了文字和图片的排版之外,在扁平时代能够传递给用户情绪和设计感的通道就是页面中的各种图形与图标。全文16,834字,阅读时长约35分钟。

设计师必看的图标(icon)设计指南

图标是UI设计中除了文字之外最不可或缺的视觉元素,在设计中看似只占一个很小的区域,但是它却是考验设计师基本功的重要标准,了解图标相关的概念,以及正确绘制的方法,是入门 UI设计的必备条件。

本文尽量将图标进行系统一些的介绍说明,当然仅一篇文章是不可能面面俱到包含所有知识点。内容比较基础,主要以 设计概念 和 设计思路 为主,对图标相关的内容进行组织梳理和分类,便于小伙伴们建立图标的概念体系。过程中也有针对几种典型的图标结构进行实操代练,想要把图标设计的更好,这就需要我们在平时勤加练习外,还要进行深度的思考,希望我的这篇梳理可以给大家带来帮助。

设计师必看的图标(icon)设计指南

1.1 图标的定义

图标,也称为icon或Picoto,是计算机世界对现实世界的隐喻和概括,代表软件产品中的功能及操作。它的本质是一种符号,它采用对这个世界的隐喻,来指代功能,含义,用途等。

设计师必看的图标(icon)设计指南

图标做为国际通用性语言,生活中随处可见,例如商场导视中收银台图标、出口图标、卫生间图标等,日常手机里使用的那些App图标,如微信、电话、短信等。的确,图标的形式有很多种,它可以应用在很多场景中,并且表现方式非常丰富,有线的、有面的、还有拟物的等。  

设计师必看的图标(icon)设计指南

如果粗浅划分的话,UI设计中常见的图标大致分为2大类,第一类我们称之为「标志性图标」,比如手机中应用启动图标;第二类我们称之为「功能性图标」,这类图标经常出现于 App 或网站中,用于功能性指示引导或操作。

1.2 图标的重要性

对于UI设计而言,图标可以说是整个产品的点睛之笔,它甚至可以直接影响着一款产品的形象和气质。在不少 UI 界面中,图标几乎是这个页面的核心支撑体,它直接影响着产品的视觉体验和产品调性。它有以下几点好处:

设计师必看的图标(icon)设计指南

全球通用:Windows,iOS, etc., 中文版和英文版甚至各种语言版本,在不打开菜单之前,基本上都长一样;

节约空间:如果在一个图标能够表述清楚含义的时候,比如用一个叉就可以不用写「关闭」;

快速定位:图标可以用它独特的形状或者颜色让人快速定位到一个功能;

上下文的定位:比如小飞机的图标单独放出来不确定是什么,但是在和收件箱在一起它就可以认为是发件箱了。

1.3 发展历程

如你所知,图标、标识都不是界面设计师所创造的概念,它的存在可以追溯到人类文明诞生之初,在漫长的历史长河当中,早期用来传达信息的图标演变为系统的文字,而在地图、图书、壁画和建筑等各种各样的地方,还存在着用来代表和传达特定概念的图标和标识。

设计师必看的图标(icon)设计指南

随着技术的发展,计算机诞生了,而显示器的出现,也为图形化界面的诞生,铺平了道路。20世纪70年代,施乐在位于帕罗奥托的研究所当中,诞生了最早的拥有图形化界面的电脑,著名的「 Xerox Alto」。这款昂贵的概念机最终并没有走进大众的视野,但是它的后续机型施乐之星在1981年问世,并且成为了计算机史上的重要里程碑,而Xerox Alto 对于乔布斯和比尔盖茨的启发,更是引发了计算机历史上最著名的一场战争:苹果VS微软,Windows 对抗 Macintosh。当然这都是后话。

收藏 邀请

鲜花

握手

雷人

路过

鸡蛋

相关分类

精彩阅读

更多+

精选资讯

更多+

资讯排行

更多+

艾德网络 - 深圳市艾德网络科技发展有限公司 ( 粤ICP备19051611号 )

公司地址:深圳市南山区粤海街道高新区社区科苑南路3176号彩讯科技大厦十六层 联系方式:admin@eddid.cn

返回顶部