为什么说Apple的设计细节是魔鬼?

为什么说 Apple 的设计细节是魔鬼?

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

上期回顾:

用超多细节探讨 Apple 的设计哲学:交互篇

高度统一的设计语言

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

为什么说 Apple 的设计细节是魔鬼?

△ 圆角矩形

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

为什么说 Apple 的设计细节是魔鬼?

△ Apple MusiciOS 13版本

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

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

为什么说 Apple 的设计细节是魔鬼?

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

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

2. 地图

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

为什么说 Apple 的设计细节是魔鬼?

△ 苹果新总部位置

3. Safari 浏览器

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

为什么说 Apple 的设计细节是魔鬼?

△ 时钟 App 滴答动画

利用视觉线索

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

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

为什么说 Apple 的设计细节是魔鬼?

△ 滑动窗口

对于滑动窗口内容,你可以用像这样的一个把手来暗示它是可以被抓取并滑动的。

隐喻

好的设计是有沟通力的,隐喻 (Metaphors) 就是一种很好的方式,它同时也是 iOS 六大设计原则之一。

1. 时间隐喻

很多人觉得 UI,不就是颜色、间距那些东西吗,好像没什么可设计的。那我们且看,iOS 短信界面是怎么处理的:

  • 短信气泡的背景颜色是有深浅变化的,信息越早,颜色越淡。
  • 连发两条信息,它们上下的间矩是很小的,并且只有下面的信息气泡有角标。
  • 如果发送的间隔时间长一点,短信的上下间距会变大。

为什么说 Apple 的设计细节是魔鬼?

△ 龟兔赛跑

设备同步

苹果的音频产品线有很多,诸如 Airpods、Airpods Pro、Beats Solo、HomePod、Powerbeats3,每一个都有各自的图标。不管你连接哪个,都会同步显示具体设备。

比如,当你手机连接了 AirPods Pro ,电话界面的音频喇叭 icon 会变成 AirPods Pro 的 icon。另外,AirPlay 功能可以连接多个扬声器,甚至新旧款的 iPhone 图标都有区分。

为什么说 Apple 的设计细节是魔鬼?

△ Powerbeats3 图标

San Francisco 字体的秘密

旧金山字体现在是 Apple 平台统一的标准字体:被应用在 Apple Watch,iPhone,iPad 和 Mac上,取代了以前的 Helvetica Neue。

为什么说 Apple 的设计细节是魔鬼?

△ 符号的优化

除此之外,「#」符号中间的开口是个非平行切口,这是特意被增大处理的。因为 # 的字号在缩小到一定程度的时候,切口会难以识别。所以视觉上需要更多的空白,提高可读性。

非线性动画

用户体验有一个重要性能指标是:响应速度(Speed Index)。随着硬件设备的不断提升,不可否认的是,现在的 Android 启动速度比 iOS 更快,但是,苹果加入了很多非线性动画,以及稳定的帧率表现,在流畅度方面 iOS 更胜一筹。

为什么说 Apple 的设计细节是魔鬼?

△ iOS 13 静音开关动画

还有一直被诟病的音量和静音调节,终于得到解决。原先的大 Toast 提示会挡住当前内容,现在改到居顶显示,并加入物理衰减铃铛动画,极为真实。

总结

在 Apple 的界面视觉中,我们看到了各种隐喻和暗示,我们看到了非线性动画带来的流畅体验,我们看到了雕刻细节的过程。它是设计师不断追求的东西,最终给用户呈现的是额外的礼遇般的的产品体验。

原文作者:土拨鼠

链接:

https://www.uisdc.com/apple-design-philosophy-ui

今天就分享到这里啦~~

如果有任何关于设计的问题

都可以添加Q群和大家一起讨论哟!

QQ群:778296837

站长:小伙伴们可以关注一下偶滴抖音,我会定期给大家用诙谐幽默有意思的视频来教大家更好的认识设计,打开抖音扫描下方二维码或者直接搜索抖音号就可以看到我啦~笔

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

为什么说 Apple 的设计细节是魔鬼?

为什么说 Apple 的设计细节是魔鬼?

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

上期回顾:

用超多细节探讨 Apple 的设计哲学:交互篇

高度统一的设计语言

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

为什么说 Apple 的设计细节是魔鬼?

△ 圆角矩形

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

为什么说 Apple 的设计细节是魔鬼?

△ Apple MusiciOS 13版本

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

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

为什么说 Apple 的设计细节是魔鬼?

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

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

2. 地图

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

为什么说 Apple 的设计细节是魔鬼?

△ 苹果新总部位置

3. Safari 浏览器

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

为什么说 Apple 的设计细节是魔鬼?

△ 时钟 App 滴答动画

利用视觉线索

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

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

为什么说 Apple 的设计细节是魔鬼?

△ 滑动窗口

对于滑动窗口内容,你可以用像这样的一个把手来暗示它是可以被抓取并滑动的。

隐喻

好的设计是有沟通力的,隐喻 (Metaphors) 就是一种很好的方式,它同时也是 iOS 六大设计原则之一。

1. 时间隐喻

很多人觉得 UI,不就是颜色、间距那些东西吗,好像没什么可设计的。那我们且看,iOS 短信界面是怎么处理的:

  • 短信气泡的背景颜色是有深浅变化的,信息越早,颜色越淡。
  • 连发两条信息,它们上下的间矩是很小的,并且只有下面的信息气泡有角标。
  • 如果发送的间隔时间长一点,短信的上下间距会变大。

为什么说 Apple 的设计细节是魔鬼?

△ 龟兔赛跑

设备同步

苹果的音频产品线有很多,诸如 Airpods、Airpods Pro、Beats Solo、HomePod、Powerbeats3,每一个都有各自的图标。不管你连接哪个,都会同步显示具体设备。

比如,当你手机连接了 AirPods Pro ,电话界面的音频喇叭 icon 会变成 AirPods Pro 的 icon。另外,AirPlay 功能可以连接多个扬声器,甚至新旧款的 iPhone 图标都有区分。

为什么说 Apple 的设计细节是魔鬼?

△ Powerbeats3 图标

San Francisco 字体的秘密

旧金山字体现在是 Apple 平台统一的标准字体:被应用在 Apple Watch,iPhone,iPad 和 Mac上,取代了以前的 Helvetica Neue。

为什么说 Apple 的设计细节是魔鬼?

△ 符号的优化

除此之外,「#」符号中间的开口是个非平行切口,这是特意被增大处理的。因为 # 的字号在缩小到一定程度的时候,切口会难以识别。所以视觉上需要更多的空白,提高可读性。

非线性动画

用户体验有一个重要性能指标是:响应速度(Speed Index)。随着硬件设备的不断提升,不可否认的是,现在的 Android 启动速度比 iOS 更快,但是,苹果加入了很多非线性动画,以及稳定的帧率表现,在流畅度方面 iOS 更胜一筹。

为什么说 Apple 的设计细节是魔鬼?

△ iOS 13 静音开关动画

还有一直被诟病的音量和静音调节,终于得到解决。原先的大 Toast 提示会挡住当前内容,现在改到居顶显示,并加入物理衰减铃铛动画,极为真实。

总结

在 Apple 的界面视觉中,我们看到了各种隐喻和暗示,我们看到了非线性动画带来的流畅体验,我们看到了雕刻细节的过程。它是设计师不断追求的东西,最终给用户呈现的是额外的礼遇般的的产品体验。

原文作者:土拨鼠

链接:

https://www.uisdc.com/apple-design-philosophy-ui

今天就分享到这里啦~~

如果有任何关于设计的问题

都可以添加Q群和大家一起讨论哟!

QQ群:778296837

站长:小伙伴们可以关注一下偶滴抖音,我会定期给大家用诙谐幽默有意思的视频来教大家更好的认识设计,打开抖音扫描下方二维码或者直接搜索抖音号就可以看到我啦~笔

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注