現(xiàn)代主義風(fēng)格的UI設(shè)計之興起

摘 要：作為一門多學(xué)科交叉的設(shè)計門類UI設(shè)計在發(fā)展之初并沒有得到應(yīng)有的重視，UI設(shè)計中擔(dān)當(dāng)著整個人機(jī)交互視覺橋梁的界面設(shè)計也就是GUI設(shè)計也由于種種原因在其發(fā)展過程中一直延續(xù)著具象化、生活化、娛樂化的面貌而缺乏一種具有現(xiàn)代主義特征的簡潔、清晰、注重傳達(dá)功能的設(shè)計風(fēng)格。隨著近年來電子產(chǎn)品逐步的被人們所依賴GUI設(shè)計才逐漸得到了社會的普遍關(guān)注，在設(shè)計者與消費(fèi)者共同作用下的今天具有現(xiàn)代主義風(fēng)格特征的GUI設(shè)計也漸漸的走入了我們的視線。文章對以往的GUI設(shè)計缺乏現(xiàn)代主義風(fēng)格的局面之緣由做出了分析，對當(dāng)今新出現(xiàn)的具有一定現(xiàn)代主義特征的GUI設(shè)計做出介紹并對這種風(fēng)格走入GUI設(shè)計的成因做出了一定的研究。

關(guān)鍵詞：UI設(shè)計；GUI設(shè)計；界面設(shè)計；現(xiàn)代主義風(fēng)格

UI即User Interface(用戶界面)的簡稱，20世紀(jì)80年代后期，ACM(Association for Computing Machinery)即計算機(jī)教育與科技協(xié)會和IEEE（Institute of Electrical and Electronics Engineers)即電氣和電子工程師協(xié)會兩個組織開始把“用戶界面設(shè)計(User Interface Design)”作為計算機(jī)科學(xué)的正式課程。這標(biāo)志著人們已經(jīng)開始認(rèn)識并重視系統(tǒng)的“可用性”和“用戶體驗(yàn)”。[1]具體來說UI設(shè)計就是指對人與機(jī)器之間的相互交互手段的操作邏輯、界面美觀的整體設(shè)計。一個好的UI設(shè)計可以讓人機(jī)交互的手段變得有個性有靈魂，也會使交互的界面友好、操作簡單，能夠讓使用者舒適的使用機(jī)器。而UI設(shè)計要使界面清晰友好就必須在視覺傳達(dá)的層面上進(jìn)行設(shè)計，即為GUI（Graphic UI design）也被稱做界面設(shè)計。UI設(shè)計是伴隨著計算機(jī)的圖形化操作而出現(xiàn)的，最早的計算機(jī)操作為命令語言用戶界面，即在計算機(jī)圖形化操作普及之前所使用的DOS操作系統(tǒng)，那些敲入執(zhí)行命令才能運(yùn)作的界面系統(tǒng)，屬于人機(jī)交互的較初級階段。這種交互手段對初學(xué)者來說非常不友好，但操作過程比較靈活和高效，適合于專業(yè)人員使用。[1]

自從1980年Three Rivers公司推出Perq圖形工作站之后圖形化的計算機(jī)操作開始出現(xiàn)，隨后在1984年蘋果公司推出Macintosh電腦后其便捷直觀的圖形化操作方式迅速獲得了消費(fèi)者尤其是圖形設(shè)計師的喜愛。圖一為第一臺采用圖形操作界面的個人電腦：Lisa的操作界面截圖，從中我們以不難看到今后蘋果操作系統(tǒng)乃至大部分計算機(jī)操作系統(tǒng)的樣子。這樣一直發(fā)展到蘋果的MAC OSX系統(tǒng)以及WINDOWS XP系統(tǒng)等等，UI界面也變得越來越漂亮越來越人性化擁有絢麗的視覺外觀和友好的交互性能。

有關(guān)于Ui設(shè)計發(fā)展的歷史這里就不再贅述。GUI設(shè)計發(fā)展到今天，我們發(fā)現(xiàn)它一直處于一種娛樂化、大眾化、具象化的定位上，而缺乏一種具有現(xiàn)代主義設(shè)計特征的簡潔清晰的風(fēng)格存在，如圖二中UI設(shè)計師帝夏的作品：記事本、短信息等功能的icon設(shè)計非常的精致生動信息傳達(dá)也很準(zhǔn)確，用戶能夠迅速的理解icon所代表的含義并順利的進(jìn)行想要的操作。但無論是作為計算機(jī)行業(yè)巨人的蘋果與微軟所生產(chǎn)的電腦操作系統(tǒng)；還是作為移動通信終端的各大手機(jī)生產(chǎn)商的移動終端產(chǎn)品，它們都是以生動的具象圖形來完成UI設(shè)計中的視覺傳達(dá)的過程的。那么我們?yōu)槭裁床荒苡靡环N更加有效、更加清晰的方式來完成視覺的傳達(dá)過程呢？GUI設(shè)計走到今天也很少有跳出這種娛樂化、大眾化、具象化的形式，缺少與生動有趣相反地具有快速有效并且傳達(dá)清晰功能的GUI設(shè)計，究其原因大致有以下幾點(diǎn)。

首先，計算機(jī)操作界面圖形化的出現(xiàn)正值后現(xiàn)代文化思潮風(fēng)靡全球的時期，與現(xiàn)代主義的理性化、激進(jìn)、精英主義不同，后現(xiàn)代主義文化思潮是一種大眾型的文化形態(tài)，是一種全方位開放的藝術(shù)，游離在藝術(shù)與生活之間，使傳統(tǒng)與現(xiàn)代藝術(shù)風(fēng)格、形態(tài)之間的界限消解，使藝術(shù)和非藝術(shù)的界限消解，使藝術(shù)與觀眾的界限消解；反對精英主義、權(quán)力主義，打破了精英文化和大眾文化的界限。[2]后現(xiàn)代文化思潮與計算機(jī)電腦圖標(biāo)之間的距離似乎比較遙遠(yuǎn)，但后現(xiàn)代話語深深地滲透到了大眾文化當(dāng)中，作為生活在社會中的個體的GUI設(shè)計者自然也會受到其所在的文化環(huán)境、視覺環(huán)境的影響，其設(shè)計出的作品自然會流露出這樣一種大眾化的、生活化的意味。盡管由于技術(shù)原因，在圖形操作界面出現(xiàn)的初期GUI設(shè)計沒有后來者那樣的活潑生動但是這樣一種設(shè)計理念卻得到認(rèn)可并一直延續(xù)下來。

其次，在UI設(shè)計出現(xiàn)初期GUI設(shè)計基本是由程序設(shè)計師擔(dān)當(dāng)?shù)?，由于專業(yè)原因大多數(shù)程序設(shè)計師缺乏視覺傳達(dá)設(shè)計的知識與訓(xùn)練，所以會自然而然的運(yùn)用生活中所出現(xiàn)的形象來作為GUI設(shè)計的雛形，并且在UI設(shè)計的發(fā)展中，界面設(shè)計工作一直未受到重視，這也導(dǎo)致了具象化圖形在GUI設(shè)計中成為主流。如圖三中早期彩屏手機(jī)的List菜單界面。

第三，當(dāng)數(shù)字技術(shù)逐漸成熟之后，電子產(chǎn)品的主要消費(fèi)群體也從商業(yè)辦公用戶轉(zhuǎn)移到了個人領(lǐng)域，尤其是移動設(shè)備的出現(xiàn)后GUI的設(shè)計更加注重和個人的交流。各種電子設(shè)備就像是每一個人的私密的小空間、一個現(xiàn)實(shí)生活之外的個人天地，生活化的設(shè)計理念相對就更能夠得到個人消費(fèi)者的認(rèn)可，正如“我的電腦”、“我的文檔”這樣的說法。這樣，生活化也就成為了GUI設(shè)計的一項(xiàng)重要特征。

另外，一些具有影響力的個人也使得GUI設(shè)計的面貌產(chǎn)生著變化，例如史蒂夫·喬布斯這樣的具有引導(dǎo)能力的人物。作為佛教徒的喬布斯在讀書期間曾經(jīng)徒步流浪在尼泊爾，與比爾蓋茨一樣的退學(xué)，不喜歡按鈕，從不穿帶紐扣的有領(lǐng)t恤因?yàn)榧~扣與按鈕使用的都是“button”這個單詞，年輕時的獨(dú)特性格也造就了蘋果產(chǎn)品的外觀以及GUI設(shè)計甚至影響了當(dāng)今的幾乎所有領(lǐng)域的GUI設(shè)計，無論在哪一臺電子設(shè)備上我們都能看到類似于蘋果風(fēng)格的水晶圖標(biāo)。具有反叛性格的喬布斯在產(chǎn)品上拋棄現(xiàn)代主義那種精英式的理性風(fēng)格而使產(chǎn)品生活化、平民化。

諸多因素的共同作用使得今天的GUI設(shè)計呈現(xiàn)出了這樣一種娛樂化、大眾化、具象化的形態(tài)，那么我們?yōu)槭裁匆穼ち硗庖环N具有現(xiàn)代主義設(shè)計特征的與生動有趣相反具有快速有效并且傳達(dá)清晰特點(diǎn)的GUI設(shè)計呢？原因大致有以下幾點(diǎn)：

從設(shè)計角度來說，功能決定形式，這是現(xiàn)代設(shè)計的一個原則，以往的GUI設(shè)計把注意力集中在視覺呈現(xiàn)上以應(yīng)用圖標(biāo)本身為主要呈現(xiàn)對象從而缺乏功能性，GUI設(shè)計強(qiáng)調(diào)的應(yīng)該是信息本身，而不是冗余的界面元素。這與當(dāng)時的從業(yè)人員缺乏視覺傳達(dá)設(shè)計的必要知識不無關(guān)系，如今很多專門從事視覺傳達(dá)設(shè)計的人員參與到了GUI設(shè)計的工作中，一改以往GUI設(shè)計由程序員兼任的境況，帶來了不同的設(shè)計理念與方式，不再一味的追求具象的形象而開始注重GUI的功能性，為其帶來了新的面貌。從消費(fèi)者的需求來看，數(shù)字技術(shù)發(fā)展迅速，并且針對電子產(chǎn)品的消費(fèi)市場也日益壯大，生活水品的不斷提高、電子產(chǎn)品的定位精確化都使得消費(fèi)者對于電子產(chǎn)品的需求逐漸的多樣化。例如，以辦公位主要目的的用戶就會因?yàn)镚UI圖形的過于活潑而分散精力；過于復(fù)雜精美的圖形也會降低其視覺識別性能而使操作產(chǎn)生延誤或不便；而過于生活化的風(fēng)格也與強(qiáng)調(diào)理性、精英化的辦公氣氛格格不入。

從視知覺的角度上來看，現(xiàn)代社會的視覺環(huán)境過于繁雜，到處都充斥著用來吸引消費(fèi)者的華麗圖形，我們的視覺在現(xiàn)代視覺環(huán)境中始終處于一種目不暇接的飽和狀態(tài)，以至于會本能地對過于復(fù)雜的圖形產(chǎn)生自然的抗拒心理。因此，清晰、清爽的圖形定然能在繁雜的視覺背景中脫穎而出，明確的識別性也會為消費(fèi)者節(jié)約下思考的精力與時間。同時，由于消費(fèi)者心理的“邊際效應(yīng)”，消費(fèi)者對于產(chǎn)品GUI設(shè)計的一成不變的具象圖形也產(chǎn)生了一定的抗拒心理。如此諸多因素的作用下，前文所說的具有現(xiàn)代主義設(shè)計特征的清晰、簡潔快速有效的GUI設(shè)計也應(yīng)該隨之出現(xiàn)。

在今天我們已經(jīng)看到了這樣一種具有現(xiàn)代主義設(shè)計特征的GUI設(shè)計產(chǎn)品出現(xiàn)并引發(fā)了一定的潮流。2007年設(shè)計行業(yè)使用率最高的圖像處理軟件photoshop以及其公司的系列產(chǎn)品使用了一系列的新圖標(biāo)，從以往的具象圖像風(fēng)格轉(zhuǎn)變?yōu)榫哂懈叨茸R別性的以文字為主的圖標(biāo)，photoshop即為PS；illustrator即為AI識別性非常理想，如圖四，從左往右依次是從早期沿用多個版本的“眼睛”圖標(biāo)；CS、CS2版本所使用的羽毛圖標(biāo)；以及現(xiàn)在所使用的新圖標(biāo)，在充滿繁雜圖標(biāo)的電腦桌面上這樣簡潔明了的圖標(biāo)必然會更容易被識別。ADOBE公司這一系列軟件圖標(biāo)設(shè)計風(fēng)格的轉(zhuǎn)變過程代表著GUI設(shè)計擺脫了單一的早期階段，新的傳達(dá)方式使得GUI設(shè)計的面貌更為多元化。

此外，隨著windows phone7的嶄新界面出現(xiàn)，在2011年微軟也發(fā)布了全新的win8系統(tǒng)，該系統(tǒng)的Metro風(fēng)格界面一改往日的傳統(tǒng)界面大膽的采用了色塊與文字的組合，這樣的設(shè)計使得整個電腦桌面變得整潔清晰、易懂并且美觀。Metro原指巴黎地鐵（Le Métropolitain de Paris，簡稱為Métro），巴黎地鐵的標(biāo)示采用了如圖五所示的這樣一種以文字為主搭配純色的視覺傳達(dá)方式，這樣一種簡潔的具有高效視覺傳達(dá)能力的方式被廣泛的應(yīng)用于交通領(lǐng)域，Metro風(fēng)格的GUI設(shè)計吸取這種風(fēng)格大量采用純色背景和大字體，以吸引受眾的注意力。這樣的GUI設(shè)計不同于以往，無論是谷歌的Android還是蘋果的iOS，它們呈現(xiàn)的對象都是以應(yīng)用為要，但是Metro界面不強(qiáng)調(diào)冗余的界面元素，它強(qiáng)調(diào)的是信息自身，要的是內(nèi)容而不僅僅是質(zhì)感。如圖六中蘋果的iOS系統(tǒng)界面和Metro界面的對比Metro界面所呈現(xiàn)的信息顯得更加的明確。

Metro風(fēng)格的GUI設(shè)計得益于整潔、嚴(yán)謹(jǐn)、工整、理性化的瑞士平面設(shè)計原則，其特點(diǎn)是：“力圖通過簡單的網(wǎng)絡(luò)結(jié)構(gòu)和近乎標(biāo)準(zhǔn)化的版面公式，達(dá)到設(shè)計上的統(tǒng)一。往往采用方格網(wǎng)為設(shè)計基礎(chǔ)，在方格網(wǎng)上的各種平面因素的排版方式基本是采用對稱式的，無論是字體，還是插圖、照片、標(biāo)志等等，都規(guī)范地安排在這個框架中，因而排版上往往出現(xiàn)簡單的縱橫結(jié)構(gòu)，而字體也往往采用簡單明確的無飾線體。因此得到的平面效果非常地公式化和標(biāo)準(zhǔn)化，故而自然具有簡明而準(zhǔn)確的視覺特點(diǎn)”。[3]圖七即為畢業(yè)于包豪斯的瑞士平面設(shè)計家巴爾莫于1928年設(shè)計的建筑展海報，我們幾乎能夠從中看到今天的Metro風(fēng)格GUI設(shè)計的影子。

UI設(shè)計從開始出現(xiàn)到今天已經(jīng)走過了幾十個年頭，正如一個天真活潑而又懵懵懂懂的兒童長成了一位理性、獨(dú)立而又智慧的青年，最初生活化、具象化的設(shè)計風(fēng)格中也逐漸加入了理性的思考，出現(xiàn)了清晰而又富有條理的設(shè)計理念。專業(yè)視覺傳達(dá)設(shè)計人員的參與，新的設(shè)計理念的注入，消費(fèi)者對電子產(chǎn)品熟悉后而出現(xiàn)的不同需求使產(chǎn)品的不斷細(xì)分化以及消費(fèi)群體審美習(xí)慣的螺旋式發(fā)展，這些都促使GUI設(shè)計發(fā)展出了一個不一樣的面貌，所以如windows8主界面這樣具有現(xiàn)代主義設(shè)計理性、簡潔特點(diǎn)并且視覺傳達(dá)功能優(yōu)良的GUI設(shè)計風(fēng)格才會應(yīng)運(yùn)而生。我們可以說，在當(dāng)今的GUI設(shè)計領(lǐng)域中現(xiàn)代主義風(fēng)格的設(shè)計必然會崛起并且會形成一股不可抵擋的潮流，具有現(xiàn)代主義風(fēng)格的GUI設(shè)計也會因?yàn)樗鼉?yōu)異的視覺傳達(dá)功能和清晰簡潔的外觀而被用戶廣泛的接受。雖然該風(fēng)格的GUI設(shè)計所占有的比例還很小，但是它一定會發(fā)展壯大并為GUI設(shè)計風(fēng)格的多樣化增光添彩。當(dāng)然傳統(tǒng)的GUI設(shè)計風(fēng)格也并不應(yīng)該被拋棄，它生活化、娛樂化的特點(diǎn)對于個人用戶依然具有相當(dāng)?shù)奈?，它與現(xiàn)代主義風(fēng)格的GUI設(shè)計就像硬幣正反面一樣會長久的共存下去。

參考文獻(xiàn)

[1] 周陟. UI進(jìn)化論：移動設(shè)備人機(jī)交互界面設(shè)計[M].北京：清華大學(xué)出版社，2010.

[2] 張雪.后現(xiàn)代標(biāo)志設(shè)計[M]. 廣州:嶺南美術(shù)出版社，2003.

[3] 王受之.世界平面設(shè)計史[M]. 北京：中國青年出版社，2002.

[4] 潘知常、林瑋.大眾傳媒與大眾文化[M]. 上海：上海人民出版社，2002.

[5] [美]瑞茲曼，[澳]王栩林等譯.現(xiàn)代設(shè)計史[M]. 北京：人民大學(xué)出版社，2007.