图标在线视频

这节课我们讲一下图标的设计

在图形用户界面中

图标非常重要

它是具有功能性的视觉元素

图标呢它有明确的指代意义

它可以代表一个应用程序

比如这个图示的图标

代表的是一个功能强大的

音乐编辑软件

它是打开程序的入口

图标

它也可以是一系列功能性的控件

比如说PPT中的这些绘图工具

图标也可以显示界面的某种

特定的模式或者状态

比如说正在播放

开启或者关闭状态等等

另外可交互的控件

动态的信息 标签

或者导航按钮

都可以设计成图标的形式

那图标在界面中有哪些作用呢

在应用程序的商店里

图标是应用程序的化身

好的图标具有形象代言的作用

它可以提示产品的功能

吸引人的注意

帮助你在众多的产品中脱颖而出

图标的这种属性呢有点像logo

比如图示的这些logo

想必大家都很熟悉吧

它们代表了某种特定的品牌文化

和文字相比呢

图标是感性的

也是容易识别和记忆的

另外呢

图标它是一种非语言交流符号

在这一点上它是具有跨文化的特性

比如这些交通符号

即使语言不通也能看明白

再比如

在这个数字博物馆的界面中

图标代表的信息直观可见

通过图标就能了解

它代表的是哪一类的内容

这里基本上不需要多余的文字

那总体来说呢图标有哪些作用呢

总体来说出于不同的需要

图标有这样一些作用

易识别性 交互性 引导性和警示性

比如说这几个共享单车APP的图标

直观上呢它可以反映出它的服务内容

同时从色彩形态上

也可以在提供同类服务的APP中

被识别出来

使用图标可以让界面显得更美观和简洁

想象一下

如果把这两个界面中的图标换成文字

用户体验会大打折扣

另外图标具有动态信息提示的作用

比如说邮件图标上会有动态显示

这个红色圆圈的1

代表有一个新邮件

而右边的日历图标

也会动态显示当天的时间

在鼠标滑过图标的时候

还会出现一些小提示等等

所以呢图标是界面中

一种非常有效的交流工具

那图标设计要注意哪些事项呢

图标最关键的设计要素

是简洁容易识别

图标可以从形象和语义

两个方面入手进行设计

比如这几个图标

前两个主要是从字母特征上

进行识别的创意

它是用首字母V和F进行造型设计

最后两个呢是兼顾语义的设计

一个是英文“VIVID“的首字母”V“

做变形和着色

“VIVID“的中文翻译过来是鲜艳的意思

加上字体丰富的色彩处理

和产品colorfull的定位非常吻合

最后一个对勾的创意呢

也是来自产品的定位

这个产品的英文名是clear

中文名待办事项清单

因为我们熟悉的做法是

会在任务清单上打勾

表示这个任务已经完成了

所以这个对勾的符号语义

对应的是任务的完成

鲜明积极的橙红色

构成有韵律感的色彩层次

丰富了对勾这个形式的表现力

这个也是非常到位的设计

那么同时有语义识别

和特征识别的图标是最为优秀的

比如说左上第一排第一个日历的图标

第一排最后一个天气图标

第三排第三个图标

在applestore中

它们不仅在特征上

可以一眼识别出来

而且在语义上

也给人们直观的暗示

相比之下

第二排第二个图标

就显得复杂了一些

识别性也比较差

其余的图标识别性还好

但语义上的暗示比较弱

需要看文字描述才能了解

看一下这组图标

它们有太多相似的元素

每个图标都有一个黑色文件夹

差异很小

不容易识别

在实际应用中

因为屏幕的分辨率不一样

或者界面使用要求不一样

图标呢会显示出不同的大小

所以在设计图标的时候

要考虑图标缩小以后

是不是仍然可以识别出来

比如刚才这组图标缩小以后

识别性就更差了

改进的方法呢是去掉相同元素

强化个体特征

这里有三组图标

放在一起很容易彼此识别

每组图标

都设计了交互过程中的不同状态

但是第二组图标的前两个状态

区别很小不容易分辨

我们再说一下识别性

除了程序图标之外

程序中的工具图标

往往不是单个出现的

而是一组一组的出现的

比如在这个keynote程序中的工具栏

每个图标代表不同的功能

但是它们又放在一起

成为了一组工具

在设计一组图标的时候

应该把所有的图标放在一起

进行整体设计

既要让一组图标有相似的风格

又要让每一个图标有明显的特征

能被区分出来

能清晰地表达自身的含义

设计图标的时候还要统筹考虑

界面平台 图标的个数

图标的大小 图标功能

有哪些指示性

有哪些互动性等等这些因素

系统设计还包括对图标响应性的设计

包括对鼠标操作的响应

对分辨率的响应

对信息状态提示的响应

对用户操作的响应等等

比如这个垃圾桶

要考虑空的和满的

是两种不同的状态

用户对垃圾桶进行清空操作的时候

垃圾桶会显示从满到空的动态过程

在不同平台上

因为屏幕分辨率不一样

对图标显示的大小要求也不一样

所以呢需要为不同大小的图标

设计不同的精细度

比如这组图标

从大变小以后就很难识别了

一致性和差异性

ADOBE的图标

能够很好的体现一致性和差异性

因为它的绘图软件有很多

每一个不同的程序放在一起

看起来就像是一家人很相似

但是每一个图标又有自己的特点

它用两个从程序名中

提取的典型英文字母和一个专色

鲜明的区分了自己

在构思一个或一组图标时

经常会使用隐喻的方法

来表达相似的含义

比如苹果和微软系统

最早使用的垃圾桶图标

几种不同的垃圾桶形状

分别表示空的 满的

或者被清空的状态

传达的语义也比较清晰

而右侧的图标呢

采用了碎纸机的图形

看起来很容易和打印机相混淆

而且这个碎纸机

也很不容易表示出

前面所说的图标三种不同的状态

所以说这个隐喻的使用是不妥当的

那大家再看看这两个邮件客户端的图标

一个是苹果系统的

一个是google的

苹果公司用了邮票做邮件的隐喻

google呢是用信封作隐喻

那有没有可能用邮箱来做隐喻呢

这两个不同风格的设计

都用了邮箱做隐喻

请问这两种隐喻和前面的两个图标相比

哪一个更好呢

从外观来看前两个更简洁

缩小以后识别性也更强

后两个呢在缩小以后

识别性就减弱了

但更重要的是

不同国家的邮箱

外观和颜色都不相同

所以用邮箱做隐喻

无论选择哪种形式的邮箱

都很难在世界范围内达成共识

因此

如果作为国际级的应用

苹果和google公司的这两个

邮件客户端图标

分别采用了邮票和信封的隐喻

比采用邮箱更恰当更有传播力

设计图标时

还要考虑不同平台的设计规范

设计规范对图标设计的尺寸进行了限定

随着系统升级

设计规范也会有调整

在设计前需要对不同平台的设计规范

进行了解

移动平台的安卓和IOS系统

对图标的尺寸规范也不一样

设计的时候要先对图标的设计规范

做一些了解

那图标设计有哪些注意事项呢

首先图标设计要有自己的特色

可以学习和借鉴

但是不能抄袭

最后一个好的图标设计

要反复迭代的修改

放到真实的使用环境下进行验证

比如可以对设计方案进行用户测试

让图标的识别性和语义表达

更符合人们的使用

此外

图标设计应该独树一帜

能脱颖而出

并且易于联想和记忆

那么图标的设计流程是什么呢

首先应该对图标代表的含义进行分析

提取关键词

进行创意绘制设计草图

草图阶段可以比较多个不同的想法

然后选出最满意的那个进行细化

这是著名的icon设计机构

Ramotion设计的Turnplay icon

Turnplay是一个音乐播放机的APP

这组图标用音乐唱盘作隐喻

在左侧的草图阶段

推敲了各种不同的唱片表现方案

右侧是最终选定的设计

比如这个是一组导航程序的设计草图

分别运用了地图 路标 指南针

这几个不同的隐喻

设计出了不同的形式

学习图标设计可以先从临摹开始

在临摹体验的基础上进行创作

如果需要设计一组图标

要把所有设计好的图标

排列在一起进行比较