新媒體界面設計風格演變研究

梅雪 廣東外語外貿大學南國商學院

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屬性實現圓角等，促使扁平化發展到復合化設計。