App 图标设计

（应用图标设计） 众所周知 每个应用 甚至你的应用都需要一个图标 这个符号代表了你的产品 显示在主屏幕和App Store里 人类自古以来 就会使用符号进行交流 即使在Apple 这也是很长的历史了 就开个玩笑 希望不会冒犯在座的 埃及考古专家 严肃地说 我们对符号的应用 有着悠久的历史 文字的或非文字的 都是沟通的手段 并且我们把该传统延续到了现代社会 用同样的原理设计用户界面 就以最初的Macintosh为例 让我们快速地重温过去 仔细看看 一些经典的 macOS图标 许多macOS系统的图标 已经用了30多年了 使用简单的应用图形是为了 拉近用户的情感 它们让系统看上去更亲切更好用 也让平台具有独特性 在竞争中脱颖而出 许多符号的样子与现实事物差别不大 有些概念也许有点抽象 但是包含它们的系统 会告诉用户它们是相互联系的 比如说 像是体系 应用体系 或者文档体系 由于时间 我们会改掉一些图标 有些是因为技术过时了 比如软盘 还记得吗？ 有些图标看上去太有侵略性 比如炸弹

有的则得去学习使用 比如象形文字 慢慢地 我们去掉了人脸 现在就只剩下叹号了

小图标也是同样道理 我们来仔细看看 我最喜欢的油漆桶 这个油漆桶可以 在画布区填充颜色 仿佛真的在地上 泼了一桶油漆 这是个抽象概念 却能表示用 这个奇怪的物体代替 这个是怎么画出来的呢 即使那个时候 我们也会考虑线的粗细 在角度上 做些不明显的改动 巧妙的透视感 黑白色均衡 简单 对比度高 这些例子体现了 几个基本原则 正指导我们当今的 应用图标设计 首先 象征性 找到一个简单易懂的象征 物体 图形标志或符号 第二 简单性 设计要简洁明了 不能杂乱无章 太过复杂 如果设计得好 人们一眼就能看懂 关联性 就是要创建 与用户之间的情感联系 跟UI一样 图标是应用的脸面 一定要有趣 引人注目 传承性 对图标的修改 要有意义而且谨慎 不要每次升级的时候 都改动应用图标 图标特征 要与时俱进 那么我们从一个Apple应用 来看看这些原则是怎么运用的 Keynote 从2003年第一版开始 它的图标就是讲台 你会问“为什么是讲台？” 你看 象征意义十分重要 特别是在今天 这个图标来自真实世界 可以联系到许多事情 只要发言 都要在讲台上 为了联系感情 讲台都是温暖的木质表面 麦克风的细节令人熟悉 立刻就让人明白了 Keynote的用途是什么 Keynote不断更新版本 但我们不想更换这个图形 我们改变了质地 从古典 变成了现代风格 但讲台的概念始终不变 这种传承 让用户有熟悉感 这个讲台是个坚定的符号 在设计iOS应用的时候 我们简化了讲台的形象 用字形取代了图片 视觉联系 在这里十分重要 因为用户能够预期 在其他平台上 也是一样的图形

如果是应用族类 以iWork的图标为例 Keynote的讲台图标 Mac和iOS都一样 Pages用的是笔 代表书写和文字 在iOS里 纸是用一条线表示 让笔尖有真实的触感 Numbers用平面图形 体现iOS图表 Garage Band 也运用了同样的原则 iMovie是一把吉他和一颗星星

这些应用 不同的图形和颜色 会加深人们 对不同系统的概念 再来看一下细节 这也相当重要 首先 颜色要协调 符合iOS的色调 图形要简单 要有一样的质感 都是白色的 且高对比度 没有多余的细节 一致的地平面 这虽然看上去跟 Keynote讲台一样 但是里面有些地方 巧妙地优化过了 比如边角都用了自定义曲线 放大或缩小时会很流畅

象征性 简单性 关联性 传承性 再看看它们 在另一个应用中的体现 Music Memos 右边显示的这个 颜色和图形来看 明显与GarageBand有关系 圆圈代表了 木吉他上的音孔 弦的振动很清楚很有趣 这令人感觉到动感和创造力 这个图标使用了iOS图标网格 因此当Music Memos 与其他图标并列显示 相同的元素大小就很一致 比如圆圈跟Safari一样 现在 我们来做点有趣的事情 我们来研究下 新闻应用的图标 看看你能想到哪些 实用的方法 用到你的设计里 有哪些在家就能完成的测试 以保证你的设计 缩小后也很漂亮

那么 先问自己一个问题 假设新闻是主屏幕上 唯一的应用 这个图标要如何表现 才能让人立刻明白 News就是新闻呢？ 怎样不显示名字 也能让人们理解？ 怎样使用简化 样式 颜色 对比度和构图 才能一目了然？ 你想象中的图标 肯定特别难做对吧？ 一路走来 我们也尝试了几个样式 第一个 看着像一张纸 有点抽象 这个N是印在报纸上 还是白盒子上？难说 大部分红色背景 也被盖住了 第二个加了一张纸 在第一张纸下面 这稍微像了一点 但是看不到其他边角 还是不能确定 N是印在报纸上 而且颜色也很暗淡 再看第三个设计 你可以清楚地看到 报纸的所有边角 白色对比度很高 红色背景很亮 字母N作为报纸的标识 简单醒目又很形象 意义在哪里？ 如果在主屏幕上 看这个图标 会显得特别小 对比度 形状和颜色 是小图标设计的三要素 再试试把它放进一个文件夹 跟其他图标一起 眯起眼 新闻的图标在哪里？ 就在左上角 一眼能看到 因为设计简单 构图独特 高对比度 颜色清晰可见

设计应用图标是个交互过程 设计时要去考虑这些环节 首先 要做到独树一帜 这听上去颇有挑战性 但是要意识到 其他同类应用的存在 这三个应用都是摄影类 Quick Instagram Periscope 仔细看看 它们有什么不同 颜色和形状都很鲜明 每个都很独特 在主屏幕上很显眼 Instagram更是证明了 图标可以代表公司 只要看到白边的相机 紫色的天空 就会立即想到“Instagram”

第二 试验

虽然空白画布也挺美 但看着还是挺吓人的 那不如来画点什么 即使你不会画画 纸跟笔有时候 比鼠标有用得多 绘画是激发灵感的好方法 不用在一开始 就考虑用什么技巧 随便画点 拿给你朋友 听听他们的想法 这可是你的图标 设计要惊艳 好好玩吧

第三点 也最重要的 测试 测试指什么？

开发应用图标时 放到主屏幕和文件夹里观察 如果有设置选项 在设置应用里查看 要用图标展现界面的话 要特别当心 Clear就是一个很完美的典范 强烈的视觉风格和醒目的色彩 条纹图案缩小后也很突出 它很简单 多彩 高对比度

最后一点 多点耐心 答案不会马上揭晓 慢慢来 检查选项 保存好作品 有时最简单的设计 或你放弃了的最初方向 最后却成为最好的选择 做个小结 在设计应用是一定要考虑象征 清晰可辨的物体或符号 便于人们理解 能与用户建立感情联系 要好玩 要活泼 还有传承图标是应用的脸面 是你的品牌 把它想成一种投资 设计过程中 尽量让它不一样 这样就能在主屏幕 和App Store里凸显出来 试验不同的设计 并用图标网格测试 要研究Apple设计的图标 参考图形和颜色 看看哪个好看 无论大小 把图标放进文件夹 观察缩小的样子 不要忘了优化属性 以适应不用的屏幕尺寸 最后 耐心 设计应用图标 看似要做很多工作 但是只要肯投入时间 回报就十分丰厚 谢谢大家