智能手机app图标设计风格与制作技巧研究本科论文.docx
《智能手机app图标设计风格与制作技巧研究本科论文.docx》由会员分享，可在线阅读，更多相关《智能手机app图标设计风格与制作技巧研究本科论文.docx（17页珍藏版）》请在冰点文库上搜索。
智能手机app图标设计风格与制作技巧研究本科论文
智能手机APP图标设计风格
与制作技巧研究
（韶关学院信息科学与工程学院广东省韶关市512000）
摘要：
本文首先简要介绍了移动终端的图形化用户界面的发展历史，得出当今手机图标设计的主要风格是由苹果的扁平式和立体式的发展趋势的结论。
然后对iOS和Android设备的图标设计标准进行了总结，之后研究并梳理了在不同的设计原则和视觉配色原理图标设计过程中应该采用怎样的图标风格。
然后根据不同的布局风格对界面的图标风格和设计要求进行了研究和总结。
最后通过对优秀实例的分析，研究出图标设计要点和加工方式。
Abstract:
Thispaperbrieflyintroducesthehistoryofthedevelopmentofthegraphicaluserinterfaceofthemobileterminal,drawstheconclusionthatthemainstyleoftoday'smobilephoneicondesignisbytheconclusionofthedevelopmenttrendofApple'sflatandthree-dimensional.ThenonIOSandAndroiddevicesicondesignstandardsaresummarized.Afterstudyandcardingoftheindifferentdesignprinciplesandvisualcolormatchingprincipleforicondesignprocessshouldbeusingwhatkindofstyleicon.Thenaccordingtothedifferentlayoutstyleofinterfaceiconsstyleanddesignrequirementsofresearchandsummary.Finally,throughtheanalysisofoutstandingcasesoficondesignpointsandprocessingmethods.
关键词：
智能手机；图标风格；图标设计
Keywords:
smartphone;iconstyle;icondesign
引言
随着智能手机的飞速发展，越来越多的人开始重视手机APP的UI界面的风格设计，而图标，作为UI的最基本发元素，其研究却被人忘记在角落之中。
虽然目前有一部分人开始研究图标的制作和设计，但是他们往往没有放开视野，只是局部的研究图标本身的设计方法，没有把图标设计当做一个体系，从整个APP体系研究图标的设计风格。
本文将采用从整体出发的角度来研究智能手机APP图标风格设计的理念并挖掘出制作统一风格图标的方法。
第一章绪论
1.1研究背景
随着信息时代的迅速发展，在当今社会手机已经是随处可见，虽然智能手机是进几年才出现的新型产物，但是按照现在的发展速度来看，智能手机凭借它强大的功能与便携操作的特性，拥有摄像摄影、播放视频音频、远程通讯等功能，今后智能手机完全能取代PC机在人类日常生活的重要地位。
所以我们有必要对其的发展进行研究试图从中挖掘出可用的价值。
具统计，在2015年中国的智能手机普及率已经高达50%，这意味着中国的智能手机市场已经发展的很壮大了，我们完全可以从中捞一桶金。
而APP（application）作为新媒体的产物，在人机交互方式上做出了革命性的创新，同时也开创了智能机的新纪元。
智能手机之所以能够在当今有如此大的影响力必须功于智能手机上各式各样APP的出现，硅谷著名工程师Andreessen曾说，软件正在吞噬着世界，而现在看来，APP则正在吞噬着软件。
因此我们当今的智能手机时代可以说是APP的时代。
[13]
1.2图标的重要意义
如果说APP是智能手机的灵魂，那么图标就犹如APP的精气神。
所谓“未见其人先闻其声”，图标体现出的是APP所表达的核心内容也是APP的外在体现，它关系着整个程序设计的成败，是用户在使用APP前了解APP的一个重要信息。
如何让一个图标能够即不失美感富有创造性又具有明确的可识别性，能准确的表达出制作者的主旨，这是本文重点研究的问题。
如何在众多的APP中使自己成为关注的焦点，图标设计的好坏就是取得成功的重要因素。
视觉效果优秀，色彩搭配自然舒适，图形设计简单符合逻辑的图标往往就能够在第一时间博得用户的眼球。
同样这些因素也是本文将重点讲述的一个重要问题。
1.3图标的产生和发展过程
图标的产生离不开计算机系统的发展，这里我们将采用计算机的图形界面系统发展过程
和手机的图形界面系统发展过程相结合的方式来讲述最全面的图标的产生和发展过程。
（1）手机图形界面的发展
早期的手机系统只支持黑白色调，图标也是简单的类似手绘线条图形，形式简单没有任何的边框修饰和色泽点翠。
而正是这种线条式的简单风格，已经成为了当今的主流图标设计风格，虽然现在市面上也不乏形式多样，具有艺术性的图标，但是简约的设计风格凭借着它表意明确，浅显易懂，色彩搭配简单自然等优势一直占据着APP的大部分市场。
相比PC机的在1989年就出现了彩色界面，手机的彩屏系统在2000年才问世。
2000年1月，日本最大的电信运营商NTTDoCoMo推出了第一支正式上市的彩屏手机D502i，实现了人们“彩色的梦”。
图1-6早期的黑白机界面
图1-7D502i手机界面
真正第一个推出彩屏GSM手机的是台湾一家较为知名的手机厂商--英华达（OKWAP），它在2000年9月推出的OKWAPi108，才是真正世界上第一款GSM网络的彩色液晶屏手机。
而随着彩屏的到来，其延生物如彩信业务及拍照功能，开始了飞跃发展。
[16]
图1-8OKWAPi108手机界面
虽然早在2000年手机系统就进入了彩色时代，但是APP图标的设计还是处于一种停滞状态，彩屏的APP图标仅仅只是把以前的黑白色调重新漆上了一次彩色，整体的设计可以说是极简至极。
直到2004年，各大厂家开始把高端液晶技术运用在手机上，使手机屏幕从10万像素直接升级到130万像素，可以和数码照相机的演示效果到底同一水平线。
有了液晶技术的设备基础，APP图标的设计也得到极大的发展。
2007年随着苹果公司的iPhone系列上市，APP图标变的更加细腻滑润，更有质感，色彩也更加饱和丰富，同时也保留了以前的简约风格，体现出一种纯朴的美感。
iPhone系列的推出可以说是引领了当代APP图标设计的潮流，就连当今使用用户最多的Android系统上的APP图标也是处处能见到IOS图标设计风格的身影。
第二章手机图标的设计标准
2.1手机图形界面设计的规范
在手机有限的屏幕空间中如何才能让图标设计更符合标准，这就必须遵循以下的手机UI设计规范原则。
首先我们将手机屏幕拆分为4个区域，自顶向下分别是：
状态栏、导航栏、内容区、标签栏，这些区域对应不同的屏幕分辨率也将以不同的尺寸呈现出来。
[20]
图2-1IOS应用图标规范表格
图1-10iPhone图标尺寸规范
由于Android系统设备众多，一个应用程序图标需要设计几种不同尺寸,但是目前的Android系统已经拥有了自适应功能可以根据不同的屏幕分辨率来调整图标的大小所以这里就不进行详细的研究了。
2.2图标的设计原则
图标的设计形式主要有三种分别为：
纯图形式、纯文字式和图文并存式。
而这三种形式各有自己适合的界面，设计者应该根据不同APP的试用范围和布局的排版来决定使用哪一种图标这点我将于第四章在和大家讲解，现在我们先了解下图标设计主要原则。
图标不同于Logo、图腾这里需要拥有很强的文化底蕴，图标只要具备简单明了、美观自然的要求就行了，简单来说图标的设计就是用来告诉用户按什么按钮能完成什么任务，在指引用户的同时又达到修饰、美化整个APP界面的作用。
所以我们在设计图标的时候应该首先考虑这两点，达到有一定内涵而又不失美感的水平。
因此在设计图标时我们应该注意一下几个基本的设计原则。
（1）表意明确原则
表意明确原则也就是上面所强调的第一点，在现在的快节奏生活中，几乎没有人会去慢慢研究一个APP的各种功能是在哪里实现的，同时现在的人也不喜欢花费太多的时间去寻找一个符合自己要求的APP，所以让用户看一眼图标就知道APP具有哪些功能，是留住用户的重要手段，表意明确的图标能够大大的减少用户适应APP的时间，同时也能省去繁琐的向导节目。
表达信息最准确的方式就是才用文字，纯文字式图标就在这反面起到了很大的作用。
如图1就是典型的纯文字式图标，其功能复杂性只需要浏览一遍我们就可以完全了解。
图2-1纯文字式图标
但是这类图标同时具有一个很严重的问题，那就是APP在面对不同的地域不同的文化的客户那就应该采用不同的图标，这不得不说是一个很麻烦并且很困难的事情。
所以纯文字式图标一般适用于面向内地用户的中小型APP。
如果需要扩大用户量，那么采用纯图形式图标和图文并存式图标将是一个不错的选择。
纯文字式图标就要求设计者具有丰富的联想能力和洞察事物的能力，当使用象征事物作为图标的时候，设计者就需要考虑到采用事物的材料（金属物件图标要体现出金属质感）、外形（照相功能的图标要和摄像功能的图标区分开）、角度（文件图标用侧面就根据有代表性）等因素。
具体怎么实现这些效果我将在第四章进行讲解。
纯图形式相对纯文字式来说它所表达的是一种相对抽象的信息，没有文字那样直接明了，但是对于大众化的APP来说，纯图形式图标更能使用户达到共鸣。
这也就不用繁琐的针对不同地区设计不同的图标，极大的减轻了图标设计的成本，所以现在大部分的APP的内部界面都是采用纯图形式图标，而图文并存式和纯文字式更倾向于作为APP的Icon。
图2-2图文并存式和纯文字式图标
（2）风格统一原则
风格统一原则就是要求图标的设计要根据APP每个界面的布局和配色来设计出与之相搭配的图标。
就像装修新房子一样，新房装修完后设计师会根据房子的构造和设计风格来配置相搭调的家具和小饰件。
图标就类似于整个APP中的小饰件，运用好这些小饰件就能营造出一种让用户掌控自如的感觉。
人类往往对能够掌控自己和周围的环境感到舒服，不考虑用户感受的设计往往会让这种舒适感消失。
如果一个APP的开始界面和功能界面形成很强烈的反差，那就会给人一种很突兀的感觉，甚至能让人产生一种是不是用错了APP的幻觉，这将会使用户对该APP的体验大打折扣。
所以风格统一的目的就保证界面处于用户的掌控之中，让用户自己感受主动权。
根据界面的展示功能来设计不同的图标是风格统一需要注意的问题，一些隐喻式的UI设计者最好采用一些大型事物作为图标，从而达到整体的氛围修饰。
图3中的两个播放按钮取色就是界面第二栏音频的颜色，其他按钮的风格也是灰黑色ASB塑料感，具有非常强烈的真实感。
图4中的酒瓶图标和cellar图标都完美的营造出了一种收藏库的感觉。
图2-3CrossDJ应用图2-4AwesomeNote应用
而相对于功能比较复杂或者一个页面展示的内能比较多的界面来说，我们更倾向于使用简约的图标，这样能减少用户的视觉盲目敢，减缓眼睛的疲劳感。
例如各种购物APP。
并且简约化是现在图标的主要发展趋势，继iPhone5之后的苹果机图标都开始采用扁平的设计风格，即抛弃部分艺术修饰，如阴影、透视、纹理、渐变等等能做出3D效果的元素一概不用。
图2-5IOS图标风格的变化
（3）艺术修饰原则
虽然说现在图标的发展趋势偏向于简约的风格，但是适当的运用艺术修饰也能让图标达到一种眼前一亮的作用。
简单来说艺术修饰原则就对原有的图形进行加工美化，典型的就是richdesign丰富设计风格。
所谓richdesign就是通过添加各种设计装饰，比如下落阴影、梯度等，让整体设计显得很丰富。
这种设计风格可以让用户在导航时，更加自如。
另外richdesign和拟真设计风格也不同，后者是通过模拟物理实物来让设计更加逼真（类似于IOS6之前的图标风格）。
艺术修饰还有一种比较特殊的方式，那就是才用动态图来作为图标，动态图相对于以往的静态图来说可以更加容易吸引用户的注意力，但是如果大量的使用动态图则会照成一种非常混乱的场景，同时也会导致手机的负载过大，从而影响APP的运行效率。
所以一般情况下只需要在加载、等待、刷新等界面中使用动态图标。
实际上，有研究表明，普通用户能够忍受的最长的加载页面的时间一般为8秒钟。
8秒是一个临界值，如果加载时间超过8秒，除非用户必须在这个页面获得一些信息，一般用户会关闭页面或者转到其他页面。
所以采用充满艺术效果的动态图就能让页面在保持加载的过程中充满了趣味性，牢牢的吸引住用户的注意力，让用户在等待时不在是无所事事，化等待为视觉上的享受。
第三章图标设计的视觉要素
3.1图标设计的视觉重要性
所谓的视觉重要性用网上调侃的一句话来说“现在就是个看脸的世界。
”上述所提到的所有原则都是为了进一步提高视觉效果而规定的。
视觉设计试图解决的是功能和美学效果之间的鸿沟，从两者之间寻找一个完美的平衡，所以设计师不仅要完全熟知软件的每项功能同时也要拥有视觉设计的技术。
良好的配色不仅能够使图标的风格变得更统一，而且能够营造出一种天然加工的美感。
而对于图标的底色最好使用明亮的三原色,在一个图标上附加太多的细节,这会导致计算机界面混乱,但是一个按钮过于简单又会显得苍白无力。
好的图标应该是在同类中易读易懂易识别，而不是在说明解释，一个好的创意应该以清晰、简明、给人印象深刻的方式表现出来。
视觉设计同样是整体用户体验设计的一部分，我们应该在软件框架开始构造的阶段就将视觉设计考虑周全以便图标风格的统一。
优秀的视觉效果可以增加APP的使用用户，提升APP页面交互直接的流畅性，提高用户的满意度与使用成就感，进而使APP变的更完善。
3.2图标设计的色彩原理
作为视觉效果的重要一部分色彩是需要我们特别注意。
色彩的搭配是统一界面风格的重要部分，不顾风格要求和用户感受的配色只会给APP带来负面影响。
在了解色调的搭配前，我们先要知道各种色彩的含义。
就像每种花都有不同的花语一样，使用合理的配色可以更方便用户融入作者的思想中。
下面我们来浅谈一下几种最基本也是最常用的色彩。
白色一般是象征着明亮干净、畅快、朴素、雅致与贞洁，白色是所有颜色中最简单的色彩，它没有强烈的个性，不会对人体感官造成强烈的刺激，白色可以说是百搭色，所以在很多UI中都会使用白色作为填充色，图标同样也是如此。
与白色相反的黑色则代表着高雅，悲伤和与神秘，它与其他的颜色搭配会形成一种强烈的反差感，正是这种反差感所以它更能突出其他的颜色。
随着时代的发展，黑色还产生了重金属和朋克风格的特征也象征着时尚与冷酷。
黑色适合搭配的颜色是红色、蓝色、白色、紫色。
作为三原色之一红色象征着热情、吉祥、革命和危险，红色在可见光谱中光波最长，所以是最为醒目的颜色，给人视觉上一种迫近感和扩张感，容易引发兴奋、激动、紧张的情绪。
在大多数情况下红色图标都作为一种警告作用，提示用户这样做有一定的风险。
所以在图标制作时我们一般是采用比较浅的红色作为主色调从而突出其前两种特点。
红色适合搭配的颜色是白色、黑色、蓝灰色、米色、灰色。
蓝色属于冷色调，通常代表宁静、理智、安详与广阔。
蓝色有镇静的效果，可以使人的情绪平静下来，还可以降低血压。
除此之外蓝色还是后退色，蓝色物体看上去比实际距离远，蓝色还可以使人感觉时间过得很快。
蓝色适合搭配的颜色是白色、粉蓝色、酱红色、金色、银色、橄榄绿、橙色、黄色。
黄色是光明、兴旺、神圣的象征。
黄色的波长适中，是所有色相中最能发光的色，能起到醒目和放大的作用。
虽然黄色过于明亮，但是稍添加别的色彩就容易失去本来的面貌，所以黄色一般都是作为辅色起到提醒和修饰的作用。
黄色适合搭配紫色、蓝色、白色、咖啡色、黑色。
黑白和三大原色是图标设计的最基本的颜色，从UI设计到图标设计都离不开这五种色彩，所以熟悉它们的色彩特性和搭配原则能够使图标设计更突出APP所表达的主题，使UI交互更加贴切自然。
第四章设计图标的基本方法和要点
4.1图标设计的排版和尺寸和摆放位置
图标的一大作用就是用于UI的界面美化修饰，所以在图标设计的过程中我们要考虑到每个图标分别是用于什么板块，该板块采用的是怎样的布局，依据图标的生存空间来设计图标才能更好的发挥图标的作用。
（1）跳板式导航（又称快速启动板或宫格导航）
跳板式导航是APP中比较常见的布局，其特征是界面中的各个菜单选项就是其他界面的跳转点。
而跳板式导航的布局模式通常是40×40px、40×30px和30×20px网格，由这类较小的板块组成，每一个板块都是用上一个图标作为按钮，但是部分跳板式导航会根据不同的应用优先级顺序，放大或者缩小网格，用于突出主要应用，所以在设计时可以对主要功能的图标进行细腻的加工以突出该图标的主要地位。
由于跳板式导航中每个按钮直接的间隙比较小，因此在设计这类布局的图标时，应该注意每个图标的配色不能有太大的色相差，除了主要图标之外，其他图标不需经过复杂的修饰加工，否则会加大用户对按钮选择的压力，通常采用扁平式或者线条式这里比较简约的图标。
（2）列表式导航
列表式导航是最常见的APP导航之一，这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。
列表项目通常是采用间距、标题等进行分组，形成扩展列表。
这类布局的图标比跳板式导航更小，通常是20X20px的图标，在图标旁边通常有文字标题来帮助引导。
图标设计是通常是采用简单的双色搭配，也不需要复杂的图片内容，采用简单的图形来勾勒就可以了。
（3）仪表式导航
仪表式导航通常是用于统计信息的界面，相对于其他界面来说，统计界面更需要直观的信息与简洁的界面，这样才能让用户了解和分析所统计的信息。
这类布局所才用的图标通常是长矩形的小条格或者是不同规格的锥形块，并且在设计图标的时候可以根据不同信息的重要程度采用比较强烈的颜色进行标注。
仪表式导航所采用的图标可以说是所有布局中形式最简单的图标。
（4）隐喻式导航
隐喻式的特点是页面模仿应用的隐喻对象，通常用于游戏和一些比较特殊的APP中，其中充满了大量的图标和按钮。
用于这种布局的图标是最复杂也是最多变的，我们需要根据整个APPUI设计的氛围来制作与之相对应的图标，其中会用到各种图标加工方法，例如阴影效果、金属质感、抛光效果、朦胧效果等。
整个界面的图标设计下来与其说是图标制作，倒不如说是制作一幅绘画也不足为过。
4.2.1图标制作中的各种效果实现
为了配合UI的整体风格，图标制作过程中往往需要用到很多的修饰效果来到的制作者的目的。
无论是纯图形式图标、纯文字式图标还是图文并存式图标，使用各种图标修饰效果都能进一步提升图标的美感。
（1）阴影效果
阴影效果的作用是突显一个元素，大多数图标都会拥有这种修饰效果，即便是扁平化的设计也一部分图标采用了长阴影效果。
长阴影的制作通常都是使用黑白渐变的矢量矩形来叠加在图片上来实现这种效果。
或者使用多次复杂图层然后将这些图层填充为黑色，并使用图层蒙蔽调整大小与轮廓。
相对于长阴影，WindowsPC机上的图标通常是采用描边阴影，在比较规则的图标上添加这种阴影可以使用Photoshop的图层属性中的“投影”选项直接添加。
对于一些相对复杂的图形，可以通过复制图层然后对图形进行变形调整大小和比例，再降低透明度和颜色的填充程度来实现阴影效果。
而3D图形则需要根据图形的受光面来添加局部阴影，下图中“投影”的实现同样可以采用上述提到的方法来实现。
图4-13D图形的阴影效果
（2）质感效果
具有质感效果的图标主要是用于一些按钮上，其作用顾名思义，就是给按钮赋予了一种有质量的视觉感，让用户按上去有触碰的感觉，主要应用于纯图形式图标、和图文并存式图标。
质感效果的制作是通过对图标的局部板块使用斜面和浮雕效果与阴影效果配合制作出一种图层凸起初步的效果，有了初步的质感之后需要使用抛光效果对质感进一步的打磨加工。
抛光效果的制作通常是用类似Photoshop中“钢笔”工具或者“矩形”工具这类绘画手段制作需要抛光的部分，然后填充为白色，对其进行模糊和透明化的设置即可达到理想的效果。
（3）3D效果
3D效果和质感效果有很多共同点能适用于如何图标，但是质感效果只需要对图标的一小部分图层进行打磨和加工，而3D效果则把工程量扩大了整图层。
3D效果的整体立体感不是通过斜面和浮雕效果来实现，而是先对底层图层进行复制和填充，然后根据整个图形的规格对底层和顶层进行勾勒，再对勾勒出来的部分补充色彩，整体层次划分完成后需要对边缘进行细化抛光，最后再根据受关面添加阴影效果。
阴影的分布可以参考图4-1，这类阴影效果同抛光效果一样是手绘阴影部分然后采用模糊和透明的方法到达渐变的效果。
图4-23D效果大致制作过程
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图标设计风格趋向于简约化，无论是在图标的色彩搭配上还是布局对图标设计的限制都导致了现在图标设计的方向变成力求于精简与细致。
即便是制作简单的图标，通过本文对图标的点翠修饰和图标的加工效果的研究得出，如果设计能采用独特的制作方式与加工手段也能使图标变得更加具有吸引力，使简单的图标具有了生命力。
关于图标的风格设计无论是笔者还是其他研究者都已经进行了比较透彻的研究，总的来说就是图标要具有一定的美感并且能够表达出制作出这个图标的用意。
而关于图标制作这方面，虽然笔者用独特的见解讲述了不同图标效果的制作方式和对图标美化加工的手段，但是图标制作方法是多样的，笔者只是介绍了自己制作图标时所想到的点子，至于其他的方法则需要读者自行进行
升级会员 