移动平台UI交互设计与开发课件第2章photoshop——手机图标设计.ppt

第2章 photoshop——手机图标设计 移动平台UI交互设计与开发 知识技能目标： ※了解图标设计的意义、原则 ※掌握使用photoshop工具绘制精美图标的设计方法 ※完成消息图标设计 ※完成音乐图标设计 ※完成时钟图标设计 ※ 完成记事本图标设计 目录： 2.1 图标设计的基础知识 2.2 图标欣赏 2.3 消息图标设计 2.4 音乐图标设计 2.5 时钟图标设计 2.6 记事本图标设计 2.7 知识与技能梳理 2.1 图标设计的基础知识 2.1.1图标设计意义 作为界面设计的关键部分，图标在人机交互设计中无所不在。 深入的图标设计，不仅仅是一个简单表达含义的设计过程，其也显示 出了越来越多的应用价值。主要体现为： ①图标设计是在屏幕上展现产品的最佳方式，对于传统企业，图标可以直观展现产品和公司形象。 ②图标是视觉设计的重要组成部分，用于提示与强调产品的重点特征，以醒目的信息传达让用户知道操作重点。 ③图标设计可以形成产品的统一特征，给用户以信赖感，便于功能 的记忆，在视觉上的统一很容易暗示用户产品的整体性和整合程度。 ④图标设计的表现方式灵活自由，可以传达不同的产品理念，让产品呈现出科技感、未来感较强的面貌。 2.1.2图标设计原则 精美的图标设计在软件界面中起到画龙点睛的作用，提升软件的视觉效果。图标设计的核心思想是代替文字，比文字更直观，更漂亮，提高软件可用性，提升界面的视觉效果。 图标也需要有统一的设计原则，才能更充分的发挥产品的优势，主要有可识别性原则，差异性原则，与环境协调性原则，觉 效果原则，原创性原则，风格统一性原则，尺寸大小与格式一致性 原则以及需要有合适的精细度和元素个数等原则。 2.1.2图标设计原则 下面就是对这些原则的介绍： 可识别性原则是指图标的图形要能准确表达相应的操做。当用户看 到一个图标，就要明白他它代表的含义，这是图标设计的灵魂。也 称之为图标设计的第一原则。 2.1.2图标设计原则 图标不能单独存在，图标最终是要放置在界面上才会起作用。因此，图标设计要考虑图标所处的环境，所设计的图标，是否适合相应的界面，也就是我们所说的与环境协调性原则。 2.1.2图标设计原则 风格统一性原则可以让整个界面非常协调，使图标看上去也更美丽，更专业，增强用户的满意度。如果界面是平面的，简约的，可以考虑用一些简单的平面的符号或者图形来设计图标，这样整个界面会很协调，不要认为这样的图标是简陋的，其实这样的图标的可识别性非常强，在简洁的界面里，会透露出一种简约之美。 2.1.2图标设计原则 差异性原则是图标设计中很重要的一条原则，图标和文字相比，它的优越性在于它更直观一些，但是如果图标设计失去了这一点，图标设计就失去了意义。如下图所示的图标一眼望上去，几乎都一样，这些图标的设计，已经失去了存在的价值，如果不看文字用户很难区分它们，这实际上是降低了工做效率。 2.1.2图标设计原则 追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求即情感需求。图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养。 原创性原则对图标设计师提出了更高的要求，目前常用的图标风格种类很多，但过度追求图标的原创性和艺术效果，则会导致图标设计另辟蹊径，这样做往往会降低图标的易用性降低，也就是说所谓的好看不实用。 这里也要看产品的侧重点，如果考虑更多的是情感化的设计，完美的艺术效果，这样做也无可厚非。 2.1.2图标设计原则 对于要确定合适的精细度和元素个数这一原则，首先要明确一个点，图标的主要作用是用的，代替文字，第二才是美观。但现在的图标设计者往往陷入了一个误区，片面的追求精细，高光和质感。其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。在初始阶段，图标可用性会随着精细度的变化而上升，但是达到一定精细度以后，图标的可用性往往会随着图标的精细度而下降。 2.2 图标欣赏 2.2图标欣赏 每款应用产品都应该重视它的图标设计，很多用户在下载应用的时候都会首先看到产品的图标，好看的图标都能吸引用户去单击或下载。这些图标简洁，大方，富有创意，可以直观的让用户了解到其功能，也会让用户觉得很有乐趣，在用户使用时更会给用户很好的交互体验。 2.2图标欣赏 愤怒的小鸟，是芬兰公司Rovio Entertainment推出的一款风靡全球的触摸类益智游戏，愤怒的小鸟为了护蛋，展开了与绿色猪之间的斗争，触摸控制弹弓，完成射击。在这款游戏中，各种图标设计也十分吸引玩家们的眼