“孩子们的脚下没有大地，也是与头顶一样的蓝天，他们似乎置身于一个无限的蓝色宇宙中，而他们是这宇宙中唯一的实体。计算机感觉到，这些数字生命体仍然处于惊恐中，它用了亿分之一秒想了想，终于明白了：银河系中大多数生命体并不惧怕悬浮于虚空之中，但这些生命体不同，他们是大地上的生物。于是它给了孩子们一个大地，并给了他们重力感。”—— 刘慈欣《乡村教师》
iPhone 的出现真正让智能手机变成了一个简单好用的东西，为此苹果做了大量的工作，尽量让图标更加生活化和通俗易懂就是其中的重要一点。当然，在这一点上其他智能系统也做得非常好。而 iOS 则在光影设计上做得更加意味深远。
一、圆角图标
圆角图标甚至是 iOS 标志性的设计元素之一，成为了某种苹果的风格。其实就现实生活而言，圆角设计非常普遍，比如桌子，行李箱，饭盒等等。只要是矩形物品，都会设计成圆角矩形，否则，尖锐的角可能会对用户造成伤害。生活中用户对圆角矩形接触更多，圆角矩形传递着无害而熟悉的暗示。而直角矩形物品因为接触很少，则会让用户产生陌生感和不真实感。设计成图标时，用户的注意力有一部份分散在图标的形状上，影响图标信息传递的效果。
二、微笑曲线
iOS 图标中部都有一条阴影的分界线，这条细细的弧线看起来像是一个“微笑”的标志。图标上下明暗对比明显，塑造成阴影效果。这个曲线和阴影则传达出一个信息：图标是立体的，不是单一的平面，并且是凸的弧形，并在图标上方光源的照射下呈现出立体的光影效果，让图标更像一个真实的按钮。
三、底部阴影
iOS 图标还在下边框增加了阴影的效果，这让整个图标比背景屏幕更高一点——换而言之，更像一个真实按钮。同样是因为光源来自于图标上方，上边框的细线会将颜色设计得偏白色，也更细一点，下边框则设计成黑色，线条会加粗一点。这样设计也同样是为了模拟真实的光影效果。
最后的综合成果就是让用户对图标更为熟悉，符合日常生活经验，消除用户的不真实感和陌生感，将用户的注意力紧紧抓住在图标信息上，在潜移默化中完成图标信息完整传达的任务。
四、更真实的图标
但 iOS 的设计并非是最真实的，图标上的信息更多的是抽象的符号和图形。而同样是来自 Apple 的设计，Mac OS 的图标则充满了更为精致的细节感，不再是千篇一律的平面符号，而是真实物体。
和 Mac OS 一样，WebOS 系统的中图标在真实度比iOS走得更远，其图标也是具有更多的细节，更复杂的光影效果。如果说iOS图标的按钮是立体的，符号是平面的话。WebOS 系统则对现实物体进行最大程度的拟真，这一点在自带程序内也可以看得出来。
就拿 WebOS 系统和 iOS 系统中自带的计算器界面设计来说，WebOS 系统就更为真实美观。iOS 依旧保持了凸形按钮、光源在前方的设计风格，WebOS 系统则有几点不同，每个按钮都采用明暗双线设计，按钮边缘更有真实的弧度感；按钮中间颜色亮而四周颜色暗，塑造成按钮是内凹的效果，现实生活中的计算器按钮大部分是内凹的，传达的设计感觉就是按钮更贴合指尖的弧度，按下的感觉更舒适，让人更有按下的欲望；WebOS 计算器按钮的边缘采用的黑色线条比 iOS 系统的更粗，传达出另一种真实感：现实中计算器的按钮周围确实是有一些空隙，这一点上 iOS 上的单条细线比之于就失去了真实感，让人感觉按钮周围的空隙很小，按下去可能需要很用力。在真实性的舒适用户体验上，WebOS 做得比 iOS 的更好。
五、为什么 iOS 要这么设计？
一个有趣的问题就出现了，为何一家在 Mac OS 上同样设计出精致真实感图标的公司，在iOS上的设计会更抽象更保守呢，难道是因为标准降低了？也许这个问题就像另一个广为人知的有趣问题一样：为什么 iOS 刚开始是单任务系统？我们发现答案可能是相似的。
为了节约。
更真实意味着更复杂，意味着对系统资源的占用率更高，意味着更少的资源能直接响应用户的操作，意味着影响了“It just works”的畅快感。用户在使用中没有感觉到“就这样发生了”的神奇感觉，这就是最大的用户体验问题。
六、精打细算的苹果
Apple 公司平均一年出一款手机，这也意味着在每一款手机上进行了更多的取舍。是系统运行更快还是界面更精致，在图标设计上苹果做出了自己审慎的选择，图标设计既有真实感的一面，也不做得更真实。简单的弧线和阴影到达了立体感的设计要求，却不会对占据更多的系统资源，这是一个划算的选择。
iPhone上有很多精心设计的工艺，但奔跑再快也无法摆脱地心引力，系统性能在约束着界面表现效果。移动设备对 iOS 的支持远远比不上强大的桌面系统对 Mac OS 的支持。在苹果精心设计的背后，则是为了最佳用户体验而进行的严格计算和冷酷取舍。乔布斯如是说：创新意味着对其他 1000 件好的事情说不。
这一点，iOS 做到了。这一切，没有偶然。
而 WebOS 在设计上超越 iOS 的一瞬间，就被性能约束紧紧拉回了地面，继而砰然坠地。这很不幸。
七、一个彩蛋
几乎所有程序图标的“微笑曲线”都是一个笑脸，除了一个：时钟。
![icon5[1]](http://www.ifanr.com/wp-content/uploads/2012/01/icon51.jpg)
闹钟镜面的“微笑曲线”是和其他图标相反的，边框的“微笑曲线”则是正常的。不过在我看来，这真是很有意思的事情。
- 上一篇：智能设备装配出智能汽车
- 下一篇：Temple Run 如何成为免费游戏中的佼佼者？
44 Responses
在线回复
是不是因为看时钟的视角是从下至上的才导致它是反的 因为钟一般挂在高处
亮了！好棒的解答！
是不是因为看时钟的视角是从下至上的才导致它是反的 因为钟一般在高处
不错的文章，不过 ios webos 级别的系统应该不会因为图标设计的拟真多寡而影响到性能吧？
看多了也烦
webos好像是本身采用的硬件配置太低了导致的吧。
硬件很高的，veer那么大点都是512内存。而且webos是真多任务，和ios和安卓那种完全不同。
我始终认为，在电池问题没有解决的现在，手机上使用无限制的所谓真.多任务，没有任何意义
首先真多任务用的内存并不少 再有Android也是真多任务啊
hey,this guy ,Android is multitask OS.It base on Linux.
“更真实意味着更复杂，意味着对系统资源的占用率更高 “<<图片的复杂度和资源占用有什么关系?
神马alpha渐变的reflection啦，shadow啦，全都不占系统“资源”
宇宙间最最复杂的、最最占系统“资源”的图片（比如计算器按钮这种神一级复杂的东东），要使用简单的，一定要砍掉复杂的——还是没有偶然
“更真实”往往意味着更多的图片，更多的细节的，而这很占用卡资源的
用图片就out了, 微笑高亮和阴影都是动态渲染的 圆角是不是渲染的忘记了
圆角就是做了一个透明的遮罩
圆角设计非常普遍，比如桌子，行李箱，饭盒等等。只要是矩形物品，都会设计成圆角矩形，否则，尖锐的角可能会对用户造成伤害。
==================================
试试iMac那尖锐不做倒角的边缘吧，看它割破手指的能力是不是堪比双立人（夸张）
那是另一个坐标的范畴了 (^.^)
能再为赋新词强说愁么? 图标也能拿来说性能的事? 微乎其微的
“一个有趣的问题就出现了，为何一家在 Mac OS 上同样设计出精致真实感图标的公司，在iOS上的设计会更抽象更保守呢”
这个问题我也想过，但没仔细想过，作者很细心！
@wannafly君，我认为图标中的图片，程序中的图片对性能影响很大的
@Bill 你是写程序的么？做过性能分析么？
程序中的图片基本可以当成pre rendered、只需要解码不需要额外运算的东东（和即时生成的相对立），一般来说只有它的大小和在memory中的位置可能会对性能有较大影响（其实都是cache问题），解码过后，全白图片和花里胡哨的图片在composition时的代价是完全一样的
您就当我是菜鸟程序员吧(^.^)我也做过一些简单的性能分析，我写程序时的感受，如果需要复杂的界面效果，也许就要多放几个图片，而每多放一个图片，那就影响很大。即使是同一个图片，全白的和花里胡哨的往往大小也不一样，性能也不同
如果需要做复杂的动画效果，确实需要多几张图片。但在本文的讨论范围内，只是单一图标的光影效果不同，都只是单一的图片，图片做的有没有真实感，对程序的效率几乎是没有影响的。而且现有的图标 和 有真实感的图标，哪一个更大还真不一定呢。
苹果如果想提高这一点点效率，我想他们更愿意去掉类似iBook翻页的动画效果，毕竟这是需要实时运算的。
Hidden due to low comment rating. Click here to see.
iOS图标和MacOS图标之间的区别，不是精细化的差别，而是真实感的差别。而且我觉得iOS的图标可能比MacOS的图标更精细，因为iPhone的视网膜屏幕，图片的DPI更多（这点不确定，只是猜测）。
文中的计算器，确实是程序内界面设计。但这个界面，一般需要哪些图片呢，一个背景图，加上每个按钮的正常图片和按下效果图片。一个小图片大小只有几k而已，大小差别又能有多少呢？ 而且这种界面并无实时计算与渲染，看一下iBook的翻页效果，每一页翻到一半时的半透效果都是不同的，都是算出来的。
至于本文提出的问题，为什么 iOS 要这么设计？我还是认为从设计上的考虑更多，而不是从节约程序资源的方面考虑。
CPU composition和GPU composition的特性不一样，GPU做composition的能力很强的。估计你说的“放多了图片性能受影响”，是传统的GUI程序吧？一般是CPU做composition的（用CPU，不同的做法性能也千差万别）
至于这一句：“即使是同一个图片，全白的和花里胡哨的往往大小也不一样，性能也不同”，和常识相违背了，不寻常的见解需要证据，请拿出test case来说吧
一个静态的图标怎么能扯到性能的。。。
记得ios的图标圆角阴影什么的都是即时渲染的吧
圆角，高亮这些应该都是mask，阴影是实时渲染的
关于计算器部分：
影响性能吗？作者有没有测试比较过？（在其它硬件条件一致的情形下）
如果没有影响性能，那么，就不要把判断反过来。
当然，iOS计算器的横屏切换这一招是不错的。
mac下图标缺省大小是128*128，iPhone上是57*57，精细程度比不上是必然的，不关性能啥事。真正影响性能的是alpha，shadow这类东西。之前iOS不能换桌面背景，原因是如果要能在任意背景下都看清楚白色的app名称，那么就必须渲染上shadow才行，而当时的硬件如果渲染了shadow那么就会导致帧数下降，影响体验
图标用的都是png，就是压缩过的bmp，再复杂也不会影响到性能啊….
这篇文章有点扯。
就像ios5之前，按钮是圆角矩形，就有果粉说移动设备这个怎么怎么好。结果ios来个圆形胶囊样式的。
界面图标这东西，都是现成的png图片，和性能有什么关系。而且webos是真正的多任务系统，这个才是考验性能和优化的东西，这点ios差得很远啊。webos的失败原因是软件少，hp不给力。
至于说阴影之类的硬件渲染，没记错的话macos的美化软件里面阴影也是图片的，ios应该一样。
文章比较扯 尤其是图标和性能那一段
Hidden due to low comment rating. Click here to see.
你的话很大程度上是避重就轻，看似反驳实际无用，比如：
“即使是屏幕上一个像素的显示，都是需要消耗一定资源的”——消耗哪一类资源？定量化之后是多少？此时系统闲置未用的“资源”还有多少？
“当然你可以说忽略不计，但是事实上是：积少成多，哪怕GPU再强劲，也是需要动用资源来计算的”——是需要动用资源来计算的，这句万金油能说明什么？想说明GPU已经累坏了，都已经做不了多幅图片的composition了？
“所以所好的设计都是资源与性能，外观体现的一个好的妥协或者说是平衡”——又是一句万金油，这句话能证明楼主的观点么？你如何证明楼主喷的就是平衡？
Hidden due to low comment rating. Click here to see.
是啊是啊，我都给你反驳到这种程度了，您还有什么可说的？你有本事正面回应么？
闹钟镜面的“微笑曲线”并不是图标的高光，而是图标里面闹钟的高光罢，闹钟的高光和图标高光本身没有设计一致是因为设计本身需要，只是不想高光区域把时针和分针覆盖罢了。却被作者当做彩蛋一样崇拜，真是可笑的很……至于静态图标和性能的关系我需要的就是像素论的反驳，认为一个像素也会加重系统负担，那么苹果怎么没把复杂的“设置”按钮简化？怎么没把iBooks图标简化？怎么没把GameCenter图标简化？难道图标缺乏真实性就一定节省了性能？都错了！真实性与否是人的主观感受，而计算机对于性能的计算仅仅是基于PNG图片的复杂程度（像素分布，颜色多寡），更别说静态图标真正对性能的影响有多少了，能为了减少大气污染就把你家狗宰了么？
有些YY的部分 不严谨
有些YY的部分 不严谨
就像之前说metro一样。。
相较iOS的圆角，我更愿意把现实生活中的“圆角”看成“直角”。
webos的計算機很醜…效果是用多了但見得更真實，
我不認為iOS那個計算機算很漂亮，但webos的那個一點也不美觀…