大数跨境

用超多细节探讨 Apple 官网的设计哲学

用超多细节探讨 Apple 官网的设计哲学 远齐科技
2021-01-15
1
导读:在Apple的网页视觉中,我们看到了商业创意与用户体验的平衡,我们看到了动画式转换带来的流畅体验,我们看到了雕刻细节的过程。它是设计师不断追求的东西,最终给用户呈现的是额外礼遇般的的产品体验。

当我们谈论起产品设计、用户体验,总是离不开Apple,它所坚持的设计哲学是对细节和质量的极致追求。今天我们一起来学习下Apple的设计哲学,看看Apple的设计是如何引领全行业的。

01

沉浸与交互式体验







连续性


在iPad Pro产品页可以看到,苹果使用了大量的滚动 scroll 来体现连续性。一方面,滚动作为大多数 Web 用户最自然的操作,学习成本极低。另一方面,在冗长的页面下,滚动能让产品特性保持更自然的转场衔接。






趣味性


AirPods产品采用了大量的动画式转换(animated transition),即操作时展示的动态效果,以此来增加趣味性。伴随着丰富的、若隐若显的章节文案,就像电影的旁白一样,娓娓道来。

02

言之有序








秩序感


iPad Pro 的拍摄角度接近于正侧面。iPad Air 是四分之三侧面。iPad 是正面。iPad mini 是俯视。如此一来,既显得有序,也不会导致视觉疲劳。






设计语言


官网与 iOS 保持协同的设计语言,给用户呈现了一致的感官体验。

从 iOS 11 开始,苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular + Light 的组合,转向的 Medium + Bold ,以此增强信息传播中的识别力。

另外,高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的风格。我们可以很清晰地看到 Web 设计的同步转变。

03

层次







视差


苹果奉行无装饰和极简的理念。将复杂难懂的技术以简洁的形式传达给用户。在信息层次方面,Apple 的编排设计由浅入深,犹如抽丝剥茧。很好地利用了视差滚动,传达图片与文字之间「层」的概念。这种深度感可以增加用户的理解和乐趣。






视觉张力


通过元素的大小对比,可以形成一定强度的视觉排斥力。Pro 级摄像头辅以大特写,传达空间意识。视觉上被其构图、美感触动。

04

高级感







视觉降噪


高饱和度的色彩会影响人的情绪波动。相反,低饱和度的配色对人眼的刺激较弱,会有一种冷静且克制的高级感。苹果官网的大部分页面除了产品界面色彩和按钮栏之外,其他的文字、背景、控件一律采用黑白灰色系,以此营造高级感。减少使用颜色的数量,降低色彩的饱和度都能削减色彩对人的情绪,起到提升产品高级感的效果。






留白


恰当的留白可以更加突出产品内容,让重要的信息更准确地传达。并且能营造出广阔的空间感,让画面得到延伸,呈现一种意境美。






配图


苹果官网大部分的产品都是采用实拍+后期修图,而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果,这一点能看到苹果对于品质的极致追求。






文案


Apple 的团队用了完全不对称但押韵、奇怪的排比、双关、重复等修辞手法。这样做的目的就是为了创造一种陌生感、一种独特的语言风格,来凸品牌气质。举几个例子:

重复:iPad Pro「你的下一台电脑,何必是电脑。」

双关:Apple Watch 的「它会时时关心你的心。」

排比:iMac 的「从极速,到神速,任你提速。」

押韵:配件的「可重复充电,又可圈可点。」

对比:iPad mini 的「身量小,能量大。」



05

结语

在Apple的网页视觉中,我们看到了商业创意与用户体验的平衡,我们看到了动画式转换带来的流畅体验,我们看到了雕刻细节的过程。它是设计师不断追求的东西,最终给用户呈现的是额外礼遇般的的产品体验。


戳这里,阅读原文
【声明】内容源于网络
0
0
远齐科技
远齐科技致力于成为“基于私有云的新一代企业信息管理系统服务商”。在自有集成开发平台基础上,基于最佳业务实践开发出丰富的软件功能模块、业务系统,为企业提供高效的定制化开发服务。
内容 0
粉丝 0
远齐科技 远齐科技致力于成为“基于私有云的新一代企业信息管理系统服务商”。在自有集成开发平台基础上,基于最佳业务实践开发出丰富的软件功能模块、业务系统,为企业提供高效的定制化开发服务。
总阅读0
粉丝0
内容0