图标设计笔记

图标能给图形用户界面(GUI)带来以下好处:


1.制造良好的点击区域:图标的尺寸往往足够大,用户可以很容易地在触屏界面中点击操作,对于鼠标来说也是一样的。(文字链接在触屏上易造成用户阅读与点击的不对称。)

2.节省空间:图标足够小巧,工具栏、面板等控件在相对狭小的空间里也可以显示许多图标。

3.易于快速识别(设计得好的情况下)——尤其对于那些常见的或是使用过的标准图标来说 无需翻译,那些考虑了文化差异的图标设计是国际通用的。(例如,邮箱在不同的国家会有不同的样子,但是信封却是一样的,因此相比之下,信封是一个更加国际化,更适用于电子邮件的图标。)

4.符合并能提升设计的美学诉求。

5.当相同的图标和样式用在不同的地方时,能给用户提供产品系列的概念,增强产品间的联系。

文/TerryFan(简书作者)

原文链接://www.greatytc.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发展史

我的花瓣 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容