梅雪 廣東外語外貿(mào)大學南國商學院

1 圖形界面計風格四個發(fā)展階段

1.1 早期圖形界面

圖形界面的優(yōu)點是使用鼠標直接操縱界面圖標來取代鍵入繁瑣的指令。圖形用戶界面的發(fā)展史同操作系統(tǒng)的發(fā)展歷史關系密切。早期圖形界面的特征是鼠標和圖標的出現(xiàn)，把人們從繁瑣的代碼指令輸入中解放出來。

1973施樂公司推出了第一臺使用現(xiàn)代圖形界面的個人電腦Xerox Alto，首次使用了桌面比擬和鼠標驅(qū)動的圖形用戶界面技術，自此人們不需要手工輸入繁瑣指令。

1984年蘋果公司開發(fā)了Mac System 1.0操作系統(tǒng)界面，最早使用圖標，使得蘋果公司成為圖形界面設計的先驅(qū)。它窗體可以用鼠標拖動，文件與文件夾通過拖放進行拷貝。

1.2 擬物化階段

擬物設計就是模擬現(xiàn)實世界中的物體外觀，包括造型和質(zhì)感和行為的模擬。通過疊加紋理、高光、材質(zhì)、陰影等各種效果對實物進行再現(xiàn)，使圖標、進度條等呈現(xiàn)三維效果。

1990年微軟發(fā)布Windows 3.0，命令按鈕和窗口控制條有3D效果，操作系統(tǒng)支持標準模式，并且使用了更大的內(nèi)存和硬盤，從而提高了分辨率，使圖形顯示效果更好。

1991年蘋果發(fā)布Mac OS version 7.0，首次應用了彩色的圖標設計，圖標增加藍色、黃色和灰色的陰影，使其能容納比上一個黑白界面時代更大的信息量，并且在信息傳達的功能性上有明顯的提升。1997年，蘋果發(fā)布的Mac OS 8開始加入更多的顏色，并采用等距風格圖標,自此擬物化設計風格逐漸成為業(yè)界主流。

1.3 扁平化設計

扁平化去除所有具有三維突出效果的風格和屬性，不再使用紋理、透視、陰影等三維效果，強調(diào)抽象、極簡和符號化。

2006年微軟推出的Zune音樂播放器，針對這個播放器的界面，微軟開發(fā)出一種被稱為Metro的設計風格，其界面設計使用大號字體、網(wǎng)格形狀和扁平化圖標。之后，微軟利用Zune的設計模式改良了Windows Phone 7操作系統(tǒng)的界面設計，自此扁平化設計被2010年的產(chǎn)品設計廣泛接納。

2013年蘋果發(fā)布iOS 7，徹底放棄擬物化設計，圖標的紋理和閃光被丟掉，進一步推動了扁平化風格的流行和發(fā)展。另外，在Google的Material Design的設計原則中同樣體現(xiàn)了到扁平化設計的許多特性。

1.4 復合化設計

復合化設計指在扁平化設計的基礎上加上一些和紋理變化、反射和投影等，旨在帶給用戶一種觸覺感知。復合設計不是擬物化設計。擬物化設計是使作品更接近實際的物體，而復合化設計是適量使用漸變陰影，在保留扁平化簡約風格的基礎上使設計有些深度與立體感。

2017年，微軟發(fā)布Fluent Desgin，稱為“Metro的演進”版本，相對于之前扁平化的Metro， Fluent Design則強調(diào)“Light光感、Depth深度、Material材質(zhì)”，而同時期谷歌的Material Design強調(diào)“3D world三維世界、Light and shadow光影關系 、Material物理特性”。這兩家公司很好的組合與平衡了扁平化和擬物化的各自優(yōu)勢。

2 界面設計風格演變的影響因素

2．1 硬件特性，不同設備中的拓展性的影響

近幾年扁平化設計的流行，和響應式設計的發(fā)展關系密切。隨著更多的設備接入網(wǎng)站，加上設備屏幕尺寸多樣，若設計風格過分依賴紋理和投影，當畫面收縮為更小的尺寸時，效果并不理想。對于尺寸不同的移動設備，在界面X軸和Y軸上，扁平化設計有更好的拓展性。而擬物設計的伸縮太過會出現(xiàn)漸變色或像素化問題。另一方面，扁平化設計由極大簡化了設計元素，網(wǎng)站加載速度更快。因此，充分簡潔的扁平化界面比復雜的擬物化設計更能適應終端碎片化、界面碎片化。

2.2 受傳統(tǒng)設計風格的影響

我們在新媒體界面中看到的設計元素大多數(shù)源自于傳統(tǒng)設計中的印刷出版物。流行于20世紀四五十年代瑞士風格是扁平化設計的重要靈感來源。瑞士風格注重網(wǎng)格以及無襯線字體的使用，常用一張大圖配上簡潔的字體。另一個極大影響了扁平化設計的是極簡設計。極簡設計歷史更長，早于網(wǎng)絡出現(xiàn)之前，并且涉及建筑、工業(yè)設計等多個領域。

2.3 前端技術的發(fā)展

想要實現(xiàn)陰影、圓角邊框、背景顏色漸變等，使用CSS舊版本只能依賴大量圖片，而CSS3能用幾句代碼取代圖片實現(xiàn)上述功能，例如用box-shadow 屬性實現(xiàn)陰影、border-radio屬性實現(xiàn)圓角等，促使扁平化發(fā)展到復合化設計。