第一篇：智能手机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
点击咨询 