界面的色彩與圖標設(shè)計科學(xué)-課件

界面的色彩與圖標設(shè)計科學(xué)1ppt課件界面的色彩與圖標設(shè)計科學(xué)1ppt課件什么是圖標？一個圖形圖像——代表一個文件，程序，網(wǎng)頁，或命令。2ppt課件什么是圖標？一個圖形圖像2ppt課件什么是圖標？圖標是不同的標準圖像3ppt課件什么是圖標？圖標是不同的3ppt課件什么是圖標？一個圖標最重要的屬性是其包含透明區(qū)域的能力4ppt課件什么是圖標？一個圖標最重要的屬性是其包含透明區(qū)域的能力4pp什么是圖標？一個圖標包含幾個圖像格式（大小和顏色）5ppt課件什么是圖標？一個圖標包含幾個圖像格式（大小和顏色）5ppt課圖標設(shè)計規(guī)范

圖標樣式應(yīng)該有趣、色彩豐富且充滿活力，目前的系統(tǒng)支持圖標是32位，并且邊緣非常平滑。6ppt課件圖標設(shè)計規(guī)范圖標樣式應(yīng)該有趣、色彩豐富且充滿活力，目圖標設(shè)計規(guī)范圖標樣式特性

(1)色彩豐富，是對WindowsXP外觀的補充。

(2)不同的角度和透視特性為圖像增添了動態(tài)活力。

(3)元素的邊角十分柔和，并略微有些圓滑。

(4)光源位于圖標的左上角，同時有環(huán)繞光照亮圖標的其它部分。

7ppt課件圖標設(shè)計規(guī)范圖標樣式特性(1)色彩豐富圖標設(shè)計規(guī)范圖標樣式特性(5)漸變效果使圖標具有立體感，進而使圖標的外觀更加豐滿。

(6)投影使圖標更具對比度和立體感。

(7)添加輪廓可使圖像更清晰。

(8)日常對象(如計算機和設(shè)備)具有更現(xiàn)代化的個人外觀。8ppt課件圖標設(shè)計規(guī)范圖標樣式特性(5)漸變效果使圖標圖標設(shè)計規(guī)范圖標尺寸Windows?XP

?建議：48x48，32x32

，24x24，16x16

?最低：32x32

，16x16?可選：128x1289ppt課件圖標設(shè)計規(guī)范圖標尺寸Windows?XP

?建議：圖標設(shè)計規(guī)范圖標尺寸WindowsVista?

?建議：256x256，64x64，48x48，32x32，24x24，16x16?最低：256x256，48x48，32x32，16x16

?可選：256x256，64x64

10ppt課件圖標設(shè)計規(guī)范圖標尺寸WindowsVista?10ppt課圖標設(shè)計規(guī)范圖標色彩深度支持每個WindowsXP圖標應(yīng)包含以下三種色彩深度，以支持不同的顯示器顯示設(shè)置：

24位圖像加上8位alpha通道(32位)

8位圖像(256色)，加上1位透明色

4位圖像(16色)，加上1位透明色

11ppt課件圖標設(shè)計規(guī)范圖標色彩深度支持每個WindowsXP圖標應(yīng)包含圖標設(shè)計規(guī)范圖標色彩深度支持——RGB圖標格式與Alpha通道12ppt課件圖標設(shè)計規(guī)范圖標色彩深度支持——RGB圖標格式與Alpha通圖標設(shè)計規(guī)范圖標色彩深度支持——RGB圖標格式與Alpha通道13ppt課件圖標設(shè)計規(guī)范圖標色彩深度支持——RGB圖標格式與Alpha通圖標的可用性原則

圖標的功用在于建立起計算機世界與真實世界的一種隱喻，或者映射關(guān)系，應(yīng)該被用戶輕松準確地理解。14ppt課件圖標的可用性原則

圖標的功用在于建立起計算機世界與真圖標的可用性原則

圖標指向的映射關(guān)系應(yīng)該盡可能的直接、簡單。15ppt課件圖標的可用性原則

圖標指向的映射關(guān)系應(yīng)該盡可能的直接、簡單。圖標的可用性原則

每個圖標指向的映射關(guān)系應(yīng)該是唯一的，不要使用過于復(fù)雜的圖標。16ppt課件圖標的可用性原則

每個圖標指向的映射關(guān)系應(yīng)該是唯一的，不要使圖標的可用性原則

同一個圖標系列中，最好使用相同的映射模式。17ppt課件圖標的可用性原則

同一個圖標系列中，最好使用相同的映射模式。圖標的可用性原則

形式與功能的協(xié)調(diào)統(tǒng)一18ppt課件圖標的可用性原則

形式與功能的協(xié)調(diào)統(tǒng)一18ppt課件圖標的設(shè)計技巧

創(chuàng)意創(chuàng)意來源于生活19ppt課件圖標的設(shè)計技巧

創(chuàng)意19ppt課件圖標的設(shè)計技巧

創(chuàng)意創(chuàng)意來源于優(yōu)秀的設(shè)計作品20ppt課件圖標的設(shè)計技巧

創(chuàng)意20ppt課件圖標的設(shè)計技巧

細節(jié)再加上這一點就能變成一流的創(chuàng)意圖標1處：凹陷的質(zhì)感

2

、3處：面的漸變

4處：漸變以及若隱若現(xiàn)的電路

5處：凹陷的線條

6處：反光21ppt課件圖標的設(shè)計技巧

細節(jié)1處：凹陷的質(zhì)感

2

、3處：面的漸圖標的設(shè)計技巧

細節(jié)22ppt課件圖標的設(shè)計技巧

細節(jié)22ppt課件圖標的設(shè)計技巧

整體性一套完整的圖標應(yīng)該來自同一個地方23ppt課件圖標的設(shè)計技巧

整體性23ppt課件圖標的設(shè)計技巧

整體性形狀、色彩、聲音24ppt課件圖標的設(shè)計技巧

整體性24ppt課件圖標設(shè)計的常見問題

圖標之間沒有明顯的差異化（太相似，難以辨識）；25ppt課件圖標設(shè)計的常見問題

圖標之間沒有明顯的差異化（太相似，難以辨圖標設(shè)計的常見問題

在一個圖標中設(shè)計了太多的元素26ppt課件圖標設(shè)計的常見問題

在一個圖標中設(shè)計了太多的元素26ppt課圖標設(shè)計的常見問題

加入不必要的元素27ppt課件圖標設(shè)計的常見問題

加入不必要的元素27ppt課件圖標設(shè)計的常見問題

一套圖標中的圖標統(tǒng)一性不足（顏色主題，透視角度，尺寸，繪圖技法等）28ppt課件圖標設(shè)計的常見問題

一套圖標中的圖標統(tǒng)一性不足（顏色主題，透圖標設(shè)計的常見問題

在小圖標中（24X24以下）使用不必要的透視和陰影29ppt課件圖標設(shè)計的常見問題

在小圖標中（24X24以下）使用不必要的圖標設(shè)計的常見問題

過度原創(chuàng)使語義不明確（比如將回收站設(shè)計成碎紙機的樣式）30ppt課件圖標設(shè)計的常見問題

過度原創(chuàng)使語義不明確（比如將回收站設(shè)計成圖標設(shè)計的常見問題

國家區(qū)域和文化特征沒有被考慮進設(shè)計中31ppt課件圖標設(shè)計的常見問題

國家區(qū)域和文化特征沒有被考慮進設(shè)計中31圖標設(shè)計的常見問題

在圖標中使用純界面化的元素（比如泛濫的macaqua效果，用戶會認為你的產(chǎn)品是蘋果的產(chǎn)品）32ppt課件圖標設(shè)計的常見問題

在圖標中使用純界面化的元素（比如泛濫的m圖標設(shè)計的常見問題

在圖標內(nèi)部使用文字（特別是不容易辨識的）33ppt課件圖標設(shè)計的常見問題

在圖標內(nèi)部使用文字（特別是不容易辨識的）圖標設(shè)計的常見問題

圖標外部邊緣沒有做像素化處理34ppt課件圖標設(shè)計的常見問題

圖標外部邊緣沒有做像素化處理34ppt課圖標設(shè)計軟件

PS+AI+Iconworkshop（或IconBuilder插件）3D軟件+PS+Iconworkshop（或IconBuilder插件）35ppt課件圖標設(shè)計軟件

PS+AI+Iconworkshop（或Ico圖標設(shè)計的幾個技巧

全面了解圖標設(shè)計——突出整體36ppt課件圖標設(shè)計的幾個技巧

全面了解圖標設(shè)計36ppt課件圖標設(shè)計的幾個技巧

為你的受眾著想——圖標的使用環(huán)境37ppt課件圖標設(shè)計的幾個技巧

為你的受眾著想37ppt課件圖標設(shè)計的幾個技巧

設(shè)計多大的圖標就使用多大的38ppt課件圖標設(shè)計的幾個技巧

設(shè)計多大的圖標就使用多大的38ppt課件圖標設(shè)計的幾個技巧

保持圖標簡潔和圖標化39ppt課件圖標設(shè)計的幾個技巧

保持圖標簡潔和圖標化39ppt課件圖標設(shè)計的幾個技巧

注意保持光、影子、反射的一致性40ppt課件圖標設(shè)計的幾個技巧

注意保持光、影子、反射的一致性40ppt圖標設(shè)計的幾個技巧

使用統(tǒng)一的透視41ppt課件圖標設(shè)計的幾個技巧

使用統(tǒng)一的透視41ppt課件圖標設(shè)計的幾個技巧

保持一套圖標風格——輪廓線、對比度、色彩、明暗等42ppt課件圖標設(shè)計的幾個技巧

保持一套圖標風格42ppt課件圖標設(shè)計的基本流程

圖標創(chuàng)意階段——根據(jù)項目要求，確定圖標的風格43ppt課件圖標設(shè)計的基本流程

圖標創(chuàng)意階段43ppt課件圖標創(chuàng)意階段功能圖標的定義詞語-圖形的轉(zhuǎn)換圖標設(shè)計的基本流程

44ppt課件圖標創(chuàng)意階段圖標設(shè)計的基本流程

44ppt課件草圖繪制階段——確定圖標透視方向圖標設(shè)計的基本流程

45ppt課件草圖繪制階段圖標設(shè)計的基本流程

45ppt課件草圖繪制階段——元素組合圖標設(shè)計的基本流程

46ppt課件草圖繪制階段圖標設(shè)計的基本流程

46ppt課件草圖渲染階段——軟件繪制、細節(jié)潤色圖標設(shè)計的基本流程

47ppt課件草圖渲染階段圖標設(shè)計的基本流程

47ppt課件草圖渲染階段圖標設(shè)計的基本流程

48ppt課件草圖渲染階段圖標設(shè)計的基本流程

48ppt課件草圖渲染階段圖標設(shè)計的基本流程

49ppt課件草圖渲染階段圖標設(shè)計的基本流程

49ppt課件Disco軟件圖標設(shè)計

Disco是一款用來拷貝光盤內(nèi)容的軟件，也可用來進行簡便的刻錄工作，并且也具有其他多項功能?！?；舞廳鏡面球

圖標設(shè)計的基本流程

50ppt課件Disco軟件圖標設(shè)計圖標設(shè)計的基本流程

50ppt課件Disco軟件圖標設(shè)計

創(chuàng)建了一個簡單的3d模型來作為圖標的基礎(chǔ)確定火焰的形狀圖標設(shè)計的基本流程

51ppt課件Disco軟件圖標設(shè)計圖標設(shè)計的基本流程

51ppt課件Disco軟件圖標設(shè)計

黑色作為火焰的基調(diào)色，因為這樣可以使圖標和黑/白風格軟件界面相匹配圖標設(shè)計的基本流程

52ppt課件Disco軟件圖標設(shè)計圖標設(shè)計的基本流程

52ppt課件Disco軟件圖標設(shè)計

一個讓人感覺非常有動感的黑色圖標圖標設(shè)計的基本流程

53ppt課件Disco軟件圖標設(shè)計圖標設(shè)計的基本流程

53ppt課件世界杯頻道主題設(shè)計

按照所給項目的需求文檔和分析資料開始進行大致layout，風格趨向的設(shè)定。圖標設(shè)計的基本流程

54ppt課件世界杯頻道主題設(shè)計圖標設(shè)計的基本流程

54ppt課件世界杯頻道主題設(shè)計

按照自己搜尋圖片進行主界面icon設(shè)計，先從造型開始，然后進行模型的塑造，貼圖材質(zhì)的繪制圖標設(shè)計的基本流程

55ppt課件世界杯頻道主題設(shè)計圖標設(shè)計的基本流程

55ppt課件世界杯頻道主題設(shè)計

模型制作，動畫渲染圖標設(shè)計的基本流程

56ppt課件世界杯頻道主題設(shè)計圖標設(shè)計的基本流程

56ppt課件世界杯頻道主題設(shè)計

主界面背景使用PScs繪制，突出綠茵場地的感覺，并且使它更具有科技感，使用3ds渲染背景效果，整合在一起，4圓盤代表icon所擺放的位置圖標設(shè)計的基本流程

57ppt課件世界杯頻道主題設(shè)計圖標設(shè)計的基本流程

57ppt課件世界杯頻道主題設(shè)計

最后由程序工程師進行整合圖標設(shè)計的基本流程

58ppt課件世界杯頻道主題設(shè)計圖標設(shè)計的基本流程

58ppt課件新聞閱讀軟件"Times"設(shè)計的圖標

概念草圖圖標設(shè)計的基本流程

59ppt課件新聞閱讀軟件"Times"設(shè)計的圖標圖標設(shè)計的基本流程

59新聞閱讀軟件"Times"設(shè)計的圖標

流程圖標設(shè)計的基本流程

60ppt課件新聞閱讀軟件"Times"設(shè)計的圖標圖標設(shè)計的基本流程

60新聞閱讀軟件"Times"設(shè)計的圖標

編輯咖啡杯圖標圖標設(shè)計的基本流程

61ppt課件新聞閱讀軟件"Times"設(shè)計的圖標圖標設(shè)計的基本流程

61新聞閱讀軟件"Times"設(shè)計的圖標

編輯報紙圖標圖標設(shè)計的基本流程

62ppt課件新聞閱讀軟件"Times"設(shè)計的圖標圖標設(shè)計的基本流程

62新聞閱讀軟件"Times"設(shè)計的圖標

成品圖標設(shè)計的基本流程

63ppt課件新聞閱讀軟件"Times"設(shè)計的圖標圖標設(shè)計的基本流程

63工業(yè)軟件Kyvision的