雙擊安裝字體，安裝后重啟PPT請(qǐng)安裝字體山東科技職業(yè)學(xué)院UI設(shè)計(jì)UIdesignUI設(shè)計(jì)UIdesign山東科技職業(yè)學(xué)院2.3圖標(biāo)的設(shè)計(jì)規(guī)范講課人：張?zhí)鞁蓪?dǎo)入本節(jié)主要講解圖標(biāo)的設(shè)計(jì)規(guī)范，包括兩部分內(nèi)容：尺寸相關(guān)概念、圖標(biāo)尺寸規(guī)范。尺寸相關(guān)概念移動(dòng)設(shè)備的更新速度很快，市場(chǎng)上的機(jī)型越來越多，這導(dǎo)致同一頁面往往需要適配多個(gè)不同尺寸的機(jī)型。圖標(biāo)是頁面中的重要元素，因此了解尺寸相關(guān)概念對(duì)于圖標(biāo)設(shè)計(jì)來說很有必要2.3.1尺寸相關(guān)概念一、屏幕尺寸屏幕尺寸是以屏幕的對(duì)角線長(zhǎng)度為依據(jù)，以英寸（1英寸≈2.54cm）為單位來表示的。目前市場(chǎng)上的手機(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)可以分為：?jiǎn)?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í)際尺寸是外國(guó)圓角矩形尺寸。通過確定圖標(biāo)的實(shí)際尺寸，可以規(guī)范一組圖標(biāo)的視覺比例，從而