教學(xué)課件21 圖標(biāo)設(shè)計(jì)基礎(chǔ)

1、圖標(biāo)設(shè)計(jì)基礎(chǔ)授課教師：肖文婷廣義的圖標(biāo)是一種符號(hào)，它象征一些縱所周知的屬性、功能、實(shí)體或概念，具有快捷傳達(dá)信息、便于識(shí)別和記憶的特性。狹義的圖標(biāo)主要應(yīng)用于計(jì)算機(jī)軟件方面，包括程序圖標(biāo)、數(shù)據(jù)圖標(biāo)、命令選擇、模式信號(hào)或切換開關(guān)、狀態(tài)指示等。圖標(biāo)具有明確指代含義和特定功能的圖形標(biāo)識(shí)，是區(qū)別程序語言命令的視覺命令形式，具有交互性，是實(shí)現(xiàn)電腦功能的重要載體。【圖標(biāo)的概念】計(jì)算機(jī)圖標(biāo)圖標(biāo)：具有明確指代含義的計(jì)算機(jī)圖形。標(biāo)志：俗稱logo，是表明事物特征的記號(hào)、商標(biāo)。標(biāo)識(shí)：一種非語言傳達(dá)的視覺圖形及文字傳達(dá)信息的象征符號(hào)，為公眾提供區(qū)別、辨認(rèn)事物，起到示意、指示、識(shí)別、警告、甚至命令的作用?！緢D標(biāo)、標(biāo)志與標(biāo)

2、識(shí)的區(qū)別】在ui設(shè)計(jì)中，圖標(biāo)設(shè)計(jì)占有很大的比例。它以圖形符號(hào)的形式來規(guī)劃并處理信息和知識(shí)，通過隱喻建立起計(jì)算機(jī)世界與真實(shí)世界的聯(lián)系。圖標(biāo)設(shè)計(jì)中一般是提供單擊功能，了解其功能后，它的設(shè)計(jì)首先要易于被快速識(shí)別、便于記憶、直觀瀏覽、產(chǎn)生國(guó)際通用性；其次應(yīng)具有形、意、色等多種刺激，傳遞的信息量大；最后還得具備抗干擾能力強(qiáng)、圖標(biāo)大小可調(diào)、表示視覺和空間概念，便于布局美觀。好的圖標(biāo)設(shè)計(jì)需瀏覽者看一眼外形就知道其功能，并且在整個(gè)界面中所有圖標(biāo)的風(fēng)格一致?！緢D標(biāo)設(shè)計(jì)的作用和意義】ui設(shè)計(jì)未來的方向就是簡(jiǎn)潔、易用和高效，精美的圖標(biāo)設(shè)計(jì)往往起到畫龍點(diǎn)睛的作用，從而提升設(shè)計(jì)的視覺效果。圖標(biāo)設(shè)計(jì)的核心思想就是要盡可能

3、地發(fā)揮圖標(biāo)的優(yōu)勢(shì)：比文字更直觀漂亮，在該基礎(chǔ)上盡可能使簡(jiǎn)潔、清晰、美觀的圖形表達(dá)出圖標(biāo)的意義。1、可識(shí)別性可識(shí)別性是圖標(biāo)設(shè)計(jì)的首要原則。它指設(shè)計(jì)的圖標(biāo)要能夠準(zhǔn)確地表達(dá)相應(yīng)的操作，讓瀏覽者一眼就明白該圖標(biāo)要表達(dá)的意思。例如，道路上的標(biāo)識(shí)圖標(biāo)，可識(shí)別性強(qiáng)、直觀、簡(jiǎn)單，無國(guó)界，即使不認(rèn)識(shí)字的人，也可以立即了解圖標(biāo)的含義?！緢D標(biāo)設(shè)計(jì)的原則】天氣圖標(biāo)設(shè)計(jì)2、差異性差異性也是圖標(biāo)設(shè)計(jì)的重要原則之一，同時(shí)是容易被ui設(shè)計(jì)師忽略的一個(gè)原則。只有圖標(biāo)之間有差距，才能被瀏覽者所關(guān)注和記憶，從而對(duì)設(shè)計(jì)內(nèi)容留有印象。差異性天氣圖標(biāo)設(shè)計(jì)方案對(duì)比3、與環(huán)境協(xié)調(diào)性任何圖標(biāo)或設(shè)計(jì)都不可能脫離環(huán)境而獨(dú)立存在，圖標(biāo)最終要放在界面

4、中才會(huì)起作用。因此，圖標(biāo)的設(shè)計(jì)要考慮圖標(biāo)所處的環(huán)境，這樣的圖標(biāo)才能更好地為設(shè)計(jì)服務(wù)。圖標(biāo)設(shè)計(jì)在手機(jī)界面中的應(yīng)用效果4、視覺效果圖標(biāo)設(shè)計(jì)追求視覺效果，一定要在保證差異性、可識(shí)別性和與環(huán)境協(xié)調(diào)性原則的基礎(chǔ)上，先滿足基本的功能需求，然后考慮更高層次的需求視覺需求。 bad minions主題手機(jī)圖標(biāo)設(shè)計(jì)5、創(chuàng)造性隨著網(wǎng)絡(luò)的不斷發(fā)展，圖標(biāo)的設(shè)計(jì)表現(xiàn)方式更是層出不窮，對(duì)ui設(shè)計(jì)師的設(shè)計(jì)內(nèi)容提出了更高的要求。創(chuàng)造性在圖標(biāo)設(shè)計(jì)中非常重要，在圖標(biāo)的設(shè)計(jì)過程中同樣需要?jiǎng)e出心裁的創(chuàng)意表達(dá)。波普風(fēng)格的圖標(biāo)設(shè)計(jì)創(chuàng)意扁平化風(fēng)格的圖標(biāo)設(shè)計(jì)創(chuàng)意1、從造型方面分類，分為像素圖標(biāo)、2d剪影圖標(biāo)、3d立體圖標(biāo)、寫實(shí)擬物圖標(biāo)、扁平化圖標(biāo)等。【圖標(biāo)設(shè)計(jì)的分類】圖標(biāo)設(shè)計(jì)的造型分類2、從風(fēng)格表現(xiàn)方面分類，主要分類線性表現(xiàn)圖標(biāo)、填充表現(xiàn)圖標(biāo)、單色表現(xiàn)圖標(biāo)、扁平化表現(xiàn)圖標(biāo)、手繪風(fēng)格表現(xiàn)圖標(biāo)和擬物化表現(xiàn)圖標(biāo)6種。6種常見圖標(biāo)表現(xiàn)風(fēng)格3、從應(yīng)用方面分類，分為硬件界面中的圖標(biāo)設(shè)計(jì)和軟件界面中的圖標(biāo)設(shè)計(jì)。4、從思維邏輯方面分類，分為象形圖標(biāo)設(shè)計(jì)和表意圖標(biāo)設(shè)計(jì)。象形圖標(biāo)設(shè)計(jì)師通過其相似性或?qū)ξ锢韺?duì)象的引用來傳達(dá)含義的符號(hào)。通常情況下，象形圖標(biāo)