圖標(biāo)創(chuàng)意設(shè)計(jì)課件

1、“圖標(biāo)（Icon），亦作圖示，廣義上指所有有指示作用的標(biāo)志，一般指電腦屏幕或手機(jī)的桌面上用來(lái)指示用戶運(yùn)行各種操作的圖像，作為字符顯示的重要輔助。“why?”“人們對(duì)各種軟件界面的美觀程度有了更高的要求一款設(shè)計(jì)合理優(yōu)秀的圖標(biāo)可以為網(wǎng)頁(yè)或軟件界面增色不少在UI界面設(shè)計(jì)中，圖標(biāo)設(shè)計(jì)占據(jù)很大的比例“UI即User Interface(用戶界面)的簡(jiǎn)稱。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。了解圖標(biāo)基礎(chǔ)知識(shí)掌握?qǐng)D標(biāo)創(chuàng)意原則12圖標(biāo)風(fēng)格賞析圖標(biāo)設(shè)計(jì)與軟件操作34CONTENTS圖標(biāo)

2、基礎(chǔ)知識(shí)圖標(biāo)創(chuàng)意設(shè)計(jì)01圖標(biāo)的設(shè)計(jì)和意義常見圖標(biāo)的尺寸圖標(biāo)分類246圖標(biāo)入門圖標(biāo)的像素分辨圖標(biāo)設(shè)計(jì)要素結(jié)構(gòu)135制作圖標(biāo)的軟件圖標(biāo)基礎(chǔ)知識(shí)CONTENTS”“.圖標(biāo)入門圖標(biāo)的概念“”相機(jī)圖標(biāo)“”創(chuàng)意圖標(biāo)“”Adobe CS5Adobe CS6“”1.1.1圖標(biāo)是什么？圖標(biāo)是具有明確指代含義的計(jì)算機(jī)圖形。其中桌面圖標(biāo)是軟件標(biāo)識(shí)，界面中的圖標(biāo)是功能標(biāo)識(shí)。它源自于生活中的各種圖形標(biāo)識(shí)，是計(jì)算機(jī)應(yīng)用圖形化的重要組成部分?！啊?.1.2圖標(biāo)與標(biāo)志的區(qū)別標(biāo)志（logo，又寫作標(biāo)識(shí)，二者讀音都是biozh），是表明事物特征的記號(hào)。具有高濃縮并快捷傳達(dá)信息、便于記憶的特征。標(biāo)志的應(yīng)用范圍很廣，軟硬件、網(wǎng)頁(yè)社交

3、場(chǎng)所、公共場(chǎng)合等“”標(biāo)志“”標(biāo)志“”圖標(biāo)應(yīng)用于計(jì)算機(jī)軟件等方面，包括：程序標(biāo)識(shí)、數(shù)據(jù)標(biāo)識(shí)、命令選擇、信號(hào)模式或切換開關(guān)、狀態(tài)指示等。一個(gè)圖標(biāo)是一個(gè)小的圖片或?qū)ο螅硪粋€(gè)文件、程序、網(wǎng)頁(yè)或命令。圖標(biāo)有助于用戶快速執(zhí)行命令和打開程序文件，單擊或雙擊圖標(biāo)可執(zhí)行一個(gè)命令。圖標(biāo)也用于在瀏覽器中快速展現(xiàn)內(nèi)容。1.1.2圖標(biāo)與標(biāo)志的區(qū)別“”云計(jì)算時(shí)代的到來(lái)，使得企業(yè)信息化這一話題又有了新的生命。在云端服務(wù)性能不斷增強(qiáng)之外，最顯著的特征就是在終端的精彩表現(xiàn)。單純用PC來(lái)使用ERP的時(shí)代一去不復(fù)返。以手機(jī)、平板電腦介質(zhì)為代表的移動(dòng)終端應(yīng)用將為企業(yè)信息化帶來(lái)巨大變革。移動(dòng)應(yīng)用圖標(biāo)便是其中最有力的代表。其中包括手

4、機(jī)PP和移動(dòng)應(yīng)用圖標(biāo)。1.1.3常見移動(dòng)應(yīng)用圖標(biāo)“”手機(jī)界面“”桌面上除了系統(tǒng)圖標(biāo)以外都是應(yīng)用程序圖標(biāo)。電腦應(yīng)用圖標(biāo)是另外裝的，并帶有小箭頭。常見的電腦應(yīng)用圖標(biāo)包括、媒體播放器、游戲、各種應(yīng)用軟件等1.1.常見電腦應(yīng)用圖標(biāo)“”電腦桌面“”圖標(biāo)“”圖標(biāo)“”命令選擇圖標(biāo)”“什么是圖標(biāo)?.圖標(biāo)設(shè)計(jì)的意義和作用“”1.1什么是圖標(biāo)？圖形用戶界面這個(gè)概念誕生于年施樂(lè)完成的第一個(gè)演示，使得計(jì)算機(jī)用戶界面從字符發(fā)展過(guò)渡到圖形時(shí)代。圖標(biāo)設(shè)計(jì)不僅能有效地為設(shè)計(jì)者傳播信息和內(nèi)涵，而且對(duì)有著重要的意義?！啊眻D標(biāo)廣義上指所有有指示作用的標(biāo)志，在中文中一般指電腦桌面上用來(lái)指示用戶運(yùn)行各種操作的圖像，是字符顯示的重要輔助

5、。圖標(biāo)多數(shù)是一個(gè)正方形的像素矩陣，大小從像素到像素不等，也有一些系統(tǒng)可以使用矢量的圖標(biāo)?！啊彪S著發(fā)展，圖標(biāo)總體呈現(xiàn)出時(shí)代性與個(gè)性化的視覺(jué)符號(hào)形態(tài)。“”1.2圖形的內(nèi)在含義？色彩設(shè)計(jì)構(gòu)圖和視覺(jué)風(fēng)格設(shè)計(jì)圖標(biāo)、CSS、結(jié)構(gòu)與表現(xiàn)分離“”1. 色彩設(shè)計(jì)“”1. 色彩設(shè)計(jì)由于UI的受眾十分廣泛且不確定，加上技術(shù)構(gòu)架的特點(diǎn)，我們不應(yīng)該歲最終用戶要求什么。因此，充分保證設(shè)計(jì)的易取性，即在各種復(fù)雜的環(huán)境下都要保證“可用”且不出現(xiàn)嚴(yán)重的視覺(jué)干擾，這是設(shè)計(jì)時(shí)的首先應(yīng)該把握好的一個(gè)尺度?！啊?. 構(gòu)圖和視覺(jué)風(fēng)格設(shè)計(jì)“”操作系統(tǒng)是桌面用戶界面設(shè)計(jì)色領(lǐng)頭軍，換言之，UI設(shè)計(jì)師在進(jìn)行桌面UI設(shè)計(jì)時(shí)，首先應(yīng)該考慮的就是操作

6、系統(tǒng)環(huán)境。而往往，某個(gè)特定軟件環(huán)境下的桌面應(yīng)用，UI也是有諸多限制的。這個(gè)限制，就是系統(tǒng)固有的交互風(fēng)格設(shè)定?！?. 構(gòu)圖和視覺(jué)風(fēng)格設(shè)計(jì)“”3. 圖標(biāo)、CSS、結(jié)構(gòu)與表現(xiàn)分離“”圖標(biāo)按其創(chuàng)作風(fēng)格，大致可分為兩種：失靈圖標(biāo)和像素圖標(biāo)。在沒(méi)有Alpha通道的幾年前，圖標(biāo)幾乎都是像素風(fēng)格的，硬而簡(jiǎn)潔，但是十分耐看。近年來(lái)，隨著Alpha通道逐漸普及，圖標(biāo)開始越來(lái)越絢麗、越來(lái)越寫實(shí)。設(shè)計(jì)師們?yōu)榱藙?chuàng)造更加絢麗的圖標(biāo)，逐漸改用矢量設(shè)計(jì)軟件來(lái)進(jìn)行創(chuàng)作。3. 圖標(biāo)、CSS、結(jié)構(gòu)與表現(xiàn)分離“”層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或

7、XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS“”CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言。CSS能夠根據(jù)不同使用者的理解能力，簡(jiǎn)化或者優(yōu)化寫法，針對(duì)各類人群，有較強(qiáng)的易讀性?！盋SS“”1.3圖標(biāo)設(shè)計(jì)的作用1. 美觀的圖標(biāo)可以給我們的設(shè)計(jì)工作增加亮點(diǎn)“圖標(biāo)可以為標(biāo)題添加視覺(jué)引導(dǎo)、可以用作按鈕、分隔頁(yè)面、做整體修飾、使網(wǎng)站顯

8、得更加專業(yè)、增強(qiáng)網(wǎng)站交互性?！啊薄?. 圖標(biāo)作為UI設(shè)計(jì)中的決定性因素，在內(nèi)容區(qū)使用可以為頁(yè)面增加“空隙”。”“3. 圖標(biāo)可以用來(lái)分隔內(nèi)容，讓布局不再生硬，并給讀者視覺(jué)引導(dǎo)?！啊薄跋袼?？.3圖標(biāo)的像素分辨“”1.3圖標(biāo)的像素分辨平常我們?cè)谑褂貌僮飨到y(tǒng)時(shí)，都會(huì)使用各種各樣的圖標(biāo)，系統(tǒng)在顯示一個(gè)圖標(biāo)時(shí)，會(huì)按照一定標(biāo)準(zhǔn)選擇圖表中最適合當(dāng)前顯示環(huán)境和狀態(tài)的圖像。圖標(biāo)設(shè)計(jì)中，分辨率越高效果越好。“1.3.1Windows XP 操作系統(tǒng)的圖標(biāo)像素分辨Windows XP 操作系統(tǒng)中，圖標(biāo)的圖像格式就是：真彩色（32位色深）、32*32像素大小?！薄啊?.3.2WIN7 操作系統(tǒng)的圖標(biāo)像素分辨超大圖標(biāo)：2

9、56X256大圖標(biāo)：128X128中圖標(biāo)：32X32平鋪：32X32列表、詳細(xì)信息：16X16“”1.3.3WIN8 操作系統(tǒng)“”1.3.4WIN10 操作系統(tǒng)“”1.3.5安卓系統(tǒng)的像素分辨“”Android 1.6用戶界面 “SIZE”分級(jí)160dpi-180dpi240dpi“”1.3.5安卓系統(tǒng)的像素分辨1. 圖片縮放2. 自動(dòng)定義像素尺寸位置3. 兼容更大尺寸的屏幕“128X128 256X256 128X128圖片縮放機(jī)遇當(dāng)前屏幕的精度，平臺(tái)自動(dòng)加載任何未經(jīng)縮放的限定尺寸和精度的圖片?！啊?.3.6iOS 7 操作系統(tǒng)的圖標(biāo)像素分辨每一個(gè)應(yīng)用程序都需要一個(gè)應(yīng)用程序圖標(biāo)和啟動(dòng)圖像。此

10、外，一些應(yīng)用程序需要自定義的圖標(biāo)來(lái)標(biāo)示特定于應(yīng)用程序的內(nèi)容、功能，或在導(dǎo)航欄、工具欄和標(biāo)簽?zāi)Ｊ綑凇！啊?.3.6iOS 7 操作系統(tǒng)的圖標(biāo)像素分辨”“SIZE？.4常見圖標(biāo)的標(biāo)準(zhǔn)尺寸“”.4常見圖標(biāo)的標(biāo)準(zhǔn)尺寸系統(tǒng)圖標(biāo)常用規(guī)格是：16X16、24X24、48X48、256X256Android屏幕圖標(biāo)尺寸規(guī)范，程序啟動(dòng)圖標(biāo)有Idpi(120dpi)小屏、mdpi(160dpi)中屏、hdpi(240dpi)大屏、xhdpi(320dpi)特大屏、16X16px、24X24px、48X48px、72X72 px、96X96 px.”“設(shè)計(jì)？.5圖標(biāo)的設(shè)計(jì)要素和結(jié)構(gòu)“”.5圖標(biāo)的設(shè)計(jì)要素和結(jié)構(gòu)點(diǎn) 線

11、 面”“圖標(biāo)設(shè)計(jì)中，組成圖標(biāo)色基本要素可演繹為點(diǎn)、線、面來(lái)檢查它們各自的特性與彼此的效用。而“點(diǎn)、線、面”作為最基本的構(gòu)成要素，在圖標(biāo)設(shè)計(jì)的造型中有各自的特點(diǎn)?！啊秉c(diǎn)不僅是數(shù)學(xué)的基本概念，也有大小、形狀、方向的細(xì)微變化的各種屬性。在圖標(biāo)的設(shè)計(jì)中，以點(diǎn)的形式制作效果通常起到畫龍點(diǎn)睛的作用?！薄霸趫D標(biāo)設(shè)計(jì)中線具有切割和領(lǐng)導(dǎo)的作用。在圖標(biāo)設(shè)計(jì)實(shí)踐中，在合理使用的基礎(chǔ)上，線可以更好地使圖標(biāo)達(dá)到預(yù)期的目標(biāo)。因?yàn)椴煌睦L圖工具使線元素有不同的特點(diǎn)，在圖標(biāo)設(shè)計(jì)中，正確使用不同地線條，是傳達(dá)感情的非常有效地方法?！薄懊嫱ǔＪ屈c(diǎn)和線的聚集，在具體的設(shè)計(jì)實(shí)踐中，面作為基本建模元素，也是每個(gè)元素之間的內(nèi)在聯(lián)系。例如

12、點(diǎn)既可以形成線的排列，也可以實(shí)現(xiàn)點(diǎn)集。“”.5圖標(biāo)型的把握?qǐng)D標(biāo)中型的把握即對(duì)于度的把握與調(diào)整，我們常用“對(duì)比和調(diào)和”這兩種方法進(jìn)行調(diào)整，從而達(dá)到我們想要的變化和統(tǒng)一?！啊蓖ǔ＃覀兲幚韴D標(biāo)時(shí)主要有兩種狀態(tài):大對(duì)比、小調(diào)和，即總體是對(duì)比的格局，局部調(diào)和。大調(diào)和小對(duì)比，總體上調(diào)和局部存在對(duì)比?！啊毙蜗筇卣鞯恼{(diào)和色彩的調(diào)和方向的調(diào)和“1.5.2 透視、光源與陰影圖標(biāo)色透視、光源與陰影直接關(guān)系到圖標(biāo)是否具有一定的立體效果。陰影形成的直接原因是光線，而光線來(lái)自光源。光源性質(zhì)不同，光線投射方式不同，陰影特點(diǎn)也就不一樣。“”光源分類：1. 平行光源2. 點(diǎn)光源（輻射光）3. 漫射光“”1.5.3元素的組合組

13、合元素的數(shù)量不要太多，多個(gè)元素組合成的圖標(biāo)，在縮小后容易造成識(shí)別困難的問(wèn)題，縮小后不易于識(shí)別。圖標(biāo)造型的主題應(yīng)重復(fù)反映其差異性?！啊?. 當(dāng)概念本身在現(xiàn)實(shí)世界有直接對(duì)應(yīng)的物理形態(tài)時(shí)，可以將此形態(tài)作為圖標(biāo)的主要的造型元素。如：日歷、地圖“”2. 當(dāng)概念表達(dá)一個(gè)抽象動(dòng)作時(shí)，可以在造型元素中使用表達(dá)其運(yùn)行機(jī)制的指示性的符號(hào)。如：同步、上傳、后退“”3. 當(dāng)概念表達(dá)一個(gè)抽象動(dòng)作時(shí)，可以在造型元素中使用與該動(dòng)作有關(guān)的道具。如：購(gòu)買用購(gòu)物車“”4. 在造型使用與圖標(biāo)語(yǔ)義相關(guān)的元素。如：Burning DiskHome Page“”5. 當(dāng)品牌因素至關(guān)重要時(shí)，在造型元素中使用品牌的語(yǔ)言。“”1.5.4視覺(jué)均衡圖標(biāo)的畫布空間應(yīng)符合平臺(tái)的設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)，在絕大部分系統(tǒng)平臺(tái)中（比如Android或iSO），圖標(biāo)畫布的標(biāo)準(zhǔn)規(guī)格是正方形，而長(zhǎng)方形的畫布規(guī)格非常罕見。“符合一般標(biāo)準(zhǔn)不符合標(biāo)準(zhǔn)整體性好整體性差“”1.5.5圖標(biāo)設(shè)計(jì)注意點(diǎn)1、構(gòu)思時(shí)利用發(fā)散性思維進(jìn)行創(chuàng)意聯(lián)想2、創(chuàng)作時(shí)注意圖標(biāo)設(shè)計(jì)的可識(shí)別性3、設(shè)計(jì)時(shí)注意圖標(biāo)設(shè)計(jì)的一致性（比如光源一致性）4、圖標(biāo)設(shè)計(jì)注意盡量避免文字的出現(xiàn)5、設(shè)計(jì)過(guò)程（首先：草稿繪圖，其次：電腦框架，再次：電腦上色）”“格式？.6圖標(biāo)分類“”1