- Photoshop CC移动UI图标设计实用教程
- 水木居士
- 1519字
- 2020-06-26 05:38:08
1.1 图标的基本概念
本节从图标的起源讲起,详细介绍了什么是图标、图标与LOGO的区别、什么是App图标、常见移动设备和计算机图标。
1.1.1 图标的起源
图标不仅历史久远,从上古时代的图腾,到现在具有更多含义和功能的各种图标,而且应用范围极为广泛,可以说它无所不在。一个国家的图标就是国旗;一件商品的图标是注册商标;军队的图标是军旗;学校的图标是校徽;旅游景区内的引导图标,如图1.1所示。这些图标存在的价值是提供信息指引,帮助人们找到需要的信息。
图1.1 引导图标
现在说起图标,其实一般指的都是智能设备中的代表一个含义的图形,而智能设备中的图标其实就是把现实生活中的图标迁移到界面当中,在界面中图标传达信息引导用户操作,用户根据接收到的信息进行操作。总之一句话,图标的存在是为了快速准确地传达信息给操作的用户并且引导用户做出反馈行为。
1.1.2 什么是图标
图标即指具有指代意义的计算机图形。广义上来说,图标是具有指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。其应用范围很广,软硬件网页社交场所公共场合无所不在,例如,男女厕所标志和各种交通标志等,如图1.2所示。
图1.2 交通标志及男女厕所标志
狭义上主要指应用于计算机软件方面,包括:程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。一个图标显示一个小的图片或对象,代表一个文件,程序,网页,或命令。图标有助于用户快速执行命令和打开程序文件。单击或双击图标以执行一个命令。图标也用于在浏览器中快速展现内容,图1.3所示为狭义上的图标。
图1.3 狭义上的图标
图1.3 狭义上的图标(续)
1.1.3 图标与LOGO有什么区别
要想弄清楚图标与LOGO的区别,首先要知道什么是图标?什么是LOGO?图标在前面已经讲解过,这里再来说一说LOGO, LOGO也叫标志,LOGO设计是将具体的事物、事件、场景和抽象的精神、理念、方向通过特殊的图形固定下来,使人们在看到LOGO标志的同时,自然地产生联想,从而对企业产生认同。LOGO与企业的经营紧密相关,是企业日常经营活动、广告宣传、文化建设、对外交流必不可少的元素,LOGO效果如图1.4所示。
图1.4 常见LOGO效果
这里我们所指的图标,主要指应用于计算机软件方面,包括:程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。图标有一套标准的大小和属性格式,且通常是小尺寸的。每个图标都含有多张相同显示内容的图片,每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片,每一张图片有不同的格式。图标还有另一个特性:它含有透明区域,在透明区域内可以透出图标下的桌面背景。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透明区域。因为计算机操作系统和显示设备的多样性,导致了图标的大小需要有多种格式。图1.5所示为计算机图标效果。
图1.5 计算机图标
图1.5 计算机图标(续)
1.1.4 什么是App图标
App是英文Application的缩写。由于智能设备的流行,现在App多指智能手机、平板等第三方应用程序。随着智能设备的大面积应用,现在一般说图标通常所指的就是App图标,或者说App即是指图标,如图1.6所示。
图1.6 智能应用系统App图标
图1.6 智能应用系统App图标(续)
1.1.5 常见移动设备图标
随着移动智能应用的高速发展,移动智能给人们的生活带来越来越多的方便,出行、支付、交际等,越来越多的公司和个人加入移动智能,所以移动智能的界面图标设计也要求更高,常见的移动智能App图标主要包括手机和平板,如图1.7所示。
图1.7 常见移动智能App界面图标
图1.7 常见移动智能App界面图标(续)
1.1.6 常见计算机应用图标
图标应用中,除了移动智能图标外,还有一些计算机应用图标,这也是大家最早接触的图标,如计算机桌面系统上的图标,还有一些软件图标,如Photoshop、Offices办公软件、三维设计软件等,图1.8所示为一些常见的计算机应用图标效果。
图1.8 常见计算机图标
图1.8 常见计算机图标(续)