当前课程知识点：界面设计导论 > 第三章：界面设计元素 > （5）图标 > 图标
这节课我们讲一下图标的设计
在图形用户界面中
图标非常重要
它是具有功能性的视觉元素
图标呢它有明确的指代意义
它可以代表一个应用程序
比如这个图示的图标
代表的是一个功能强大的
音乐编辑软件
它是打开程序的入口
图标
它也可以是一系列功能性的控件
比如说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
这组图标用音乐唱盘作隐喻
在左侧的草图阶段
推敲了各种不同的唱片表现方案
右侧是最终选定的设计
比如这个是一组导航程序的设计草图
分别运用了地图 路标 指南针
这几个不同的隐喻
设计出了不同的形式
学习图标设计可以先从临摹开始
在临摹体验的基础上进行创作
如果需要设计一组图标
要把所有设计好的图标
排列在一起进行比较
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
