試析GUI設(shè)計中圖標(biāo)元素的設(shè)計
時間：
涂彥1由 分享
【摘要】本文在計算機(jī)人機(jī)交互圖形化用戶界面圖標(biāo)設(shè)計的基礎(chǔ)上,分析了圖標(biāo)在軟件中的應(yīng)用,詳細(xì)論述了軟件系統(tǒng)圖標(biāo)的特征和特點,給出了圖標(biāo)設(shè)計原則和設(shè)計個性化圖標(biāo)的一般方法。為軟件系統(tǒng)圖標(biāo)設(shè)計提供了理論依據(jù)和借鑒模型。
【關(guān)鍵詞】GUI 軟件系統(tǒng)圖標(biāo)特征圖標(biāo)設(shè)計研究
GUI全稱為Graphical User Interface,即計算機(jī)圖形用戶接口界面,通俗理解就是指人機(jī)交互圖形化用戶界面,采用平面圖形的方式直觀地反映計算機(jī)的用戶操作界面。伴隨數(shù)字技術(shù)的發(fā)展,計算機(jī)界面操作人性化程度的提升,界面圖標(biāo)在人機(jī)互動過程中發(fā)揮的作用也日益增強(qiáng),表現(xiàn)出的視覺魅力也日益豐富,成為GUI設(shè)計的重要表現(xiàn)元素。
1. 圖標(biāo)的發(fā)展史
圖標(biāo)系統(tǒng)的出現(xiàn)與發(fā)展的每一步,都與計算機(jī)界面技術(shù)的發(fā)展緊密相連。1981年Xerox Star系統(tǒng)的圖標(biāo)是最早的界面圖標(biāo),由于技術(shù)有限,只有黑白兩色。 Xerox Star系統(tǒng)中的圖標(biāo)十分抽象,只用了圓形和矩形。1991年,Microsoft公司在其Windows3.0界面上首次使用了彩色圖標(biāo),該圖標(biāo)突破了以往機(jī)械的外形,簡單的構(gòu)造,初次采用了投影立體效果。直到2001年,Microsoft在參照了Mcitish OS系統(tǒng)后成功研發(fā)出世界上第一套真正具備現(xiàn)代意義的界面圖標(biāo):WindowsXP系統(tǒng)圖標(biāo)。該系統(tǒng)以藍(lán)色為主色,象征理性與速度,科技與時尚。圖標(biāo)輔以綠色和紅色,對比效果強(qiáng)烈。深沉的主色調(diào)統(tǒng)一,穩(wěn)健之中不乏熱情,具有很強(qiáng)的視覺沖擊力。
2. 圖標(biāo)的發(fā)展圖標(biāo)的色彩與情感
成功的藝術(shù)作品要傾注作者的個人情感,才能達(dá)到與讀者的共鳴,圖標(biāo)也是一樣,它是一種像素藝術(shù),方寸之間進(jìn)行表現(xiàn),在設(shè)計的時候要充分考慮圖標(biāo)帶給人的心理作用和視覺感受。以藍(lán)色、紫色、綠色等冷色為主色調(diào)的圖標(biāo),給人以冷靜、成熟、干練的感覺,以紅色、橙色、黃色為主色調(diào)的界面圖標(biāo)給人以熱情、年輕、沖擊的感覺。在圖標(biāo)設(shè)計的過程中,色彩的效果不是一種或兩種色彩決定的,是所有色彩元素,相互影響、共同作用形成的。合理的運(yùn)用明度、純度、色相進(jìn)行有目的的對比,才能使作品具有設(shè)計美感。
圖標(biāo)設(shè)計的效果是通過UI界面來實現(xiàn)的,考慮電腦的色彩成相原理也是設(shè)計者不可缺少的工作環(huán)節(jié)。操作界面上色彩的效果是通過像素的計算得來的,早期的黑白效果簡單的色彩結(jié)構(gòu),在電腦上用的是一位的資料。雖然,黑白只有兩色,單仍能夠以疏密不同的黑點和白點進(jìn)行矩陣排列,形成視覺上的256個灰色階調(diào),除去黑白兩色,還有254個,電腦必須以8位的技術(shù)實現(xiàn)這256位階調(diào)。電腦屏幕是通過光,把信息進(jìn)行展現(xiàn)的,所以,我們看到的色彩必須以色光模式進(jìn)行計算,即RGB格式,我們進(jìn)行設(shè)計所用的顏色,都是通過紅、綠、藍(lán)這三種顏色進(jìn)行配比形成的。
在8位色體系中,一位色包含兩種顏色,二位色四種顏色,四位色16種顏色,8位色24種顏色………….依次類推,色彩的數(shù)目是隨著位數(shù)的增長而上升的。采用過高的位數(shù)會衍生更多的色彩,但同時也會給人的視覺識別帶來負(fù)擔(dān),采用合適的色彩體系進(jìn)行設(shè)計,是至關(guān)重要的。在設(shè)計時,要選用少的色彩,和簡單的外形,利用色彩空間混合原理,設(shè)計出美觀適用的圖標(biāo)。
3. 圖標(biāo)的可識別性
圖標(biāo)在服從界面需要的前提下,更要體現(xiàn)出藝術(shù)化的效果。在定位上,應(yīng)當(dāng)采用符合行業(yè)特征的符號,只有具有一定的廣泛性,才有利于識別和操作,只有具有一定的個性,才能
在同類產(chǎn)品中脫穎而出。比如,COREL DRAW 是一款矢量圖形制作軟件,這類藝術(shù)性實用性很強(qiáng)的圖標(biāo),更有獨特的視覺表現(xiàn)力。有豐富的色彩效果和優(yōu)美的外輪廓。如,Coreldraw9的圖標(biāo),是一個彩色的降落傘,采用倒置水滴外形,輔以鮮艷的色彩和諧的明暗關(guān)系以及適度的立體效果,富有很強(qiáng)的視覺美感。Coreldraw12采用圓點做背景,鉛筆做主形,成熟的灰藍(lán)色為主色調(diào),軟件的功能定位一目了然。再如,很多音樂播放器的圖標(biāo),如千千靜聽,采用耳機(jī)和電頻為主要圖形,輔以晶瑩時尚的玻璃按鈕,使用戶在第一時間就可以準(zhǔn)確的判斷并記憶。
在設(shè)計中,要避免面面俱到,在一個小圖標(biāo)上呈現(xiàn)對象的全部特征而使效果雜亂模糊。圖標(biāo)的尺寸一般都比較小,設(shè)計者必須力求簡約,選擇最具有獨特性和表現(xiàn)力的特征去設(shè)計和制作,使作品線條簡約,色彩適度,定位明確。
4. 圖標(biāo)的一致性
統(tǒng)一的圖標(biāo)設(shè)計風(fēng)格,統(tǒng)一的色調(diào)設(shè)置,統(tǒng)一的尺寸,和統(tǒng)一的交互方式給用戶統(tǒng)一的感覺,增加軟件的可信度和支持率。首先,一個好的軟件圖標(biāo)風(fēng)格是一致的,但不同產(chǎn)品也有不同的特色?？偨Y(jié)起來,有以下幾個風(fēng)格:1、卡通漫畫風(fēng)格,這類圖標(biāo)往往是在游戲類軟件中最為常見,因為游戲類軟件的情節(jié)性較強(qiáng),使用者在其中扮演自己喜歡的角色,并參與到設(shè)計好的情節(jié)。這類圖標(biāo)為了吸引使用者,采用有代表性的人物形象作為圖標(biāo),使信息由效地得到傳遞。2、傳統(tǒng)風(fēng)格,這類軟件幾乎無一例外地呈現(xiàn)內(nèi)容的原貌,不添加任何人為加工的成分,如實的反映軟件的內(nèi)容和功能,外型上給人四平八穩(wěn)的感覺,一般具有明確的指定使用人群和市場。此類圖標(biāo)多服務(wù)于辦公類軟件,此類的設(shè)計有利于提高工作效率。3、高科技風(fēng)格,此類圖標(biāo)采用3D動畫技術(shù),虛擬現(xiàn)實的效果,營造出真實的視覺感受。此類圖標(biāo)多為時代感較強(qiáng),具有前瞻性的軟件。
同一信息產(chǎn)品,采用統(tǒng)一的外觀風(fēng)格,對于保持用戶的使用和感官優(yōu)勢,促進(jìn)交互效率有很大幫助。
其次,應(yīng)用功能近似的軟件應(yīng)該保持外觀一致,如Adobe系列應(yīng)用軟件,PHOTOSHOP、ILLUSTRATOR、INDESIGN、IMAGEREADY等,這些軟件圖標(biāo),在外觀上保持尺寸一致,統(tǒng)一白色的字體鑲嵌效果,統(tǒng)一的彩色的圖標(biāo),統(tǒng)一的圓角正方形和左上角的光源,仿立體的陰影效果等一系列近似的特征使他們保持了一致。用戶在長期的交互過程中形成了穩(wěn)定的心理模型,用戶在熟悉了一個界面之后,切換到另一界面也可以很快猜測出界面工具的功能,節(jié)約了時間成本,象征性圖形符號所傳達(dá)的意思也不再那么抽象費(fèi)解。
再次,交互行為的統(tǒng)一性。所有的交互行為控制圖標(biāo)都有,圖像被選擇時,圖像未被選擇時,雙擊左鍵進(jìn)入程序,單擊右鍵選擇隱藏的下拉任務(wù)菜單……等狀態(tài)。統(tǒng)一交互行為,讓圖標(biāo)的識別和使用變得更加便捷,軟件技術(shù)也更加通俗和簡易。
計算機(jī)技術(shù)的進(jìn)步和人的心理需求促使圖標(biāo)的出現(xiàn)和發(fā)展,從而,給我們的工作和生活帶來巨大的變化。在未來人與計算機(jī)交互的過程中,圖標(biāo)將成為一個不可替代的角色,在滿足使用功能的同時散發(fā)出更加迷人的藝術(shù)魅力。
參考文獻(xiàn)
[1]張舒予.視覺文化概論.南京:江蘇人民出版社,2003.
[2]周憲.反思視覺文化江.江蘇社會科學(xué),2001,(5).
[3]徐柏容.編輯創(chuàng)意論.天津:天津古籍出版社,1999.
[4]金元浦.視覺圖像文化及當(dāng)代問題域[J].學(xué)術(shù)月刊,2007,(5)
【關(guān)鍵詞】GUI 軟件系統(tǒng)圖標(biāo)特征圖標(biāo)設(shè)計研究
GUI全稱為Graphical User Interface,即計算機(jī)圖形用戶接口界面,通俗理解就是指人機(jī)交互圖形化用戶界面,采用平面圖形的方式直觀地反映計算機(jī)的用戶操作界面。伴隨數(shù)字技術(shù)的發(fā)展,計算機(jī)界面操作人性化程度的提升,界面圖標(biāo)在人機(jī)互動過程中發(fā)揮的作用也日益增強(qiáng),表現(xiàn)出的視覺魅力也日益豐富,成為GUI設(shè)計的重要表現(xiàn)元素。
1. 圖標(biāo)的發(fā)展史
圖標(biāo)系統(tǒng)的出現(xiàn)與發(fā)展的每一步,都與計算機(jī)界面技術(shù)的發(fā)展緊密相連。1981年Xerox Star系統(tǒng)的圖標(biāo)是最早的界面圖標(biāo),由于技術(shù)有限,只有黑白兩色。 Xerox Star系統(tǒng)中的圖標(biāo)十分抽象,只用了圓形和矩形。1991年,Microsoft公司在其Windows3.0界面上首次使用了彩色圖標(biāo),該圖標(biāo)突破了以往機(jī)械的外形,簡單的構(gòu)造,初次采用了投影立體效果。直到2001年,Microsoft在參照了Mcitish OS系統(tǒng)后成功研發(fā)出世界上第一套真正具備現(xiàn)代意義的界面圖標(biāo):WindowsXP系統(tǒng)圖標(biāo)。該系統(tǒng)以藍(lán)色為主色,象征理性與速度,科技與時尚。圖標(biāo)輔以綠色和紅色,對比效果強(qiáng)烈。深沉的主色調(diào)統(tǒng)一,穩(wěn)健之中不乏熱情,具有很強(qiáng)的視覺沖擊力。
2. 圖標(biāo)的發(fā)展圖標(biāo)的色彩與情感
成功的藝術(shù)作品要傾注作者的個人情感,才能達(dá)到與讀者的共鳴,圖標(biāo)也是一樣,它是一種像素藝術(shù),方寸之間進(jìn)行表現(xiàn),在設(shè)計的時候要充分考慮圖標(biāo)帶給人的心理作用和視覺感受。以藍(lán)色、紫色、綠色等冷色為主色調(diào)的圖標(biāo),給人以冷靜、成熟、干練的感覺,以紅色、橙色、黃色為主色調(diào)的界面圖標(biāo)給人以熱情、年輕、沖擊的感覺。在圖標(biāo)設(shè)計的過程中,色彩的效果不是一種或兩種色彩決定的,是所有色彩元素,相互影響、共同作用形成的。合理的運(yùn)用明度、純度、色相進(jìn)行有目的的對比,才能使作品具有設(shè)計美感。
圖標(biāo)設(shè)計的效果是通過UI界面來實現(xiàn)的,考慮電腦的色彩成相原理也是設(shè)計者不可缺少的工作環(huán)節(jié)。操作界面上色彩的效果是通過像素的計算得來的,早期的黑白效果簡單的色彩結(jié)構(gòu),在電腦上用的是一位的資料。雖然,黑白只有兩色,單仍能夠以疏密不同的黑點和白點進(jìn)行矩陣排列,形成視覺上的256個灰色階調(diào),除去黑白兩色,還有254個,電腦必須以8位的技術(shù)實現(xiàn)這256位階調(diào)。電腦屏幕是通過光,把信息進(jìn)行展現(xiàn)的,所以,我們看到的色彩必須以色光模式進(jìn)行計算,即RGB格式,我們進(jìn)行設(shè)計所用的顏色,都是通過紅、綠、藍(lán)這三種顏色進(jìn)行配比形成的。
在8位色體系中,一位色包含兩種顏色,二位色四種顏色,四位色16種顏色,8位色24種顏色………….依次類推,色彩的數(shù)目是隨著位數(shù)的增長而上升的。采用過高的位數(shù)會衍生更多的色彩,但同時也會給人的視覺識別帶來負(fù)擔(dān),采用合適的色彩體系進(jìn)行設(shè)計,是至關(guān)重要的。在設(shè)計時,要選用少的色彩,和簡單的外形,利用色彩空間混合原理,設(shè)計出美觀適用的圖標(biāo)。
3. 圖標(biāo)的可識別性
圖標(biāo)在服從界面需要的前提下,更要體現(xiàn)出藝術(shù)化的效果。在定位上,應(yīng)當(dāng)采用符合行業(yè)特征的符號,只有具有一定的廣泛性,才有利于識別和操作,只有具有一定的個性,才能
在同類產(chǎn)品中脫穎而出。比如,COREL DRAW 是一款矢量圖形制作軟件,這類藝術(shù)性實用性很強(qiáng)的圖標(biāo),更有獨特的視覺表現(xiàn)力。有豐富的色彩效果和優(yōu)美的外輪廓。如,Coreldraw9的圖標(biāo),是一個彩色的降落傘,采用倒置水滴外形,輔以鮮艷的色彩和諧的明暗關(guān)系以及適度的立體效果,富有很強(qiáng)的視覺美感。Coreldraw12采用圓點做背景,鉛筆做主形,成熟的灰藍(lán)色為主色調(diào),軟件的功能定位一目了然。再如,很多音樂播放器的圖標(biāo),如千千靜聽,采用耳機(jī)和電頻為主要圖形,輔以晶瑩時尚的玻璃按鈕,使用戶在第一時間就可以準(zhǔn)確的判斷并記憶。
在設(shè)計中,要避免面面俱到,在一個小圖標(biāo)上呈現(xiàn)對象的全部特征而使效果雜亂模糊。圖標(biāo)的尺寸一般都比較小,設(shè)計者必須力求簡約,選擇最具有獨特性和表現(xiàn)力的特征去設(shè)計和制作,使作品線條簡約,色彩適度,定位明確。
4. 圖標(biāo)的一致性
統(tǒng)一的圖標(biāo)設(shè)計風(fēng)格,統(tǒng)一的色調(diào)設(shè)置,統(tǒng)一的尺寸,和統(tǒng)一的交互方式給用戶統(tǒng)一的感覺,增加軟件的可信度和支持率。首先,一個好的軟件圖標(biāo)風(fēng)格是一致的,但不同產(chǎn)品也有不同的特色?？偨Y(jié)起來,有以下幾個風(fēng)格:1、卡通漫畫風(fēng)格,這類圖標(biāo)往往是在游戲類軟件中最為常見,因為游戲類軟件的情節(jié)性較強(qiáng),使用者在其中扮演自己喜歡的角色,并參與到設(shè)計好的情節(jié)。這類圖標(biāo)為了吸引使用者,采用有代表性的人物形象作為圖標(biāo),使信息由效地得到傳遞。2、傳統(tǒng)風(fēng)格,這類軟件幾乎無一例外地呈現(xiàn)內(nèi)容的原貌,不添加任何人為加工的成分,如實的反映軟件的內(nèi)容和功能,外型上給人四平八穩(wěn)的感覺,一般具有明確的指定使用人群和市場。此類圖標(biāo)多服務(wù)于辦公類軟件,此類的設(shè)計有利于提高工作效率。3、高科技風(fēng)格,此類圖標(biāo)采用3D動畫技術(shù),虛擬現(xiàn)實的效果,營造出真實的視覺感受。此類圖標(biāo)多為時代感較強(qiáng),具有前瞻性的軟件。
同一信息產(chǎn)品,采用統(tǒng)一的外觀風(fēng)格,對于保持用戶的使用和感官優(yōu)勢,促進(jìn)交互效率有很大幫助。
其次,應(yīng)用功能近似的軟件應(yīng)該保持外觀一致,如Adobe系列應(yīng)用軟件,PHOTOSHOP、ILLUSTRATOR、INDESIGN、IMAGEREADY等,這些軟件圖標(biāo),在外觀上保持尺寸一致,統(tǒng)一白色的字體鑲嵌效果,統(tǒng)一的彩色的圖標(biāo),統(tǒng)一的圓角正方形和左上角的光源,仿立體的陰影效果等一系列近似的特征使他們保持了一致。用戶在長期的交互過程中形成了穩(wěn)定的心理模型,用戶在熟悉了一個界面之后,切換到另一界面也可以很快猜測出界面工具的功能,節(jié)約了時間成本,象征性圖形符號所傳達(dá)的意思也不再那么抽象費(fèi)解。
再次,交互行為的統(tǒng)一性。所有的交互行為控制圖標(biāo)都有,圖像被選擇時,圖像未被選擇時,雙擊左鍵進(jìn)入程序,單擊右鍵選擇隱藏的下拉任務(wù)菜單……等狀態(tài)。統(tǒng)一交互行為,讓圖標(biāo)的識別和使用變得更加便捷,軟件技術(shù)也更加通俗和簡易。
計算機(jī)技術(shù)的進(jìn)步和人的心理需求促使圖標(biāo)的出現(xiàn)和發(fā)展,從而,給我們的工作和生活帶來巨大的變化。在未來人與計算機(jī)交互的過程中,圖標(biāo)將成為一個不可替代的角色,在滿足使用功能的同時散發(fā)出更加迷人的藝術(shù)魅力。
參考文獻(xiàn)
[1]張舒予.視覺文化概論.南京:江蘇人民出版社,2003.
[2]周憲.反思視覺文化江.江蘇社會科學(xué),2001,(5).
[3]徐柏容.編輯創(chuàng)意論.天津:天津古籍出版社,1999.
[4]金元浦.視覺圖像文化及當(dāng)代問題域[J].學(xué)術(shù)月刊,2007,(5)