- 创意UI:Photoshop玩转图标设计(第2版)
- Art Eyes设计工作室编著
- 944字
- 2025-02-27 16:37:07
1.1 图标入门
先让我们来简单地了解一下图标的基本知识,其中要为大家讲解什么是图标、图标与标志的区别、常见移动应用图标和常见电脑应用图标,使读者在学习图标入门的同时对图标设计有一个基本的认识和了解。
1.1.1 什么是图标
图标是具有明确指代含义的计算机图形。其中,桌面图标是软件标识,界面中的图标是功能标识。下面让我们来欣赏一下移动图标、电脑图标以及生活中常见的一些图标,看看它们有什么特点和不同。


图标设计欣赏


生活中常见的图标
1.1.2 图标与标志的区别
标志是指具有指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。标志的应用范围很广,软硬件、网页、社交场所、公共场合无所不在。


标志
图标应用于计算机软件方面,包括:程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。一个图标是一个小的图片或对象,代表一个文件、程序、网页或命令。图标有助于用户快速执行命令和打开程序文件,单击或双击图标可执行一个命令。图标也用于在浏览器中快速展现内容。



图标
小编分享
图标有一套标准的大小和属性格式,且通常是小尺寸的。每个图标都含有多张显示相同内容的图片,每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片,每一张图片有不同的格式。从这一点上说图标是三维的。图标还有另一个特性:它含有透明区域,在透明区域内可以透出图标下的桌面背景。在结构上图标其实和麦当劳的巨无霸汉堡差不多。一个图标是多张不同格式的图片的集合体,并且还包含了一定的透明区域。因为计算机操作系统和显示设备的多样性,导致了图标的大小需要有多种格式。
1.1.3 常见移动应用图标
云计算时代的到来,使得企业信息化这一话题又有了新的生命。在云端的服务性能不断增强之外,最显著的特征就是在终端的精彩表现。单纯用PC来使用ERP的时代将一去不复返。以手机、平板电脑介质为代表的移动终端应用将为企业信息化带来巨大变革。移动应用图标便是其中最有力的代表。常见的移动应用图标包含了手机App和平板iPad移动应用图标。

手机App界面图标



iPad界面图标

设计欣赏
移动设备图标

1.1.4 常见电脑应用图标
桌面上除系统图标以外的图标都是应用程序图标。电脑应用图标是另外装的,并带有小箭头。常见的电脑应用图标包括Word、Excel、媒体播放器、游戏、各种应用软件等。

Office图标


媒体播放器图标


各种应用软件图标

设计欣赏
电脑游戏图标




