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