Apple 的设计哲学:UI 篇

在上篇文章《Apple 的安排形而上学 · 接互篇》中,咱们谈到了 Apple 在接互层面创造的一系列愉悦体验。姑且,尔将持续瓜分苹果安排形而上学的第二个局部「UI篇」。

码人网mrw.so缩短网址文章图片

常常,硬件的表面只是是动作一种体验的容器存留,而软件用户界面(User Interface)的体验,则决定了咱们是否爱好这个设备。底下,便和大师瞅瞅 Apple 在界面方面干的全力。

一、高度普遍的安排谈话

苹果的安排谈话有四个标忘性特性:光滑圆角矩形 (Squircle)、暗影(Shadows)、半通明(Translucency)和高斯朦胧 (Blurring),它们几乎贯穿所有别系。从本生运用:相册、App Store 运用店铺、音乐都有这些元素,而且高度普遍。

码人网mrw.so缩短网址文章图片

AppStore 十年变革

1. 圆角矩形

从 iOS 7 转型扁平化的即日,苹果完成了闭于「圆角矩形」的最后运用。苹果引入了产业安排中连接曲率观念,运用在圆角图目标表面之上。

码人网mrw.so缩短网址文章图片

圆角矩形

然而简直道理上的运用,表姑且 iPhone X 发布之后。成绩于 OLED 柔性屏和 COP 封装,iPhone X 四边等宽的机身达到了最高的安排美学,屏幕的外表面也伴随机身形态,于是便有了圆角的 Dock。

码人网mrw.so缩短网址文章图片

Apple MusiciOS 13版本

相闭于于 iOS 12,iOS 13 将半通明的个性更进一步。除了迷你播放器之外,Apple Music 的底部导航菜单也形成半通明+高斯朦胧了。

留神参瞅,微信共样认共这种谈话,在顶栏和底栏干了微弱的半通明和朦胧。

码人网mrw.so缩短网址文章图片

相册iOS 13版本

而体系相册的革新,则持续了 App Store 运用店铺的卡片款式。至此,圆角、投影、半通明和高斯朦胧,这四个特性在相册界面皆赢得了印证。

二、极致的图标细节

1. 语音备忘录

便拿语音备忘录来说,它的音轨图形并不是随便画出来的。而是用灌音功效,说出“Apple”这个单词汇,所出现的音轨波形

码人网mrw.so缩短网址文章图片

苹果地图 App

其他,新的图标里,右上角展现了 Apple Park ,也即是咱们熟知的飞船图形,这和本质的平面地图实脚符合。

码人网mrw.so缩短网址文章图片

Safari 欣赏器

本质上,45° 改为 50° 是出于视觉上的建改。左边旧的图标,45°磁针方才弥漫的是短的刻度条,被俩长刻度条相夹,略显拥挤。而新的图标方才好差异,50°磁针相邻是短刻度,视觉上更具空间感和韵律感。

3. 时钟

大师都领会时钟 App 的图标时间是和体系时间共步的,秒针也会匀速转化。中心来了,长准时钟 App ,秒针的疏通办法由匀速形成滴答滴答板滞式转化了。

码人网mrw.so缩短网址文章图片三、运用视觉线索

为什么苹果体系上手容易?在本质世界中,有些物品你一瞅便领会它何如样运用,比方门把手、无印良品的CD机。

此地有个情绪学的观念:示能(Affordance),在iOS 中也树立了好像的机制。用户借帮往常的体味,经过图形,预期下一步的举动大概感知它的是干什么的。

码人网mrw.so缩短网址文章图片四、隐喻

好的安排是有沟通力的,隐喻 (Metaphors) 即是一种很好的办法,它共时也是 iOS 六大安排规则之一。

1. 时间隐喻

许多人感触 UI,不即是脸色、间距那些物品吗,犹如没什么可安排的。那咱们且瞅,iOS 短信界面是何如处置的:

  • 短信气泡的背景脸色是有深浅变革的,信息越早,脸色越淡。
  • 连发二条信息,它们左右的间矩是很小的,而且惟有底下的信息气泡有角标。
  • 假如发送的隔绝时间长一点,短信的左右间距会变大。

码人网mrw.so缩短网址文章图片

短信界面

苹果便如许经过脸色渐变、间距,完成了闭于时间的隐喻。

2. 速度隐喻

苹果体系有一项“朗读屏幕”的功效,双指从屏幕顶部向下轻扫,即可呼出。将 iPhone 大概 iPad 上的文档、网页大概微信里的笔墨读出来,帮帮你将观赏变为朗读。

天然,你也不妨控制体系朗读的语速,Apple 很局面的将龟兔竞走的图标,隐喻在速度之上。当一个运用步调的假造界面是植根于熟悉的简直世界时,那么用户会进修的更快。

码人网mrw.so缩短网址文章图片

龟兔竞走

五、设备共步

苹果的音频产品线有许多,诸如 Airpods、Airpods Pro、Beats Solo、HomePod、Powerbeats3,每一个都有各自的图标。不管你对接哪个,城市共步表露简直设备。

比方,当你手机对接了 AirPods Pro ,电话界面的音频喇叭 icon 会形成 AirPods Pro 的 icon。其他,AirPlay 功效不妨对接多个扬声器,以至新旧款的 iPhone 图标都有辨别。

码人网mrw.so缩短网址文章图片

AirPods Pro 图标& 周到屏iPhone图标

共样,假如你有 Powerbeats3 耳机,而且体系是最新的iOS 13。当你安排音量的时间,喇叭 icon 共样会形成 Powerbeats3 耳机图标。

码人网mrw.so缩短网址文章图片

Powerbeats3 图标

六、San Francisco 字体的神秘

旧金山字表姑且是 Apple 平台普遍的尺度字体:被运用在 Apple Watch,iPhone,iPad和Mac上,代替了往日的 Helvetica Neue。

码人网mrw.so缩短网址文章图片

标记的优化

除此之外,「#」标记中央的开齿是个非平行暗语,这是特别被增大处置的。因为 # 的牌号在缩小到必定程度的时间,暗语会难以辨别。所以视觉上须要更多的空白,普及可读性。

七、非线性动画

用户体验有一个沉要本能目标是:共意速度(Speed Index)。跟着硬件设备的连接提高,不可含糊的是,姑且的 Android 开用速度比 iOS 更快,然而是,苹果介入了许多非线性动画,以及宁静的帧率展现,在流利度方面 iOS 更胜一筹。

码人网mrw.so缩短网址文章图片归纳

在Apple 的界面视觉中,咱们瞅到了百般隐喻和表示,咱们瞅到了非线性动画戴来的流利体验,咱们瞅到了雕刻细节的过程。它是安排师连接商量的物品,最后给用户出现的是特殊冷遇般的的产品体验。

 

作家:阿洋;公众号:洋爷(ID:yangye365)网易资深视觉安排师,每周瓜分闭于接互、产品、视觉上的思考,迎接闭心调换。

本文由 @洋爷 本创发布于大众都是产品经理,未经答应,遏止转载。

题图来自Unsplash,基于CC0协议。