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

一、沉浸与交互式体验

1.连续性

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

2.趣味性

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

二、言之有序

1.秩序感

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

2.设计语言

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

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

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

三、层次

1.视差

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

2.视觉张力

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

四、高级感

1.视觉降噪

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

2.留白

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

3.配图

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

4.文案

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

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

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

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

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

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

五、结语

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

上一篇:细节决定成败!提高用户登录体验的7个细节 下一篇:如何正确对待需求变更?