UI設計UIdesignUI設計UIdesign1.1UI基礎知識學習目的1.了解UI設計的基本概念2.了解UI設計發(fā)展與展望UI設計的基本概念1.1.1什么是UI設計什么是UI設計？UI即UserInterface的簡稱泛指系統(tǒng)和用戶之間交互的媒介。實現(xiàn)信息內(nèi)部形式與用戶接受形式轉換的關鍵。1.用戶研究（UserStudy）研究如何提高產(chǎn)品的可用性；發(fā)掘用戶的潛在需求，為技術創(chuàng)新提供新思路。2.交互設計（InteractionDesign）研究產(chǎn)品交流過程中用戶的心理模式和行為模式，設計出合理的交互方式。3.用戶界面（UserInterface）用戶界面設計師是負責界面外觀的關鍵所在。1.1.2UI設計的分類1.移動UI設計2.PC端UI設計3.游戲UI設計4.其它UI設計1.1.2UI設計的分類01移動UI設計移動UI設計：針對移動設備（手機、平板電腦、智能手表等）的界面設計。此處二維動畫：體現(xiàn)UI設計的分類，分為四類，依次展現(xiàn)每類，展現(xiàn)過程中加入圖片（圖片位于5-7頁PPT）1.1.2UI設計的分類02

PC端UI設計PC端UI設計：是針對電腦的界面設計。相對于移動UI設計，PC端屏幕尺寸大，設計規(guī)范較少，因此界面的視覺效果更為突出?？煞譃閮纱箢愐皇蔷W(wǎng)頁設計；二是應用軟件的界面設計。此處二維動畫：體現(xiàn)UI設計的分類，分為四類，依次展現(xiàn)每類，展現(xiàn)過程中加入圖片（圖片位于5-7頁PPT）1.1.2UI設計的分類03游戲UI設計游戲UI設計：是指游戲界面設計。按平臺分類，常見的游戲類型包括手游、端游和掌機游戲等。入門要求較高，要求設計師有較高的美術基礎和審美能力。此處二維動畫：體現(xiàn)UI設計的分類，分為四類，依次展現(xiàn)每類，展現(xiàn)過程中加入圖片（圖片位于5-7頁PPT）1.1.2UI設計的分類04其他UI設計其他UI設計：載體通常是一些小眾或目前正處于發(fā)展階段的智能設備，如車載設備、VR（虛擬現(xiàn)實技術）設備、AR（增強現(xiàn)實技術）設備等。此處二維動畫：體現(xiàn)UI設計的分類，分為四類，依次展現(xiàn)每類，展現(xiàn)過程中加入圖片（圖片位于5-7頁PPT）1.1.3移動UI設計原則視覺美觀是移動UI設計最基本的要求。1.視覺美觀一致性是每個優(yōu)秀APP都具備的特點。一個APP中往往存在多個界面，大到外觀風格，小到組件、動效和交互行為，都應保持一致。2.一致性1.1.3移動UI設計原則3.突出主題1）表現(xiàn)形式要符合主題需要設計界面時，只是追求花哨的表現(xiàn)形式，容易過于強調(diào)創(chuàng)意而忽略主要內(nèi)容；只追求功能和內(nèi)容，容易采用平淡無奇的表現(xiàn)形式，都會使界面蒼白無力。只有二者有機結合，讓表現(xiàn)形式為內(nèi)容服務，才能突出主題。2）確保元素必要性設計界面時，要確保每個元素都有存在的意義，不要單純?yōu)檎故驹O計理念和新技術添加一些毫無意義的元素，這會使用戶感到莫名其妙，弱化主題效果。1.1.3移動UI設計原則4.為用戶考慮1）符合用戶操作習慣無論是單手操作還是雙手操作，用戶的操作習慣都是有章可循的，掌握用戶的操作習慣，并將其用于界面設計中，能給用戶更好的操作體驗。拇指熱區(qū)拇指熱區(qū)是指用戶在單手操作時，拇指的觸摸范圍，該范圍分為易操作區(qū)、伸展區(qū)和不易操作區(qū)。1.1.3移動UI設計原則4.為用戶考慮1）符合用戶操作習慣無論是單手操作還是雙手操作，用戶的操作習慣都是有章可循的，掌握用戶的操作習慣，并將其用于界面設計中，能給用戶更好的操作體驗。內(nèi)容在上，操作在下這一原則讓使用者在操作過程中手指始終處于界面下方，不會出現(xiàn)手指遮擋內(nèi)容的情況，如圖所示。設計師應根據(jù)按鈕功能對按鈕位置進行合理安排，避免用戶因不小心碰觸而增加操作步驟，如圖所示。1.1.3移動UI設計原則4.為用戶考慮2）簡化操作步驟用戶使用APP是為了解決問題，設計師應把握這點，盡量減少無用的操作步驟，通過簡潔的操作流程提升用戶體驗。例如，想在微信中更換頭像，只需點擊頭像，在照片庫中選擇圖像即可。3）容錯性反饋優(yōu)秀的APP應確保用戶的任何操作都具備可逆選項或危險提示。當用戶做出刪除、調(diào)整、不恰當或錯誤操作時，應當有危險提示介入。1.1.3移動UI設計原則5.快速加載1）優(yōu)化圖片在不影響功能和美觀的前提下，能用代碼實現(xiàn)的效果就盡量不用圖片。在保證質量的前提下盡量壓縮圖片，以確保用戶瀏覽順暢，縮短加載時間。2）提供進度條或等待動畫合理利用功能較多的APP啟動時的加載時間，加入進度條和當前操作狀態(tài)提示，如右圖所示。UI設計的發(fā)展與展望1.1.4UI設計的發(fā)展與展望將來，UI界面設計會更加注重產(chǎn)品功能性，在對界面操作化繁為簡的同時，將產(chǎn)品品牌精神與設計風格完美結合，界面的操作會貼近人們的生活習慣和使用習慣，更加智能化，以便于給人們的操作帶來更大的便利。UI設計行業(yè)未來發(fā)展的三個趨勢：倡導簡約主義結合品牌精神創(chuàng)造四維世界1.1.4UI設計的發(fā)展與展望01倡導簡約主義移動界面較小的屏幕迫使設計者必須把那些花俏的修飾和多余的內(nèi)容去掉，優(yōu)先保證對業(yè)務和客戶體驗影響的功能的呈現(xiàn)。1.1.4UI設計的發(fā)展與展望02結合品牌精神

UI設計在一定程度上掌握著整個產(chǎn)品效果的靈魂和精髓，因此，在簡化流程追求簡約風的同時也得實際結合產(chǎn)品的品牌精神，將其融入產(chǎn)品中，讓設計成為一個活的品牌代表，張揚個性設計的同時，將品牌植入人們的視野里。1.1.4UI設計的發(fā)展與展望03創(chuàng)造四維世界設計產(chǎn)品不斷更新?lián)Q代的過程中，UI設計師開始意識到，數(shù)字世界跟現(xiàn)實本來就有差異，應該是用戶直接操作屏幕或者對象，因此沒有必要再堅持把現(xiàn)實生活中的對象按照原樣照搬進數(shù)字空間里面，他們要達成的目標是一個用戶無論走到哪里都可見的四維世界。UI設計UIdesign1.2UI設計流程學習目的1.掌握UI設計的設計流程UI設計的流程1.2UI設計流程UI設計是一個承上啟下的角色這一點都不為過，在如今這個視覺體驗傳到的社會里，UI設計角色愈來愈重。UI設計制作，一般都要經(jīng)過“需求分析—設計制作—方案修改—測試改進”四個階段。1.2UI設計流程UI設計不光要研究產(chǎn)品的外形、圖形界面，還要研究產(chǎn)品的交互設計，并且確立交互模型、交互規(guī)范，同時要測試交互設計的合理性及圖形設計的美觀性等。也就是說，UI設計包括了界面設計、交互設計與用戶研究3個部分。因此，UI設計師的基本工作流程可以分為以下幾個階段。01需求分析階段UI設計測試改進階段方案修改階段需求分析階段設計制作階段測試反饋修改完善Who界面設計WhereWhy交互設計1.2UI設計流程在UI設計開始之前，設計人員需要先分析設計需求，整理思路，然后才能開展有針對性的設計。分析需求可以從以下3個方面入手。01需求分析階段市場需求用戶需求產(chǎn)品需求1.2UI設計流程需求分析完成后，即可對UI設計內(nèi)容進行視覺定位，一般可從以下3個方面入手。01需求分析階段色彩與字體的選擇設計風格界面布局和構圖1.2UI設計流程在需求分析的基礎上，我們進入設計制作階段。設計包括界面設計和交互設計，且要形成設計方案。界面設計當然以美觀為主，要有創(chuàng)新，在同類產(chǎn)品中能夠脫穎而出。02設計制作階段1.2UI設計流程界面設計包括啟動界面、主界面、詳情界面等代表性界面的設計。交互設計要分析產(chǎn)品必需的功能、內(nèi)容，根據(jù)需要制作低保真模型或高保真模型，也可通過原型工具來規(guī)劃流程。如果有條件的話，可以在設計時，多設計出幾套不同風格的方案用于備選。02設計制作階段1.2UI設計流程02設計制作階段原型圖是設計人員對產(chǎn)品的最初設想，主要對產(chǎn)品內(nèi)容和結構進行粗略的布局。當明確視覺定位后，設計人員即可進行原型圖的繪制，下圖所示為兩種不同類型原型圖效果。1.2UI設計流程03繪制效果圖1.搜集素材圖片、視頻和音效的搜集文字類信息的搜集網(wǎng)上搜集、實物拍攝和繪制。文字類信息主要是根據(jù)產(chǎn)品的特性、功能來進行收集。1.2UI設計流程03繪制效果圖2.進行UI設計設計人員可先根據(jù)原型圖的要求繪制主要形狀，并按照設計要求添加或繪制素材，進行界面的制作即可。右圖所示為使用Photoshop進行UI設計的效果。1.2UI設計流程03繪制效果圖3.標注與切圖一般來說，設計人員都會使用一些專業(yè)的標注工具來提升工作效率，如MarkMan（馬克鰻）、PxCook（像素大廚）等工具，而切圖工具則可直接選擇Photoshop。下圖所示為使用PxCook進行標注的效果。1.2UI設計流程04方案修改階段設計方案提交給客戶后，需要與客戶進行溝通，根據(jù)客戶的需求來修改設計。04方案修改階段在設計方案通過并交付以后，就可以將產(chǎn)品推向市場了。但設計并沒有結束，還需要跟蹤了解用戶的測試與反饋。UI設計UIdesign1.3UI設計規(guī)范學習目的1.掌握UI設計規(guī)范的原則2.掌握UI設計規(guī)范的內(nèi)容3.了解不同系統(tǒng)的UI設計規(guī)范UI設計規(guī)范的原則1.3.1UI設計規(guī)范的原則沒有規(guī)矩，不成方圓，UI設計也不例外。設計師不能單憑個人的主觀經(jīng)驗做設計，要想提升用戶體驗、高效且順暢地完成設計任務，就需要遵守一些設計原則。很多時候，設計原則是為了解決統(tǒng)一性和效率問題，避免開發(fā)過程中重復、煩瑣的低效工作。1.3.1UI設計規(guī)范的原則UI設計規(guī)范的一致性原則表現(xiàn)在產(chǎn)品界面的各個方面，如在設計布局界面時，需要使標題字體、內(nèi)容字體、鏈接字體等保持一致；在進行交互設計時，界面中的交互組件、交互流程、用戶行為、交互樣式、界面元素等應保持一致。一致性高效性與準確性建立通用的設計細節(jié)規(guī)范必不可少，這不僅能夠降低設計人員的溝通成本，提高設計的準確性，還遵循了UI設計規(guī)范的高效性和準確性原則。UI設計規(guī)范的內(nèi)容1.3.2UI設計規(guī)范的內(nèi)容01圖標設計規(guī)范圖標是具有高度概括性的、用于傳達視覺信息的小尺寸圖像，常與文本搭配使用。圖標不僅能傳達出豐富的信息，還能提升整個界面美感和信息可識別性。同時，有的圖標還具有交互性和功能性，用戶點擊這些圖標會執(zhí)行特定的操作，觸發(fā)相應的功能。1.3.2UI設計規(guī)范的內(nèi)容02色彩使用規(guī)范色彩使用規(guī)范主要是確定產(chǎn)品UI設計中所能使用的色彩種類。如圖所示為界面中文字的色彩使用規(guī)范示例。1.3.2UI設計規(guī)范的內(nèi)容03字體和行間距的設計規(guī)范

UI設計中對不同字號下的行間距要求也會有不同，一般來說，行間距的大小為字號的1~1.5倍，當然設計人員可根據(jù)實際需要標注出產(chǎn)品界面中不同文字內(nèi)容對應的行間距大小。1.3.2UI設計規(guī)范的內(nèi)容04按鈕設計規(guī)范設計人員應將按鈕的設計規(guī)范進行文字說明，包括將按鈕尺寸大小、按鈕圓角大小、描邊大小，以及按鈕中的文字大小等標識清楚。此外，按鈕的視覺體現(xiàn)主要包括默認、點擊和禁用3種狀態(tài)。1.3.2UI設計規(guī)范的內(nèi)容05圖片設計規(guī)范圖片也是UI設計中的重要組成部分之一，設計人員可按照用途對其進行分類，并遵循一定的設計規(guī)范，包括圖片的比例與尺寸規(guī)范等。1.3.2UI設計規(guī)范的內(nèi)容06組件設計規(guī)劃UI設計中的組件包括以下內(nèi)容。下拉列

表框文本輸入框進度條提示框分割線彈出面板搜索框單選項和復選框不同系統(tǒng)的UI設計規(guī)范1.3.3iOS系統(tǒng)的UI設計規(guī)范01界面尺寸規(guī)范與框架要了解界面尺寸規(guī)范首先需要對iOS設備的分辨率和框架有所了解，其中iOS移動設備界面中常見的分辨率和框架主要有4種，如圖所示。1.3.3iOS系統(tǒng)的UI設計規(guī)范02控件規(guī)范

iOS系統(tǒng)中的界面控件以下內(nèi)容。這些控件都有一定的設計規(guī)范，下面進行詳細介紹。導航欄選項卡開關搜索欄標簽欄提示框1.3.4Android系統(tǒng)的UI設計規(guī)范01界面尺寸規(guī)范與框架

Android系統(tǒng)界面的尺寸大小一般包括320px×480px、426px×800px、720px×1280px、1080px×1920px，其中狀態(tài)欄高度為72px，Android系統(tǒng)界面的尺寸規(guī)范并不明確，設計人員可根據(jù)需要進行調(diào)整。Android系統(tǒng)界面框架包括狀態(tài)欄、導航欄、主菜單欄、內(nèi)容區(qū)域4個部分。1.3.4Android系統(tǒng)的UI設計規(guī)范02Android系統(tǒng)中的單位換算與iOS系統(tǒng)不同的是，Android系統(tǒng)的開發(fā)通常會使用dp作為單位，而一般的UI設計圖則以px為單位。因此在Android系統(tǒng)中需要進行單位的換算，這可以通過程序人員在后期代碼中實現(xiàn)。1.3.4Android系統(tǒng)的UI設計規(guī)范03控件規(guī)范

Android系統(tǒng)中的控件與iOS系統(tǒng)中的控件有很多相似之處，不同的是Android系統(tǒng)中的UI設計更加多樣化，自定義控件很多。下面主要講解與iOS系統(tǒng)不同的控件的設計規(guī)范。ABCD頂部標簽欄單行列表框卡片全局導航欄1.3.4Android系統(tǒng)的UI設計規(guī)范04Windows系統(tǒng)的界面尺寸規(guī)范由于Windows系統(tǒng)也在不斷的升級改版，其界面尺寸有很多，常見的界面尺寸主要包括如圖所示的8種主要尺寸。1.3.4Android系統(tǒng)的UI設計規(guī)范05控件規(guī)范與Android系統(tǒng)和iOS系統(tǒng)一樣，Windows系統(tǒng)中的控件也需要制定相應的設計規(guī)范。導航欄Logo圖標狀態(tài)欄滾動條圖標與圖片UI設計UIdesign1.4UI設計的文字與排版學習目的1.了解UI設計常用字體類型2.了解UI設計中的字體規(guī)范3.了解UI設計的文字排版技巧UI設計常用字體類型1.4.1UI設計常用字體類型字體是UI設計中不可或缺的一部分，是決定設計效果的關鍵。不同的字體在界面中渲染的氛圍不同，正確地選擇和使用字體不但能美化界面效果，還能使信息展現(xiàn)更加直觀，并吸引用戶繼續(xù)瀏覽。宋體黑體書法體手寫體楷體藝術體1.4.1UI設計常用字體類型01襯線體襯線體在筆畫的始末位置有額外的裝飾，且粗細會因筆畫的不同而有所區(qū)別，強調(diào)筆畫的走勢及前后聯(lián)系，這使得前后文有更好的連續(xù)性，更適合作為正文字體。1.宋體字形方正、橫細豎粗、撇如刀、捺如掃、點如瓜子等特點，它是通用的印刷體。2.Garamond字體兼具美觀性和易讀性，被譽為“襯線之王”，適合長時間閱讀。此處動畫：體現(xiàn)襯線體的筆畫特點（圖片位于本頁）1.4.1UI設計常用字體類型02非襯線體非襯線體筆畫粗細基本一致，適合用于標題類需要醒目但又不被長時間閱讀的文字，其特點是方正、樸素、簡潔、明確、黑白均勻。1.黑體也稱等線體，具有橫豎粗細一致、方頭方尾的特點，文字渾厚有力、樸素大方。2.Arial字體字形干凈、清晰，易于辨認，是很多數(shù)字印刷機和操作系統(tǒng)中不可缺少的字體。此處動畫：體現(xiàn)非襯線體的筆畫特點（圖片位于本頁）UI設計中的字體規(guī)范1.4.2系統(tǒng)默認字體規(guī)范iOS系統(tǒng)的默認字體規(guī)范Android系統(tǒng)的默認字體規(guī)范從iOS9系統(tǒng)開始中文的默認字體為“蘋方”，英文的默認字體為“SanFrancisco”，字形纖細飽滿，便于閱讀。

Android系統(tǒng)中中文的默認字體為“思源黑體”，英文的默認字體為“Roboto”，字形線條粗細適中、端正大方。1.4.3常見的字號規(guī)范App界面的常見字號網(wǎng)頁界面的常見字號App界面中的導航欄字號和標題字號為36~40px，正文字號為32~34px，副文字號為24~28px，最小字號不低于20px。網(wǎng)頁界面中的字號并沒有強制規(guī)定，常見的字號為12~30px。1.4.4常見的字體色彩規(guī)范

UI設計中的字體規(guī)范除了大小規(guī)范外，還有色彩規(guī)范。一般來說，界面中的色彩不宜過多，可先選擇一種主色，然后在主色基礎上進行色彩的透明度變換，如圖所示。1.4.5常見的字體色彩規(guī)范無論是網(wǎng)頁界面還是App界面設計，文字在界面中所占比例都較大。因此掌握UI設計中的字體排版對設計人員來說非常關鍵，不同的字體排版可以給界面帶來意想不到的效果。繞圖型字體排版齊頭齊尾型字體排版齊頭散尾型字體排版自由型字體排版1.4.6文字規(guī)范iOS8系統(tǒng)使用的中文字體是華文黑體，英文和數(shù)字字體是HelveticaNeue；在系統(tǒng)升級至iOS9后，中文字體改為了蘋方，英文和數(shù)字字體改為了SanFrancisco。01iOS系統(tǒng)字體蘋方字體提供了Bold（粗體）、Extralight（特細）、Light（細體）、Medium（中等）、Regular（常規(guī)）6種粗細效果。設計師在制作界面時可選用Regular（常規(guī)）和Bold（粗體）來表示字體的普通和加粗狀態(tài)，效果如圖。1.4.6文字規(guī)范在Android設備上，系統(tǒng)默認的中文字體為思源黑體，英文字體為Roboto，但國內(nèi)手機大都是第三方廠商定制而成，對默認的系統(tǒng)字體有所改變。02Android系統(tǒng)字體1.4.6文字規(guī)范03系統(tǒng)字號文字所在的位置不同，使用的字號也有所差別。iOS系統(tǒng)的設計中用px標注字號，而Android系統(tǒng)使用sp標注，其中1sp=2px。系統(tǒng)字號的大小和對應的位置：36px：用于頂部導航欄的欄目名稱。30px：用于標題文字和大按鈕文字。28px：用于主要文字，正文或小按鈕文字。24px：用于輔助文字。22px：用于底部標簽欄文字。18px：用于提示性文字。

在實際設計中，設計師設計文字時需要將字號設置為偶數(shù)，這樣可以方便后期開發(fā)和適配。小技巧UI設計的文字排版1.4.7UI設計的文字排版1.避免同一界面使用過多的字體在同一界面中使用過多的字體會讓內(nèi)容顯得混亂，重點不夠清晰，讓用戶的閱讀體驗大打折扣。湖北省博物館——掌上智慧博物館APP1.4.7UI設計的文字排版1.避免同一界面使用過多的字體此處制作二維動畫，圖片依次播放課程思政：通過掌上智慧博物館APP線上展廳，語音講解，導覽地圖，可以隨時了解該博物館詳細的展覽資訊。全方位了解我國文物詳情，體驗文化，自我學習，希望通過博物館的文化學習、體驗、感受，激發(fā)青少年的愛國之心，讓同學們保持家國情懷，心里裝著國家和民族，關注時代、關注社會，汲取養(yǎng)分、豐富思想。1.4.7UI設計的文字排版1.避免同一界面使用過多的字體課程思政：通過掌上智慧博物館APP線上展廳，語音講解，導覽地圖，可以隨時了解該博物館詳細的展覽資訊。全方位了解我國文物詳情，體驗文化，自我學習，希望通過博物館的文化學習、體驗、感受，激發(fā)青少年的愛國之心，讓同學們保持家國情懷，心里裝著國家和民族，關注時代、關注社會，汲取養(yǎng)分、豐富思想。1.4.7UI設計的文字排版2.字體設計要有層級感在UI設計中，文字不僅可以起到解讀、引導的作用，而且能起到平衡版面的作用。每一個界面都需要有自己的視覺中心和主要展示內(nèi)容，層級感高的字體設計可以使界面更加精簡，用戶操作起來也會感到更加流暢、簡潔。同袍漢服UI設計課程思政：宣揚漢服文化的同時又可以供漢服愛好者交流、互動、灌水且購買漢服的APP平臺。1.4.7UI設計的文字排版3.字體設計動靜結合字體的動靜結合在UI設計中的應用也比較廣泛，可以是正常字體和傾斜字體的結合，富有個性的字體和形態(tài)差距大的字體的結合，也可以是旋轉字體與其他正常字體的結合等。字體動靜結合，一般在跟兒童有關的界面中比較常見，有時也會出現(xiàn)在一些運動類界面當中。兒童UI設計-最愛我的漢克狗UI設計UIdesign1.5UI設計中圖片與排版學習目的1.了解UI設計的圖片類別與格式2.了解UI設計的圖片比例3.掌握UI設計的圖片與排版UI設計的圖片類別與格式1.5.1UI設計的圖片類別與格式一、UI設計的圖片類別1.位圖位圖也稱柵格圖像，我們用數(shù)碼相機拍攝的照片、掃描儀掃描的圖片，及在計算機中抓取的圖像都屬于位圖。

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

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

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

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

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

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