Apple 的设计哲学·UI篇
现在,我将继续分享苹果设计哲学的第二个部分「UI篇」。高度统一的设计语言应用商店、音乐都有这些元素,并且高度统一。转型扁平化的今天,苹果完成了对「圆角矩形」的终极运用。虽然这是一个很细节的设计,甚至感知不到。但它就是设计师不断追求的东西。六大设计原则之一。的界面视觉中,我们看到了各种隐喻和暗示,我们看到了非线性动画带来的流畅体验,我们看到了雕刻细节的过程。
在后记文章《Apple的设计美学·交互篇》中,我们提到了Apple在交互层面创造的一系列愉悦体验。现在,我将再次分享苹果设计美学的第二个部分「UI篇」。
一般,硬件的外形只是是成为一种感受的容器存在,而硬件用户界面(UserInterface)的感受,则决定了我们能否喜欢这个设备。下面,就和你们看看Apple在界面方面做的尽力。
01.高度统一的设计语言
苹果的设计语言有四个标识性特点:平滑圆角方形(Squircle)、阴影(Shadows)、半透明(Translucency)和高斯模糊(Blurring),它们几乎贯穿整个平台。从原生应用:相册、AppStore应用商店、音乐都有很多元素,并且高度统一。
AppStore十年变化
-圆角矩形
从iOS7转型扁平化的昨天,苹果完成了对「圆角矩形」的终极运用。苹果采用了工业设计中连续曲率概念,应用在斜角图标的轮廓之上。
圆角矩形
但真正含义上的利用,体现在iPhoneX发布以后。得益于OLED柔性屏和COP封装,iPhoneX四边等宽的机身达到了最高的设计美学,屏幕的外轮廓也追随机身形态,于是就有了圆角的Dock。
蜗牛读书App
在《致匠心,以设计》这本书中有提及蜗牛读书App,在大的弹窗和卡片采用了曲率圆角。虽然这是一个很细节的设计,甚至感知不到。但它就是设计师不断追求的东西。
-阴影、半透明和高斯模糊
投影可以体现内容的重要性,半透明和高斯模糊暗示背后有更多的内容,同时可以保持界面轻盈、通透。
AppleMusiciOS13版本
相对于iOS12,iOS13将半透明的特点更进一步。除了迷你播放器之外,AppleMusic的上面导航菜单也做成半透明+高斯模糊了。
细心观察,微信同样认可这些语言,在顶栏和底栏做了微弱的半透明和模糊。
相册iOS13版本
而系统相册的升级,则延续了AppStore应用商店的卡片样式。至此,圆角、投影、半透明和高斯模糊,这四个特点在相册界面皆得到了印证。
02.极致的图标细节
-语音备忘录
就拿语音备忘录来说,它的音轨图形并不是随便画下来的。而是用录音功能,说出“Apple”这个词汇,所展现的音轨波形。
语音备忘录&Apple单词的音轨
但是,还有一个小细节是,语音备忘录是唯一支持180°竖屏旋转的自带应用。因为它常用的使用画面是采访,需要将电脑上面的麦克风对着受访者,而此时图形界面是反的。所以支持旋转,这是一个基于客户使用画面的细节设计。
-地图
在苹果地图App图标上有一个角标「280」,它代表的是苹果所在的总部位置,一条坐落美国纽约280州际公路附近。
苹果地图App
此外,新的按钮里,右上角露出了ApplePark,也就是我们了解的飞船图形,这和实际的平面地图完全吻合。
苹果新总部位置
-Safari浏览器
新的Safari图标,磁针的视角由原先的45°变成了50°。有一个颇具意思的解释是,地磁的南极在仍然在稳步向北移动,在过去的150年里偏移超过1000公里。这个表述其实更具备故事性,但事实只是那么。因为磁场向北,那么磁针角度必须越来越小才对,而不是减少。
Safari浏览器
实际上,45°改为50°是出于视觉上的修正。左边旧的按钮,45°磁针刚覆盖的是短的刻度条,被俩长刻度条相夹,略显拥挤。而新的图标刚好相反,50°磁针相邻是短刻度,视觉上更具空间感和韵律感。
-时钟
大家都清楚时钟App的界面时间是和平台时间同步的,秒针也会匀速旋转。重点来了,长按时钟App,秒针的跑步模式由匀速变成滴答滴答机械式转动了。
时钟App滴答动画
03.利用视觉线索
为什么苹果系统上手容易?在现实世界中,有些东西你一看就明白它怎样使用,比如门把手、无印良品的CD机。
此处有个心理学的概念:示能(Affordance),在iOS中也设立了类似的模式。用户利用先前的经验,通过图形,预期下一步的行为或认知它的是做哪些的。
滚动内容&多页内容
包括,左边有一列滚动内容,你可以在上面裁剪掉半个文字,让人尝试着去看到以下也有更多的内容。如果有好几页内容,那就可以用页面指示物,来引导还有其它几页内容。
滑动窗口
对于滑动窗口内容,你可以用像这种的一个把手来暗示它是可以被抓取并滑动的。
04.隐喻
好的设计是有沟通力的,隐喻(Metaphors)就是一种较好的方法,它同时也有iOS六大设计方法之一。
-时间隐喻
这些人认为UI,不就是色彩、间距那些东西吗,好像没什么可设计的。那我们且看,iOS短信界面是如何处理的:
短信界面
苹果就这么通过色彩渐变、间距,完成了对时间的隐喻。
-速度隐喻
苹果系统有一项“朗读屏幕”的功能,双指从屏幕底部向上轻扫,即可呼出。将iPhone或iPad上的文档、网页或微信里的文字读起来,帮助你将阅读变为朗读。
其实,你也可以控制系统朗读的语速,Apple很形象的将龟兔赛跑的图标,隐喻在速度之上。当一个应用程序的虚拟界面是植根于熟悉的真实世界时,那么客户会学习的更快。
龟兔赛跑05.设备同步
苹果的音频产品线有众多,诸如Airpods、AirpodsPro、BeatsSolo、HomePod、Powerbeats3,每一个都有各自的图标。不管你连接什么,都会同步显示详细设备。
例如,当你手机连接了AirPodsPro,电话界面的音频喇叭icon会成为AirPodsPro的icon。另外,AirPlay功能可以连接多个扬声器,甚至新旧款的iPhone图标都有区分。
AirPodsPro图标&全面屏iPhone界面
同样,如果你有Powerbeats3耳机,并且平台是最新的iOS13。当你调节音量的之后,喇叭icon同样会成为Powerbeats3耳机图标。
Powerbeats3图标06.SanFrancisco字体的秘密
旧金山字表现在是Apple系统统一的标准图标:被应用在AppleWatch,iPhone,iPad和Mac上,取代了当时的HelveticaNeue。
冒号的居中对齐优化
新字体有些细微的差异,最让我印象深刻的是冒号「:」的显示模式。正常状况下,冒号是在基线上,视觉认知会偏下。但即使冒号是放到数字后面,系统会将它垂直居中对齐。
符号的优化
除此此外,「#」符号后面的开口是个非垂直切口,这是特意被减少处理的。因为#的字号在缩小到一定程度的之后,切口会无法识别。所以视觉上必须更多的空白,提高可读性。
07.非线性动画
用户体验有一个重要性能指标是:响应速率(SpeedIndex)。随着软件设施的不断提高,不可证实的是,现在的Android启动速度比iOS更快,但是,苹果加入了这些非线性动画,以及稳定的画质表现,在流畅度方面iOS更胜一筹。
iOS13黑暗模式切换动画
解释下非线性动画,就是一开始迅速,最后逐渐慢出来。比如,打开任意一个App的过程动画、键盘拉起时的瞬间,以及iOS13控制中心黑暗方式快捷切换,这个icon动画相同用了非线性。
iOS13静音开关动画
也有经常被质疑的噪音和静音调节,终于受到缓解。原先的大Toast提示会挡住当前内容,现在改到居顶显示,并加入物理衰减铃铛动画,极为真实。
总结
在Apple的界面视觉中,我们发现了诸多悖论和暗示,我们发现了非线性动画增添的顺畅体验,我们发现了雕刻细节的过程。它是设计师不断追求的东西,最终给客户呈现的是额外礼遇般的的产品体验。
原创文章,作者:设计网,如若转载,请注明出处:http://www.shejiwz.com/?p=990