雙擊安裝字體，安裝后重啟PPT請安裝字體山東科技職業(yè)學(xué)院UI設(shè)計(jì)UIdesignUI設(shè)計(jì)UIdesign山東科技職業(yè)學(xué)院2.2圖標(biāo)的設(shè)計(jì)原則講課人：張?zhí)鞁蓪?dǎo)入隨著扁平化設(shè)計(jì)的發(fā)展趨勢，越來越注重圖標(biāo)的簡潔與寓意表達(dá)?，F(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)一。可為圖標(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ī)