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

1 圖形界面計(jì)風(fēng)格四個(gè)發(fā)展階段

1.1 早期圖形界面

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

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

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

1.2 擬物化階段

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

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

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

1.3 扁平化設(shè)計(jì)

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

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

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

1.4 復(fù)合化設(shè)計(jì)

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

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

2 界面設(shè)計(jì)風(fēng)格演變的影響因素

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

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

2.2 受傳統(tǒng)設(shè)計(jì)風(fēng)格的影響

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

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

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