移动App图标设计的最佳实践

资讯频道 → 移动开发

1顶
0踩

2015-12-04 17:49 by 副主编 mengyidan1988 评论(0) 有3532人浏览

移动开发图标

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

在几周前的那篇文章《谈谈白色应用图标》（不可否认那篇文确实有一些指责说教的意味）引发的喧嚣过去之后，笔者认为在设计优异的应用图标（icon）方面，找出更有建设性的实用方案是很有必要的。本文讲述了应用图标的魅力，还有它的优化方式。这篇文章适用于所有人，包括新手与专家。

原文及视频发表在 Net电子杂志上，后被 appicontemplate.com网站转载。下面是删减更新后的版本，文末另外附有一篇演讲。

入门阶段

创建一个独一无二且让用户每次看到产品时都能第一时间联想到的图形设计方案还是颇有难度的。一个美观、可辨识、令人难忘的应用图标能对应用的普及与成功产生巨大的影响。不过到底怎样才能创造出一个“好的”应用图标呢？甚至说，好的应用图标到底指的是什么呢？不用害怕，我已经总结了一些技巧与建议，来协助你解答这些问题，并指导你完成优异应用图标的设计工作。

“应用图标”是什么？

在创建图标前，首先需要理解这一点：应用图标到底是什么，它到底有什么用途。应用图标正是产品的视觉锚点。你可以把它当作品牌的一小部分——不仅在视觉上需要有吸引力、与众不同，理想状况下甚至要能诠释应用的核心本质。

现在“商标（Logo）”这个词已经被用滥了，应用图标并非商标。当然，两者均与品牌相关联，而且都受到很多限制。提醒设计师注意的一个重要区别是：商标用在信笺抬头与广告牌等位置，是代表品牌的一个可缩放矢量图块。而图标则经常是放置在一个方形画布块内，根据栅格进行个性化定制的输出结果，除了美观之外，还需要使用特定的尺寸与背景。两者的实现方法与相关工具，还有完成的任务，以及是否成功的评判标准都不尽相同。

应用图标打包了一系列不同尺寸的图标

从实际的角度出发，在设计应用图标时设计师创建的是一套不同尺寸的PNG文件——从29*29px一直到1024*1024px的图片都有，并且需要与应用捆绑。在很多OS背景中，用户在接触你的应用时，首先会看到这套设计精巧的图标——App Store或Google Play中，设置面板、搜索结果或主屏幕上都能看到它们的身影。

基本上任何能生成光栅图形文件的应用都可用来制作图标，不过较为常用的还是Photoshop、Illustrator和Sketch，还有提供精巧的PSD模板的免费工具，可以帮助新手快速取得进展。

五个核心方面

现在来看一下应用图标设计中的一些最佳实践案例。笔者将就“应用图标设计的5个核心方面”一一予以讨论，并对如何提高各个方面提出建议，同时展示一些实际处理中的案例。这些案例有很多都是建立在实际工作之上的，列举出来并不是因为其中的处理方式就是最佳或唯一的，而是因为在笔者的实践过程中，这些案例对总结经验很有帮助。在浏览这些观点时，尝试想象你喜欢的图标，试想在你的主屏幕上那些图标又是如何践行这些特质的。下面开始具体讲述。

1. 可扩展性

应用图标需要支持多种分辨率，并且需要保证各个尺寸的清晰度

图标最重要的其中一个方面就是可扩展性。由于在整个平台的多个地方都有展现，且尺寸不同，因此保持其清晰度与独特性非常重要。在App Store、Retina设备甚至是设置面板中，图标都需要保持美观。

将小小画布塞满的那些过于复杂的图标经常会面临可扩展性不佳的情况。
在应用图标的构思设计阶段，设计师应将很大一部分精力放在这里，思考给定的设计能否进行良好的扩展。

在1024*1024px的画布上正常显示，不代表在其他尺寸中也是可用的，请确保在所有设备上、在多种背景与尺寸下都做过测试。
保持简单，集中在单一物体上，最好使用在扩展时能保持轮廓与质量的独特造型或元素。
确保应用图标在多种背景下都很美观。

我设计的一些图标，其中都包含了可扩展性的特质

2. 可辨识度

无论简单还是复杂，只要确保图标具有创新性、趣味性且准确呈现了设计思想即可。

从一堆噪音中找到一首短歌非常容易，而优秀的设计也是如此，它能从主屏幕中脱颖而出。就像歌曲的韵律需要听者的共鸣一样，应用图标的形状、色彩与想法也需要用户的共鸣。设计需要精巧地编织记忆与关联，让功能与情感相通。

所有的图标都是在一模一样1024px的画布上构思的，而你的图标需要与其他成千上万的图标竞争，抢夺用户的注意力，让用户联想到你的应用。在可辨识度中，可扩展性占据了一大部分，新鲜度也占了一大部分。如何权衡这些特质才是关键。

乏味、过于复杂都是可辨识度的敌人。尝试删掉所有细节，只保留原本的概念。可辨识度是否提高了呢？
在设计时尝试多种变化，将各种变体都放在网格里浏览，看看哪类设计能抓住你的眼睛。
尝试解构你最喜欢的应用图标，指出你喜欢它的原因，以及它们脱颖而出的方式。

3. 一致性

在加强视觉表述力上，让图标与界面保持一致非常重要。

与应用图标的交互，以及与它所代表的应用进行交互，两者的体验需要保持一致。我认为好的图标设计是应用内容的延伸，确保两者相互支持，才能让用户留下更为深刻的印象。

引用

让用户留下圆滑统一的应用形象，将会提升产品的满意度、留存度与扩散力。
简单来讲，确保应用的图标与实质、功能和设计一致将会带来巨大的成功。

确保应用与图标一致的一个办法就是保持界面与图标的色彩协调，并使用相似与一致的设计语言——例如绿色的图标会强化绿色的界面。
虽然不见得总是奏效，但通过将图标的象征意义与应用的功能直接关联，有可能强化应用与图标之间的联系。

在整套有关联的应用中，图标可以是一致的。

4. 唯一性

App Store的效率分类正是渗透到设计流程中的典范

虽然几乎毋庸置疑，还是要尝试创造些独特的东西。模仿风格或潮流的做法很好，但要尝试做些自己的东西。由于常要与其他图标竞争用户的注意力，使用独特的设计会很有效。

引用

独特性是设计中比较棘手的部分，因为它不仅依赖于你的技巧，还依赖着其他解决同样任务者的选择。

想想其他人会怎么做，再尝试完全不同的方向。永远做研究——在这个世界上，我们不需要再用“对号”这样的图标。
如果想要保持独特，在同色背景上使用单色字形会很难。尝试不同的色彩与组成，挑战自己来找出新的、聪明的象征。
在实现概念时，使用色彩是极佳却常被忽略的方式。

无论你喜欢什么类型的设计，在寻找新奇的点子时，尝试保持独特常是个不错的办法。

用游戏图标设计来找灵感也很好，因为其中包含的想法范围更广，更脱离俗套。

5. 别用文字

这是我历来强调最多的问题之一，只有在极少案例中可以在应用图标上使用文字。如果必须退回到书面文字这种抽象工具上，我不得不说你没有发挥全力进行想象。

文字与图片是各自分离的具象化工具，将它们结合用在应该是图片表示的地方，经常会导致体验上出现难以解决的混乱与重点缺乏。用干巴巴的文字来具象化应用真的就更好吗？无论何时我看到应用上的文字时，都会感觉这名设计师错失了机会，本来他能够更明确地传达自己的意图。

在图标中包含应用名称更是不必要，这种做法在界面上倒是更为常见。相反，花时间找找更酷的图形概念吧。
但我听到你说：“Facebook在应用图标中包含f”。如果你正使用单独的字母，并且感觉非常（并且具有唯一性）合适，那么这个字母就失去了自身的“文字”特性，而成为了图标。但是，通常来说这条规则被打破的情况更为常见。
将你的公司商标和名称放在一个方块里永远不是什么好的解决方案。是否有能在限制下还表现良好的符号或者字型呢？如果没有的话，最好还是找些新的东西。要记住，图标与商标是不同的，不应当应放在同一个背景中。

大展拳脚

在App store还有Google Play上有很多乏味而不能达意的图标设计样例。你的图标就是你的应用与用户之间最强大的联系，是他们在App Store中浏览时第一眼看到的东西，是他们在每次使用应用时都会与之互动的东西，是他们在每次想到你的应用时都会想到的东西。在利用最大视觉资产方面，任何缺乏深思熟虑、适应性与吸引力的方案都是失败。你的应用图标不应当是后来才想到的，而是整个流程的一个工作环节。

引用

应用图标都是很细碎的东西，却集中了设计的精髓，想要设计出优秀的图像，请遵守通用准则：提高可扩展性、可辨识度、一致性与独特性，这些比其他都要重要。成为一名图标设计师会让你的设计功力更进一步。

无论或简单或复杂，或普通或创新，这些图标都有一致的特色：都是在一个有限的空间里，完全公平的竞争下，尝试吸引用户的注意力。这是个特殊的挑战，相同的像素得出不同的结果。

毫无疑问给应用配上图片设计是个困难的任务，不过我希望上面列出的技巧能够让你在应对挑战时更有信心。现在就开始设计一个迷人的应用图标吧。

本文已经读完却还是无法获得设计应用图标的足够知识？上面是我在洛杉矶的Adobe MAX大会上所做的一个演讲。在这个为时1小时的视频中，我讲述了自己的一些工作，还有本文中所列出的理念，最终在改进现有应用图标的问题上给出了一份demo。我觉得本文应当到此为止了。

文章来源：Designing better app icons