图标设计笔记
图标能给图形用户界面(GUI)带来以下好处:
1.制造良好的点击区域:图标的尺寸往往足够大,用户可以很容易地在触屏界面中点击操作,对于鼠标来说也是一样的。(文字链接在触屏上易造成用户阅读与点击的不对称。)
2.节省空间:图标足够小巧,工具栏、面板等控件在相对狭小的空间里也可以显示许多图标。
3.易于快速识别(设计得好的情况下)——尤其对于那些常见的或是使用过的标准图标来说 无需翻译,那些考虑了文化差异的图标设计是国际通用的。(例如,邮箱在不同的国家会有不同的样子,但是信封却是一样的,因此相比之下,信封是一个更加国际化,更适用于电子邮件的图标。)
4.符合并能提升设计的美学诉求。
5.当相同的图标和样式用在不同的地方时,能给用户提供产品系列的概念,增强产品间的联系。
文/TerryFan(简书作者)
原文链接:http://www.jianshu.com/p/68d4123f5c2c
1-尺寸规范
图片来源http://mei-ui-designer.blogspot.hk/2014/11/ios-android-iocn.html由于安卓设备众多,一个应用程序图标需要设计几种不同大小,如:
LDPI (Low Density Screen,120 DPI),其图标大小为 36 x 36 px。
MDPI (Medium Density Screen, 160 DPI),其图标大小为 48 x 48 px。
HDPI (High Density Screen, 240 DPI),其图标大小为 72 x 72 px。
xhdpi (Extra-high density screen, 320 DPI),其图标大小为 96 x 96 px。
建议在设计过程中,在四周空出几个像素点使得设计的图标与其他图标在视觉上一致,例如,
96 x 96 px 图标可以画图区域大小可以设为 88 x 88 px, 四周留出4个像素用于填充(无底色)。
72 x 72 px 图标可以画图区域大小可以设为 68 x 68 px, 四周留出2个像素用于填充(无底色)。
48 x 48 px 图标可以画图区域大小可以设为 46 x 46 px, 四周留出1个像素用于填充(无底色)。
36 x 36 px 图标可以画图区域大小可以设为 34 x 34 px, 四周留出1个像素用于填充(无底色)。
应用程序图标 (Icon)应当是一个 Alpha 通道透明的32位 PNG 图片。
不是很懂,具体项目貌似也都是自适应的~anyway,作为一个了解吧。希望有人解答一下。
2.技巧
一、捕捉对象的特征、可以很容易的阅读。少就是多、争取一个简单的解决方案使用一种容易识别的对象
二、让图标简单、通用。从而让它适应一系列项目,保持图标的整体性
三、使用一致的光源、反射及阴影、考虑相同的视角以及不同的背景下图标的效果
四、注意文化差异,考虑到受众
五、使用别样的色彩组合、使用鲜艳的颜色
六、设计icon,从大尺寸图标到小尺寸,图标要一样清楚.
七、避免使用透明度
3.关于字体图标
Font Awesome介绍
Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识,现在FontAwesome不仅仅可以在bt上使用,还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标,字体图标主要是支持自适应、可以使用字体的各种特性(比如变色、变大变小、字体阴影等)、减少数据加载、样式更容易定义等。
一个字体文件, 369 个图标。
不需要javascript要求:更快的载入速度
无限的可扩展性:可伸缩矢量图形意味着每一个图标在任何大小看起来真棒。
自由免费:你可以将它应用到你的商业中。
CSS控制:轻松的定义图标的颜色,大小,阴影,和任何与CSS相关的特性。
完美的视网膜显示:使用矢量字体,这意味着他们可以完美的显示在高分辨率显示器中
为BootStrap而生:完全的兼容BootStrap新版3.0
桌面友好:你可以查看字体的样式列表
兼容屏幕阅读器:不像其他字体图标不兼容屏幕阅读器
你只需要到:http://fontawesome.io下载压缩包然后解压到你的项目中。
在你的html头部的head里面添加对相应的font-awesome的样式。
根据这里的案例开始你的项目。
如需兼容IE浏览器,可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。
文章来源 前端开发博客 (http://caibaojian.com/font-awesome.html)
关于icommon
一.下载
1.New projects,
2-1.Import Icons-导入SVG文件
2-2.使用现成图标
3.download-生成ttf等文件
4.安装字体
二.使用
1.Generate Font页面,点击需要使用图标,下方方块,复制。
选择图标2.打开ps或其他,选择安装字体。粘贴
注:IconFont 都是单色图标
4.designer
Apple 的第一代设计师 Susan Kare
生于1954年2月5日
主要成就:
芝加哥字体(ipod 点阵效果) 日内瓦字体 旧金山字体等---乔布斯改名
command图标 ---乔布斯参与、起源-瑞典营地景点中有意思的点、北欧城堡俯瞰图
接龙纸牌游戏
相关设计
https://www.douban.com/photos/album/1628435923/
前 Iconfactory 视觉设计师 David Lanham
相关设计
https://www.douban.com/photos/album/1628436159/