第一篇：智能手机软件图标设计风格研究(第一章_1.1_1.2)
智能手机软件图标设计风格研究
第一章 绪 论
1.1研究背景
随着信息时代的迅速发展，在当今社会手机已经是随处可见，虽然智能手机是进几年才出现的新型产物，但是按照现在的发展速度来看，智能手机凭借它强大的功能与便携操作的特性，拥有摄像摄影、播放视频音频、远程通讯等功能，今后智能手机完全能取代PC机在人类日常生活的重要地位，人们已经对智能手机依赖成瘾。所以我们有必要对其的发展进行研究试图从中挖掘出可用的价值。
具统计，在2015年中国的智能手机普及率已经高达50%，这意味着中国的智能手机市场已经发展的很壮大了，我们完全可以从中捞一桶金。而APP，application 的简称，作为智能手机的灵魂，其发展可说是关系到智能手机的存亡。APP 作为新媒体的产物，在人机交互方式上做出了革命性的创新，同时也开创了智能机的新纪元。如果一台智能手机没有APP那么它就和一台普通的移动电话机没有任何的区别，智能手机之所以能够在当今有如此大的影响力必须功于智能手机上各式各样APP的出现。硅谷著名工程师 Andreessen 曾说，软件 正在吞噬着世界，而现在看来，APP 则正在吞噬着软件。因此我们当今的智能手机时代可以说是APP的时代。
1.2图标的重要意义
如果说APP是智能手机的灵魂，那么图标就犹如APP的精气神。所谓“未见其人先闻其声”，图标体现出的是APP所表达的核心内容也是APP的外在体现，它关系着整个程序设计的成败，是用户在使用APP前了解APP的一个重要信息。如何让一个图标能够即不失美感富有创造性又具有明确的可识别性，能准确的表达出制作者的主旨，这是本文重点研究的问题。如何在众多的APP中使自己成为关注的焦点，图标设计的好坏就是取得成功的重要因素。视觉效果优秀，色彩搭配自然舒适，图形设计简单符合逻辑的图标往往就能够在第一时间博得用户的眼球。同样这些因素也是本文将重点讲述的一个重要问题。
1.3图标的产生和发展过程
图标的产生离不开计算机系统的发展，这里我们将采用计算机的图形界面系统发展过程 和手机的图形界面系统发展过程相结合的方式来讲述最全面的图标的产生和发展过程。（1）PC机的图形界面系统发展历史
1981年世界上第一个图形界面系统Xerox Alto出现，从此，开启了图形界面的新纪元，图1 Xerox Alto系统界面
从图1中我们可以发现，最初的图形界面只是简简单单使用矩形框将按钮包围住，虽然这样能够直接表达出每个按钮的意义，但是相比图标按钮来说，图标按钮不仅能使界面更加美观使人感觉舒适而且能使不同文化不同语言的用户对不同的按钮达成共识。
直到1989年 NeXTSTEP 1.0 GUI才出现了图标图形界面的雏形，该GUI 的图标很大，48×48像素，包含更多颜色，一开始是单色的，从1.0开始支持彩色，下图中已经可以看到现代 GUI 的影子。
图2 NeXTSTEP 1.0 GUI
随着图形界面给用户来的的良好体验，在之后的10多年中图形系统以每年两代的速度进行的更新，越来越多的图形系统相继出现，系统也越来越完善和统一。包括：Windows 3.1引入了TrueType 字体，第一次使 Windows 成为可以用于印刷的系统；Amiga Workbench有了很多的改进，该版 GUI 包含很多改进，桌面可以垂直分割成不同分辨率和颜色深度；Mac OS version 7.0 是第一个支持彩色Mac OS GUI，还有阴影效果；Windows 95这是第一个在每个窗口上加上了关闭按钮的GUI。
图3 Windows 3.1 图4 Amiga Workbench 图5 Mac OS version 7.0
尽管经过了10多年的发展，当时的图形界面还是处于一种像素风格，和当今的主流系统相差甚远。直到2001年苹果和微软公司相继推出Mac OS X和Windows XP 系统才奠定了当代图形界面系统的主流，引导了图标的发展趋势。Mac OS X。默认的 32×32, 48×48 被更大的 128×128平滑半透明图标代替。Windows XP用户可以改变整个 GUI 的外观与风格，默认图标为 48×48，支持上百万颜色。
（2）手机图形界面的发展
正如早期的计算机系统一样，早期的手机系统只支持黑白色调，图标也是简单的类似手绘线条图形，形式简单没有任何的边框修饰和色泽点翠。而正是这种线条式的简单风格，已经成为了当今的主流图标设计风格，虽然现在市面上也不乏形式多样，具有艺术性的图标，但是简约的设计风格凭借着它表意明确，浅显易懂，色彩搭配简单自然等优势一直占据着APP的大部分市场。
图6 早期的黑白机界面
相比PC机的在1989年就出现了彩色界面，手机的彩屏系统在2000年才问世。2000年1月，日本最大的电信运营商NTT DoCoMo推出了第一支正式上市的彩屏手机D502 i，实现了人们“彩色的梦”。可惜的是，由于日本本土所采用的网络和中国国内的GSM、CDMA网络技术都不相同，所以基本上这类手机在非日本地区都不可以使用。
图7 D502 i 手机界面
在此之后，瑞典的爱立(Ericsson)公司发布了该公司第一款GSM网络彩屏手机--T68，同时日本的三菱(Mitsubishi)公司也发布了彩屏手机--Trium E彩手机，NOKIA也宣称推出了7210彩屏版本。但这些都不是第一部彩色液晶显示屏的GSM手机。真正第一个推出彩屏GSM手机的是台湾一家较为知名的手机厂商--英华达(OKWAP)，它在2000年9月推出的OKWAP i108，才是真正世界上第一款GSM网络的彩色液晶屏手机。而随着彩屏的到来，其延生物如彩信业务及拍照功能，开始了飞跃发展。
图8 OKWAP i108手机界面
虽然早在2000年手机系统就进入了彩色时代，但是APP图标的设计还是处于一种停滞状态，彩屏的APP图标仅仅只是把以前的黑白色调重新漆上了一次彩色，整体的设计可以说是极简至极。直到2004年，各大厂家开始把高端液晶技术运用在手机上，使手机屏幕从10万像素直接升级到130万像素，可以和数码照相机的演示效果到底同一水平线。有了液晶技术的设备基础，APP图标的设计也得到极大的发展。2007年随着苹果公司的iPhone系列上市，APP图标变的更加细腻滑润，更有质感，色彩也更加饱和丰富，同时也保留了以前的简约风格，体现出一种纯朴的美感。iPhone系列的推出可以说是引领了当代APP图标设计的潮流，就连当今使用用户最多的Android系统上的APP图标也是处处能见到IOS图标设计风格的身影。
第二章 手机图形界面的图标设计
2.1 图标设计的作用
参考文献：http://product.pconline.com.cn/itbk/top/1202/2665845.html http://mobile.163.com/10/0701/08/6AGBRK8J00112K88.html
http://it.sohu.com/41/56/article15745641.shtml http://
第二篇：PS 图标设计教程之打造碳纤维风格图标
这次PS教程教大家做一个自定义的碳纤维图标，做成彩色的或许更炫。主要通过简单的图层变换和样式的设置即可完成。大家可以边看教程边自己动手做一下。
最终效果图
1>大家下午好，这次教程教大家做一个自定义的碳纤维的图标。首先创建一个600X200 的文档，选择圆角矩形工具，按照下图设置上面的工具栏选项。
图01
2>在画布上画一个圆角矩形，如下：
图02
3>选择钢笔工具，然后在圆角矩形里右击，选择填充路径，这里会弹出一个窗口，提 示你选择颜色，颜色可以任选，没有关系，因为后面我们会对颜色进行修改，然后右 击，选择删除路径。
图03
4>现在你应该有一个圆角的矩形图层，现在设置图层样式，如下：
图04
图05
图06
图07
5>设置完之后，你应该得到下面的结果，这里有个小技巧，你可以在设置好的图层样 式里选择保存，以后就可以直接使用这个样式了。
图08
6>下一步，你要自己创建一个自定义的填充样式，新建一个透明背景的4X4文档，放大 到1600倍，然后如下填充图片
图09
7>创建好之后，点击“编辑>定义图案”，保存自定义的填充图案。然后回到第一个文 档里，按住CTRL在图层的缩略图上单击，创建选区。新创建一个图层，取名为“样式 ”。选择油漆桶工具，填充方式里，选择图案，图案选择我们刚才创建的那个图案。
图10
8>点击选区填充。给“样式”图层添加一个图层蒙版，然后按D，复位前景色和背景色，按X切换前景背景色，现在渐变工具对称渐变，如下图，从点1拉渐变到点2。
图11
9>右击“样式”图层，选择应用图层蒙版，然后再添加一个图层蒙版，这次选择线性 渐变，按X切换前景背景色，如下拉一个渐变：
图12
10>再次应用图层蒙版，结果如下：
图13
11>使用钢笔工具，创建如下路径：
图14
12>在新层里填充选区为白色，透明度设为5%。
图15
13>选择矩形工具，在图标下面画一个矩形。
图16 14>如下给矩形图层添加图层样式：
图17
图18
15>使用多边形索讨工具，如下给在矩形图层下面添加一个边角选区。
图19
16>用稍微亮点的颜色，填充边角，同样在右边也做一个对称的边角。
图20
17>在矩形条上加上你的Label，然后在空白出添加你的图标，收工！
图21
第三篇：图标设计心得
东莞生活网： www.hidg.net
图标设计
在这里分享下我对于图标设计的一些心得体会。说的不好，还请各位看客包涵指正。图标在我们日常生活中被 广泛应用，软硬件、网页、社交公共场合无所不在。广义来说，图标就是具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。狭义来说，就 是我们所熟悉的在计算机程序方面的应用。包括：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。如今图标被广泛的应用，其价值也是显而易 见的。一套好的图标能够为用户直观传达所描述的物体，减轻用户的认知负担，特别是一些抽象的功能和意义。同时增添图标的精美度不仅能提升整个界面的吸引力 和观赏性，还能使产品与用户产生共鸣。
下面以制作电话本和短消息这两个图标为例。
设定风格。通观整个图标设计，设定风格是基础，亦是非常重要的一步。需要对整套图标进行周全的构想，因为这一步为图标设定了一个方向，之后图标设计的造型，上色的深入展开都要以此为基础。在这里我设定的是复古做旧的风格。
绘制草图。这一步骤主要是设计图标的造型。造型在图标设计中有着决定性的影响，他直观的给用户展现其所代表的含义。而草图是最直观，最快速展现设计 构思的一种方法。此时我们可以通过头脑风暴列举出一些能让用户一目了然，又贴合电话本和短消息含义的元素，同时列举的元素又要符合复古做旧的风格。因此，我选取做旧的通讯录来表示电话本，选取羽毛笔和信纸来表示短消息。在绘制草图时，要注意图标造型的统一，方向的一致性，使图标有充分的辨识度。其次要控制 单个图标元素的数量与其他图标相协调，用最少的元素来表达图标的含义。不然过多的元素不仅会使图标臃肿不堪，更会使图标的含义模糊不清，难以琢磨。
东莞汽车频道：auto.hidg.net
东莞生活网： www.hidg.net 上色刻画。在确定造型之后，就需要对图标上色以及深入刻画。
东莞汽车频道：auto.hidg.net
东莞生活网： www.hidg.net
东莞汽车频道：auto.hidg.net
东莞生活网： www.hidg.net
东莞汽车频道：auto.hidg.net
东莞生活网： www.hidg.net
总结
一，设计一套完整的图标要确保其风格的一致性。在造型，透视，大小，色彩，效果处理等各个方面做到统一，以保证每个图标都与其风格相契合。其次，控制图标元素的数量，对一些不必要的元素要果断去除。图标应该是一种能使用户轻
东莞汽车频道：auto.hidg.net
东莞生活网： www.hidg.net 松识别的图形语言，而不是成为用户阅读的负担。更要充分展现各个 图标间的差异程度，提升图标自身的辨识度，从而帮助用户理解阅读。再则还要考虑这套图标所应用的环境。不同国度，不同社会环境，不同文化传统对图形也有不 同的认识理解。同时也要考虑到人们的情感因素，避免使用敏感图形。所以在设计开始就应考虑周详，谨慎使用。最后，画图标要有足够的耐心，对于细节要不怕繁琐,细心揣摩。（详细咨询：东莞论坛——汽车频道）
东莞汽车频道：auto.hidg.net
第四篇：图标设计心得
图标设计心得
December 22, 2010adali 图标在生活中运用是显而可见的。例如：男女厕所标志和各种交通标志等。在计算机系统或软件方面的应用也是很广泛。例如：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。下面的例子更形象的说明这个问题。
(图片来源：九铭)外国人A与中国人B，两人在语言上存在差异对文字的认识是不同的，用图标来表示，会缩短语言描述的距离。所以图标更具有快捷传达信息、便于记忆的特性。那么图标被广泛使用的时候，什么样的图标才是好图标呢？好图标从两个角度去认识：辨识度与精致度。
辨识度：图标能够直观的表现要描述的物体。精致度：在精美的页面或者系统界面上，精致的图标能提升整个页面的最佳视觉。那么怎么样才能做出一套好的图标？在图标设计过程中需要注意哪些问题？ 在《图标设计语言》中作者Yegor Gilyov(来源站点Turbo Milk)曾提到 “如果你需要画几个图标，你需要整体考虑这个站点所有图标，然后再开始使用软件绘制。”如果你的icon全都是粗糙模糊的造型或拙劣的渐变色，那么这个icon很失败，不能当作是“风格的问题”来了事。这样的icon不仅仅会毁掉整个页面的美观，更让被描述的文字降低了被查看的欲望，对你的用户来使用或阅读它是一种极大的痛苦。Icon的细节包含对颜色的使用，对造型的创新，对质感的体现。Icon的设计步骤
我认为icon设计遵循上面的一个规则，在做icon的前提要先构思好整个icon的风格，有了构思可以开始造型设计接着就是上色，然后对整体的icon进行细节修改。
Icon的要点从学会批评别人开始
曾经有人说过：“批评别人的作品比自己制作一个优秀的作品要容易得多。但如果使用系统的方式去批判，这才是个成熟的分析！”那么怎么学会去批判呢？下面来分享一些批判后总结的例子。
（图片来源iconfans）上面一些图标看起来很像，这让人很难分辨出哪个是哪个。尤其小图标的时候辨识性差了。如果你不注意说明，你会很容易把这些图标混在一起。图标还是要有差异性，在保全风格统一的前提下要有很好的识别性，可以在颜色上或者造型上做差异的改变。
(图片来源：九铭)图标应该是轻松被识别的，构建它的元素要越少越好。而上面的插画和图形明显的告诉我们图标的相关性不该是复杂的，可以省略掉相同的对象，凸显出重要的信息。
上面图片形象的说明了图标像素边沿化的问题，左边的图标比较模糊不清，右边的比较清晰。
在做icon时很容易出现一些常见的毛边，导致像素过渡化，最后圆角不柔和。怎么样处理不柔和的圆角？
在由大icon到小icon的过程中你要重视一些细节的处理，对于这个我创了一句口诀：去多稳造型，边沿移到位。
去多稳造型：大icon到小icon的过程是由细节的减少开始变化，大icon比较注重质感和光泽等，小icon除了保证质感还要清晰可见。在做16像素icon时可以减少一些必要的元素用像素点去代替，去掉多余的阴影与高光。
边沿移到位：小icon的边缘移位主要靠移动像素点来实现，或者增加像素点。
经过处理，上面的图标已经没有了原来的锯齿，有的是柔和的圆角。
当然每个设计师做icon的习惯都是不一样的，这只是我做icon时的一些心得。
第五篇：智能手机APP图标设计风格_谢往都(修改)剖析
智能手机APP图标设计风格
与制作技巧研究
谢往都，XXX，陈正铭，戴经国
（韶关学院 信息科学与工程学院 广东省 韶关市 512000）
摘要：本文首先简要介绍了移动终端的图形化用户界面的发展历史，得出当今手机图标设计的主要风格是由苹果的扁平式和立体式的发展趋势的结论。然后对iOS和Android设备的图标设计标准进行了总结，之后研究并梳理了在不同的设计原则和视觉配色原理图标设计过程中应该采用怎样的图标风格。然后根据不同的布局风格对界面的图标风格和设计要求进行了研究和总结。最后通过对优秀实例的分析，研究出图标设计要点和加工方式。
Abstract: This paper briefly introduces the history of the development of the graphical user interface of the mobile terminal, draws the conclusion that the main style of today's mobile phone icon design is by the conclusion of the development trend of Apple's flat and three-dimensional.Then on IOS and Android devices icon design standards are summarized.After study and carding of the in different design principles and visual color matching principle for icon design process should be using what kind of style icon.Then according to the different layout style of interface icons style and design requirements of research and summary.Finally, through the analysis of outstanding cases of icon design points and processing methods.关键词：智能手机；图标风格；图标设计
Key words: smart phone;icon style;icon design 引言
随着智能手机的飞速发展，越来越多的人开始重视手机APP的UI界面的风格设计，而图标，作为UI的最基本发元素，其研究却被人忘记在角落之中。虽然目前有一部分人开始研究图标的制作和设计，但是他们往往没有放开视野，只是局部的研究图标本身的设计方法，没有把图标设计当做一个体系，从整个APP体系研究图标的设计风格。本文将采用从整体出发的角度来研究智能手机APP图标风格设计的理念并挖掘出制作统一风格图标的方法。
第一章 绪论
1.1研究背景
随着信息时代的迅速发展，在当今社会手机已经是随处可见，虽然智能手机是进几年才出现的新型产物，但是按照现在的发展速度来看，智能手机凭借它强大的功能与便携操作的特性，拥有摄像摄影、播放视频音频、远程通讯等功能，今后智能手机完全能取代PC机在人类日常生活的重要地位。所以我们有必要对其的发展进行研究试图从中挖掘出可用的价值。具统计，在2015年中国的智能手机普及率已经高达50%，而APP（application）作为新媒体的产物，在人机交互方式上做出了革命性的创新，同时也开创了智能机的新纪元。智能手机之所以能够在当今有如此大的影响力必须功于智能手机上各式各样APP的出现，硅谷著名工程师 Andreessen 曾说，软件正在吞噬着世界，而现在看来，APP 则正在吞噬着软件。因此我们当今的智能手机时代可以说是APP的时代。[13] 1.2图标的重要意义
所谓“未见其人先闻其声”，图标体现出的是APP所表达的核心内容也是APP的外在体现，它关系着整个程序设计的成败，是用户在使用APP前了解APP的一个重要信息。如何让一个图标能够即不失美感富有创造性又具有明确的可识别性，能准确的表达出制作者的主旨，这是本文重点研究的问题。如何在众多的APP中使自己成为关注的焦点，图标设计的好坏就是取得成功的重要因素。视觉效果优秀，色彩搭配自然舒适，图形设计简单符合逻辑的图标往往就能够在第一时间博得用户的眼球。同样这些因素也是本文将重点讲述的一个重要问题。
1.3手机图形界面的发展
早期的手机系统只支持黑白色调，图标也是简单的类似手绘线条图形，形式简单没有任何的边框修饰和色泽点翠。而正是这种线条式的简单风格，已经成为了当今的主流图标设计风格，虽然现在市面上也不乏形式多样，具有艺术性的图标，但是简约的设计风格凭借着它表意明确，浅显易懂，色彩搭配简单自然等优势一直占据着APP的大部分市场。相比PC机的在1989年就出现了彩色界面，手机的彩屏系统在2000年才问世。
图1-1 早期的黑白机界面
图1-2 D502 i 手机界面
第一个推出彩屏GSM手机的是台湾一家较为知名的手机厂商--英华达(OKWAP)，它在2000年9月推出的OKWAP i108，才是真正世界上第一款GSM网络的彩色液晶屏手机。而随着彩屏的到来，其延生物如彩信业务及拍照功能，开始了飞跃发展。[16]
图1-3 OKWAP i108手机界面
虽然早在2000年手机系统就进入了彩色时代，但是APP图标的设计还是处于一种停滞状态，彩屏的APP图标仅仅只是把以前的黑白色调重新漆上了一次彩色，整体的设计可以说是极简至极。直到2004年，各大厂家开始把高端液晶技术运用在手机上，使手机屏幕从10万像素直接升级到130万像素，可以和数码照相机的演示效果到底同一水平线。有了液晶技术的设备基础，APP图标的设计也得到极大的发展。2007年随着苹果公司的iPhone系列上市，APP图标变的更加细腻滑润，更有质感，色彩也更加饱和丰富，同时也保留了以前的简约风格，体现出一种纯朴的美感。iPhone系列的推出可以说是引领了当代APP图标设计的潮流，就连当今使用用户最多的Android系统上的APP图标也是处处能见到IOS图标设计风格的身影。
第二章 手机图标的设计标准
2.1 手机图形界面设计的规范
在手机有限的屏幕空间中如何才能让图标设计更符合标准，这就必须遵循以下的手机UI设计规范原则。
首先我们将手机屏幕拆分为4个区域，自顶向下分别是：状态栏、导航栏、内容区、标签栏，这些区域对应不同的屏幕分辨率也将以不同的尺寸呈现出来。[20]
图1-4 IOS应用图标规范表格
图1-5 iPhone图标尺寸规范
由于Android系统设备众多，一个应用程序图标需要设计几种不同尺寸,但是目前的Android系统已经拥有了自适应功能可以根据不同的屏幕分辨率来调整图标的大小所以这里就不进行详细的研究了。
2.2图标的设计原则
图标的设计形式主要有三种分别为：纯图形式、纯文字式和图文并存式。而这三种形式各有自己适合的界面，设计者应该根据不同APP的试用范围和布局的排版来决定使用哪一种图标这点我将于第四章在和大家讲解，现在我们先了解下图标设计主要原则。
图标只要具备简单明了、美观自然的要求就行了，简单来说图标的设计就是用来告诉用户按什么按钮能完成什么任务，在指引用户的同时又达到修饰、美化整个APP界面的作用。所以我们在设计图标的时候应该首先考虑这两点，达到有一定内涵而又不失美感的水平。因此在设计图标时我们应该注意一下几个基本的设计原则。（1）表意明确原则
现在的人也不喜欢花费太多的时间去寻找一个符合自己要求的APP，所以让用户看一眼图标就知道APP具有哪些功能，是留住用户的重要手段，表意明确的图标能够大大的减少用户适应APP的时间，同时也能省去繁琐的向导节目。表达信息最准确的方式就是才用文字，纯文字式图标就在这反面起到了很大的作用。如图2-1就是典型的纯文字式图标，其功能复杂性只需要浏览一遍我们就可以完全了解。
图2-1 纯文字式图标
但是这类图标同时具有一个很严重的问题，那就是APP在面对不同的地域不同的文化的客户那就应该采用不同的图标，这不得不说是一个很麻烦并且很困难的事情。所以纯文字式图标一般适用于面向内地用户的中小型APP。如果需要扩大用户量，那么采用纯图形式图标和图文并存式图标将是一个不错的选择。
纯文字式图标就要求设计者具有丰富的联想能力和洞察事物的能力，当使用象征事物作为图标的时候，设计者就需要考虑到采用事物的材料、外形、角度（文件图标用侧面就根据有代表性）等因素。纯图形式相对纯文字式来说它所表达的是一种相对抽象的信息，没有文字那样直接明了，但是对于大众化的APP来说，纯图形式图标更能使用户达到共鸣。这也就不用繁琐的针对不同地区设计不同的图标，极大的减轻了图标设计的成本，所以现在大部分的APP的内部界面都是采用纯图形式图标，而图文并存式和纯文字式更倾向于作为APP的Icon。
图2-2 图文并存式和纯文字式图标
（2）风格统一原则
风格统一原则就是要求图标的设计要根据APP每个界面的布局和配色来设计出与之相搭配的图标。就像装修新房子一样，新房装修完后设计师会根据房子的构造和设计风格来配置相搭调的家具和小饰件。图标就类似于整个APP中的小饰件，运用好这些小饰件就能营造出一种让用户掌控自如的感觉。如果一个APP的开始界面和功能界面形成很强烈的反差，那就会给人一种很突兀的感觉，这将会使用户对该APP的体验大打折扣。所以风格统一的目的就保证界面处于用户的掌控之中，让用户自己感受主动权。
根据界面的展示功能来设计不同的图标是风格统一需要注意的问题，一些隐喻式的UI设计者采用拟物物图标，从而达到整体的氛围修饰。图2-3中的两个播放按钮取色就是界面第二栏音频的颜色，其他按钮的风格也是灰黑色ASB塑料感，具有非常强烈的真实感。图2-4中的酒瓶图标和cellar图标都完美的营造出了一种收藏库的感觉。
图2-3 Cross DJ 应用
图2-4 Awesome Note 应用
而相对于功能比较复杂或者一个页面展示的内能比较多的界面来说，我们更倾向于使用简约的图标，这样能减少用户的视觉盲目敢，减缓眼睛的疲劳感。例如各种购物APP。并且简约化是现在图标的主要发展趋势，继iPhone5之后的苹果机图标都开始采用扁平的设计风格，即抛弃部分艺术修饰，如阴影、透视、纹理、渐变等等能做出3D效果的元素一概不用。
（3）艺术修饰原则
图2-5 IOS图标风格的变化
虽然说现在图标的发展趋势偏向于简约的风格，但是适当的运用艺术修饰也能让图标达到一种眼前一亮的作用。简单来说艺术修饰原则就对原有的图形进行加工美化，典型的就是rich design丰富设计风格。所谓rich design就是通过添加各种设计装饰，比如下落阴影、梯度等，让整体设计显得很丰富。这种设计风格可以让用户在导航时，更加自如。另外rich design和拟真设计风格也不同，后者是通过模拟物理实物来让设计更加逼真（类似于IOS6之前的图标风格）。
艺术修饰还有一种比较特殊的方式，那就是才用动态图来作为图标，动态图相对于以往的静态图来说可以更加容易吸引用户的注意力，但是如果大量的使用动态图则会照成一种非常混乱的场景，同时也会导致手机的负载过大，从而影响APP的运行效率。所以一般情况下只需要在加载、等待、刷新等界面中使用动态图标。实际上，有研究表明，普通用户能够忍受的最长的加载页面的时间一般为8秒钟。8秒是一个临界值，如果加载时间超过8秒，除非用户必须在这个页面获得一些信息，一般用户会关闭页面或者转到其他页面。采用充满动态图能让页面在保持加载的过程中充满了趣味性，牢牢的吸引住用户的注意力，让用户在等待时不在是无所事事，但是使用必须恰当。
第三章 图标设计的视觉要素
3.1图标设计的视觉重要性
所谓的视觉重要性用网上调侃的一句话来说“现在就是个看脸的世界。”上述所提到的所有原则都是为了进一步提高视觉效果而规定的。视觉设计试图解决的是功能和美学效果之间的鸿沟，从两者之间寻找一个完美的平衡，所以设计师不仅要完全熟知软件的每项功能同时也要拥有视觉设计的技术。
图标的底色最好使用明亮的三原色,在一个图标上附加太多的细节,这会导致计算机界面混乱,但是一个按钮过于简单又会显得苍白无力。好的图标应该是在同类中易读易懂易识别，而不是在说明解释，一个好的创意应该以清晰、简明、给人印象深刻的方式表现出来。
视觉设计同样是整体用户体验设计的一部分，我们应该在软件框架开始构造的阶段就将视觉设计考虑周全以便图标风格的统一。优秀的视觉效果可以增加APP的使用用户，提升APP页面交互直接的流畅性，提高用户的满意度与使用成就感，进而使APP变的更完善。3.2图标设计的色彩原理
视觉效果的重要一部分就是色彩搭配。色彩搭配是统一界面风格的重要部分，不顾风格要求和用户感受的配色只会给APP带来负面影响。在了解色调的搭配前，我们先要知道各种色彩的作用。就像每种花都有不同的花语一样，使用合理的配色可以更方便用户融入作者的思想中。下面我们来浅谈一下几种最基本也是最常用的色彩。
白色是所有颜色中最简单的色彩，它没有强烈的个性，不会对人体感官造成强烈的刺激，白色可以说是百搭色，所以在很多UI中都会使用白色作为填充色，图标同样也是如此。
黑色与其他的颜色搭配会形成一种强烈的反差感，正是这种反差感所以它更能突出其他的颜色。黑色适合搭配的颜色是红色、蓝色、白色、紫色。
红色在可见光谱中光波最长，所以是最为醒目的颜色，给人视觉上一种迫近感和扩张感，容易引发兴奋、激动、紧张的情绪。在大多数情况下红色图标都作为一种警告作用，提示用户这样做有一定的风险。所以在图标制作时我们一般是采用比较浅的红色作为主色调从而突出其前两种特点。红色适合搭配的颜色是白色、黑色、蓝灰色、米色、灰色。
蓝色有镇静的效果，可以使人的情绪平静下来，还可以降低血压。除此之外蓝色还是后退色，蓝色物体看上去比实际距离远，蓝色还可以使人感觉时间过得很快。蓝色适合搭配的颜色是白色、粉蓝色、酱红色、金色、银色、橄榄绿、橙色、黄色。
黄色的波长适中，是所有色相中最能发光的色，能起到醒目和放大的作用。虽然黄色过于明亮，但是稍添加别的色彩就容易失去本来的面貌，所以黄色一般都是作为辅色起到提醒和修饰的作用。黄色适合搭配紫色、蓝色、白色、咖啡色、黑色。
黑白和三大原色是图标设计的最基本的颜色，从UI设计到图标设计都离不开这五种色彩，所以熟悉它们的色彩特性和搭配原则能够使图标设计更突出APP所表达的主题，使UI交互更加贴切自然。
第四章 设计图标的基本方法和要点
4.1图标设计的排版和尺寸和摆放位置
图标的一大作用就是用于UI的界面美化修饰，所以在图标设计的过程中我们要针对不同的板块设计不同的图标，依据图标的生存空间来设计图标才能更好的发挥图标的作用。（1）跳板式导航（又称快速启动板或宫格导航）
跳板式导航的特点是界面中的各个菜单选项就是其他界面的跳转点。其布局模式通常是40×40px、40×30px和30×20px网格，由这类较小的板块组成，每一个板块都是用上一个图标作为按钮，但是部分跳板式导航会根据不同的应用优先级顺序，放大或者缩小网格，用于突出主要应用，所以在设计时可以对主要功能的图标进行细腻的加工以突出该图标的主要地位。
由于跳板式导航中每个按钮直接的间隙比较小，因此在设计这类布局的图标时，应该注意每个图标的配色不能有太大的色相差，除了主要图标之外，其他图标不需经过复杂的修饰加工，否则会加大用户对按钮选择的压力，通常采用扁平式或者线条式这里比较简约的图标。（2）列表式导航
列表导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。列表项目通常是采用间距、标题等进行分组，形成扩展列表。这类布局的图标比跳板式导航更小，通常是20X20px的图标，在图标旁边通常有文字标题来帮助引导。图标设计是通常是采用简单的双色搭配，不需要复杂的图片内容，采用简单的图形来勾勒就可以了。（3）仪表式导航
仪表式导航通常是用于统计信息的界面，相对于其他界面来说，统计界面更需要直观的信息与简洁的界面，这样才能让用户了解和分析所统计的信息。这类布局所才用的图标通常是长矩形的小条格或者是不同规格的锥形块，并且在设计图标的时候可以根据不同信息的重要程度采用比较强烈的颜色进行标注。（4）隐喻式导航
隐喻式的特点是页面模仿应用的隐喻对象，通常用于游戏和一些比较特殊的APP中，其中充满了大量的图标和按钮。用于这种布局的图标是最复杂也是最多变的，我们需要根据整个APP的UI设计的氛围来制作与之相对应的图标，其中会用到各种图标加工方法，整个界面的图标设计下来与其说是图标制作，倒不如说是制作一幅绘画也不足为过。4.2.1图标制作中的各种效果实现
为了配合UI的整体风格，图标制作过程中往往需要用到很多的修饰效果来到的制作者的目的。无论是纯图形式图标、纯文字式图标还是图文并存式图标，使用各种图标修饰效果都能进一步提升图标的美感。（1）阴影效果 阴影效果的作用是突显一个元素，大多数图标都会拥有这种修饰效果，即便是扁平化的设计也一部分图标采用了长阴影效果。长阴影的制作通常都是使用黑白渐变的矢量矩形来叠加在图片上来实现这种效果。或者使用多次复杂图层然后将这些图层填充为黑色，并使用图层蒙蔽调整大小与轮廓。相对于长阴影，Windows PC机上的图标通常是采用描边阴影，在比较规则的图标上添加这种阴影可以使用Photoshop的图层属性中的“投影”选项直接添加。对于一些相对复杂的图形，可以通过复制图层然后对图形进行变形调整大小和比例，再降低透明度和颜色的填充程度来实现阴影效果。而3D图形则需要根据图形的受光面来添加局部阴影，下图中“投影”的实现同样可以采用上述提到的方法来实现。
图4-1 3D图形的阴影效果
（2）质感效果
具有质感效果的图标主要是用于一些按钮上，其作用顾名思义，就是给按钮赋予了一种有质量的视觉感，主要应用于纯图形式图标、和图文并存式图标。质感效果的制作是通过对图标的局部板块使用斜面和浮雕效果与阴影效果配合制作出一种图层凸起初步的效果，有了初步的质感之后需要使用抛光效果对质感进一步的打磨加工。抛光效果的制作通常是用类似Photoshop中“钢笔”工具或者“矩形”工具这类绘画手段制作需要抛光的部分，然后填充为白色，对其进行模糊和透明化的设置即可达到理想的效果。（3）3D效果
3D效果和质感效果有很多共同点能适用于如何图标，但是质感效果只需要对图标的一小部分图层进行打磨和加工，而3D效果则把工程量扩大了整图层。
3D效果的整体立体感不是通过斜面和浮雕效果来实现，而是先对底层图层进行复制和填充，然后根据整个图形的规格对底层和顶层进行勾勒，再对勾勒出来的部分补充色彩，整体层次划分完成后需要对边缘进行细化抛光，最后再根据受关面添加阴影效果。阴影的分布可以参考图4-1，这类阴影效果同抛光效果一样是手绘阴影部分然后采用模糊和透明的方法到达渐变的效果。
图4-2 3D效果大致制作过程
4.2.1图标的点翠修饰
图标的点翠修饰就是在单一的图标中添加一些次要的元素来修饰图标。单一的图标有时并不能吸引用户，这是就需要通过其他元素的点翠，使整个图标变得更加生动形象，达到博人眼球的作用，当然这种点翠方法只适用于APP的icon和界面中的装饰类图标，对于应用中的其他图标最好是使用扁平化设计风格。
图4-3就是一个没有经过任何点翠修饰过的图标，它看上去只有简单的三座房屋，没有白云小鸟，没有花草树木，毫无吸引力。类似这样的图标其实拥有很大的改善空间。
图4-3简单的房图标
经过房屋三色彩虹和绿色树木的点翠修饰后，该图标不但突出了主要内容图4-3 无点翠的房屋图标房屋，而且对以前单一的元素进行了扩充，营造了一种意境之美，更能博得用户的眼球。
图4-4进点翠过的图标
图4-5的邮箱图标也很好的运用了云彩和信件 的搭配，不仅使“云传输”这种概念变得跟生 动形象，而且表达出了该APP的技术理念。
图4-5 邮箱图标
除了添加一些其他元素对图标进行修饰外，还一种将图标风格化的方法来对图标进行点翠修饰。这类方法比较复杂，并且形式多变，但是制作出来的视觉效果非常棒，能够体现出一种艺术加工的效果。常用的风格化制作方法有将图标金属化、水墨化、拟物化、写实化等方法。图4-6就采用了将图标毛线化的方法点翠修饰，将图标变得更可爱动人。
图4-6 毛线编织图标
第五章 总结
现在智能手机正处于发展的鼎盛时期，手机的界面设计也逐渐成为智能手机发展过程中的一个重要事项。而图标作为手机界面中的灵魂，它在手机界面中起着不可或缺的作用，图标比文字更具代表性，更能突出整个界面的用意，使设计者和用户之间达成共鸣。
智能手机图标设计风格的用意在于使APP能够方便的展示出它的功能与作用，并且通过统一的图标风格来提升APP整体的美感。本文通过研究得出目前的APP图标设计风格趋向于简约化，无论是在图标的色彩搭配上还是布局对图标设计的限制都导致了现在图标设计的方向变成力求于精简与细致。即便是制作简单的图标，通过本文对图标的点翠修饰和图标的加工效果的研究得出，如果设计能采用独特的制作方式与加工手段也能使图标变得更加具有吸引力，使简单的图标具有了生命力。
关于图标的风格设计无论是笔者还是其他研究者都已经进行了比较透彻的研究，总的来说就是图标要具有一定的美感并且能够表达出制作出这个图标的用意。而关于图标制作这方面，虽然笔者用独特的见解讲述了不同图标效果的制作方式和对图标美化加工的手段，但是图标制作方法是多样的，笔者只是介绍了自己制作图标时所想到的点子，至于其他的方法则需要读者自行进行总结和研究了。
参考文献：
[1]周陟.UI进化论—移动设备人机交互界面设计[M].北京：清华大学出版社，2010: 15250.[3]Alan Dix，Jane Finlay等.人机交互[M].北京：电子工业出版社，2006:28.[4]（美）Suzanne Ginsburg.[译]师蓉 樊旺斌.iPhone应用用户体验设计实战与案例.机器工业出版社.[5]（美）Timothy Wood 著，毛姝雯译.IOS 用户体验设计［B］.人民邮电出版社，2013.[6]（英）Giles Colborne 著，李松峰，秦续文译.简约至上——交互式设计四策略［B］.人民邮电出版社，2011.[7]Rachel Hinman 著，熊子川，李满海译.移动互联：用户体验设计指南［B］．清华大学出版社，2013． [8]（美）Jakob Nielsen，Raluca Budiu 著，牛化成译.贴心设计：打造高可用性的移动产品［B］.人民邮电出版社，2013.[9](美)Tberesa Neal 著，王军锋，郭偎，武艳芳译.移动应用 UI 设计模式［B］．人民邮电出版社，2013．
[10]郭歌.智能手机界面的图标设计研究［D］.北京工业大学，2013.[11]软件桌面图标设计的分析与研究_张苗[D]
[12]手机图形界面的图标设计风格研究_毛珊珊[D]
[13]智能手机APP图标的设计研究及实践_罗晓萌[D]
[14]智能手机交互界面中的图标设计研究_王歌[D]
[15]极简主义在手机APP启动图标设计中的运用_朱晓阳[D]
[16]http://product.pconline.com.cn/itbk/top/1202/2665845.html
[17]http://mobile.163.com/10/0701/08/6AGBRK8J00112K88.html
[18]http://it.sohu.com/41/56/article15745641.shtml
[19]http://
[21]http://
[22]https://zhuanlan.zhihu.com/p/19567510
点击咨询 