特别说明：本站所收集的素材版权归原作者所有，在此仅供学习参考，请勿用于任何商业用途！我想各位刚入行的APP ui设计师们，心中肯定有这样的一个疑问？优秀的App icon到底如何设计呢？
我们总是有这样一个概念，那就是设计的ICON越大越好。这已经成为了一种根深蒂固却又缺少内在本质的价值观。
　但是在Logo设计领域，尤其是对那些为APP设计Logo的人来说，“大”却是他们的天敌。他们要在方寸之间设计出一个能反映品牌理念的图标。
位于洛杉矶的娱乐新闻公司HitFix，其营销团队就在去年学到了这一课。那时，他们正在为一个从iPhone上移植到安卓手机上的应用设计图标。商务拓展经理Dave Huff表示，他们那时的目标，就是将iPhone上的应用图标移植到安卓平台上，要将这个图标设计得更加锐利，而且要让老用户一眼就能认出。
Huff说：“我们要设计出一个能够反映品牌价值的小图标。在这么小的一个图标里要做到这一点是一项十分困难的工作。”鉴于系统平台的不同，也有很大的不同，但是最具有典型性的图标尺寸应该为16×16像素。
Huff将这项工作交给了图片设计众包网站。在11天内，他收到了45份自荐和报价，Huff从这些人中挑选了一位，并和他一起进行多尺寸图标设计工作。之后，Huff就遇到了另外一个难题：清晰度。这些图标的原始图看上去都很好，可将它们按安卓测试环境的比例缩放之后，图标的细节开始变得模糊不清。他说：“当我们仔细审视这些图标在移动设备上的效果时，发现这些图标的很多细节都难以看清。”
在最后一刻，他们雇佣了另外一位设计师，设计了一个更简单，但是明亮度更高、更醒目的图标，而新图标的设计元素与原始图标基本一致。
图形设计师们都有一个共识：设计出一个出众的移动应用图标可能是最困难的工作。Dng Studio创意总监Dale Nigel Goble曾经设计过数千个图标，他表示：“如果你能够设计出一个16像素还让人印象深刻的图标，你就具备了很高的能力。要在这么小的尺寸下设计出一个出众的图标，其难度不亚于创作一幅传世巨作。”
设计APP图标的最后一个挑战，就是要让Logo具有“普适性”。Micheline Crawford创建了Crawford设计公司，他认为“普适性”意味着图片能够按比例缩放，并且无论设备处于横屏或竖屏，该图标都能够良好地显示。
再者我们来看看IconFinder 的创始人Martin LeBlanc说过，大多数用户希望直观漂亮，有时候还会喜欢那种设计得不可思议的icon。为了达到美观和直观这两个简单又困难的追求，他给出了5点小建议。
1、色彩方面：简单特别的图案有助於icon脱颖而出。慎重使用颜色不要打翻调色板，有时候甚至一两种颜色就已经足够了。
2、试著去只用一个标识或者字母去完成icon吧，Ness，Pocket，Vine，Snapguide 和 Pinterest 都是成功的案例。
3、保持创意创意是脱颖而出的好办法。
4、完成了一个icon之後，不要忘了在各种颜色的桌布上测试icon的显示效果。另外也不要忘了将icon放在资料夹中测试一下显示效果。最後，在使用者的设备上，icon会以不同尺寸出现，设计者需要确保icon在所有尺寸下看上去都很舒服。
5、在老款的屏幕只能提供16位标准色彩。新款屏幕的色彩深度和光滑度则要更好，但不同款屏幕之间的差别也大。基于此，设计师应优先为原始16位色彩的设备设计Logo，以保证Logo在所有设备上都能良好显示。APP图标应与品牌的全尺寸Logo有所关联。一些设计师将这定义为“视觉易辨认性”。保持概念简洁。在小型设备上，复杂的设计不可取。
扩展阅读：
本文标题：
本文地址：/iconweb/3982.html
除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，转载同时请务必保留原网站网址。
移动APP设计入门课程
为你推荐的相关文章
Copyright@
All Rights Reserved ICP备案号：桂ICP备号-2本站声明所有资源均是网上搜集或网友上传提供，如有侵犯您的版权，请及时联系我们（），我们将尽快处理。设计小测试！教你制作完美的Favicon图标(附神器)
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
设计小测试！教你制作完美的Favicon图标(附神器)
Favicon，常被称为网页小图标、网站缩略图标或者收藏夹图标，是网站在浏览器和收藏夹中除标题外的重要识别方式。今天的这篇文章来自设计师Philippe Bernard，他以小测试的形式为我们详细介绍了Favicon的相关知识。在文末，Philippe 还为我们介绍了他设计的在线Favicon制作工具(自备梯子)。
Favicon最早于1999年出现在IE5上，并且在几个月之后由W3C纳入标准，作为代表网站的小图标。
随后，绝大多数的桌面端浏览器跟随这一趋势，开始以各自的方式使用Favicon。为网站随便做个小图标嘛，一点都不炫酷，能有多复杂？事实真的如此嘛？
让我们通过一个小测试来了解一下Favicon。
问：Favicon的图标文件长啥样？
答：这上一个favicon.ico 文件，通常它并不是一个改名之后的PNG图片，虽然有的浏览器可以识别PNG改ICO的Favicon文件。ICO实际上是一个完全不同的格式，它支持使用一张图片包含多个版本和格式。
问：Favicon.ico应该是什么尺寸？
A：标准尺寸应该是16×16吧。
B：好象什么时候标准更新为32×32~
C：视网膜屏幕开始流行了！现在应该用64×64！
D：以上答案都是扯淡。
答：D。Favicon.ico的格式最初是由微软和其他一系列厂商共同制定标准。微软建议使用16×16、32×32 和 48×48。是的，没错，一个ICO格式文件可以包含多个图片哟~
桌面浏览器中经常在选项卡中使用Favicon，在标准的显示器上，16×16的分辨率就够看了：
截至目前，16×16 的Favicon.ico 在谷歌浏览器的标签中，看起来还很不错。
可是，16×16 的Favicon.ico添加到桌面上就不好看了。
将16×16 的Favicon.ico添加到任务栏的效果。
16×16 的Favicon.ico 添加到桌面的效果，并不理想。
所以，当Favicon包含多个图片之后，展示效果会好很多。
当使用包含16×16，32×32以及48×48 多尺寸图片的Favicon之后，任务栏的显示效果就好多了，看起来更像是本地应用了。
包含16×16，32×32以及48×48 多尺寸图片的Favicon 应用到桌面上，效果完美。
问：那么Favicon.png的意义何在？
当我们深入探讨Favicon的时候，始终绕不过Favicon.png这个文件，人们一直对它心存疑虑。它究竟是什么？
A：它是为那些不支持Favicon.ico这种文件而生的图标，比如Firefox？
B：一个高分辨率的图标。要知道，高分辨率的屏幕越来越多了。
C：这上一个历史遗留的产物。现在有更加现代的图标替代它。
D：well，这是一个非常复杂的事儿。
答：D。随着HTML5的推行，Favicon.ico 逐渐显得不那么有用了。不同大小属性的图片可以被同一个图片的不同版本所替代，而PNG格式图片正好可以胜任。
&link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"&
&link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"&
&link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"&
那么，我们应该怎样声明呢？
接下来，我们要面对的真相可能并不那么令人满意。尽管所有的桌面浏览器都在支持Favicon.ico文件，但是这个文件终究是过时的。你依然可以继续使用Favicon.ico，它也仍然会继续正常工作，但坦率地讲，它的局限性越来越明显，相反，PNG更加一致，应用范围更广。
Favicon.ico 是为旧版的IE而生，对于其他浏览器和新版的IE，我们倾向于使用PNG图标，那么我们应该怎样设置它的尺寸呢？接下来，我们探讨一下这个问题。
问：在移动平台上我们需要什么样的格式？
根据AmartInsights的数据显示，超过26%的网站流量是来自智能手机和平板，那么在未来，我们需要使用什么样的格式呢？
A：当然是Favicon.ico，截至目前它已经存在15年了。
B：PNG格式图标。你都说了要继续探讨这个了~
C：Apple Touch Icon
D：反正无论如何都不会在ABC中列出正确答案……
备注：在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。apple-touch-icon是IOS设备的私有标签，如果设置了相应apple-touch-icon标签，则添加到主屏上的图标会使用指定的图片。Apple-touch-icon 标签支持sizes属性，可以用来放置对应不同的设备。
答：D。你需要PNG 图标，也需要Apple Touch Icon，还需要Windows 8 磁贴，最重要的，你需要一个名为 browserconfig.xml 的文件。
比起传统的桌面端浏览器，移动端平台更加庞杂，屏幕尺寸和分辨率也差异巨大，iOS和Android两家割据，并不是像互联网刚刚兴起的时候WIndows一家独大之时那么容易推广标准。所以，你不用期待一个移动端Favicon 应付所有需求。
问：那么PNG格式应该使用哪些尺寸呢？
A：96×96，Google TV
B：196×196，Android和Chrome
C：228×228，Coast，Opera
D：以上全部
答：D。当然，这还不是全部。你还需要为老版的Opera的快速拨号界面准备 160×160 尺寸的图标，而Chrome 网上商店的图标还需要128×128 尺寸的图标。所以，在选取尺寸的时候需要考虑它到底要支持哪些平台。
问：Apple Touch Icon 的尺寸应设定为多少？
答：早期的时候，你只需要准备57×57的图标就行，但是现在，你需要制作高达152×152 的图标。
在iPhone发布之后，Apple Touch icon的尺寸发生过3次变化。
首先是iPad的发布。它的屏幕尺寸比iPhone大，图标尺寸也稍有差别。
然后是Retina屏幕。这时候屏幕的像素密度是之前的2倍。
再就是iOS7的发布。扁平化之后，图标在iPhone和iPad上略有不同。
这样一来，iOS上图标尺寸就有了2x2x2=8种规格：
老版的57×57的Apple Touch icon 在视网膜屏幕上的效果很模糊。
152×152 的Apple Touch icon 在视网膜上效果很清晰。
如果你没有猜对Apple Touch icon的正确尺寸，不要自责。在全球最靠前的5000个网站中，能用对Apple Touch icon的不到4%。
有人可能会说，制作8个版本的Apple Touch icon没有必要，但是你至少需要备好一个152×152的图标。这能确保运行iOS7的视网膜屏幕iPad能够正常显示图标，而分辨率较低的iOS设备也能按比例缩小，显示效果也不会差。
问：有必要在HTML中声明Apple Touch icon么？
A：不知道。
B：有必要。否则iOS怎么能识别它们？
C：没必要。按照Apple的习惯来放置图标就够了，iOS设备无论如何都会找到它们的。
D：没有必要，但是……
答：好吧，答案还是D。考虑到还有其他平台（Andorid，WP等）也会用Apple Touch icon，所以最好还是为之作出声明。
&link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"&
&link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"&
&link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"&
&link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"&
&link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"&
&link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"&
&link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"&
&link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"&
比起高分辨率的PNG图片，Apple Touch icon更流行也更加常见，诸如Android Chrome这样的移动端浏览器也倾向于使用它们。因此，声明它们会相对更安全，以备其他兼容的设备和浏览器随时能够访问它们。
问：怎样才能为 WIndows 8 平板设计一个磁贴？
A：windows 8 平板是个啥？
B：Favicon.ico，这是鲍尔默（微软前CEO）的遗产。
C：使用Two msapplication-TileColor 和 msapplication-TileImage meta 标签.
D：browserconfig.xml
答：对于Windows 8.0 和IE 10，答案是C；对于WIndows 8.1和IE 11，答案是D；当然，A差不多也可以说是对的，哈哈~
Windows 8.0 中通常是这样声明的：
&meta name="msapplication-TileColor" content="#2b5797"&
&meta name="msapplication-TileImage" content="/mstile-144x144.png"&
在Windows 8.1 和 IE 11 中的磁贴则通常是这样声明的：
&?xml version="1.0" encoding="utf-8"?&
&browserconfig&
&msapplication&
&square70x70logo src="/mstile-70x70.png"/&
&square150x150logo src="/mstile-150x150.png"/&
&square310x310logo src="/mstile-310x310.png"/&
&wide310x150logo src="/mstile-310x150.png"/&
&TileColor&#2b5797&/TileColor&
&/msapplication&
&/browserconfig&
新的Metro Ui拥有一系列全新的设计规范，比如内置的APP都使用了“white silhouettes”。
Windows 8 桌面的网站磁贴。
问：150×150 尺寸的Logo 磁贴到底要用多大尺寸的？
A：都说了是150×150的，还会有什么其他的尺寸？
B：怎么不能是其他尺寸的？
答：B，270×270。微软推荐使用更大的尺寸，以兼容更高分辨率的屏幕……
恭喜你！整个测试到此结束，你都答对了么？
这些问题看起来很简单，但是实际上真正深究的话，还是非常刁钻的。单纯使用Favicon.ico的时代已经过去了，虽然还有网站沿袭旧有的习惯，但是常常会导致荒谬的结果。我们可以耗费很长时间来精心雕琢响应式网站，但是如何只是内置一个57×57的 Apple Touch icon，那么网站也只能是在老旧的设备上正常显示。
为移动时代而生的Favicon生成器
在今天，制作一个符合多平台需求的Favicon是复杂而艰难的。你当然可以在网站根目录中内置一个老派的Favicon.ico，一个32×32的PNG图标和一个152×152的Apple Touch icon。但是，你也可以内置足以应付任何分辨率屏幕的一组图标，只是这样一来，工作量就非常恐怖了。
这个时候，你需要RealFaviconGenerator。和传统的Favicon生成器不一样，RealFaviconGenerator主要满足2大需求：编辑图标，和生成代码。
不同的平台使用截然不同的界面，所以需要为不同的平台生成不同的图标。RealFaviconGenerator自然不是在线的PS，但是RealFaviconGenerator通过设置可以帮你设计出符合不同平台需求的图标。比如，你可以为iOS设备生成带不透明背景的图标，以及符合Windows 8的白色图标。
RealFaviconGenerator 编辑器
主要生成图片和相应的HTML代码，其中主要覆盖以下平台：PC/Mac，iOS，Android，Windows 8 等。
可用的图片和HTML代码
比如，当你提供一个高分辨率的图标，简单几个点击就可以生成如下图标：
总而言之，在RealFaviconGenerator的帮助之下制作Favicon和10年前一样方便快捷。
【学习三部曲】
Step 1：腾讯设计师的新人培训教程！初学者必备！
Step 2：到顶尖UI设计师集聚地吸收经验与灵感！
Step 3：每天一练！技巧都学全！
原文地址：
优设网译者：
本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量86万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
我们的团队
大家在关注您的位置：
一个好的icon是怎么设计出来的
发布者: moke |
图标是UI设计师必会技能之一，而一个好的icon是怎么设计出来的呢？今天我们来给大家一个图标设计的全面知识汇总：首先，在制作图标前要考虑以下几点（那张纸默默写下来）：你的icon主要适用于什么设备？需要什么风格的icon？有没有其他设计要求？接下来我们进入设计过程：1. 设计从网格开始& &针对不同的设计我们会运用不同大小的网格。我们这里以32*32的网格为例。网格边缘的2px是我设计中不可触及的，也就是留白边缘。如果没有特殊情况的话，我一定不会让我的设计图形进入这个边缘界限。而留白的目的也是为了让设计看着不会太满给用户一定的呼吸感。图标的结构分为形状和方向两部分。如果你的图标有边框，一般会在边界框位置画出像正方形，圆形，三角形，矩形等图形作为边框。圆形图标会在网格中成居中状。在圆形图标设计中四个边缘会触及到内容区域的边缘，但不会到留白区域。一些小的图形和边边角角部位会超出圆形，但不用担心，这是一个常见的现象。方形图标一般也会在网格中居中，但大多数情况也会触及到内容区域的边缘。我们看下下面这张图：图中分三个方形区域（蓝色、橙色和绿色），图标中的大部分图形在中间橙色区域内。每个区域内的图形占比取决于图标整体的视觉效果，而这个把控需要你不断地练习找一些感觉才能自如的运用。在32px的网格中，你会注意到从28px中垂直和水平的分出20px区域，一般在设计图标时会试图遵循这样的规矩。不规则的图标设计会用一个圆形来去对齐，如下图。你看一看到图形已经触及到圆形的边缘，这里你不用特别精确的卡边，只要接近就可以了。但你要记住网格规矩不是所有设计都要遵循的，一个图标的本质远远超过了这种规矩的设定。网格会帮助你提高图标设计的一致性，但是如果在设计一个牛逼图标和遵循规则中选择的话，相信你也会选牛逼设计的。2. 从一个简单的几何图形下手& &设计图标跟画草图一样：从一个简单而粗糙的圆形、长方形又或是三角形开始。在设计小图标的时候，手绘的表现方式可能会看着不那么精致，所以用AI做设计是个更好的选择。用一些基本的几何图形进行设计会更加准确（尤其在曲线边缘部分），在调整的时候会更快，同时也能更精确的适应网格模式。3. 边缘、边角、曲线及角度规范& &尽可能在设计时边缘、边角、曲线及角度遵循一些数学规范的同时又不失有趣。换句话说就是不要太相信自己的眼球，在一些细节上需要遵循规范，因为如果这些元素不一致的话会很影响图标的质量。角度在设计中，大多情况我会使用45度角或者它的倍数。45度角会显得很均匀（在像素下会表现得更强），这种完美的对角线会让人眼很舒服也很清晰。这种模式同时也可以建立一组图标的统一性。如果我要打破这种规则我可能会使用减半角度（22.5或者11.5度）或者15的倍数，当然也会根据情况进行调整。使用45度的好处是即使反角度用也是不打乱规则的。曲线曲线是个特别考量技术的地方，即使图片质量很差，一看曲线就知道设计师的能力怎样。而且人眼的测量总也一些小的误差，大多数人眼睛和手协调能力达不到那么高层次，所以用软件的形状工具和一些数字来创造曲线从而达到效果。边角圆角可能用的并不多，2px半径的圆角就很显然是个圆形了。你要根据你的设计总特征来选择是否用圆角，并且要用多大的圆角。像素效果图标的像素效果在用户界面中是很重要的一部分，尤其在小尺寸设计中很影响整体视觉。如果像素网格中行间距不对齐，会导致边缘出现锯齿在小图标上会看起来很模糊。要是调整图标的像素网格会使直线变得单薄，角度与曲线的精确度就没那么精确。这也是为什么建议大家用45度角的原因，比较好掌握，更加精准容易对齐。线的粗细说到线的粗细，2像素应该是最理想的，可3像素是最通用的。我个人更倾向2PX和4px，理想状态下我会用2的倍数比较多。在大多情况下字和扁平的图标是要避免特别细的线条，除非你是为了做出一些期望效果。如果你想定义线条的形状，一般设计师会通过光线和阴影的方法。4. 通过设计元素及图标特点来达成统一性& &设计师会通过某一个元素让一系列设计更统一，像荷兰设计师在2015年图标沙龙上谈到他为荷兰政府做的项目，在设计中他跟伙伴运用了“缺口“的元素，不是每一个图标都有这个元素，但是大多数的统一让这一系列有了自己的特色，也真正的把它们融合了起来。5. 有节制的使用细节与装饰& &图标的目的与让用户的沟通，让他们想到并且进行选择。太多的细节会增加图标的辨识复杂度，尤其是小尺寸更会成为累赘。当然，细节的复杂程度也会影响单个或者整个系列图标的效果。所以当你拿不准细节轻重的时候，最好的方法是考虑最低限度的保证细节，但要保证高质量的明确图标含义。6. 独特性& &虽然我们能看到很对牛逼设计师在制作高质量的图标，但是他们过于注重设计趋势和其他高端设计师的风格模仿。作为一个设计师来说，创造可能是我们应该更看重的，我们可以从结构、字体、工业、心理、自然等其他领域寻找灵感。千篇一律的图标我们都见过，可是特立独行的你才是用户真正认可的风格。下面讲一些设计过程中你需要注意的：1. 让用户更容易理解图标最重要的作用就是它的辨识度是否让用户易理解，人们需要在小图标中做出他们的选择是件很困难的事，所以对于品牌来说，大部分的图形设计是为了展现品牌logo或者是一个标志性的形象。当然对于一个新的或者小的品牌来说也会通过一些其他方式来展现。2. 图标并不是图像图标可以包含图像，但也可能是一个文本，一个logo又或是这些元素的组合。图像图标在其他适应设备上会不易阅读，而图形的话可以携带更多的视觉感。3. 避免文字对于一个图标而言，不会使用单词作为内容，因为空间本身就不大，而内容不多又不易用户理解。这也是一则经验：如果这个文本不是你logo的一部分，那么请尽量避免。如果是，也要慎重考虑一下。此外，很多图标实际使用是在一定的环境下，大多数包括一行描述性文本在图标下面。设计时，字母的颜色和图标的类型或者网站也要保持一致，这样才能建立品牌的统一性。4. 用鲜亮的颜色想让你的图标脱颖而出？那么请大胆的用色。选择一个充满活力的颜色可以帮你抓住用户注意力，让你的品牌更有特点。比如蓝色，特别是天空蓝和海军蓝，你可能会回避因为这种大众色并不吸引人。但如果蓝色是你的主要logo色，你可以尝试一些新的偏中性的颜色，像石灰绿，或者选择一个季节性色调比如夏天选择亮橙色、春天选择粉红色之类的。5. 做一个logo的延伸你的品牌会有它的logo，可一旦它变成了图标，更像是一个标志。这个标志可以是一个简单的logo或者图像，它需要表现的更直接更能让客户记住它。而品牌也希望将logo和图标建立一些联系，让自身达成统一。6. 图标的用途图标不止限于手机或者电脑桌面上，所以在设计时也要顾及到它的大小和应用，所以在做大图标后缩小是个更好的方式。图标设计涉及到它的规模和大小，格式也成为了一个重要的因素，为了方面运用，矢量图是你最佳的选择。7. 内容外面的世界最近有很多图标运用单色背景加白色图标，扁平化设计与阴影结合，这种趋势虽然很流行，但不要局限在这种设计里，在你的图标中做一些不一样的设计。当大多数人考虑用方形的设计，也许你该考虑些别的方式。在背景中加入纹理效果就会在人家单色中脱颖而出。8. 单色挑战有一个有趣的小窍门设计师们多年用来测试设计的有效性——单色模式。在单色设计中，如果你的设计传达同样的信息，那么它是个有效设计；如果没有颜色它变得很弱甚至影响用户识别，那么请继续修改。也有些设计师会先用黑白色进行设计，建立一个坚实的框架后，然后再添加颜色。
本文地址：
文章标题：
最新分享资源
0102030405060708&最近想到要写一篇关于图标设计的原则，理由如下：
图标设计在GUI中所占的比重越来越大，很多GUI设计师都是从图标设计开始的的；
同时由于软件界面设计的未来方向是简洁、易用、高效，精美的图标设计往往起到画龙点睛的作用，从而提升软件的视觉效果；
但现实中很多设计师往往过度追求图标的视觉效果而忽视了其他几个方面，舍本逐末；
客户片面的要求图标要震撼，要立体，要发光，要高对比度，而忽视了图标所处的环境；
我们的团队经常做一些大量的图标设计工作，需要一些规范和原则；
谈到原则，我要先说图标设计的目的：
先说优点：
1：代替文字，比文字要直观，提高软件可用性；
2：代替文字，比文字更漂亮，提升视觉效果；
缺点：不如文字表达的准确。
因此，图标设计的核心思想，就是要尽可能的发挥图标的优点：比文字直观，比文字漂亮，减少图标的缺点：不如文字表达的准确
以下是我总结的几条原则：
第一：可识别性原则
可识别性原则，意思是说，图标的图形，要能准确表达相应的操作。
换言之，就是我看到一个图标，就要明白他所代表的含义，这是图标设计的灵魂。
可以当之无愧称之为图标设计的第一原则。
我们看一下高速公路上的路标设计，我只能说，这是最好的图标设计，可识别性强，简单，直观，即使是不认识字的人，也能立即理解图标的含义。见图（1）：
公路路标的特点，注定图标的设计要简单明了，要具有非常直观的可识别性，司机只需要瞄上一眼，就能准确理解路标的含义，这样便于他继续驾驶，如果图标设计的不够直观，不具有可识别性，那么司机在开车的时候会一直盯着路标看，一直在想这是什么含义，你可以想象他面临的危险会有多大，另外在高速上，如果路标设计不够直观，也有可能在司机还没有明白什么意思呢，就错过了路标。
图（2）是我设计的一些常用工具类的图标，你是否一眼就能看出每个图标的区别和含义呢？
这套图标虽然很简单，但是很实用，因为通常的界面不需要精度很高、尺寸很大的图标，并且这套图标符合差异性，可识别性，风格统一性的原则。
图（3）为我们的设计师Veronica为6301项目进行的图标设计，符合可识别性原则。
第二：差异性原则
差异性原则，什么意思呢？意思是如果一个界面上有六个图标，我一眼看上去，要能第一时间感觉到他们之间的差异性，否则我怎么辨认呢？
这是图标设计中很重要的一条原则，但也是在设计中最容易被忽略的一条，图标和文字相比,它的优越性在于它更直观一些，但是如果图标设计失去了这一点，我认为图标设计就失去了意义。我们看一些现实中的例子:
&&&&&&&（图4）
见图（4），这是我平时最常用的一套软件：用友致远办公管理系统，我只能说从差异性和可识别性来讲，这里的图标设计非常失败。&新建事项&&待发事项&&已发事项&&待办/已办&&超期督办&&流程管理&这六个图标一眼望上去，几乎是一样的，其中五个图标采用了相同的元素&淡蓝色文档&，这里图标的设计，已经失去了存在的价值，因为图标设计的目标是提高效率，用户一眼望上去他们都一样，如果不看文字，用户真的很难区分它们，这实际上是降低了工作效率。
图（5）这套图标很漂亮，但是从差异性上来讲，这套图标也是失败的，黄色的文件夹部分的六个图标，一眼望去几乎又是一样的，差异极小，在具体应用过程中会很吃力，用户需要仔细观察才能区分出他们的差别。
Catia是世界领先的CADCAE大型软件系统，但是它V5R16版本图标设计同样存在上述问题，见图（6），一眼望上去几乎一个样子，同时边缘粗糙，配色生硬，缺乏美感
我想应该这样，在一套图标中，如果各个图标需要使用相同的元素，那么我们要尽量放大他们之间的差异性，减弱他们之间的相似性。如果一套软件的六个图标有同一元素，为了强调他们之间的差异性，我甚至建议考虑放弃使用同一元素。
比如图（4）的&新建事项&&待发事项&&已发事项&，在这里我们需要强调的是&新建&&待办&&已发&而不是&事项。因此，代表事项的相同元素&文档&可以抛弃。
我们看下图Adobe Photoshop的图标，精致，专业，图标设计的典范。我们看它完全符合差异性的原则，每个图标一眼望上去，都不一样，并且能够代表所需要的操作，可谓望图知意。
第三：合适的精细度，元素个数
首先我们要明确一个点，图标的主要作用是用的，代替文字，第二才是美观。但现在的图标设计者往往陷入了一个误区，片面的追求精细，高光和质感。其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。在初始阶段，图标可用性会随着精细度的变化而上升，但是达到一定精细度以后，图标的可用性往往会随着图标的精细度而下降。变化曲线如下图：
下图是一个表示&设置&的齿轮图标，我们看到，最左边的最简单的和最右边的照片级的，可用性都是非常低的，都不适合做图标。
Vista是微软的比较失败的一个产品，原因很多，但主要的原因之一是被人称之为华而不实。我们看一下Vista的图标设计，见图（10），很漂亮，很精细，但是很显然，图标包含的元素过多了，不够直观，用户需要思考这么多元素，代表的到底什么意思？这正好违反了交互设计第一原则&不要让我思考&
我很推崇ICONFACTORY的图标设计，见图（11），合适的精细度达到精美的视觉效果，同时又很直观，不会包含过多的元素，让你去思考。
第四：风格统一性原则
终于提到了视觉了，你是不是着急了？我们马上开始：）
如果一套图标的视觉设计非常协调统一，我们就说这套图标具有自己的风格，这样的图标看上去也会更美丽，更专业，同时也会增强用户的满意度。
我们经常会看到很多界面上，往往会堆砌着各种不同风格的图标，显然，这些图标都是从互联网上收集起来，由于没有完全配套的图标，只能东拼西凑，导致界面粗制滥造，业余。
统一风格为什么这么重要，理解这一点，你会明白互联网上有数百万的图标资源，为什么你的老板还要花钱雇一个图标设计师。
一套好的图标，要有统一的风格，这条原则，很多设计师都明白，但是真正实现起来，也许并不那么容易。怎么做呢？
第一步：我建议你在设计之前，先做如下的定义：
是简约的，还是精致的？
是平面的，还是立体的？
是古典的，还是现代的？
是写实的，还是卡通的？
是单色的，还是多彩的？
是绚丽的，还是柔和的？
是抽象的，还是具体的？
是有框的，还是无框的？
也许我的定义并不能囊括所有的风格，但是至少可以给你提供一种思路
第二步：如果可能的话，我建议你用铅笔，在白纸上勾勒出你的草图，用什么符号图形代表什么操作，在画的时候，尽可能的想象第一步的风格定义。
第三步：统一你的色彩，准备好你的调色板。
比如我喜欢用ILLUSTRATOR，我会从调色板面板里调出一种风格的色彩，略加调整，这将是我这套图标的色彩定义，在画图标的时候，尽可能选择你定义好的颜色，这样，你就能尽可能的保证你的图标色彩的统一。
在这里，工具是不重要的，无论你是使用PHOTOSHOP，ILLUSTRATOR，FIREWORKS，FLASH，FREEHAND，还是其他。
定义好了风格，草图，调色板，就开始充分发挥你的想象吧。
上图是ICONFACTORY设计的一套图标，色彩唯美，风格统一，散发着神秘感，你不觉得它很美吗？
上图同样出自ICONFACTORY，平面的，带边框的的，简单的可爱的卡通的风格。
上图这套图标出自俄罗斯设计师之手，看到这套图标，你是否会想起中世纪的欧洲，大航海时代？
这是我06年为一款叫DOPWARS的小游戏做的任务角色图标设计，你可以看到它那种可爱的、3D的、卡通的风格，色彩也和谐一致。
第四：与环境的协调性
图标是没有单独存在的，图标最终是要放置在界面上才会起作用的。因此，图标的设计，要考虑图标所处的环境，这样的图标，是否适合这样的界面？
比如你的界面是森林和大地，你就可以考虑用石块，木头，或者蘑菇，野花设计一系列的图标。
如果你的界面是平面的，简约的，你可以考虑用一些简单的平面的符号或者图形来设计你的图标，这样整个界面会很协调，不要认为这样的图标是简陋的，其实这样的图标的可识别性非常强的，在简洁的界面里，会透露出一种简约之美。下图是我对UI设计四个阶段&用户研究，交互设计，视觉设计，可用性测试&的图标定义
&体育运动类图标的设计
第五：视觉效果
&&&&&&追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求--情感需求。
图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养，有些设计师做了很多年的设计，作品一堆，拿出来一看，粗糙，刺眼，土气。
这一条我不想说的太多，因为这是几乎是每个设计都努力的目标，我提供一套迅速提高技能方法，最原始，但也最管用：那就是多看，多模仿，多创作。当然还少了一个前提，那就是设计师的天赋。勤奋+天赋=成功
第六:&&原创性
&&&&&&这一条对图标设计师提出了更高的要求，这是一个挑战，但我认为，图标设计的原创性并不是必要的，因为目前常用的图标风格种类已经很多，易用性较高的风格也就那么多种，过度追求图标的原创性和艺术效果，会导致图标设计另辟蹊径，这样做往往会降低图标的易用性降低，也就是说所谓的好看不实用。当然，这里也要看你的产品的侧重点，如果考虑更多的是情感化的设计，完美的艺术效果，这样做也无可厚非。
上图是一个&中国风图标&我们可以说它具有原创性，它很美，但是这样的图标做不到望图知意，实际上失去了易用性，所以说，原创性与易用性，很多时候是一把双刃剑，看你的选择了。
上面的图标设计，相信很多设计师都看过，简直就是完美的艺术品，我惊叹于它的艺术效果和原创性。从艺术性上它可以拿到10分，从可用性上，它可能是0分，因为图标是拿来用的，我实在不知道它表达的是什么意思。
永远记住这一条，图标的价值在于它比文字更直观，失去了这一条，就是去了它的意义。
第七：尺寸大小与格式
图标的尺寸常有以下几种：
16&16&&24&24&&&32&32&&&48&48&&&64&64&&&&128&128&&&256&256
图标过大占用界面空间过多，过小又会降低精细度，具体该使用多大尺寸的图标，常常根据界面的需求而定。
图标的常用格式有以下几种：PNG，GIF，ICO，BMP，
PNG：无损压缩格式，支持透明，兼顾图像质量和文件大小，但是请注意，PNG格式在网页中，IE6.0或者之前的所有版本，不支持透明和半透明。
GIF：网页图片常用格式，支持透明，优点是压缩的文件小，支持GIF动画，缺点是不支持半透明，颜色数最多只能显示256种颜色，透明图标的边缘会有锯齿，要解决此问题，必须在存成此格式时候，添加相同背景色的杂边，比较麻烦。
&JPG：有损压缩，优点是文件小，图像颜色丰富，缺点是不支持透明和半透明
ICO：WINDOWS系统的图标文件格式，支持多通道透明，支持32位真彩色
你可以用ICON WORKSHOP软件，把PNG,GIF,JPG等格式的图标，转换成ICO格式。
&ICNS：Macintosh系统里独特支持的格式，仅限于此系统。
本文作者：樊利杰&Jacky
Orangedesign()设计师&
长期从事交互设计，视觉设计工作
本文中所述的部分图标，来自于互联网或者相关软件，版权归作者所有
转载本文请保留上述信息。&&&&&
本文由&&原创，转载请保留此信息，多谢合作。
提示本站所有资源仅供学习与参考，请勿用于商业用途。转载请注明来自：
您可能也喜欢
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。