雙擊安裝字體，安裝后重啟PPT請(qǐng)安裝字體山東科技職業(yè)學(xué)院交互界面設(shè)計(jì)UIdesignUI設(shè)計(jì)UIdesign山東科技職業(yè)學(xué)院1.5UI設(shè)計(jì)中圖片與排版講課人：王萃學(xué)習(xí)目的1.了解UI設(shè)計(jì)的圖片類別與格式2.了解UI設(shè)計(jì)的圖片比例3.掌握UI設(shè)計(jì)的圖片與排版UI設(shè)計(jì)的圖片類別與格式1.5.1UI設(shè)計(jì)的圖片類別與格式一、UI設(shè)計(jì)的圖片類別1.位圖位圖也稱柵格圖像，我們用數(shù)碼相機(jī)拍攝的照片、掃描儀掃描的圖片，及在計(jì)算機(jī)中抓取的圖像都屬于位圖。

位圖的特點(diǎn)是可以表現(xiàn)色彩的細(xì)微過渡，產(chǎn)生逼真的效果，但同時(shí)也會(huì)占用較多的存儲(chǔ)空間。正常顯示位圖放大600%的位圖

從圖可以看出位圖是由緊密排列的像素組成的，在Photoshop中處理的圖像一般是位圖。1.5.1UI設(shè)計(jì)的圖片類別與格式一、UI設(shè)計(jì)的圖片類別2.矢量圖矢量圖是圖形軟件通過數(shù)學(xué)的向量方式進(jìn)行計(jì)算得到的圖形，它與分辨率無(wú)關(guān)，可任意縮放、旋轉(zhuǎn)，而不影響圖像的清晰度和光滑度。從右圖可以看出，圖形依然光滑、清晰。因此，設(shè)計(jì)師常用矢量軟件制作圖標(biāo)、Logo等需要經(jīng)?？s放的圖形。正常顯示矢量圖放大600%的矢量圖1.5.1UI設(shè)計(jì)的圖片類別與格式二、圖片的格式圖片是UI設(shè)計(jì)中很常見的元素，根據(jù)圖片的用途將其可分為多種格式。PSDGIFJPG/JPEGPNGAI1.5.1UI設(shè)計(jì)的圖片類別與格式二、圖片的格式1.PSD

PSD是Adobe公司的圖形設(shè)計(jì)軟件Photoshop的專用格式。PSD文件可以存儲(chǔ)成RGB或CMYK模式，還能夠自定義顏色數(shù)并加以存儲(chǔ)，還可以保存Photoshop的圖層、通道、路徑等信息，是唯一能夠支持全部圖像色彩模式的格式。

PSD格式文件很少為其它軟件和工具所支持，在圖像制作完成后，通常需要轉(zhuǎn)化為一些比較通用的圖像格式，以便于輸出到其它軟件中繼續(xù)編輯。1.5.1UI設(shè)計(jì)的圖片類別與格式二、圖片的格式2.GIF

對(duì)于灰度圖像表現(xiàn)最佳；采用改進(jìn)的LZW壓縮算法處理圖像數(shù)據(jù)；調(diào)色板數(shù)據(jù)有通用調(diào)色板和局部調(diào)色板之分，有不同的顏色取值；

最多存儲(chǔ)256色。GIF比較適用于色彩較少的圖片，比如卡通造型、公司標(biāo)志等等。1.5.1UI設(shè)計(jì)的圖片類別與格式二、圖片的格式3.JPEGJPEG格式也稱JPG格式，支持CMYK、RGB、灰度等多種顏色模式，多用于網(wǎng)頁(yè)素材圖像。它采用有損壓縮的算法，從而使文件體積更小，下載時(shí)間更短。JPEG格式適合色彩豐富，尺寸較大的圖片。1.5.1UI設(shè)計(jì)的圖片類別與格式二、圖片的格式4.PNGPNG格式采用無(wú)損壓縮，支持透明背景顯示，iOS系統(tǒng)和Android系統(tǒng)都使用PNG格式作為控件和圖標(biāo)的標(biāo)準(zhǔn)格式。它是目前界面設(shè)計(jì)的主流圖片格式。PNG8適合作為顏色簡(jiǎn)單，尺寸較小的圖片格式；PNG24適合作為APP中各種自定義的控件圖標(biāo)等。1.5.1UI設(shè)計(jì)的圖片類別與格式二、圖片的格式5.AIAI格式文件是一種矢量圖形文件，適用于Adobe公司的Illustrator軟件的輸出格式，與PSD格式文件相同，AI文件也是一種分層文件，用戶可以對(duì)圖形內(nèi)所存在的層進(jìn)行操作，所不同的是AI格式文件是基于矢量輸出，可在任何尺寸大小下按最高分辨率輸出，而PSD文件是基于位圖輸出。與AI格式類似基于矢量輸出的格式還有EPS、WMF、CDR等。UI設(shè)計(jì)的圖片比例1.5.2UI設(shè)計(jì)的圖片比例01圖片的使用規(guī)范了解圖片的格式后，設(shè)計(jì)人員還需要掌握?qǐng)D片的使用規(guī)范，包括圖片的比例與尺寸規(guī)范。圖片的比例圖片的尺寸規(guī)范在UI設(shè)計(jì)中，對(duì)于圖片的比例沒有嚴(yán)格的規(guī)定，設(shè)計(jì)人員可根據(jù)需要進(jìn)行調(diào)整。App個(gè)人中心界面的用戶頭像大小多為144px×144px和120px×120px個(gè)人資料界面的用戶頭像大小多為96px×96px消息列表界面的用戶頭像大小多為80px×80px帖子詳情頁(yè)界面的用戶頭像大小多為44px×44px和60px×60px。1.5.2UI設(shè)計(jì)的圖片比例02常見圖片長(zhǎng)寬比例1:1是比較常見的圖片設(shè)計(jì)比例，相同的長(zhǎng)寬比例將構(gòu)圖變得簡(jiǎn)單而規(guī)范，常用于產(chǎn)品、頭像、特寫等展示模塊。1比11.5.2UI設(shè)計(jì)的圖片比例02常見圖片長(zhǎng)寬比例4:3是常用圖片比例之一，通常該比例的圖片會(huì)作為界面的主體，或在文章中以插圖的形式出現(xiàn)。4比31.5.2UI設(shè)計(jì)的圖片比例02常見圖片長(zhǎng)寬比例

該比例的圖片可以呈現(xiàn)觀影般的視覺效果，是很多新聞資訊或視頻播放APP常用的尺寸之一，能帶給用戶開闊的視覺體驗(yàn)。16比9UI設(shè)計(jì)的圖片與排版1.5.3UI設(shè)計(jì)的圖片與排版01平衡構(gòu)圖一般情況下，為保證界面平衡，設(shè)計(jì)人員會(huì)使用左圖右文、左文右圖、上圖下文、左中右三分構(gòu)圖等多種構(gòu)圖方式，以使界面整體的輕重感保持平衡。1.5.3UI設(shè)計(jì)的圖片與排版02放射構(gòu)圖放射式構(gòu)圖是指以主體物為核心，將核心作為視覺的中心點(diǎn)并向四周擴(kuò)散的一種構(gòu)圖方式。這種構(gòu)圖方式有利于凸顯位于界面中間內(nèi)容或功能點(diǎn)，同時(shí)產(chǎn)生一種導(dǎo)向作用，將用戶的注意力快速聚集到展現(xiàn)的主體物上。1.5.3UI設(shè)計(jì)的圖片與排版03九宮格構(gòu)圖九宮格構(gòu)圖也稱井字構(gòu)圖，是指在畫面上橫、豎各畫兩條與邊平行、等分的直線，將畫面分成9個(gè)相等的方塊。UI設(shè)計(jì)中的九宮格構(gòu)圖主要運(yùn)用于App的分類界面，可以讓功能分區(qū)更加明確和突出。1.5.3UI設(shè)計(jì)的圖片與排版04三角構(gòu)圖三角形構(gòu)圖是以3個(gè)視覺中心為支點(diǎn)位置來(lái)構(gòu)成的幾何面，能讓界面保持平衡穩(wěn)定。其形式既可以是正三角形，也可以倒三角形或者斜三角形。下圖所示的3個(gè)界面即采用了三角形構(gòu)圖。1.5.3UI設(shè)計(jì)的圖片與排版05F型構(gòu)圖

F形構(gòu)圖常用于Banner界面中，能讓標(biāo)題更加吸引視線，使整個(gè)界面更有張力，產(chǎn)品信息更為簡(jiǎn)單、明確。F形的構(gòu)圖方式靈活多樣，也符合用戶的視覺審美要求。如圖所示的網(wǎng)站Banner界面中即采用了F形構(gòu)圖。1.5.3UI設(shè)計(jì)的圖片與排版06S型構(gòu)圖在進(jìn)行UI設(shè)計(jì)時(shí)，對(duì)用戶的視覺流向的預(yù)測(cè)非常重要，可以讓用戶獲得更加自然、舒適的閱讀體驗(yàn)。S形構(gòu)圖在引導(dǎo)視線的作用上優(yōu)勢(shì)非常明顯。它可以將圖片和文字完美地結(jié)合在一起，再搭配大量的留白，給用戶一種輕松、舒暢的感覺。1.5.3UI設(shè)計(jì)的圖片與排版07滿版構(gòu)圖以圖片作為主體或背景鋪滿整個(gè)畫面，常搭配文字信息或圖標(biāo)（icon）修飾，常用于登錄界面。1.5.3UI設(shè)計(jì)的圖片與排版08通欄構(gòu)圖圖片與整體頁(yè)面的寬度相同，而高度為其幾分之一甚至更小的一種圖片排版方式。用于強(qiáng)調(diào)和展示重要的