圖標(biāo)設(shè)計(jì)與制作（全彩慕課版）-PPT1

第1章初識(shí)圖標(biāo)設(shè)計(jì)本章介紹：圖標(biāo)設(shè)計(jì)作為UI設(shè)計(jì)中重要的組成部分，可以幫助用戶更好地理解產(chǎn)品的功能，是營(yíng)造產(chǎn)品用戶體驗(yàn)的關(guān)鍵一環(huán)。本章對(duì)圖標(biāo)的基本概念、應(yīng)用場(chǎng)景、風(fēng)格類型、性格表現(xiàn)、設(shè)計(jì)軟件、設(shè)計(jì)原則以及設(shè)計(jì)流程進(jìn)行系統(tǒng)講解。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)圖標(biāo)設(shè)計(jì)有一個(gè)宏觀的認(rèn)識(shí)，有助于高效便利地進(jìn)行后續(xù)的圖標(biāo)設(shè)計(jì)工作。掌握?qǐng)D標(biāo)的基本概念掌握?qǐng)D標(biāo)的應(yīng)用場(chǎng)景了解圖標(biāo)的風(fēng)格類型掌握?qǐng)D標(biāo)的性格表現(xiàn)掌握?qǐng)D標(biāo)的設(shè)計(jì)原則掌握?qǐng)D標(biāo)的設(shè)計(jì)流程學(xué)習(xí)目標(biāo)圖標(biāo)（Icon）是具有明確指代含義的圖形。通過(guò)將某個(gè)詞語(yǔ)或概念設(shè)計(jì)成形象易辨的圖形，進(jìn)而降低用戶的理解成本、提高設(shè)計(jì)的整體美觀度。圖標(biāo)通常和文本相互搭配使用，兩者相互支撐，共同起到傳遞其中所要表達(dá)的內(nèi)容、信息以及意義的作用。1.1圖標(biāo)的基本概念特斯拉Model3車載系統(tǒng)圖標(biāo)1.2圖標(biāo)的應(yīng)用場(chǎng)景1.產(chǎn)品圖標(biāo)產(chǎn)品圖標(biāo)是體現(xiàn)產(chǎn)品品牌調(diào)性和特性的圖標(biāo)。該類圖標(biāo)通常出現(xiàn)在電腦桌面、手機(jī)桌面以及APP應(yīng)用市場(chǎng)等綜合場(chǎng)景。QQ音樂(lè)產(chǎn)品圖標(biāo)抖音短視頻產(chǎn)品圖標(biāo)支付寶產(chǎn)品圖標(biāo)1.2圖標(biāo)的應(yīng)用場(chǎng)景2.功能圖標(biāo)功能圖標(biāo)是圖形化的符號(hào)，具有明確功能。該類圖標(biāo)通常出現(xiàn)在界面中的導(dǎo)航欄以及標(biāo)簽欄等需要用戶進(jìn)行操作的界面模塊。QQ音樂(lè)App抖音App支付寶App1.2圖標(biāo)的應(yīng)用場(chǎng)景3.裝飾圖標(biāo)裝飾圖標(biāo)用于提升渲染氣氛，更多的是承擔(dān)視覺(jué)性作用。該類圖標(biāo)通常出現(xiàn)在引導(dǎo)頁(yè)、空狀態(tài)、彈窗、404頁(yè)等頁(yè)面進(jìn)行內(nèi)容點(diǎn)綴。好好住一起學(xué)App眾安保險(xiǎn)App1.3圖標(biāo)的風(fēng)格類型1.擬物風(fēng)格擬物化風(fēng)格的圖標(biāo)貼近現(xiàn)實(shí)，帶有漸變、高光、陰影等效果。iOS6時(shí)代達(dá)擬物風(fēng)格到了流行的巔峰，之后逐漸被扁平風(fēng)格趕超，現(xiàn)常用于工具類、游戲類等應(yīng)用圖標(biāo)。擬物風(fēng)格圖標(biāo)1.3圖標(biāo)的風(fēng)格類型2.扁平風(fēng)格扁平風(fēng)格圖標(biāo)與擬物風(fēng)格圖標(biāo)相反，很少有漸變、高光、陰影等效果。自2013年iOS7的推出扁平風(fēng)格成為了設(shè)計(jì)的主流趨勢(shì)，并且扁平化設(shè)計(jì)風(fēng)格圖標(biāo)可以分為線性、面性以及線面三種類型。經(jīng)過(guò)多年發(fā)展，設(shè)計(jì)師在線性、面形以及線面三種扁平化風(fēng)格圖標(biāo)的基礎(chǔ)上又設(shè)計(jì)衍生了其他風(fēng)格，這些風(fēng)格形式各異，富有特點(diǎn)并被廣泛運(yùn)用。扁平風(fēng)格圖標(biāo)1.3圖標(biāo)的風(fēng)格類型3.3D風(fēng)格3D風(fēng)格的圖標(biāo)立體有層次，由若干個(gè)幾何多邊體構(gòu)成。其制作軟件通常為3DMax和C4D，并常用于游戲中。扁平風(fēng)格圖標(biāo)1.3圖標(biāo)的風(fēng)格類型4.2.5D風(fēng)格2.5D風(fēng)格的圖標(biāo)是由物體的正面、光面和暗面三面組成，是一種模擬3D效果的圖標(biāo)。其制作軟件通常為Illustrator，并常用于引導(dǎo)頁(yè)、空狀態(tài)以及彈窗中。2.5D風(fēng)格圖標(biāo)1.4圖標(biāo)的性格表現(xiàn)1.圓角大小圓角的大小甚至有無(wú)會(huì)令圖標(biāo)表現(xiàn)出不同的性格，并影響用戶使用產(chǎn)品的感受。圓角不同大小的圖標(biāo)設(shè)計(jì)示意圖1.4圖標(biāo)的性格表現(xiàn)2.描邊粗細(xì)描邊的粗細(xì)通常是對(duì)線性圖標(biāo)的性格產(chǎn)生影響。描邊不同粗細(xì)的圖標(biāo)設(shè)計(jì)示意圖1.4圖標(biāo)的性格表現(xiàn)3.顏色搭配顏色搭配主要是通過(guò)顏色在數(shù)量上的搭配進(jìn)行圖標(biāo)性格的影響。不同顏色搭配的圖標(biāo)設(shè)計(jì)示意圖1.5圖標(biāo)的設(shè)計(jì)軟件圖標(biāo)的設(shè)計(jì)軟件主要有Photoshop、Illustrator、Sketch以及AdobeXD，如圖1-13所示。建議初學(xué)者先掌握Photoshop（簡(jiǎn)稱PS）和Illustrator（簡(jiǎn)稱AI），有條件購(gòu)買蘋果電腦的話還要掌握Sketch。圖標(biāo)的設(shè)計(jì)軟件1.6圖標(biāo)的設(shè)計(jì)原則1.可識(shí)別性?造型準(zhǔn)：圖標(biāo)設(shè)計(jì)時(shí)通過(guò)對(duì)信息與圖形的理解，應(yīng)進(jìn)行準(zhǔn)確的圖標(biāo)造型，以保證用戶理解圖標(biāo)需要傳達(dá)出來(lái)的含義。比如圖標(biāo)使用從真實(shí)世界簡(jiǎn)化而來(lái)的造型更容易識(shí)別。都是表達(dá)點(diǎn)贊，左邊的圖標(biāo)比右邊的圖標(biāo)更具有識(shí)別性1.6圖標(biāo)的設(shè)計(jì)原則?顏色對(duì)比：圖標(biāo)設(shè)計(jì)時(shí)通過(guò)調(diào)整色相、明度、飽和度，應(yīng)使用準(zhǔn)確的顏色，以保證圖標(biāo)和背景形成對(duì)比。比如圖標(biāo)本身使用黃色，背景通常采用較深的顏色才能看的更清楚。同樣的圖標(biāo)，黃色與黑色搭配更容易識(shí)別1.6圖標(biāo)的設(shè)計(jì)原則?夠清晰：圖標(biāo)設(shè)計(jì)時(shí)通過(guò)設(shè)置尺寸大小及坐標(biāo)位置，應(yīng)使用正確的數(shù)值，以保證像素完美。比如圖標(biāo)的坐標(biāo)位置為整數(shù)，尺寸為偶數(shù)會(huì)使圖標(biāo)更加清晰。準(zhǔn)確造型的圖標(biāo)造型不準(zhǔn)確的圖標(biāo)1.6圖標(biāo)的設(shè)計(jì)原則2.視覺(jué)統(tǒng)一?造型統(tǒng)一：圖標(biāo)造型必須要統(tǒng)一，造型統(tǒng)一包括使描邊一致，倒角一致、留白一致、角度一致以及透視一致等。造型統(tǒng)一會(huì)使圖標(biāo)更加精致。描邊粗細(xì)一致描邊粗細(xì)不一致1.6圖標(biāo)的設(shè)計(jì)原則?風(fēng)格統(tǒng)一：圖標(biāo)風(fēng)格必須要統(tǒng)一，在進(jìn)行設(shè)計(jì)時(shí)，我們通常會(huì)先將其中一個(gè)圖標(biāo)的風(fēng)格確立，然后再將該風(fēng)格延續(xù)使用到其他圖標(biāo)，以保證圖標(biāo)風(fēng)格一致。風(fēng)格統(tǒng)一會(huì)使圖標(biāo)更加整齊。風(fēng)格統(tǒng)一的圖標(biāo)1.6圖標(biāo)的設(shè)計(jì)原則3.簡(jiǎn)潔美觀?造型簡(jiǎn)潔：進(jìn)行圖標(biāo)設(shè)計(jì)時(shí)減少不必要的細(xì)節(jié)，降低復(fù)雜度，這樣設(shè)計(jì)出的圖標(biāo)會(huì)整體簡(jiǎn)潔，幫助用戶快速識(shí)別。造型簡(jiǎn)潔的圖標(biāo)造型復(fù)雜的圖標(biāo)1.6圖標(biāo)的設(shè)計(jì)原則?比例協(xié)調(diào)：圖標(biāo)設(shè)計(jì)時(shí)根據(jù)特定的規(guī)則進(jìn)行設(shè)計(jì)，以保證協(xié)調(diào)性，這樣設(shè)計(jì)出的圖標(biāo)才會(huì)呈現(xiàn)最佳狀態(tài)。比如當(dāng)內(nèi)形為外形的輪廓比為1:2時(shí)，圖標(biāo)的整體視覺(jué)效果最為平衡。內(nèi)形與外形不同比例的圖標(biāo)1.6圖標(biāo)的設(shè)計(jì)原則?風(fēng)格合理：圖標(biāo)設(shè)計(jì)使用合理的風(fēng)格，這樣設(shè)計(jì)出的圖標(biāo)才會(huì)更加符合產(chǎn)品需求并加強(qiáng)產(chǎn)品美觀度。比如進(jìn)行旅游出行行業(yè)的圖標(biāo)設(shè)計(jì)時(shí)，通常會(huì)在扁平化基礎(chǔ)面性圖標(biāo)之上再添加其他效果，以此打造出豐富絢麗的圖標(biāo)效果。使用漸變層次疊加面性圖標(biāo)較單色面性圖標(biāo)更加契合旅游出行產(chǎn)品。風(fēng)格不合理的圖標(biāo)風(fēng)格合理的圖標(biāo)1.6圖標(biāo)的設(shè)計(jì)原則?配色科學(xué)：圖標(biāo)設(shè)計(jì)一定要使用科學(xué)的配色，這樣設(shè)計(jì)出的圖標(biāo)才會(huì)更加符合表達(dá)含義并提升整體美觀性。比如進(jìn)行“美妝護(hù)膚”的圖標(biāo)設(shè)計(jì)時(shí)，通常會(huì)選擇甜美、溫柔的粉色以強(qiáng)調(diào)優(yōu)美感，進(jìn)行“電腦數(shù)碼”的圖標(biāo)設(shè)計(jì)時(shí)，通常會(huì)選擇冷靜、中性的藍(lán)色以強(qiáng)調(diào)科技感，再通過(guò)明度與純度的變化，使用獨(dú)特的顏色打造出精致的圖標(biāo)。配色不科學(xué)的圖標(biāo)配色科學(xué)的圖標(biāo)1.6圖標(biāo)的設(shè)計(jì)原則4.愉悅友好?品牌感：圖標(biāo)設(shè)計(jì)有時(shí)由于表達(dá)的意義相同，會(huì)導(dǎo)致不同產(chǎn)品中的圖標(biāo)設(shè)計(jì)普通甚至出現(xiàn)雷同。將品牌融入到圖標(biāo)的設(shè)計(jì)中，可以巧妙的讓圖標(biāo)具備差異性，擁有獨(dú)特的產(chǎn)品氣質(zhì)，避免抄襲情況。將品牌注入圖標(biāo)的閑魚App1.6圖標(biāo)的設(shè)計(jì)原則?生命力：圖標(biāo)設(shè)計(jì)注入擬人化的元素，同樣會(huì)令圖標(biāo)具備差異