材质与肌理在 UI 设计中的应用(一)


1. UI 设计的材质简史

1990 年,微软的 windows 3.0 已经开始有了浮雕、阴影的设计元素,拟物化的萌芽开始出现:

 

1995 年,微软的 windows95,界面上开始出现浮雕凸起、凹陷等效果,包括文件夹窗口的凹陷,在体积、光影上进行了

应用。不过在质感和材质没有太大的突破:

 

2000 年 9 月,苹果发布了由柯戴尔·瑞茨拉夫 (Cordell Ratzlaff) 设计的用户界面 Aqua。Aqua 是指“水”,你会看到苹果

在交互界面的细节之处借鉴了水滴的效果,整个界面通透而富有灵性,在当时设计领域红极一时。至此,深受我们熟知的拟

物化设计风格,正式拉开序幕:

 

iphone 的 iOS 系统也在之后的几年里,使用了这种设计语言,并将其完善和深化。拟物化设计风格流行了近十年,成功占

领了 UI 设计界的霸主地位:

 

2009 年,微软发布 Win7,这也是微软的一个具有历史意义的设计系统。Win7 界面加强了透明的样式设计,微软独具一格

的亚克力设计风格初见端倪:

 

2013 年,由苹果设计师乔纳森伊夫(Jony Ive)主持设计的 iOS7,摒弃了之前的拟物化设计风格,去掉了投影和不必要

的肌理效果,推出了全新的扁平化设计风格,并加入了毛玻璃的设计理念。随后 Mac 系统也通过 OS X 10.10 成功升级为

扁平化风格:

 

2014 年,Google 正式发布了以 Material Design 作为全新的设计语言的 Android5.0。Material Design 基于扁平化设

计理念,加入卡片的设计概念,将纸张的概念融入到 UI 设计中,强调光影和层次,同时具备模拟真实物理世界中运动曲线

的动画效果,进而引发了动画设计语言的流行:

 

 

2017 年,与 Google 的 Material Design 相比,Microsoft Fluent Design 在设计中加入了五大元素光线(Light),深

度(depth),动画(motion),材质(Material)与尺度(Scale):

 

时至今日,随着设计语言一词慢慢流行起来,也出现了多元化的设计风格和材质应用,例如 New Skeuomorphism,小米

的 MIUI 等等:

 

 

>