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