新媒体界面设计风格演变研究

梅雪 广东外语外贸大学南国商学院

1 图形界面计风格四个发展阶段

1.1 早期图形界面

图形界面的优点是使用鼠标直接操纵界面图标来取代键入繁琐的指令。图形用户界面的发展史同操作系统的发展历史关系密切。早期图形界面的特征是鼠标和图标的出现，把人们从繁琐的代码指令输入中解放出来。

1973施乐公司推出了第一台使用现代图形界面的个人电脑Xerox Alto，首次使用了桌面比拟和鼠标驱动的图形用户界面技术，自此人们不需要手工输入繁琐指令。

1984年苹果公司开发了Mac System 1.0操作系统界面，最早使用图标，使得苹果公司成为图形界面设计的先驱。它窗体可以用鼠标拖动，文件与文件夹通过拖放进行拷贝。

1.2 拟物化阶段

拟物设计就是模拟现实世界中的物体外观，包括造型和质感和行为的模拟。通过叠加纹理、高光、材质、阴影等各种效果对实物进行再现，使图标、进度条等呈现三维效果。

1990年微软发布Windows 3.0，命令按钮和窗口控制条有3D效果，操作系统支持标准模式，并且使用了更大的内存和硬盘，从而提高了分辨率，使图形显示效果更好。

1991年苹果发布Mac OS version 7.0，首次应用了彩色的图标设计，图标增加蓝色、黄色和灰色的阴影，使其能容纳比上一个黑白界面时代更大的信息量，并且在信息传达的功能性上有明显的提升。1997年，苹果发布的Mac OS 8开始加入更多的颜色，并采用等距风格图标,自此拟物化设计风格逐渐成为业界主流。

1.3 扁平化设计

扁平化去除所有具有三维突出效果的风格和属性，不再使用纹理、透视、阴影等三维效果，强调抽象、极简和符号化。

2006年微软推出的Zune音乐播放器，针对这个播放器的界面，微软开发出一种被称为Metro的设计风格，其界面设计使用大号字体、网格形状和扁平化图标。之后，微软利用Zune的设计模式改良了Windows Phone 7操作系统的界面设计，自此扁平化设计被2010年的产品设计广泛接纳。

2013年苹果发布iOS 7，彻底放弃拟物化设计，图标的纹理和闪光被丢掉，进一步推动了扁平化风格的流行和发展。另外，在Google的Material Design的设计原则中同样体现了到扁平化设计的许多特性。

1.4 复合化设计

复合化设计指在扁平化设计的基础上加上一些和纹理变化、反射和投影等，旨在带给用户一种触觉感知。复合设计不是拟物化设计。拟物化设计是使作品更接近实际的物体，而复合化设计是适量使用渐变阴影，在保留扁平化简约风格的基础上使设计有些深度与立体感。

2017年，微软发布Fluent Desgin，称为“Metro的演进”版本，相对于之前扁平化的Metro， Fluent Design则强调“Light光感、Depth深度、Material材质”，而同时期谷歌的Material Design强调“3D world三维世界、Light and shadow光影关系 、Material物理特性”。这两家公司很好的组合与平衡了扁平化和拟物化的各自优势。

2 界面设计风格演变的影响因素

2．1 硬件特性，不同设备中的拓展性的影响

近几年扁平化设计的流行，和响应式设计的发展关系密切。随着更多的设备接入网站，加上设备屏幕尺寸多样，若设计风格过分依赖纹理和投影，当画面收缩为更小的尺寸时，效果并不理想。对于尺寸不同的移动设备，在界面X轴和Y轴上，扁平化设计有更好的拓展性。而拟物设计的伸缩太过会出现渐变色或像素化问题。另一方面，扁平化设计由极大简化了设计元素，网站加载速度更快。因此，充分简洁的扁平化界面比复杂的拟物化设计更能适应终端碎片化、界面碎片化。

2.2 受传统设计风格的影响

我们在新媒体界面中看到的设计元素大多数源自于传统设计中的印刷出版物。流行于20世纪四五十年代瑞士风格是扁平化设计的重要灵感来源。瑞士风格注重网格以及无衬线字体的使用，常用一张大图配上简洁的字体。另一个极大影响了扁平化设计的是极简设计。极简设计历史更长，早于网络出现之前，并且涉及建筑、工业设计等多个领域。

2.3 前端技术的发展

想要实现阴影、圆角边框、背景颜色渐变等，使用CSS旧版本只能依赖大量图片，而CSS3能用几句代码取代图片实现上述功能，例如用box-shadow 属性实现阴影、border-radio属性实现圆角等，促使扁平化发展到复合化设计。