摘要:圖形化用戶界面,即GUI,是指采用圖形方式呈現(xiàn)給用戶的操作界面。圖標(biāo)是圖形化用戶界面重要組成部分,圖標(biāo)作為文字的補充,以更加形象的方式展示著文字內(nèi)容。圖標(biāo)運用的準(zhǔn)確與否,直接影響用戶對界面操作的有效性和易用性。本文通過研究目標(biāo)用戶群體在不同時期下的不同需求,分析圖標(biāo)發(fā)展的現(xiàn)狀及其變化的原因,探究圖標(biāo)未來的發(fā)展趨勢。
關(guān)鍵詞:圖標(biāo) 用戶 圖形化用戶界面
中圖分類號:TB47
文獻標(biāo)識碼:A
文章編號:1003-0069(2015)09-0140-02
近年來,隨著互聯(lián)網(wǎng)和電子科技的飛速發(fā)展,用戶瀏覽網(wǎng)頁逐漸從固定的\"hA電腦轉(zhuǎn)向便攜的移動設(shè)備,圖標(biāo)的顯示設(shè)備也越來越小屏幕化,這就要求圖形符號必須簡潔、直觀、一致、可讀性強、具有美感,界面中的圖標(biāo)設(shè)計也隨之發(fā)生了“質(zhì)”的變化,即由早期的線型單色特征向趨于寫實的擬物化風(fēng)格轉(zhuǎn)變,隨后逐漸轉(zhuǎn)向日益盛行的扁平化風(fēng)格。
從2007年,喬布斯發(fā)布最早的iphoneOS1.0操作系統(tǒng)時界面的擬物化,到2013年后微軟Metro風(fēng)格的扁平化的風(fēng)靡,界面圖標(biāo)設(shè)計也有了一個巨大的革新。
一 線型單色特征國標(biāo)
線型單色特征圖標(biāo),是指二十世紀(jì)八九十年代時期,受技術(shù)、設(shè)計觀念等因素的影響,圖形多為簡單的幾何造型且色彩僅限于單色或者較少顏色的圖標(biāo)。早期的圖標(biāo)設(shè)計主要在于對文字內(nèi)容的解讀上,當(dāng)然這也是在圖形化用戶界面設(shè)計中最重要的因素,而在圖標(biāo)的美觀性、界面風(fēng)格的一致性、對用戶的吸引性上都比較欠缺。例如windows95版的操作系統(tǒng)中,界面風(fēng)格就是簡單的幾何造型加上少量色彩搭配。(圖1)
二 擬物化風(fēng)格圖標(biāo)
2.1擬物化風(fēng)格圖標(biāo)興起的原因
隨著科技進步和計算機的普及,硬件和網(wǎng)絡(luò)日益發(fā)達,CPU和存儲介質(zhì)的效率和容量大大提升,色彩得到了充分的解放和發(fā)揮,伴隨著人們審美水平的不斷提高,線型單色特征圖標(biāo)已經(jīng)無法滿足廣大用戶。為了用戶更好的實現(xiàn)交互體驗,擬物化風(fēng)格開始出現(xiàn)。
2.2擬物化風(fēng)格圖標(biāo)的特征及其優(yōu)缺點
擬物化風(fēng)格,就是通過疊加材質(zhì)、紋理、高光、陰影等效果對現(xiàn)實物品的造型和質(zhì)感進行模擬,使得圖標(biāo)從外形到交互方式上都和現(xiàn)實生活中類似。最具代表性的事件是喬布斯在2007年發(fā)布最早的iphoneOS1.0操作系統(tǒng)時的界面設(shè)計,喬布斯首次展示了該操作系統(tǒng)下界面中豐富的視覺效果,如相機圖標(biāo)和現(xiàn)實生活中相機鏡頭完全相像,這樣沿用人們生活中的認(rèn)知習(xí)慣進行設(shè)計,使用戶在體驗上一眼便知其功能,而其精細(xì)的質(zhì)感打造,相比線型單色特征圖標(biāo)更加生動形象,受到了人們的青睞和追捧。(圖2)正如《IOS Human Interface Guidelines》里所提到:“當(dāng)你應(yīng)用中的可視化對象和操作按照現(xiàn)實世界中的對象與操作仿造,用戶就能快速領(lǐng)會如何使用它?!?1世紀(jì)后,擬物化風(fēng)格盛行。
在信息爆炸的時代,能否快速吸引用戶的眼球,變成圖形用戶界面設(shè)計師在進行創(chuàng)作時的關(guān)鍵因素,擬物化因其細(xì)膩、精致、漂亮、形象的優(yōu)勢也深受眾多設(shè)計師和廣大用戶群體的喜愛。擬物化最大的特點是將現(xiàn)實生活中的物品和使用習(xí)慣帶入界面設(shè)計中,用戶識別度高,學(xué)習(xí)成本低,這也是它的最大優(yōu)點。但擬物化也有很大弊端,比如功能化在大多數(shù)擬物化界面中并沒有很好地得以實現(xiàn)、圖標(biāo)所占存儲空間相對較大而影響頁面加載速度、設(shè)計師將大量時間和精力放在了圖標(biāo)質(zhì)感的打造上而容易忽略圖標(biāo)的一致性等問題。但也有些對擬物化風(fēng)格的模擬,容易忽視用戶體驗和交互方式,造成濫用裝飾效果,比如在界面上加入了皮革、縫線、木紋、陰影、金屬拋光等效果,雖使界面看上去精致細(xì)膩,但是難以在真實生活中找到對應(yīng)物,界面的設(shè)計就會給人以唐突的感覺。(圖3)
三 扁平化風(fēng)格圖標(biāo)
3.1扁平化風(fēng)格圖標(biāo)興起的原因
與擬物化風(fēng)格圖標(biāo)的不同,它的興起有兩點原因:一是由于科技的發(fā)展、移動端的風(fēng)行,帶動了市面上多設(shè)備生態(tài)的普及,不同型號的手機、平板、電腦等屏幕的尺寸各不相同,擬物化風(fēng)格基于它豐富的樣式表現(xiàn),大多數(shù)為位圖,要適應(yīng)不同設(shè)備著實困難,需要設(shè)計師根據(jù)設(shè)備的不同做多套尺寸不同、內(nèi)容相同的圖標(biāo),這無形中增加了人力物力成本,而扁平化的出現(xiàn),由于其是矢量圖形的繪制,無論放大縮小都不會失真,這大大解決了設(shè)備適配的難題;二是由于在當(dāng)下信息過剩的時代,人們生活節(jié)奏加快,每天被眾多紛繁復(fù)雜的信息所包圍,如何在有限的時間里,快速、直觀、醒目的向用戶展示所需信息,成為眾多圖形用戶界面設(shè)計師思考的重點,主動的信息植入而不是被動地讓用戶來識別成為眾多圖形用戶界面設(shè)計師思考的重點。就像建筑大師密斯為了反對一切審美方面的虛夸、教條和形式主義所提出的“少就是多”的觀點一樣,物極必反,當(dāng)一種風(fēng)格極盡流行時,人們就越發(fā)渴望打破傳統(tǒng),創(chuàng)造不同的風(fēng)格來使用戶眼前一亮。在此形勢下,圖形符號日趨簡潔并注重寓意的表達給用戶帶來了一種嶄新的體驗,隨之扁平化風(fēng)格應(yīng)運而生。
3.2扁平化風(fēng)格圖標(biāo)的特征及其優(yōu)缺點
扁平化風(fēng)格指的是摒棄各種漸變、高光、陰影等造成立體感的效果,運用平面化的色彩和抽象、簡化的圖形,搭配突出的文字信息進行的圖標(biāo)設(shè)計。早期具有代表性的事件是微軟在Windows Phone 7中引入的Metro界面設(shè)計,簡潔的圖形、明亮的色彩搭配網(wǎng)格分割,給用戶一種清爽、清新、明朗的體驗,為以后扁平化風(fēng)格創(chuàng)作做出了重大啟示。(圖4)而將扁平化的風(fēng)格推向頂峰并迅速普及的是蘋果的于2013年發(fā)布的IOS7操作系統(tǒng)。(圖5)
由于扁平化風(fēng)格更加注重國標(biāo)在美觀之外的功能性意義,對色彩種類的運用相對較少,所占存儲空間比較小,因而相比擬物化風(fēng)格,它在有限的時間中加載速度更快;更容易突出主題,減少對用戶的視覺干擾和記憶負(fù)擔(dān);便于識別,扁平化的圖標(biāo)設(shè)計更加簡潔加上醒目的色彩,即使在較遠(yuǎn)的距離,也能夠清楚地被用戶識別;設(shè)計也相對容易,無需考慮高光、陰影、漸變等多余的裝飾,只需注意圖形的直觀性、界面網(wǎng)格布局,色彩的運用等方面,使圖標(biāo)保持易用性、一致性。但扁平化風(fēng)格也會造成相應(yīng)學(xué)習(xí)成本的增加、且傳達感情不夠形象等弊端。
四 圖標(biāo)未來的發(fā)展趨勢
4.1多元化共存的時代
擬物化和扁平化都有其獨特的優(yōu)勢和特點,設(shè)計師會針對不同的應(yīng)用場景、不同的用戶群體、不同的設(shè)備等因素來選擇更加適合的風(fēng)格,不能說哪一種風(fēng)格終將被另一種風(fēng)格取代而消亡。未來圖標(biāo)的發(fā)展趨勢,勢必更加趨于向多元化風(fēng)格發(fā)展。
不同的產(chǎn)品特性決定著不同的圖形氣質(zhì)與風(fēng)格。例如在游戲場景中,由于用戶多為年輕群體,他們渴望在虛擬世界中獲取真實的體驗、釋放壓力,所以不難發(fā)現(xiàn)眾多大型游戲的界面多炫酷、仿真、具有科幻性,意在呈現(xiàn)給用戶好萊塢大片般的身臨其境的感受,引發(fā)用戶內(nèi)心的情感共鳴,因而在進行圖形化用戶界面圖標(biāo)的設(shè)計時,常常用擬物化風(fēng)格的手法來表現(xiàn)圖標(biāo)的質(zhì)感、光影,比如游戲按鈕的設(shè)計。而相對于58同城、ZAKER等信息類網(wǎng)站的設(shè)計,就更加傾向于扁平化風(fēng)格,設(shè)計更關(guān)注信息和內(nèi)容本身而不再強調(diào)過多的裝飾,目的在于更清晰、明確的傳達功能信息,方便用戶快速查找和獲取有效信息,減少視覺感知的復(fù)雜性,從而減輕視覺疲勞。(圖6)
五 圖形化用戶界面圖標(biāo)的課題應(yīng)用
隨著對用戶界面圖標(biāo)的不斷探索,在進行客戶端課題的設(shè)計中,應(yīng)用以上理論研究,客戶端界面主要在于功能的易用上,因而圖標(biāo)的作用為襯托界面功能,輔助用戶更好地完成交互,其設(shè)計更適合扁平化風(fēng)格,表現(xiàn)形式必須一致,以最簡潔的方式有效地展示頁面信息,將信息分層級展現(xiàn),次要信息通過折疊、彈出窗口等形式隱藏,當(dāng)用戶點擊時反饋給用戶所需信息,以此呈現(xiàn)給用戶更大的操作界面。(圖7)
總結(jié)
優(yōu)秀的用戶界面必定是建立在用戶需求及特定應(yīng)用領(lǐng)域和操作環(huán)境的基礎(chǔ)上進行的設(shè)計,具備良好地交互流程,使得界面好用、易用,這就需要在進行圖形化用戶界面圖標(biāo)的設(shè)計時,不能單純?yōu)榱苏故灸撤N風(fēng)格而拋棄了產(chǎn)品本身,無論是擬物化風(fēng)格還是扁平化風(fēng)格,都應(yīng)符合應(yīng)用場景、設(shè)備、網(wǎng)絡(luò)等眾多因素,突出界面圖標(biāo)的可識別性、一致性;在色彩的運用上,應(yīng)盡量做到情感化;在交互方式上,做到不要讓用戶去想,而要主動的引導(dǎo)用戶操作,順應(yīng)用戶的操作習(xí)慣,比如切換方式,這樣才能增加用戶的可信度和支持度。
好的圖形化用戶界面圖標(biāo)設(shè)計不僅能充分體現(xiàn)產(chǎn)品的特點和定位,讓產(chǎn)品變得有個性有品味,還能帶給用戶簡單、自由、舒適的交互體驗,獲得更多用戶的喜愛,從而增加可觀的流量和廣泛的用戶群體。