UI設(shè)計(jì)--創(chuàng)意表達(dá)與實(shí)踐教學(xué)課件2-1

圖標(biāo)設(shè)計(jì)基礎(chǔ)圖標(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)電腦功能的重要載體?！緢D標(biāo)的概念】計(jì)算機(jī)圖標(biāo)廣義的圖標(biāo)是一種符號(hào)，它象征一些縱所周知的屬性、功能、實(shí)體或圖標(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)識(shí)的區(qū)別】圖標(biāo)：具有明確指代含義的計(jì)算機(jī)圖形?！緢D標(biāo)、標(biāo)志與標(biāo)識(shí)的區(qū)別UI設(shè)計(jì)-—?jiǎng)?chuàng)意表達(dá)與實(shí)踐教學(xué)課件2-1在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ì)中，圖標(biāo)設(shè)計(jì)占有很大的比例。它以圖形符號(hào)的形式來規(guī)UI設(shè)計(jì)未來的方向就是簡(jiǎn)潔、易用和高效，精美的圖標(biāo)設(shè)計(jì)往往起到畫龍點(diǎn)睛的作用，從而提升設(shè)計(jì)的視覺效果。圖標(biāo)設(shè)計(jì)的核心思想就是要盡可能地發(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ì)的原則】UI設(shè)計(jì)未來的方向就是簡(jiǎn)潔、易用和高效，精美的圖標(biāo)設(shè)計(jì)往往起天氣圖標(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ì)比2、差異性差異性天氣圖標(biāo)設(shè)計(jì)方案對(duì)比3、與環(huán)境協(xié)調(diào)性任何圖標(biāo)或設(shè)計(jì)都不可能脫離環(huán)境而獨(dú)立存在，圖標(biāo)最終要放在界面中才會(huì)起作用。因此，圖標(biāo)的設(shè)計(jì)要考慮圖標(biāo)所處的環(huán)境，這樣的圖標(biāo)才能更好地為設(shè)計(jì)服務(wù)。圖標(biāo)設(shè)計(jì)在手機(jī)界面中的應(yīng)用效果3、與環(huán)境協(xié)調(diào)性圖標(biāo)設(shè)計(jì)在手機(jī)界面中的應(yīng)用效果4、視覺效果圖標(biāo)設(shè)計(jì)追求視覺效果，一定要在保證差異性、可識(shí)別性和與環(huán)境協(xié)調(diào)性原則的基礎(chǔ)上，先滿足基本的功能需求，然后考慮更高層次的需求——視覺需求。BadMinions主題手機(jī)圖標(biāo)設(shè)計(jì)4、視覺效果BadMinions主題手機(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)意5、創(chuàng)造性波普風(fēng)格的圖標(biāo)設(shè)計(jì)創(chuàng)意扁平化風(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)等?！緢D標(biāo)設(shè)計(jì)的分類】圖標(biāo)設(shè)計(jì)的造型分類1、從造型方面分類，分為像素圖標(biāo)、2D剪影圖標(biāo)、3D立體圖標(biāo)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)格2、從風(fēng)格表現(xiàn)方面分類，主要分類線性表現(xiàn)圖標(biāo)、填充表現(xiàn)圖標(biāo)、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)與表意圖標(biāo)會(huì)組合使用來傳達(dá)正確的信息，比如【添加文檔】圖標(biāo)會(huì)通過象形圖標(biāo)的【文檔】和表意圖標(biāo)【+】來展現(xiàn)?！咎砑游臋n】圖標(biāo)的組合示意圖3、從應(yīng)用方面分類，分為硬件界面中的圖標(biāo)設(shè)計(jì)和軟件界面中的圖圖標(biāo)設(shè)計(jì)的靈感來源圖標(biāo)設(shè)計(jì)的靈感來源在圖標(biāo)設(shè)計(jì)時(shí)可以天馬行空、自由想象，多種方法隨意組合，從心設(shè)計(jì)創(chuàng)造出驚人的佳作。一個(gè)小小的圖標(biāo)既要表達(dá)圖形功能又可以充分發(fā)揮想象，制造出不一樣的視覺效果。以下介紹了36種圖標(biāo)概念設(shè)計(jì)的靈感來源的方法，這些常用的方法可以幫助讀者在創(chuàng)意思維枯竭時(shí)找到設(shè)計(jì)靈感的來源。最正常的比例把它拉長(zhǎng)縮短把它變胖變Q把它彎曲扭曲把它融化液化使它破碎、切開把它拍扁把它塞進(jìn)盒子里把它分解成零件在圖標(biāo)設(shè)計(jì)時(shí)可以天馬行空、自由想象，多種方法隨意組合，從心設(shè)把它的一部分夸大把它變得不對(duì)稱讓它透視強(qiáng)烈把它變得尖銳使它重復(fù)使它有速度感把它機(jī)械化只使用一部分使它有科技感使它傾斜使用最正常的顏色和材質(zhì)改變它的顏色使用其他材質(zhì)把它變得更明亮

把它的一部分夸大把它做舊把它和其他物體結(jié)合把它擬人化把它透明化把它變成凝膠狀把它掰開把它挖空把它折疊把它燃燒使它發(fā)熒光使它懸浮使它晶格化

把它做舊UI設(shè)計(jì)-—?jiǎng)?chuàng)意表達(dá)與實(shí)踐教學(xué)課件2-1UI設(shè)計(jì)-—?jiǎng)?chuàng)意表達(dá)與實(shí)踐教學(xué)課件2-1像素圖標(biāo)的繪制像素圖標(biāo)的繪制像素圖標(biāo)其實(shí)是由多個(gè)點(diǎn)組成，又名點(diǎn)陣式圖像。像素圖標(biāo)屬于位圖，而位圖的最小單位是1個(gè)像素（1pixel）。像素圖標(biāo)強(qiáng)調(diào)清晰的輪廓、明快的色彩，幾乎不用混淆方法來繪制光滑的線條，所以常常采用.gif或.png格式,大小通常為16px、24px、32px等。它的尺寸精致，信息容量小，經(jīng)常被用在早期計(jì)算機(jī)界面，或者單色液晶屏幕，QQ秀、早期手機(jī)游戲、小GIF表情、計(jì)算機(jī)狀態(tài)欄、手機(jī)信號(hào)欄等。圖標(biāo)是網(wǎng)頁(yè)中的常見元素，主要功能是表意，也包含裝飾及品牌傳遞的作用，當(dāng)然像素圖標(biāo)也可以理解為像素風(fēng)格的圖標(biāo)，不一定是位圖格式存在。與像素圖標(biāo)相對(duì)的是矢量圖標(biāo)，通常以svg格式及字體格式存在，大小可以隨意調(diào)整。像素圖標(biāo)其實(shí)是由多個(gè)點(diǎn)組成，又名點(diǎn)陣式圖像。像1、Photoshop中主要使用的工具【鉛筆工具】：長(zhǎng)按【畫筆工具】后切換；【油漆桶】：取消勾選【消除鋸齒】；【吸管工具】：在使用【畫筆工具】時(shí)，按Alt按可快速切換到【吸管工具】；【橡皮擦】：選塊模式；其他選取工具【選框工具、魔棒工具】：取消勾選【消除鋸齒】?！鞠袼貓D標(biāo)常用的PS工具與菜單設(shè)置】1、Photoshop中主要使用的工具【像素圖標(biāo)常用的PS工2、Photoshop菜單內(nèi)的設(shè)置【參考線、網(wǎng)格、切片】命令2、Photoshop菜單內(nèi)的設(shè)置【參考線、網(wǎng)格、切片】命令設(shè)置【間隔】與【子網(wǎng)】參數(shù)設(shè)置【間隔】與【子網(wǎng)】參數(shù)【網(wǎng)格】顯示【網(wǎng)格】顯示像素圖標(biāo)的透視可以用正視、一點(diǎn)透視或兩點(diǎn)透視來繪制。其中紅色小點(diǎn)為透視消失點(diǎn)，很多像素游戲和像素立體圖標(biāo)都很喜歡用斜上方45°角俯視的上帝視角?！鞠袼貓D標(biāo)的透視】圖標(biāo)透視示意圖像素圖標(biāo)的透視可以用正視、一點(diǎn)透視或兩點(diǎn)透視來繪制。其中紅色一般包含全透明、alpha透明、圖片格式及兼容性幾點(diǎn)。全透明是指圖片的格式只支持完全透明和不透明兩種狀態(tài)，alpha透明是指圖片格式可以支持不同的透明程度?！鞠袼貓D標(biāo)的格式與透明】圖片格式對(duì)透明度支持度及瀏覽器兼容性一般包含全透明、alpha透明、圖片格式及兼容性幾點(diǎn)。全透明全透明與alpha透明對(duì)圖標(biāo)的影響性示意圖全透明與alpha透明對(duì)圖標(biāo)的影響性示意圖像素圖標(biāo)使用的顏色比較少，一般使用一個(gè)漸變色，然后從等距中取出3、5或者8等數(shù)份顏色，做出色板，放在一邊待取用。少量的顏色有利于今后減少存儲(chǔ)容量，這在GIF和PNG圖像里特別明顯?！鞠袼貓D標(biāo)的取色】色板取色示意圖像素圖標(biāo)使用的顏色比較少，一般使用一個(gè)漸變色，然后從等距中取像素線條要求簡(jiǎn)潔清晰、粗細(xì)一致，不能有多余的點(diǎn)，畫完以后要清理線條。一般來說，規(guī)整的布點(diǎn)出來的線段更加美觀?！鞠袼貓D標(biāo)線條的規(guī)范】像素線條規(guī)范示意圖像素線條要求簡(jiǎn)潔清晰、粗細(xì)一致，不能有多余的點(diǎn)，畫完以后要清顏色相同的點(diǎn)，布點(diǎn)的疏密，可以造成圖像在灰度上的差別，形成漸變。如果把點(diǎn)換成彩色的，還可以做出兩種顏色以上的漸變?！鞠袼貓D標(biāo)線條的漸變布點(diǎn)】像素的深淺漸變線條處理示范顏色相同的點(diǎn)，布點(diǎn)的疏密，可以造成圖像在灰度上的差別，形成漸UI設(shè)計(jì)-—?jiǎng)?chuàng)意表達(dá)與實(shí)踐教學(xué)課件2-11、當(dāng)圖標(biāo)很小的時(shí)候，勿加過多的沒有標(biāo)示性的冗余元素，而應(yīng)該使整體外觀造型清晰。2、圖標(biāo)的邊緣像素要處理得實(shí)一些，銳利一些，這樣的圖標(biāo)看起來比較精致。如果是整體風(fēng)格小像素圖標(biāo)，色板的配色區(qū)間要統(tǒng)一，有整體感?！鞠袼貓D標(biāo)繪制注意事項(xiàng)】像素圖標(biāo)的繪制細(xì)節(jié)1、當(dāng)圖標(biāo)很小的時(shí)候，勿加過多的沒有標(biāo)示性的冗余元素，而應(yīng)該【繪制立方體像素圖標(biāo)實(shí)例】1、像素畫線（1）使用直線工具設(shè)置為像素,取消勾選消除鋸齒，設(shè)為1px粗細(xì)。畫的時(shí)候，按軟件工具會(huì)提示角度，差不多是26.6?。筆者認(rèn)為直線工具不是那么可靠，如果角度不是完全正確的話，畫出來的線可能會(huì)變得很亂。（2）畫一個(gè)40×20px的巨型選區(qū)，使用鉛筆工具（設(shè)為1px大?。┰谧笙陆钱嬕粋€(gè)像素，然后按住Shift在右上角再畫一個(gè)像素。Photoshop會(huì)自動(dòng)在兩點(diǎn)之間畫一條直線。熟練操作后掌握了畫線經(jīng)驗(yàn)，就算不用選區(qū)也能畫出正確的線了。【繪制立方體像素圖標(biāo)實(shí)例】1、像素畫線（3）用鉛筆工具畫兩個(gè)相鄰的像素，選中它們，按住Alt并使用鍵盤或者鼠標(biāo)移動(dòng)它們（后面成為Alt+移動(dòng)），使之在對(duì)角對(duì)齊。然后選中這兩組像素，重復(fù)上述步驟使之延長(zhǎng)。等角線的繪制（3）用鉛筆工具畫兩個(gè)相鄰的像素，選中它們，按住Alt并使用等角線條錯(cuò)誤示范注意：等角線條的繪制只要符合規(guī)則結(jié)構(gòu)的線條都可以，但是每一步伸展得越長(zhǎng)，就看起來越毛糙。等角線條規(guī)則結(jié)構(gòu)等角線條錯(cuò)誤示范注意：等角線條的繪制只要符合規(guī)則結(jié)構(gòu)的線條都2、繪制像素體矩形復(fù)制副本下移像素立方體2、繪制像素體矩形復(fù)制副本下移像素立方體2、繪制像素體像素立方體頂部填充顏色像素立方體完成2、繪制像素體像素立方體頂部填充顏色像素立方體完成【繪制卡通像素圖標(biāo)實(shí)例】繪制像素卡通圖標(biāo)的眼睛繪制像素卡通圖標(biāo)的嘴巴與頭頂【繪制卡通像素圖標(biāo)實(shí)例】繪制像素卡通圖標(biāo)的眼睛繪制像素卡通圖【繪制卡通像素圖標(biāo)實(shí)例】繪制像素卡通圖標(biāo)的右邊繪制像素卡通圖標(biāo)的耳朵【繪制卡通像素圖標(biāo)實(shí)例】繪制像素卡通圖標(biāo)的右邊繪制像素卡通圖【繪制卡通像素圖標(biāo)實(shí)例】繪制像素卡通圖標(biāo)的肩膀繪制像素卡通圖標(biāo)的上半身與手臂【繪制卡通像素圖標(biāo)實(shí)例】繪制像素卡通圖標(biāo)的肩膀繪制像素卡通圖【繪制卡通像素圖標(biāo)實(shí)例】繪制像素卡通圖標(biāo)的下半身像素卡通圖標(biāo)添加顏色【繪制卡通像素圖標(biāo)實(shí)例】繪制像素卡通圖標(biāo)的下半身像素卡通圖標(biāo)2D剪影圖標(biāo)的繪制2D剪影圖標(biāo)的繪制剪影圖標(biāo)，因?yàn)槠浜?jiǎn)潔容易識(shí)別的造型，經(jīng)常被大批量成套的運(yùn)用在系統(tǒng)功能菜單里，所以一般外觀的統(tǒng)一性和識(shí)別性非常重要?，F(xiàn)在網(wǎng)絡(luò)資源非常豐富，有大量的剪影矢量圖標(biāo)素材下載，而新手UI設(shè)計(jì)師最容易犯的錯(cuò)誤就是東挖西找，導(dǎo)致整套圖標(biāo)風(fēng)格不統(tǒng)一。風(fēng)格不統(tǒng)一的2D剪影圖標(biāo)剪影圖標(biāo)，因?yàn)槠浜?jiǎn)潔容易識(shí)別的造型，經(jīng)常被大批量成套的運(yùn)用在1、倒角和圓角一致【

2D剪影圖標(biāo)繪制標(biāo)準(zhǔn)】2、線的寬度一致1、倒角和圓角一致【2D剪影圖標(biāo)繪制標(biāo)準(zhǔn)】2、線的寬度一致3、體積感一致4、外輪廓造型一致3、體積感一致4、外輪廓造型一致5、傾斜角度一致6、透視角度一致5、傾斜角度一致6、透視角度一致7、功能識(shí)別性，陰陽(yáng)兩套在不同背景色上的呈現(xiàn)7、功能識(shí)別性，陰陽(yáng)兩套在不同背景色上的呈現(xiàn)1、關(guān)鍵節(jié)點(diǎn)繪制法剪影圖標(biāo)以簡(jiǎn)練為繪制手段，不是沒有細(xì)節(jié)，而是更加謹(jǐn)慎認(rèn)真的注重每一筆。這里舉例剪影圖標(biāo)繪制方法要點(diǎn)，看似又簡(jiǎn)單又難，簡(jiǎn)單的是只是繪制參照物輪廓，保留基礎(chǔ)識(shí)別性，步驟很少；難的是調(diào)整的過程與產(chǎn)品環(huán)境的融合性，易用性，還有設(shè)計(jì)者的創(chuàng)意想法。最基本的最需要犀利眼神抓準(zhǔn)的是造型的關(guān)鍵節(jié)點(diǎn)，雛形出來后再根據(jù)想法調(diào)整?！?/p>

2D剪影圖標(biāo)設(shè)計(jì)技巧】1、關(guān)鍵節(jié)點(diǎn)繪制法【2D剪影圖標(biāo)設(shè)計(jì)技巧】UI設(shè)計(jì)-—?jiǎng)?chuàng)意表達(dá)與實(shí)踐教學(xué)課件2-12、繪制精致的基礎(chǔ)要素（1）輪廓飽滿，不出現(xiàn)邊緣模糊現(xiàn)象。圖標(biāo)邊緣輪廓處理2、繪制精致的基礎(chǔ)要素圖標(biāo)邊緣輪廓處理（2）圖標(biāo)圖形結(jié)構(gòu)比例協(xié)調(diào)。同一圖標(biāo)圖形內(nèi)部結(jié)構(gòu)優(yōu)化處理（2）圖標(biāo)圖形結(jié)構(gòu)比例協(xié)調(diào)。同一圖標(biāo)圖形內(nèi)部結(jié)構(gòu)優(yōu)化處理（3）保持圖形的視覺平衡。圓形與方形圖標(biāo)的視覺平衡處理（3）保持圖形的視覺平衡。圓形與方形圖標(biāo)的視覺平衡處理【繪制籃球2D剪影圖標(biāo)實(shí)例】新建畫布，并設(shè)置背景色【繪制籃球2D剪影圖標(biāo)實(shí)例】新建畫布，并設(shè)置背景色繪制50×50px的外圓繪制50×50px的外圓繪制46×46px的內(nèi)圓并相減得到外框繪制46×46px的內(nèi)圓并相減得到外框繪制籃球中心線繪制籃球中心線繪制籃球左圓弧線繪制籃球左圓弧線繪制籃球其他圓弧線繪制籃球其他圓弧線籃球剪影2D圖標(biāo)完成圖籃球剪影2D圖標(biāo)完成圖ThanksThanks圖標(biāo)設(shè)計(jì)基礎(chǔ)圖標(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)是一種符號(hào)，它象征一些縱所周知的屬性、功能、實(shí)體或圖標(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)識(shí)的區(qū)別】圖標(biāo)：具有明確指代含義的計(jì)算機(jī)圖形?！緢D標(biāo)、標(biāo)志與標(biāo)識(shí)的區(qū)別UI設(shè)計(jì)-—?jiǎng)?chuàng)意表達(dá)與實(shí)踐教學(xué)課件2-1在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ì)中，圖標(biāo)設(shè)計(jì)占有很大的比例。它以圖形符號(hào)的形式來規(guī)UI設(shè)計(jì)未來的方向就是簡(jiǎn)潔、易用和高效，精美的圖標(biāo)設(shè)計(jì)往往起到畫龍點(diǎn)睛的作用，從而提升設(shè)計(jì)的視覺效果。圖標(biāo)設(shè)計(jì)的核心思想就是要盡可能地發(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)的含義。【圖標(biāo)設(shè)計(jì)的原則】UI設(shè)計(jì)未來的方向就是簡(jiǎn)潔、易用和高效，精美的圖標(biāo)設(shè)計(jì)往往起天氣圖標(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ì)比2、差異性差異性天氣圖標(biāo)設(shè)計(jì)方案對(duì)比3、與環(huán)境協(xié)調(diào)性任何圖標(biāo)或設(shè)計(jì)都不可能脫離環(huán)境而獨(dú)立存在，圖標(biāo)最終要放在界面中才會(huì)起作用。因此，圖標(biāo)的設(shè)計(jì)要考慮圖標(biāo)所處的環(huán)境，這樣的圖標(biāo)才能更好地為設(shè)計(jì)服務(wù)。圖標(biāo)設(shè)計(jì)在手機(jī)界面中的應(yīng)用效果3、與環(huán)境協(xié)調(diào)性圖標(biāo)設(shè)計(jì)在手機(jī)界面中的應(yīng)用效果4、視覺效果圖標(biāo)設(shè)計(jì)追求視覺效果，一定要在保證差異性、可識(shí)別性和與環(huán)境協(xié)調(diào)性原則的基礎(chǔ)上，先滿足基本的功能需求，然后考慮更高層次的需求——視覺需求。BadMinions主題手機(jī)圖標(biāo)設(shè)計(jì)4、視覺效果BadMinions主題手機(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)意5、創(chuàng)造性波普風(fēng)格的圖標(biāo)設(shè)計(jì)創(chuàng)意扁平化風(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ì)的造型分類1、從造型方面分類，分為像素圖標(biāo)、2D剪影圖標(biāo)、3D立體圖標(biāo)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)格2、從風(fēng)格表現(xiàn)方面分類，主要分類線性表現(xiàn)圖標(biāo)、填充表現(xiàn)圖標(biāo)、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)與表意圖標(biāo)會(huì)組合使用來傳達(dá)正確的信息，比如【添加文檔】圖標(biāo)會(huì)通過象形圖標(biāo)的【文檔】和表意圖標(biāo)【+】來展現(xiàn)?！咎砑游臋n】圖標(biāo)的組合示意圖3、從應(yīng)用方面分類，分為硬件界面中的圖標(biāo)設(shè)計(jì)和軟件界面中的圖圖標(biāo)設(shè)計(jì)的靈感來源圖標(biāo)設(shè)計(jì)的靈感來源在圖標(biāo)設(shè)計(jì)時(shí)可以天馬行空、自由想象，多種方法隨意組合，從心設(shè)計(jì)創(chuàng)造出驚人的佳作。一個(gè)小小的圖標(biāo)既要表達(dá)圖形功能又可以充分發(fā)揮想象，制造出不一樣的視覺效果。以下介紹了36種圖標(biāo)概念設(shè)計(jì)的靈感來源的方法，這些常用的方法可以幫助讀者在創(chuàng)意思維枯竭時(shí)找到設(shè)計(jì)靈感的來源。最正常的比例把它拉長(zhǎng)縮短把它變胖變Q把它彎曲扭曲把它融化液化使它破碎、切開把它拍扁把它塞進(jìn)盒子里把它分解成零件在圖標(biāo)設(shè)計(jì)時(shí)可以天馬行空、自由想象，多種方法隨意組合，從心設(shè)把它的一部分夸大把它變得不對(duì)稱讓它透視強(qiáng)烈把它變得尖銳使它重復(fù)使它有速度感把它機(jī)械化只使用一部分使它有科技感使它傾斜使用最正常的顏色和材質(zhì)改變它的顏色使用其他材質(zhì)把它變得更明亮

把它的一部分夸大把它做舊把它和其他物體結(jié)合把它擬人化把它透明化把它變成凝膠狀把它掰開把它挖空把它折疊把它燃燒使它發(fā)熒光使它懸浮使它晶格化

把它做舊UI設(shè)計(jì)-—?jiǎng)?chuàng)意表達(dá)與實(shí)踐教學(xué)課件2-1UI設(shè)計(jì)-—?jiǎng)?chuàng)意表達(dá)與實(shí)踐教學(xué)課件2-1像素圖標(biāo)的繪制像素圖標(biāo)的繪制像素圖標(biāo)其實(shí)是由多個(gè)點(diǎn)組成，又名點(diǎn)陣式圖像。像素圖標(biāo)屬于位圖，而位圖的最小單位是1個(gè)像素（1pixel）。像素圖標(biāo)強(qiáng)調(diào)清晰的輪廓、明快的色彩，幾乎不用混淆方法來繪制光滑的線條，所以常常采用.gif或.png格式,大小通常為16px、24px、32px等。它的尺寸精致，信息容量小，經(jīng)常被用在早期計(jì)算機(jī)界面，或者單色液晶屏幕，QQ秀、早期手機(jī)游戲、小GIF表情、計(jì)算機(jī)狀態(tài)欄、手機(jī)信號(hào)欄等。圖標(biāo)是網(wǎng)頁(yè)中的常見元素，主要功能是表意，也包含裝飾及品牌傳遞的作用，當(dāng)然像素圖標(biāo)也可以理解為像素風(fēng)格的圖標(biāo)，不一定是位圖格式存在。與像素圖標(biāo)相對(duì)的是矢量圖標(biāo)，通常以svg格式及字體格式存在，大小可以隨意調(diào)整。像素圖標(biāo)其實(shí)是由多個(gè)點(diǎn)組成，又名點(diǎn)陣式圖像。像1、Photoshop中主要使用的工具【鉛筆工具】：長(zhǎng)按【畫筆工具】后切換；【油漆桶】：取消勾選【消除鋸齒】；【吸管工具】：在使用【畫筆工具】時(shí)，按Alt按可快速切換到【吸管工具】；【橡皮擦】：選塊模式；其他選取工具【選框工具、魔棒工具】：取消勾選【消除鋸齒】。【像素圖標(biāo)常用的PS工具與菜單設(shè)置】1、Photoshop中主要使用的工具【像素圖標(biāo)常用的PS工2、Photoshop菜單內(nèi)的設(shè)置【參考線、網(wǎng)格、切片】命令2、Photoshop菜單內(nèi)的設(shè)置【參考線、網(wǎng)格、切片】命令設(shè)置【間隔】與【子網(wǎng)】參數(shù)設(shè)置【間隔】與【子網(wǎng)】參數(shù)【網(wǎng)格】顯示【網(wǎng)格】顯示像素圖標(biāo)的透視可以用正視、一點(diǎn)透視或兩點(diǎn)透視來繪制。其中紅色小點(diǎn)為透視消失點(diǎn)，很多像素游戲和像素立體圖標(biāo)都很喜歡用斜上方45°角俯視的上帝視角。【像素圖標(biāo)的透視】圖標(biāo)透視示意圖像素圖標(biāo)的透視可以用正視、一點(diǎn)透視或兩點(diǎn)透視來繪制。其中紅色一般包含全透明、alpha透明、圖片格式及兼容性幾點(diǎn)。全透明是指圖片的格式只支持完全透明和不透明兩種狀態(tài)，alpha透明是指圖片格式可以支持不同的透明程度?！鞠袼貓D標(biāo)的格式與透明】圖片格式對(duì)透明度支持度及瀏覽器兼容性一般包含全透明、alpha透明、圖片格式及兼容性幾點(diǎn)。全透明全透明與alpha透明對(duì)圖標(biāo)的影響性示意圖全透明與alpha透明對(duì)圖標(biāo)的影響性示意圖像素圖標(biāo)使用的顏色比較少，一般使用一個(gè)漸變色，然后從等距中取出3、5或者8等數(shù)份顏色，做出色板，放在一邊待取用。少量的顏色有利于今后減少存儲(chǔ)容量，這在GIF和PNG圖像里特別明顯?！鞠袼貓D標(biāo)的取色】色板取色示意圖像素圖標(biāo)使用的顏色比較少，一般使用一個(gè)漸變色，然后從等距中取像素線條要求簡(jiǎn)潔清晰、粗細(xì)一致，不能有多余的點(diǎn)，畫完以后要清理線條。一般來說，規(guī)整的布點(diǎn)出來的線段更加美觀?！鞠袼貓D標(biāo)線條的規(guī)范】像素線條規(guī)范示意圖像素線條要求簡(jiǎn)潔清晰、粗細(xì)一致，不能有多余的點(diǎn)，畫完以后要清顏色相同的點(diǎn)，布點(diǎn)的疏密，可以造成圖像在灰度上的差別，形成漸變。如果把點(diǎn)換成彩色的，還可以做出兩種顏色以上的漸變。【像素圖標(biāo)線條的漸變布點(diǎn)】像素的深淺漸變線條處理示范顏色相同的點(diǎn)，布點(diǎn)的疏密，可以造成圖像在灰度上的差別，形成漸UI設(shè)計(jì)-—?jiǎng)?chuàng)意表達(dá)與實(shí)踐教學(xué)課件2-11、當(dāng)圖標(biāo)很小的時(shí)候，勿加過多的沒有標(biāo)示性的冗余元素，而應(yīng)該使整體外觀造型清晰。2、圖標(biāo)的邊緣像素要處理得實(shí)一些，銳利一些，這樣的圖標(biāo)看起來比較精致。如果是整體風(fēng)格小像素圖標(biāo)，色板的配色區(qū)間要統(tǒng)一，有整體感?！鞠袼貓D標(biāo)繪制注意事項(xiàng)】像素圖標(biāo)的繪制細(xì)節(jié)1、當(dāng)圖標(biāo)很小的時(shí)候，勿加過多的沒有標(biāo)示性的冗余元素，而應(yīng)該【繪制立方體像素圖標(biāo)實(shí)例】1、像素畫線（1）使用直線工具設(shè)置為像素,取消勾選消除鋸齒，設(shè)為1px粗細(xì)。畫的時(shí)候，按軟件工具會(huì)提示角度，差不多是26.6?。筆者認(rèn)為直線工具不是那么可靠，如果角度不是完全正確的話，畫出來的線可能會(huì)變得很亂。（2）畫一個(gè)40×20px的巨型選區(qū)，使用鉛筆工具（設(shè)為1px大小）在左下角畫一個(gè)像素，然后按住Shift在右上角再畫一個(gè)像素。Photoshop會(huì)自動(dòng)在兩點(diǎn)之間畫一條直線。熟練操作后掌握了畫線經(jīng)驗(yàn)，就算不用選區(qū)也能畫出正確的線了?！纠L制立方體像素圖標(biāo)實(shí)例】1、像素畫線（3）用鉛筆工具畫兩個(gè)相鄰的像素，選中它們，按住Alt并使用鍵盤或者鼠標(biāo)移動(dòng)它們（后面成為Alt+移動(dòng)），使之在對(duì)角對(duì)齊。然后選中這兩組像素，重復(fù)上述步驟使之延長(zhǎng)。等角線的繪制（3）用鉛筆工具畫兩個(gè)相鄰的像素，選中它們，按住Alt并使用等角線條錯(cuò)誤示范注意：等角線條的繪制只要符合規(guī)則結(jié)構(gòu)的線條都可以，但是每一步伸展得越長(zhǎng)，就看起來越毛糙。等角線條規(guī)則結(jié)構(gòu)等角線條錯(cuò)誤示范注意：等角線條的繪制只要符合規(guī)則結(jié)構(gòu)的線條都2、繪制像素體矩形復(fù)制副本下移像素立方體2、繪制像素體矩形復(fù)制副本下移像素立方體2、繪制像素體像素立方體頂部填充顏色像素立方體完成2、繪制像素體像素立方體頂部填充顏色像素立方體完成【繪制卡通像素圖標(biāo)實(shí)例】繪制像素卡通圖標(biāo)的眼睛繪制像素卡通圖標(biāo)的嘴巴與頭頂【繪制卡通像素圖標(biāo)實(shí)例】繪制像素卡通圖標(biāo)的眼睛繪制像素卡通圖【繪制卡通像素圖標(biāo)實(shí)例】繪制像素卡通圖標(biāo)的右邊繪制像素卡通圖標(biāo)的