一枚app图标的设计文化(译文)

第一篇：一枚app图标的设计文化(译文)

键词：一枚,app,图标,计文,译文,启动,图标,一个,iOS,中

启动图标是每一个iOS中应用软件的关键组成部分。它能传达给你应用程序的基础信息，并能够给用户带来第一印象感受。它是一个非常重要的软件入口，能直接引导用户下载并使用应用程序。它的重要性在这个智能手机时代被大家所认知。

有过软件启动图标的设计经验的设计师，经常会遇到这样一个问题： 设计出的单枚软件启动图标看起来很炫，但是放到电子市场上后，却不太受用户的喜爱，用户点击率很低。

怎样从视觉设计的层面，去提升app软件启动的图标点击率呢？

其实，我们在设计软件启动图标的过程中是有一定共性的设计方法的，这些能够帮助我们提升图标的点击率。

1.运用视觉隐喻的同时，需要保证图标的可识别性。

如图一，这里很多图标设计是没有经过仔细思考而设计运用的。我们通过App商店去查找，会发现有非常少的app图标的设计是吸引眼球的。例如，“绕口令”的搜索，你会看到这样的图标分类：

图一的第一行第五个图标，表现方式是将绕口令的英文文字写在渐变的图标背景色块上，视觉效果表现很平，没缺乏设计感。

为了吸引用户去使用app软件，我们必须设计出吸引用户眼球的图标！

我们可以运用隐喻的设计表现手法，传达给用户“绕口令”的信息，让用户看到图标能够感知、想象、理解图标的意思。图一右侧被放大的图标，在这几种图标设计中，比较吸引用户去使用。它的设计采用的就是隐喻的视觉表现手法，让用户理解绕口的含义，再加上有趣的形象设计，让用户容易理解图标的含义，这样的精致隐喻的图标容易在第一时间吸引用户的眼球，受用户的喜爱。

如图二，这是星巴克的一款应用程序图标设计。星巴克的标志设计是非常好的，但是，星巴克的消费卡的app图标设计中星巴克的标志比较小，在App Store上看这枚图标设计，圈形的星巴克标志是难以辨认的。其实设计时，应该放大星巴克的商标，提高标识的可识别。因此，我们在使用视觉隐喻的手法去表现图标的同时，需要确保图标设计的识别性。

2．分析同类app图标，整理设计思路注重图标创新。

我们在itunes里搜索效率软件会发现很多相似的图标。如图三所示，这里面哪些图标会吸引用户的眼球呢？过目之后，我们会发现，那些有层次设计感、和特定质感的精致图标会吸引用户关注。

设计app图标的另一种方法是增加图标的层次感设计和质感表现。设计好图标后，放在同类别app图标中，去审视自己设计的图标是否能够抓住用户的眼球。

下面是图三中的几个能够第一时间抓住用户眼球的图标：

2Do-这个图标就像一堆文件有序处理的感觉。缝制的皮革质地和洁净便条形成质感的对比，图标整体质感表现细腻饱满。

Put Things Off-是一个很好设计。设计者经过仔细的思考，表现方式与众不同，富有创造性和趣味性。图标采用文件箱子和“前进”的箭头的视觉元素表现，表达事件处理的迅速效率的感觉；色彩上，运用了纯度很高的鲜亮的色彩去设计，能够抓住了用户的眼球，让用户很快的理解了这款软件的功能特性。

Taska-图标看起来像一堆办公桌整齐地堆放在一个文件。视觉表现上没有给人留下很深刻的印象，但是这个图标画的非常精致，纸张的堆积效果表现出了图标的层次感，背景木材纹理的效果表现提升了图标设计的质感。

3． 运用软件界面中的图形元素，体现图标设计的连续性。

有一种设计方法，可以确保图标的表现和软件具有连续性。方法是启动图标的设计运用和应用程序界面图形相匹配的设计元素。Expenditure是一个很好图标设计例子，非常准确地描述了跟踪功能的应用程序。

4.采用用户好奇的图形元素设计，抓住用户的好奇心。

用高雅的轮廓、优美的线条去表现一款瑜伽应用程序图标。唤起用户的好奇心，吸引用户使用。

5.突出品牌，抓住用户眼球。

如果你正在设计一个知名品牌的应用程序，请恰当使用它的品牌LOGO！生活中，这些品牌标志已经留给用户很深刻的印象，非常容易从众多app的图标中胜出。因此，在设计知名品牌的app启动图标时，应该充分使用它的品牌LOGO。不管你想设计成什么，不要浪费了一个知名品牌的现有的元素！例如，浏览几个图标，是很容易被辨认的：

但是，图标的设计中，如果你没有突出知名品牌的元素，会是什么样子呢？如图六的图标设计，在图七的众多的app图标界面中，图六的这些图标显得很无力，无法与其他图标竞争。

如果，调整图标设计的局部，改进设计：

我们把新的图标放在界面中，试看效果：

通过思考和实验，调整设计，让品牌特性抓住用户的眼球。

6.设备测试预览图标的效果，微调色彩或亮度达到最佳效果。

采用在设备上测试你的图标设计，是一个很好的方法。

Photoshop里查看或者iphone模拟器里查看效果是不够的。图标在实际设备上的视觉效果和电脑上是不同的。为什么呢？ 有几个原因： • 电脑显示器的色彩和亮度与触摸屏移动设备不同。

• 并非所有的触摸屏显示器是一样的。例如，iPhone屏幕质量高于iPod触摸屏的显示质量。

因此，设备测试是很有必要的。

7．多场景测试，保证图标设计的上线质量。

App的商店有： • itunes电脑商店；

• iPhone 不同分辨率的商店； • itouch 不同分辨率的商店； • iPad平板电脑商店。

这意味着图标的应用环境有多种，因此在图标上线前，设计师需要在多种图标的应用场景中进行设计测试。尽可能做到在多种商店场景下，在同类产品的用户查看界面，都能吸引用户的眼球。

以上几点app软件图标设计的方法你在设计时都用到了么？没用过的方法可以尝试使用。这些共性的图标设计方法能够帮助设计师控制图标设计的效果和市场中的用户体验，能真正的从用户的角度去设计一枚图标，能提升你的app软件的用户体验，从视觉设计的角度去提升软件图标的用户点击率。

第二篇：智能手机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

第三篇：图标设计心得

东莞生活网： 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时的一些心得。

第五篇：企业图标设计提纲

毕业论文提纲

题目:企业标志设计

学生:高骏 指导老师：郭国强

【摘要】企业标志是明确表现某物的符号，它以特定而明确的文字、色彩、造型等来表达象征事 物，同时也表达出它抽象的精神内容，也将信息快速准确的传播给广大的人民群众和社会。企业 标志还包括内容、目的、特征、精神等总体表现，并且还通过人们的视觉、听觉、触觉来识别标 志记号。

【关键词】三维造型 材质 光泽 企业标志 引 言

企业标志设计不仅仅是一个图案设计，而是要创造出一个具有商业价值的符号，并兼有艺术欣 赏价值，标志图案是形象化的艺术概括。设计师须以自己的审美方式，用生动具体的感性形象去 描述它，表现它，促使标志主题思想深化，从而达到准确传递企业信息的目的。

企业标志设计是企业形象设计的重要方面，也是企业VI（视觉识别系统）设计的中心环节之一。目录

一、企业标志的定义

（一）企业标志的表现形式 1.字体表现 2.形式化表现 3.综合表现

（二）标志设计的设计观念

（三）标志设计的创意与构思

二、企业标志类型比较与分析

（一）企业类型对企业标志设计的影响

（二）各类型企业标志设计实例分析

三、企业标志设计的未来趋向与走势

（一）企业标志设计的概念

（二）企业标志设计发展轨迹

（三）企业标志设计的未来发展趋势 1.三维造型的广泛应用（实例）2.材质和光泽的应用（实例）3.更加复杂的生动形象（实例）4.比较与分析

四、结语

(一）总述

（二）设计重点与注意事项

五、参考文献

文字资料引自

http:www.xiexiebang.com.com http://www.xiexiebang.com 《ＶＩ的设计》文山设计策划有限公司 作者：文山

５Ｄ多媒体论坛－质量版 作者：ｓｙｔ

图片资料引自

http://www.xiexiebang.com http://www.xiexiebang.com http://www.xiexiebang.com xbox电视广告（Mill公司制作）