UI設(shè)計(jì)UIdesignUI設(shè)計(jì)UIdesign2.1圖標(biāo)的基礎(chǔ)知識(shí)導(dǎo)入隨著手機(jī)更新?lián)Q代的速度不斷加快，手機(jī)功能不斷強(qiáng)大，為APP帶來了重要的發(fā)展契機(jī)，APP設(shè)計(jì)已經(jīng)成為移動(dòng)UI設(shè)計(jì)的一個(gè)重要方向，而圖標(biāo)又是APP的重要組成元素，本節(jié)主要詳解圖標(biāo)的相關(guān)基礎(chǔ)知識(shí)，包括圖標(biāo)的基本概念、圖標(biāo)的分類、圖標(biāo)的風(fēng)格，為以后的設(shè)計(jì)之路打下堅(jiān)實(shí)基礎(chǔ)。導(dǎo)入在APP設(shè)計(jì)中，圖標(biāo)是非常重要的一部分。圖標(biāo)是引導(dǎo)用戶進(jìn)入應(yīng)用的窗口，圖標(biāo)的設(shè)計(jì)最好讓用戶一眼便能獲知應(yīng)用的功能，而不需要讓用戶過多猜測。圖標(biāo)設(shè)計(jì)不僅能夠有效的為設(shè)計(jì)者傳播應(yīng)用程序的信息與內(nèi)涵，而且對(duì)APP設(shè)計(jì)有著重要的意義。導(dǎo)入目前圖標(biāo)設(shè)計(jì)已經(jīng)發(fā)展成為一個(gè)巨大的產(chǎn)業(yè)，因?yàn)樗鼈兡芙oAPP設(shè)計(jì)帶來許多便利。圖標(biāo)可以為標(biāo)題添加視覺引導(dǎo)，可以用作按鈕，可以用來分隔頁面，可以對(duì)頁面做整體修飾，增強(qiáng)頁面的交互性。圖標(biāo)的基本概念通過圖標(biāo)的起源、圖標(biāo)的含義、圖標(biāo)與標(biāo)志的區(qū)別三個(gè)方面系統(tǒng)的講解圖標(biāo)的基本概念2.1.1圖標(biāo)的基本概念圖標(biāo)歷史久遠(yuǎn)：從上古時(shí)代的圖騰，到現(xiàn)在具有更多含義和功能的各種圖標(biāo)。應(yīng)用范圍廣泛：一個(gè)國家的圖標(biāo)就是國旗；一件商品的圖標(biāo)是注冊(cè)商標(biāo)；軍隊(duì)的圖標(biāo)是軍旗；學(xué)校的圖標(biāo)是校徽；旅游景區(qū)內(nèi)的引導(dǎo)圖標(biāo)。這些圖標(biāo)存在的價(jià)值是提供信息指引，幫助人們找到需要的信息。一、圖標(biāo)的起源一、圖標(biāo)的起源現(xiàn)在說起圖標(biāo)，一般指智能設(shè)備中代表某個(gè)含義的圖形，智能設(shè)備中的圖標(biāo)其實(shí)就是把現(xiàn)實(shí)生活中的圖標(biāo)遷移到界面當(dāng)中，在界面中圖標(biāo)傳達(dá)信息引導(dǎo)用戶操作，用戶根據(jù)接收到的信息進(jìn)行操作。圖標(biāo)的存在是為了快速準(zhǔn)確地傳達(dá)信息給操作的用戶并且引導(dǎo)用戶做出反饋行為。2.1.1圖標(biāo)的基本概念二、圖標(biāo)的含義1.廣義上的圖標(biāo)指具有指代意義的圖形符號(hào)，高度濃縮、快捷傳達(dá)信息、便于記憶。應(yīng)用范圍廣范，軟硬件網(wǎng)頁社交場所公共場合無所不在。2.1.1圖標(biāo)的基本概念二、圖標(biāo)的含義2.狹義上的圖標(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)頁，或命令。圖標(biāo)有助于用戶快速執(zhí)行命令和打開程序文件。2.1.1圖標(biāo)的基本概念二、圖標(biāo)的含義3.UI圖標(biāo)UI圖標(biāo)設(shè)計(jì)就是將一定的含義轉(zhuǎn)化為圖形，把文字語言“翻譯”成圖形語言，來達(dá)到標(biāo)識(shí)數(shù)據(jù)、引導(dǎo)選擇、切換開關(guān)、狀態(tài)指示等目的。UI圖標(biāo)具有高度濃縮并快捷傳達(dá)信息、便于記憶的特點(diǎn)。是用戶與APP連接的橋梁。2.1.1圖標(biāo)的基本概念二、圖標(biāo)的含義公共場所圖標(biāo)指示W(wǎng)indow10桌面圖標(biāo)2.1.1圖標(biāo)的基本概念A(yù)PP圖標(biāo)網(wǎng)頁圖標(biāo)二、圖標(biāo)的含義2.1.1圖標(biāo)的基本概念三、圖標(biāo)與標(biāo)志的區(qū)別什么是標(biāo)志?標(biāo)志設(shè)計(jì)是將具體的事物、事件、場景和抽象的精神、理念、方向通過特殊的圖形固定下來，使人們?cè)诳吹綐?biāo)志的同時(shí)，自然地產(chǎn)生聯(lián)想，從而對(duì)企業(yè)產(chǎn)生認(rèn)同。標(biāo)志與企業(yè)的經(jīng)營緊密相關(guān)，是企業(yè)日常經(jīng)營活動(dòng)、廣告宣傳、文化建設(shè)、對(duì)外交流必不可少的元素。2.1.1圖標(biāo)的基本概念三、圖標(biāo)與標(biāo)志的區(qū)別什么是圖標(biāo)?圖標(biāo)應(yīng)用于計(jì)算機(jī)軟件方面。圖標(biāo)有套標(biāo)準(zhǔn)的大小和屬性格式，且通常是小尺寸的。每個(gè)圖標(biāo)都含有多張顯示相同內(nèi)容的圖片，每一張圖片具有不同的尺寸和發(fā)色數(shù)。一個(gè)圖標(biāo)就是一套相似的圖片，每一張圖片有不同的格式。圖標(biāo)含有透明區(qū)域，在透明區(qū)域內(nèi)可以透出圖標(biāo)下的桌面背景。一個(gè)圖標(biāo)實(shí)際上是多張不同格式的圖片的集合體，并且還包含了一定的透明區(qū)域。因?yàn)橛?jì)算機(jī)操作系統(tǒng)和顯示設(shè)備的多樣性，導(dǎo)致了圖標(biāo)的大小需要有多種格式。2.1.1圖標(biāo)的基本概念圖標(biāo)的分類按作用分類，圖標(biāo)可分為功能型和桌面型兩類2.1.2圖標(biāo)的分類一、功能型圖標(biāo)應(yīng)用于APP界面內(nèi)，分為功能圖標(biāo)和分類圖標(biāo)。

功能圖標(biāo)常用于頁面中的標(biāo)簽欄和導(dǎo)航欄，它們參與用戶的交互，是頁面不可或缺的組成部分。

分類圖標(biāo)位于頁面的內(nèi)容區(qū)域，是APP分類頁面的入口，尺寸更大，表現(xiàn)形式也更豐富，其目的是吸引用戶目光，裝飾頁面，引導(dǎo)用戶。導(dǎo)航欄分類圖標(biāo)標(biāo)簽欄2.1.2圖標(biāo)的分類二、桌面型圖標(biāo)也稱系統(tǒng)圖標(biāo)、啟動(dòng)圖標(biāo)、APP圖標(biāo)，它位于應(yīng)用商店或移動(dòng)設(shè)備桌面，是APP的門面。要具有清晰的可識(shí)別性，區(qū)分于其他圖標(biāo)的獨(dú)特性和美觀性。反映APP特點(diǎn)，能與用戶建立情感連接，給用戶留下良好的第一印象。桌面型圖標(biāo)圖標(biāo)的風(fēng)格圖標(biāo)的風(fēng)格大體可以分為六種，分別是漸變風(fēng)格、剪影風(fēng)格、長投影風(fēng)格、卡通風(fēng)格、輕質(zhì)感風(fēng)格和擬真風(fēng)格2.1.3圖標(biāo)的風(fēng)格一、漸變風(fēng)格多為單色漸變，顏色過渡清新自然，是目前的主流設(shè)計(jì)風(fēng)格之一，如下圖所示。除用于圖標(biāo)外，漸變風(fēng)格可使用的場景非常多，如APP中的背景圖、按鈕等。2.1.3圖標(biāo)的風(fēng)格二、長投影風(fēng)格通常會(huì)以純色作為圖標(biāo)主體背景，該風(fēng)格色彩對(duì)比度大，視覺沖擊力強(qiáng)，通過長投影突出主體，從而創(chuàng)造鮮明的層次感和空間感，常用于APP頁面中的分類圖標(biāo)。2.1.3圖標(biāo)的風(fēng)格三、輕質(zhì)感風(fēng)格層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)。這類圖標(biāo)具有一定的立體感，能給人輕盈、簡潔、精致的感覺。2.1.3圖標(biāo)的風(fēng)格四、卡通風(fēng)格特點(diǎn)是可愛，富有親和力，設(shè)計(jì)簡潔而精致，視覺效果突出，但風(fēng)格小眾，使用范圍比較局限，常用于女性或二次元（二維，二次元源于日語）APP中。2.1.3圖標(biāo)的風(fēng)格五、擬真風(fēng)格

iOS7以前，擬真風(fēng)格是UI設(shè)計(jì)的主流，這類圖標(biāo)的特點(diǎn)是通過細(xì)節(jié)和光影還原現(xiàn)實(shí)物品的造型和質(zhì)感，能給用戶極強(qiáng)的代入感，快速領(lǐng)會(huì)圖標(biāo)表達(dá)的意圖。2.1.3圖標(biāo)的風(fēng)格六、剪影風(fēng)格特點(diǎn)是簡約、概括，視覺識(shí)別度良好，設(shè)計(jì)感強(qiáng)，常被用于APP的功能型圖標(biāo)中。剪影圖標(biāo)可分為線性、面性和線面結(jié)合三種，線性為未選中狀態(tài)，面性、線面結(jié)合為選中狀態(tài)。2.1.3圖標(biāo)的風(fēng)格七、剪影風(fēng)格圖標(biāo)——線性圖標(biāo)1.定義線性圖標(biāo)即通過統(tǒng)一的線條進(jìn)行繪制，表達(dá)圖標(biāo)的功能。2.應(yīng)用線性圖標(biāo)經(jīng)常用于APP界面底部的標(biāo)簽欄、導(dǎo)航欄的功能按鈕以及界面中的分類。線性圖標(biāo)應(yīng)用于APP界面底部標(biāo)簽欄線性圖標(biāo)應(yīng)用于導(dǎo)航欄2.1.3圖標(biāo)的風(fēng)格七、剪影風(fēng)格圖標(biāo)——線性圖標(biāo)3.分類線性圖標(biāo)形象簡練、設(shè)計(jì)輕盈，又可以細(xì)分為圓角圖標(biāo)、直角圖標(biāo)、高光式圖標(biāo)、斷點(diǎn)圖標(biāo)、不透明度圖標(biāo)、雙色圖標(biāo)、一筆畫圖標(biāo)。線性圖標(biāo)應(yīng)用于APP界面底部標(biāo)簽欄線性圖標(biāo)應(yīng)用于導(dǎo)航欄2.1.3圖標(biāo)的風(fēng)格七、剪影風(fēng)格圖標(biāo)——線性圖標(biāo)3.分類圓角圖標(biāo)圓角圖標(biāo)柔和、親切一般用于母嬰、兒童以及女性等方面內(nèi)容圓角圖標(biāo)（圖片來源花瓣）直角圖標(biāo)直角圖標(biāo)明快、果斷一般用于金融以及工具等方面內(nèi)容直角圖標(biāo)（圖片來源花瓣）2.1.3圖標(biāo)的風(fēng)格七、剪影風(fēng)格圖標(biāo)——線性圖標(biāo)3.分類高光式圖標(biāo)高光式圖標(biāo)較傳統(tǒng)一般用于銀行等方面內(nèi)容斷點(diǎn)圖標(biāo)斷點(diǎn)圖標(biāo)有趣、豐富、一般用于表現(xiàn)年輕、可愛等方面內(nèi)容高光式圖標(biāo)（由愛沙尼亞設(shè)計(jì)師MartV創(chuàng)作）斷點(diǎn)圖標(biāo)（圖片來源追波，由中國設(shè)計(jì)師WilburXu創(chuàng)作）2.1.3圖標(biāo)的風(fēng)格七、剪影風(fēng)格圖標(biāo)——線性圖標(biāo)3.分類不透明度圖標(biāo)不透明度圖標(biāo)有層次，適用范圍較廣雙色圖標(biāo)雙色圖標(biāo)由兩種不同色彩的線搭配構(gòu)成適用于表現(xiàn)可愛、活潑等方面的內(nèi)容由印度設(shè)計(jì)師SarathJayaprakash創(chuàng)作由美國設(shè)計(jì)師JakobScott創(chuàng)作2.1.3圖標(biāo)的風(fēng)格七、剪影風(fēng)格圖標(biāo)——線性圖標(biāo)3.分類一筆畫圖標(biāo)一筆畫圖標(biāo)較文藝，同時(shí)難度系數(shù)比較高一般用于文化、藝術(shù)等方面內(nèi)容圖片來源Pinterest2.1.3圖標(biāo)的風(fēng)格八、剪影風(fēng)格圖標(biāo)——面性圖標(biāo)1.定義面性圖標(biāo)即填充圖標(biāo)。2.應(yīng)用面性圖標(biāo)經(jīng)常用于APP界面底部的標(biāo)簽欄、圖標(biāo)的選中狀態(tài)、以及界面中的金剛區(qū)和界面中的重要分類。由印度設(shè)計(jì)師AbhinavAgrawal創(chuàng)作2.1.3圖標(biāo)的風(fēng)格八、剪影風(fēng)格圖標(biāo)——面性圖標(biāo)3.分類面性圖標(biāo)整體飽滿、形象突出，又可以細(xì)分為單色面性圖標(biāo)、不透明色塊面性圖標(biāo)、多色面性圖標(biāo)。面性圖標(biāo)應(yīng)用于分類2.1.3圖標(biāo)的風(fēng)格3.分類單色面性圖標(biāo)單色面性圖標(biāo)是最基本的面性圖標(biāo)一般用于APP界底部的標(biāo)簽欄以及圖標(biāo)的選中狀態(tài)。八、剪影風(fēng)格圖標(biāo)——面性圖標(biāo)由多倫多設(shè)計(jì)師DmitriLitvinov創(chuàng)作2.1.3圖標(biāo)的風(fēng)格3.分類不透明色塊面性圖標(biāo)不透明色塊面性圖標(biāo)有層次一般用于APP界面中的金剛區(qū)起到運(yùn)營效果。八、剪影風(fēng)格圖標(biāo)——面性圖標(biāo)由多倫多設(shè)計(jì)師DmitriLitvinov創(chuàng)作2.1.3圖標(biāo)的風(fēng)格3.分類多色面性圖標(biāo)多色面性圖標(biāo)酷炫、多彩一般用于生活等方面內(nèi)容。八、剪影風(fēng)格圖標(biāo)——面性圖標(biāo)圖片來源追波，由設(shè)計(jì)師超創(chuàng)作2.1.3圖標(biāo)的風(fēng)格九、剪影風(fēng)格圖標(biāo)——線面結(jié)合圖標(biāo)1.定義線面結(jié)合圖標(biāo)是線性圖標(biāo)和面性圖標(biāo)的集合。2.應(yīng)用線面結(jié)合圖標(biāo)經(jīng)常用于趣味性APP界面中底部的標(biāo)簽欄、界面中的分類或是引導(dǎo)頁與彈框中。圖片來源CreativeMarket2.1.3圖標(biāo)的風(fēng)格九、剪影風(fēng)格圖標(biāo)——線面結(jié)合圖標(biāo)圖片來源CreativeMarket3.分類線面結(jié)合圖標(biāo)充滿活力、形象有趣，又可以細(xì)分為點(diǎn)綴填充、錯(cuò)位填充、全部填充。2.1.3圖標(biāo)的風(fēng)格九、剪影風(fēng)格圖標(biāo)——線面結(jié)合圖標(biāo)3.分類點(diǎn)綴填充點(diǎn)綴填充圖標(biāo)，填充的面性約占圖標(biāo)的30%一般用于APP界面中的底部標(biāo)簽欄。由多倫多設(shè)計(jì)師DmitriLitvinov創(chuàng)作2.1.3圖標(biāo)的風(fēng)格九、剪影風(fēng)格圖標(biāo)——線面結(jié)合圖標(biāo)3.分類錯(cuò)位填充錯(cuò)位填充圖標(biāo)，面與線進(jìn)行錯(cuò)位一般用于APP界面中的底部標(biāo)簽欄。由中國設(shè)計(jì)師Vic創(chuàng)作2.1.3圖標(biāo)的風(fēng)格九、剪影風(fēng)格圖標(biāo)——線面結(jié)合圖標(biāo)3.分類全部填充全部填充圖標(biāo)，充實(shí)、飽滿一般用于APP界面中的分類或是引導(dǎo)頁與彈框中。由立陶宛產(chǎn)品設(shè)計(jì)師MantasSuktus創(chuàng)作2.1.3圖標(biāo)的風(fēng)格此處加入動(dòng)畫：體現(xiàn)導(dǎo)圖內(nèi)容，從左到右分為四層，依次展現(xiàn)每層內(nèi)容，展現(xiàn)過程中加入圖片（圖片位于前面幾頁P(yáng)PT）UI設(shè)計(jì)UIdesign2.2圖標(biāo)的設(shè)計(jì)原則導(dǎo)入隨著扁平化設(shè)計(jì)的發(fā)展趨勢，越來越注重圖標(biāo)的簡潔與寓意表達(dá)。現(xiàn)在各種各樣的圖標(biāo)充斥在不同的App中，那么怎樣的圖標(biāo)才設(shè)計(jì)師應(yīng)該追求的方向呢？評(píng)價(jià)一個(gè)圖標(biāo)設(shè)計(jì)的好壞的標(biāo)準(zhǔn)是什么呢？學(xué)習(xí)目的1.圖標(biāo)的設(shè)計(jì)原則2.圖標(biāo)的設(shè)計(jì)要點(diǎn)圖標(biāo)的設(shè)計(jì)原則表意性原則、美觀性原則、視覺統(tǒng)一性原則、與場景協(xié)調(diào)原則、原創(chuàng)性原則2.2.1圖標(biāo)的設(shè)計(jì)原則一、表意性原則表意性原則也叫可識(shí)別原則。圖標(biāo)在很多時(shí)候可以代替文字，所以識(shí)別性非常重要。圖標(biāo)要準(zhǔn)確快速地表達(dá)含義，否則就不能快速準(zhǔn)確地引導(dǎo)用戶操作。所以表意性原則是圖標(biāo)設(shè)計(jì)的靈魂，也是圖標(biāo)設(shè)計(jì)的第一原則。當(dāng)我們看到一個(gè)圖標(biāo)時(shí)，如圖所示的鍵盤、一些圖標(biāo)、房子、鑰匙、電話、垃圾箱等，可識(shí)別性強(qiáng)、簡單直觀，即使不認(rèn)識(shí)字，也能立即理解圖標(biāo)的含義。2.2.1圖標(biāo)的設(shè)計(jì)原則一、表意性原則象形的圖標(biāo)設(shè)計(jì)體現(xiàn)了表意性原則：圖標(biāo)與生活中的實(shí)物相同或相似，人們自然聯(lián)想到生活中的實(shí)物，就能明白它代表的含義，這樣圖標(biāo)就可以準(zhǔn)確表達(dá)相應(yīng)的內(nèi)容。象形的圖標(biāo)設(shè)計(jì)2.2.1圖標(biāo)的設(shè)計(jì)原則二、美觀性原則在UI界面中，圖標(biāo)是點(diǎn)睛之筆，一個(gè)圖標(biāo)的美觀度決定了用戶對(duì)這個(gè)圖標(biāo)的觀感，進(jìn)而影響到對(duì)整個(gè)應(yīng)用的態(tài)度。帥氣、美觀的圖標(biāo)會(huì)大大增加用戶點(diǎn)擊的概率。不同類別的美觀圖標(biāo)效果2.2.1圖標(biāo)的設(shè)計(jì)原則三、視覺統(tǒng)一性原則一套好的圖標(biāo)，視覺上要協(xié)調(diào)統(tǒng)一，有自己的風(fēng)格。視覺的統(tǒng)一提升了設(shè)計(jì)品質(zhì)，也會(huì)提升用戶的滿意度。怎樣實(shí)現(xiàn)視覺統(tǒng)一呢？有一個(gè)思路可以供大家參考：是線條的，還是實(shí)體填充的?是平面的，還是立體的?是簡約的，還是精細(xì)的?是單色的，還是多彩的?是古典的，還是現(xiàn)代的?是寫實(shí)的，還是抽象的？......2.2.1圖標(biāo)的設(shè)計(jì)原則三、視覺統(tǒng)一性原則視覺統(tǒng)一需要在形體造型、風(fēng)格表現(xiàn)、節(jié)奏平衡上進(jìn)行統(tǒng)一。1.形體造型上，需要根據(jù)圖標(biāo)設(shè)計(jì)規(guī)范對(duì)圖標(biāo)各部分進(jìn)行統(tǒng)一。具體的規(guī)范會(huì)在后面進(jìn)行深入剖析。形體造型統(tǒng)一的圖標(biāo)形體造型未統(tǒng)一的圖標(biāo)2.2.1圖標(biāo)的設(shè)計(jì)原則三、視覺統(tǒng)一性原則視覺統(tǒng)一需要在形體造型、風(fēng)格表現(xiàn)、節(jié)奏平衡上進(jìn)行統(tǒng)一。2.風(fēng)格表現(xiàn)上，得益于移動(dòng)互聯(lián)網(wǎng)的發(fā)展，圖標(biāo)的風(fēng)格非常多樣化?？梢愿鶕?jù)應(yīng)用場景和目標(biāo)而選擇合適的風(fēng)格。APP界面中風(fēng)格統(tǒng)一的圖標(biāo)2.2.1圖標(biāo)的設(shè)計(jì)原則三、視覺統(tǒng)一性原則視覺統(tǒng)一需要在形體造型、風(fēng)格表現(xiàn)、節(jié)奏平衡上進(jìn)行統(tǒng)一。3.節(jié)奏平衡上，由于圖標(biāo)造型的豐富，可以使用網(wǎng)格規(guī)范達(dá)到節(jié)奏協(xié)調(diào)、視覺統(tǒng)一的效果。在規(guī)范下設(shè)計(jì)出視覺平衡的圖標(biāo)2.2.1圖標(biāo)的設(shè)計(jì)原則四、與場景協(xié)調(diào)原則圖標(biāo)與場景協(xié)調(diào)的原則：在UI界面制作中，圖標(biāo)通常是系列存在的（如手機(jī)主題界面），設(shè)計(jì)圖標(biāo)時(shí)要考慮到圖標(biāo)是否適合當(dāng)前的場景。中國風(fēng)風(fēng)格圖標(biāo)設(shè)計(jì)2.2.1圖標(biāo)的設(shè)計(jì)原則四、與場景協(xié)調(diào)原則如中國風(fēng)風(fēng)格的UI界面，應(yīng)當(dāng)加入與中國傳統(tǒng)文化相關(guān)的元素來制作圖標(biāo)，如京劇、油紙傘、月琴等等。如果放置一些不相關(guān)的元素，圖標(biāo)就會(huì)顯得不協(xié)調(diào)。課程思政：堅(jiān)定文化自信，弘揚(yáng)中華優(yōu)秀傳統(tǒng)文化，建設(shè)文化強(qiáng)國，夯實(shí)中華民族偉大復(fù)興之路。中國風(fēng)風(fēng)格圖標(biāo)設(shè)計(jì)2.2.1圖標(biāo)的設(shè)計(jì)原則四、與場景協(xié)調(diào)原則建設(shè)社會(huì)主義文化強(qiáng)國要弘揚(yáng)中華優(yōu)秀傳統(tǒng)文化，筑牢中華民族的“根”和“魂”。我國有著悠久的歷史和燦爛的文明，要深入挖掘中華優(yōu)秀傳統(tǒng)文化的內(nèi)涵，把握時(shí)代需求、適應(yīng)時(shí)代變化，繼承中華優(yōu)秀傳統(tǒng)文化之精髓，為中華優(yōu)秀傳統(tǒng)文化在新時(shí)代綻放光彩提供不竭動(dòng)力。中國風(fēng)風(fēng)格圖標(biāo)設(shè)計(jì)此處加入動(dòng)畫動(dòng)畫腳本：1.本頁及上頁課程思政文字

2.展示中國優(yōu)秀傳統(tǒng)文化（剪紙、泥塑、風(fēng)箏、年畫等）3.依次展示右邊12個(gè)圖標(biāo)2.2.1圖標(biāo)的設(shè)計(jì)原則五、原創(chuàng)性原則原創(chuàng)性是APP長遠(yuǎn)發(fā)展的前提。一般的設(shè)計(jì)者總是熱衷于素材網(wǎng)站中的素材標(biāo)，使用它們省時(shí)省力，下載即用，但這會(huì)涉及到版權(quán)問題，還會(huì)使產(chǎn)品自身失去個(gè)性。圖標(biāo)設(shè)計(jì)要點(diǎn)桌面型圖標(biāo)設(shè)計(jì)要點(diǎn)和功能型圖標(biāo)設(shè)計(jì)要點(diǎn)2.2.2圖標(biāo)設(shè)計(jì)要點(diǎn)一、桌面型圖標(biāo)設(shè)計(jì)要點(diǎn)桌面型圖標(biāo)可以說是APP的門面，它給用戶的第一印象非常重要，用戶可以此初步評(píng)判APP的品質(zhì)、作用和可靠性等。設(shè)計(jì)桌面型圖標(biāo)時(shí)應(yīng)注意以下幾點(diǎn)。2.2.2圖標(biāo)設(shè)計(jì)要點(diǎn)一、桌面型圖標(biāo)設(shè)計(jì)要點(diǎn)1.避免使用照片將照片作為主體直接出現(xiàn)在圖標(biāo)中，會(huì)給用戶一種敷衍了事的感覺，也會(huì)被拒絕上架。在圖標(biāo)設(shè)計(jì)中，設(shè)計(jì)師可以提取照片中的紋理、細(xì)節(jié)等應(yīng)用于擬物圖標(biāo)中。2.2.2圖標(biāo)設(shè)計(jì)要點(diǎn)一、桌面型圖標(biāo)設(shè)計(jì)要點(diǎn)2.避免運(yùn)用大量文字當(dāng)產(chǎn)品隱喻比較抽象時(shí)，可直接使用文字作為圖標(biāo)的主體，如右圖所示。注意：圖標(biāo)主體文字不宜超過4個(gè)，否則會(huì)降低圖標(biāo)識(shí)別度。2.2.2圖標(biāo)設(shè)計(jì)要點(diǎn)一、桌面型圖標(biāo)設(shè)計(jì)要點(diǎn)3.圖形應(yīng)具有獨(dú)特性除了要體現(xiàn)APP的功能外，還要保證圖標(biāo)是獨(dú)一無二的。Pinterest和Path這兩款A(yù)PP有很多共同點(diǎn)，如主色都為紅色，英文首字母相同，圖標(biāo)都用字母“P”作為主體，導(dǎo)致它們圖標(biāo)極為相似，新用戶有時(shí)難以分辨。2.2.2圖標(biāo)設(shè)計(jì)要點(diǎn)一、桌面型圖標(biāo)設(shè)計(jì)要點(diǎn)4.表意明確圖標(biāo)應(yīng)表意明確，讓用戶第一眼看到就明白它是干什么的。例如圖標(biāo)中出現(xiàn)耳機(jī)、音符，就會(huì)聯(lián)想這個(gè)APP是關(guān)于音樂。2.2.2圖標(biāo)設(shè)計(jì)要點(diǎn)一、桌面型圖標(biāo)設(shè)計(jì)要點(diǎn)5.慎重用色每個(gè)顏色都有其自身的象征意義，設(shè)計(jì)師需要根據(jù)產(chǎn)品氣質(zhì)和用戶群體選擇合適的顏色，不可為了博人眼球在圖標(biāo)中加入無關(guān)雜色。2.2.2圖標(biāo)設(shè)計(jì)要點(diǎn)二、功能型圖標(biāo)設(shè)計(jì)要點(diǎn)設(shè)計(jì)功能型圖標(biāo)時(shí)應(yīng)注意以下三點(diǎn)：簡潔：簡單易懂。功能圖標(biāo)的基本功能是輔助信息分類。減少不必要的設(shè)計(jì)，確保人與機(jī)器的交互過程更快速、更方便。統(tǒng)一：風(fēng)格統(tǒng)一?？蔀閳D標(biāo)添加相同的細(xì)節(jié)，如統(tǒng)一為圖標(biāo)作斷線或圓角處理。規(guī)則：圖形規(guī)則有序。2.2.2圖標(biāo)設(shè)計(jì)要點(diǎn)二、功能型圖標(biāo)設(shè)計(jì)要點(diǎn)設(shè)計(jì)功能型圖標(biāo)時(shí)應(yīng)注意以下三點(diǎn)：32像素和36像素單位是App中常見的功能圖標(biāo)尺寸，目前的觸屏手機(jī)最佳范圍是44像素，但如果將圖標(biāo)充滿44像素，會(huì)太過于飽滿。常規(guī)做法是，肉眼能識(shí)別的視覺尺寸采用36像素，而肉眼看不到的切圖點(diǎn)擊范圍采用44像素。UI設(shè)計(jì)UIdesign2.3圖標(biāo)的設(shè)計(jì)規(guī)范導(dǎo)入本節(jié)主要講解圖標(biāo)的設(shè)計(jì)規(guī)范，包括兩部分內(nèi)容：尺寸相關(guān)概念、圖標(biāo)尺寸規(guī)范。尺寸相關(guān)概念移動(dòng)設(shè)備的更新速度很快，市場上的機(jī)型越來越多，這導(dǎo)致同一頁面往往需要適配多個(gè)不同尺寸的機(jī)型。圖標(biāo)是頁面中的重要元素，因此了解尺寸相關(guān)概念對(duì)于圖標(biāo)設(shè)計(jì)來說很有必要2.3.1尺寸相關(guān)概念一、屏幕尺寸屏幕尺寸是以屏幕的對(duì)角線長度為依據(jù)，以英寸（1英寸≈2.54cm）為單位來表示的。目前市場上的手機(jī)屏幕尺寸主要有3.5英寸、4.0英寸、4.7英寸、5.0英寸、5.5英寸、6.0英寸和7.0英寸等，其中4.7英寸（iPhone6/7/8）的手機(jī)是主流機(jī)型。2.3.1尺寸相關(guān)概念二、屏幕分辨率屏幕分辨率表示顯示器所能顯示的像素?cái)?shù)量，分辨率越高，畫面越精細(xì)，通常用屏寬像素×屏高像素來描述屏幕分辨率。以iPhone7的屏幕尺寸為例，其屏幕寬為750像素，高為1334像素，因此其屏幕分辨率為750×1334像素，頁面中圖標(biāo)尺寸為120×120像素，包括標(biāo)簽欄的圖標(biāo)在內(nèi)，一共可容納28個(gè)圖標(biāo)（7排4列）。圖標(biāo)尺寸規(guī)范移動(dòng)智能設(shè)備圖標(biāo)的設(shè)計(jì)要遵循一定的尺寸規(guī)范，分別從iOS系統(tǒng)尺寸規(guī)范、Android系統(tǒng)尺寸規(guī)范、網(wǎng)格規(guī)范三個(gè)方面講解。2.3.2i0S系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范每一個(gè)應(yīng)用程序需要一個(gè)應(yīng)用程序圖標(biāo)和啟動(dòng)圖像。隨著iOS的升級(jí)，一大堆新尺寸的應(yīng)用程序圖標(biāo)規(guī)格又出來了。除了要兼容低版本的iOS，還要兼容高版本，一個(gè)App做下來，要生成十幾種不同大小的App圖標(biāo)。iOS上的圖標(biāo)可以分為：在蘋果應(yīng)用商店下使用圖標(biāo)應(yīng)用程序圖標(biāo)主屏幕圖標(biāo)Spotlight搜索結(jié)果圖標(biāo)標(biāo)簽欄圖標(biāo)工具欄和導(dǎo)航欄圖標(biāo)2.3.2i0S系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范一、iPhone圖標(biāo)設(shè)計(jì)尺寸設(shè)備AppStore應(yīng)用程序主屏幕Spotlight搜索標(biāo)簽欄工具欄和導(dǎo)航欄iPhone6-6S-7Plus(@3x)1024×1024180×180152×15287×8775×7566×66iPhone6-6S-7(@2x)1024×1024120×120152×15258×5875×7544×44iPhone5-5C-5S(@2x)1024×1024120×120152×15258×5875×7544×44iPhone4-4s(@2x)1024×1024120×120114×11458×5875×7544×44iPhone3G、3GS&iPodTouch第一代、第二代、第三代1024×1024120×12057×5729×2938×3830×30iPhone圖標(biāo)設(shè)計(jì)尺寸（單位：像素）2.3.2i0S系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范一、iPhone圖標(biāo)設(shè)計(jì)尺寸iPhone圖標(biāo)設(shè)計(jì)圖示（單位：像素）2.3.2i0S系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范二、iPad圖標(biāo)設(shè)計(jì)尺寸設(shè)備AppStore應(yīng)用程序主屏幕Spotlight搜索標(biāo)簽欄工具欄和導(dǎo)航欄iPad3-4-5-6-Air-Air2-mini21024×1024180×180144×144100×10050×5044×44iPad1-21024×102490×9072×7250×5025×2522×22iPadMini1024×102490×9072×7250×5025×2522×22iPad圖標(biāo)設(shè)計(jì)尺寸（單位：像素）2.3.2i0S系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范二、iPad圖標(biāo)設(shè)計(jì)尺寸iPad圖標(biāo)設(shè)計(jì)圖示（單位：像素）2.3.3安卓系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范安卓系統(tǒng)中的圖標(biāo)：表示一個(gè)應(yīng)用程序的功能、內(nèi)容，為未操作狀態(tài)和應(yīng)用提供第一印象的小幅圖片。在為應(yīng)用程序設(shè)計(jì)圖標(biāo)時(shí)，設(shè)備是多種多樣的，圖標(biāo)在屏幕中占用的面積非常小，通過圖標(biāo)可以為用戶和APP之間提供快速且直觀的表現(xiàn)形式。iOS上的圖標(biāo)可以分為：啟動(dòng)圖標(biāo)操作欄圖標(biāo)上下文圖標(biāo)系統(tǒng)通知圖標(biāo)2.3.3安卓系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范屏幕大小啟動(dòng)圖標(biāo)操作欄圖標(biāo)上下文圖標(biāo)系統(tǒng)通知圖標(biāo)(白色)最細(xì)筆畫320×48048×4832×3216×1624×24不小于2480×800、480×854、540×96072×7248×4824×2436×36不小于3720×128048×4832×3216×1624×24不小于21080×1920144×14496×9648×4872×72不小于6安卓系統(tǒng)的屏幕圖標(biāo)尺寸規(guī)范如下圖所示安卓系統(tǒng)的屏幕圖標(biāo)尺寸規(guī)范(單位:像素)2.3.4圖標(biāo)尺寸規(guī)范課程思政：沒有規(guī)矩，不成方圓黨章就是黨的根本大法，是全黨必須遵循的總規(guī)矩?！?xí)近平《認(rèn)真學(xué)習(xí)黨章嚴(yán)格遵守黨章》（2012年11月16日），《人民日?qǐng)?bào)》2012年11月20日刊登。黨章是我們黨的根本大法，也是黨內(nèi)最大的規(guī)矩、管總的規(guī)矩。只有以此為根本遵循，才能畫出黨的事業(yè)最大的圓。同學(xué)們作為學(xué)生，有學(xué)生的規(guī)矩；作為老師也有老師的規(guī)矩，在規(guī)矩范圍內(nèi)辦事才能畫出我們最大的圓。不僅圖標(biāo)設(shè)計(jì)有其尺寸規(guī)范，我們的學(xué)習(xí)生活也有特定的尺寸規(guī)范。網(wǎng)格規(guī)范2.3.5網(wǎng)格規(guī)范圖標(biāo)的外觀取決于其功能、用廣和外任環(huán)境等多種因案，我們不可能要求每個(gè)圖標(biāo)的寬高比例都相同，即便比例尺寸相同，不同形狀的視覺大小也會(huì)有所區(qū)別，如寬高相同的正方形和圓形，正方形的視覺比例就會(huì)大于圓形。為了保證每個(gè)圖林的視覺大小統(tǒng)一，無論是iOS系統(tǒng)還是Android系統(tǒng)中的圖標(biāo)，都可以使用網(wǎng)格規(guī)范進(jìn)行制作。2.3.5網(wǎng)格規(guī)范在網(wǎng)格規(guī)范中：網(wǎng)格外邊線是圖標(biāo)的實(shí)際尺寸。網(wǎng)格內(nèi)正方形、橫向矩形、縱向矩形和圓形是圖形尺寸。網(wǎng)格邊線與藍(lán)色區(qū)域之間為安全空間。為使一組圖標(biāo)的視覺尺寸統(tǒng)一，除特殊形狀外，網(wǎng)格中繪制的圖形都應(yīng)頂邊制作。實(shí)際尺寸安全空間制作圖標(biāo)時(shí)應(yīng)注意圖標(biāo)的實(shí)際尺寸和安全空間。2.3.5網(wǎng)格規(guī)范實(shí)際尺寸實(shí)際尺寸是圖標(biāo)輸出時(shí)的尺寸，以圖中的“齒輪”圖標(biāo)為例，其主體圖形是齒輪。但實(shí)際尺寸是外國圓角矩形尺寸。通過確定圖標(biāo)的實(shí)際尺寸，可以規(guī)范一組圖標(biāo)的視覺比例，從而達(dá)到視覺統(tǒng)一。安全空間安全空間是實(shí)際尺寸與主體圖形之間的空間，根據(jù)實(shí)際需要，該空間內(nèi)可添加與主體圖形呼應(yīng)的裝飾圖形，也可不作處理。實(shí)際尺寸安全空間UI設(shè)計(jì)UIdesign實(shí)訓(xùn)2卡通風(fēng)格圖標(biāo)設(shè)計(jì)實(shí)訓(xùn)2卡通風(fēng)格圖標(biāo)設(shè)計(jì)知識(shí)回顧特點(diǎn)是可愛，富有親和力，設(shè)計(jì)簡潔而精致，視覺效果突出，但風(fēng)格小眾，使用范圍比較局限，常用于女性或二次元（二維，二次元源于日語）APP中?？ㄍL(fēng)格作品展示本案例通過繪制如下圖所示的卡通風(fēng)格定位圖標(biāo)，學(xué)習(xí)卡通風(fēng)格圖標(biāo)的一般繪制流程。實(shí)訓(xùn)2卡通風(fēng)格圖標(biāo)設(shè)計(jì)卡通風(fēng)格定位圖標(biāo)本圖標(biāo)屬于卡通MBE風(fēng)格MBE風(fēng)格特點(diǎn)1.粗線描邊，且邊角圓滑，描邊斷點(diǎn)2.色彩溢出，色彩鮮明，無漸變3.卡通形象，結(jié)構(gòu)簡單實(shí)訓(xùn)2卡通風(fēng)格圖標(biāo)設(shè)計(jì)MBE風(fēng)格特點(diǎn)1.粗線描邊，且邊角圓滑，描邊斷點(diǎn)2.色彩溢出，色彩鮮明，無漸變3.卡通形象，結(jié)構(gòu)簡單實(shí)訓(xùn)