Apple 的设计哲学：UI 篇

在上篇文章《Apple 的设计哲学 · 交互篇》中，我们谈到了 Apple 在交互层面创造的一系列愉悦体验。现在，我将继续分享苹果设计哲学的第二个部分「UI篇」。

通常，硬件的外观仅仅是作为一种体验的容器存在，而软件用户界面（User Interface）的体验，则决定了我们是否喜欢这个设备。下面，就和大家看看 Apple 在界面方面做的努力。

一、高度统一的设计语言

苹果的设计语言有四个标志性特征：平滑圆角矩形 （Squircle）、阴影（Shadows）、半透明（Translucency）和高斯模糊 （Blurring），它们几乎贯穿整个系统。从原生应用：相册、App Store 应用商店、音乐都有这些元素，并且高度统一。

AppStore 十年变化

1. 圆角矩形

从 iOS 7 转型扁平化的今天，苹果完成了对「圆角矩形」的终极运用。苹果引入了工业设计中连续曲率概念，应用在圆角图标的轮廓之上。

圆角矩形

但真正意义上的运用，体现在 iPhone X 发布之后。得益于 OLED 柔性屏和 COP 封装，iPhone X 四边等宽的机身达到了最高的设计美学，屏幕的外轮廓也追随机身形态，于是就有了圆角的 Dock。

蜗牛读书 App

在《致匠心，以设计》这本书中有提到蜗牛读书App，在大的弹窗和卡片引入了曲率圆角。虽然这是一个很细节的设计，甚至感知不到。但它就是设计师不断追求的东西。

2. 阴影、半透明和高斯模糊

投影可以凸显内容的重要性，半透明和高斯模糊暗示背后有更多的内容，同时可以保持界面轻盈、通透。

Apple MusiciOS 13版本

相对于 iOS 12，iOS 13 将半透明的特性更进一步。除了迷你播放器之外，Apple Music 的底部导航菜单也变成半透明+高斯模糊了。

细心观察，微信同样认同这种语言，在顶栏和底栏做了微弱的半透明和模糊。

相册iOS 13版本

而系统相册的更新，则延续了 App Store 应用商店的卡片样式。至此，圆角、投影、半透明和高斯模糊，这四个特征在相册界面皆得到了印证。

二、极致的图标细节

1. 语音备忘录

就拿语音备忘录来说，它的音轨图形并不是随意画出来的。而是用录音功能，说出“Apple”这个单词，所呈现的音轨波形。

语音备忘录& Apple单词的音轨

而且，还有一个小细节是，语音备忘录是唯一支持180°竖屏旋转的自带应用。因为它常见的使用场景是采访，需要将手机底部的麦克风对着受访者，而这时图形界面是反的。所以支持旋转，这是一个基于用户使用场景的细节设计。

2. 地图

在苹果地图 App 图标上有一个角标「280」，它代表的是苹果所在的总部位置，一条位于美国加州 280 州际公路附近。

苹果地图 App

另外，新的图标里，右上角露出了 Apple Park ，也就是我们熟知的飞船图形，这和实际的平面地图完全吻合。

苹果新总部位置

3. Safari 浏览器

新的 Safari 图标，磁针的角度由原来的45°变成了50°。有一个颇有意思的解释是，地磁的北极在一直在持续向北移动，在过去的150年里偏移超过1000公里。这个说法显然更具有故事性，但事实并非如此。因为磁极向北，那么磁针角度应该越来越小才对，而不是增大。

Safari 浏览器

实际上，45° 改为 50° 是出于视觉上的修正。左边旧的图标，45°磁针刚覆盖的是短的刻度条，被俩长刻度条相夹，略显拥挤。而新的图标刚好相反，50°磁针相邻是短刻度，视觉上更具空间感和韵律感。

3. 时钟

大家都知道时钟 App 的图标时间是和系统时间同步的，秒针也会匀速转动。重点来了，长按时钟 App ，秒针的运动方式由匀速变成滴答滴答机械式转动了。

时钟 App 滴答动画

三、利用视觉线索

为什么苹果系统上手容易？在现实世界中，有些东西你一看就知道它如何使用，比如门把手、无印良品的CD机。

这里有个心理学的概念：示能（Affordance），在iOS 中也建立了类似的机制。用户借助以往的经验，通过图形，预期下一步的行为或感知它的是做什么的。

（编辑：南京站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!