图标制作图标设计

图标设计笔记

2016-05-06  本文已影响170人  104cbf61ed9c

图标能给图形用户界面(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.关于字体图标

高清ICON SVG解决方案1

高清ICON SVG解决方案2

Font Awesome介绍

Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识,现在FontAwesome不仅仅可以在bt上使用,还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标,字体图标主要是支持自适应、可以使用字体的各种特性(比如变色、变大变小、字体阴影等)、减少数据加载、样式更容易定义等。

Font Awesome 特性

一个字体文件, 369 个图标。

不需要javascript要求:更快的载入速度

无限的可扩展性:可伸缩矢量图形意味着每一个图标在任何大小看起来真棒。

自由免费:你可以将它应用到你的商业中。

CSS控制:轻松的定义图标的颜色,大小,阴影,和任何与CSS相关的特性。

完美的视网膜显示:使用矢量字体,这意味着他们可以完美的显示在高分辨率显示器中

为BootStrap而生:完全的兼容BootStrap新版3.0

桌面友好:你可以查看字体的样式列表

兼容屏幕阅读器:不像其他字体图标不兼容屏幕阅读器

Font Awesome的使用

你只需要到: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/

其他

http://louiemantia.com/

http://www.icoeye.com/

http://anyway.fm/famous-icon-designers/#title 

ICON发展史

我的花瓣 

上一篇下一篇

猜你喜欢

热点阅读