教案編號:1課題:第1章初識UI設計課時:4課時授課類型:講授項目目標:●掌握UI設計的基本概念●掌握UI設計的常用軟件●了解UI設計的行業發展●了解學習UI的正確姿勢●掌握UI設計的制作流程項目重點:●UI設計的基本概念●UI設計的常用軟件●UI設計的制作流程項目難點:●UI設計的制作流程項目技能點：單位、尺寸、適配、結構、間距、文字圖標及圖片的基礎規范與規則項目教學技巧：1.知識講解2.案例展示項目過程：（一）課前準備1.授課前準備準備好教學用具和教學設備2.板書課題：第1章初識UI設計項目目標:●掌握UI設計的基本概念●掌握UI設計的常用軟件●了解UI設計的行業發展●了解學習UI的正確姿勢●掌握UI設計的制作流程3.課程引入通過日常生活中的UI設計案例引入UI設計的概念網易云課堂App（二）課程內容UI即用戶界面（UserInterface）的簡稱，是指對軟件的人機交互、操作邏輯、界面美觀的整體設計，如圖所示。用戶界面（UserInterface）建議先掌握Photoshop和Illustrator，有條件的話還要掌握Sketch和Figma，如圖所示。UI設計常用軟件從早期的專注于工具的技法型表現，到現在要求UI設計師參與到整個商業鏈條，兼顧商業目標和用戶體驗，可以看出國內的UI設計行業發展是跨躍式的。UI設計從設計風格、技術實現到應用領域都發生了巨大的變化，如圖所示。UI設計發展趨勢1.技術實現虛擬現實、增強現實及人工智能等技術的發展，使得UI設計更加高效，交互亦更為豐富。2.設計風格UI設計的風格經歷了由擬物化到扁平化設計的轉變，現在扁平化風格依然為主流，但加入了MaterialDesign設計語言（材料設計語言），使設計更為醒目且細膩。3.應用領域UI設計的應用領域已由原先的PC端和移動端擴展到可穿戴設備、無人駕駛汽車、AI機器人等，更為廣闊。今后無論技術如何進步，設計風格如何轉變，甚至于應用領域如何不同，UI設計都將參與到產品設計的整個鏈條中，實現人性化、包容化、多元化的目標。對于UI設計的初學者來講，首先要明確市場現在到底需要什么樣的設計師，這樣才能有針對性地學習提升。結合市場需求，我們推薦下列學習方法。1.整體學習進行相關課程學習及文章學習，針對初學者建議進行課程學習，這樣可以系統的學習UI的相關知識和設計應用方法。iOS設計規范Android設計規范2.作品收集建議設計師每天拿出1~2小時到UI中國、站酷（ZCOOL）、追波（Dribbble）等網站，如圖所示，瀏覽最新的作品，并加入收藏，形成自己的資料庫，UI中國站酷追波3.項目臨摹首先推崇的是從應用中心下載優秀的App，如圖所示，截圖保存進行臨摹。臨摹一定要保證完全一樣并且要多臨摹。貝殼找房App網易云課堂App京東App4.項目實戰經過一定的積累，最好通過一套完整的企業項目來提升。從原型圖到設計稿再到切圖標注，甚至可以制作成動效Demo。針對整個產品的設計流程而言，UI設計僅是其中的一部分。一個產品從啟動到上線，會經歷多個環節、由多個角色共同協作完成。每個角色基本都會有對應的1個或多個環節，如圖所示。上圖為大流程，下圖為展開流程，下圖中的橙色為多個角色共同協作完成UI設計的基礎規范與規則可以令設計師在進行設計時更加事半功倍。下面主要介紹單位、尺寸、適配、結構、間距、文字圖標以及圖片的基礎規范與規則。1.單位介紹（1）DPI和PPIPPI：像素密度,是屏幕分辨率，表示的是每英寸所擁有的像素數量，通常代表蘋果手機。DPI：網點密度，是打印分辨率，表示每英寸打印的點數，通常代表安卓手機。DPI等同于PPI（2）px、pt、dp、sppx：物理像素，是相對單位，運用Photoshop軟件進行UI設計時使用的單位，運用此單位需要兼容不同分辨率的界面。pt：邏輯像素，是絕對單位，不會因為屏幕像素密度變化而變化。iOS開發及運用Sketch軟件進行UI設計使用的單位。dp：獨立密度像素，是安卓設備上的基本單位，用于非文字單位，等同于蘋果設備上的pt。sp：獨立縮放像素，是Android設備上的字體單位。用戶可以根據自己需求調整字體尺寸，當文字尺寸是“正常”狀態時，1sp=1dp。不同單位的換算圖標在不同屏幕分辨率的尺寸2.設計尺寸iOS常見的設備尺寸如圖所示。在進行界面設計時，為了適配大部分尺寸，推薦以iPhoneX/Xs/11pro為基準。如果使用Photoshop就創建750px×1624px尺寸的畫布，如果使用Sketch就建立375pt×812pt尺寸的畫布。iOS常見設備尺寸Android常見的設備尺寸，如圖所示。在進行界面設計時，如果想要一稿適配Android和iOS，就使用Photoshop新建720px×1280px尺寸的畫布。如果根據MaterialDesign新規范單獨設計Android設計稿，就使用Photoshop新建1080px×1920px尺寸的畫布。無論哪種需求，使用Sketch只建立360dp×640dp尺寸的畫布即可。Android常見設備尺寸3.適配方案一套App界面設計數量通常在80～150頁。由于Photoshop是使用px單位進行UI設計，因此在適配時需要設計出其他機型的頁面。而Sketch、XD、Figma等軟件是使用pt單位進行UI設計，因此在適配時無須額外設計，如圖所示。由于適配，在設計UI界面時通常使用上圖軟件4.設計結構在iOS中，界面通常由狀態欄、導航欄、安全涉及區以及標簽欄組成，自全面屏上市，界面較之前還多了虛擬主頁鍵，如圖所示。iOS界面結構Android和iOS一樣，只是叫法不同。在Android中，界面通常由狀態欄、頂部應用欄、安全設計區、底部應用欄以及虛擬導航欄組成，如圖所示。iOS和Android界面結構對比5.間距規范在App間距中，8倍數和10倍數常被使用，如圖所示。例如在iOS中以@2x為基準，常見的邊距有20px、24px、30px、32px、40px及50px。而4倍數則可以用于較親密的元素之間。App常用間距6.文字規范（1）系統字體iOS系統舊金山字體：舊金山字體是非襯線字體，如圖1-所示，其中SF字體有SFUIText（文本模式）和SFUIDisplay（展示模式）兩種尺寸。SFUIText適用與小于19pt的文字，SFUIDisplay適用于大于20pt的文字。舊金山字體紐約字體：紐約字體是襯線字體，如圖所示，旨在補充舊金山字體。對于小于20pt的文本使用小號，對于20pt到35pt之間的文本使用中號，對于36pt到53pt之間的文本使用大號，對于54pt點或更大的文本使用特大號。紐約字體蘋方：iOS中文使用的是蘋方，共有6個字重，如圖所示。蘋方字體Android系統Roboto：Android英文使用的字體，共有6個字重，如圖所示。思源黑體：Android中文使用的字體，又稱為“SourceHanSans”或“Noto”，共有7個字重，如圖所示。Roboto字體和思源黑體（2）字體尺寸蘋果和MaterialDesign提供的字號參考并不完全適用于中文，因為相同字號下，中文比西文大。如iOS官方規范正文為17pt，如圖所示。但使用中文時14pt和12pt更加合適。為了區分標題和正文，字體大小差異至少保持在2pt及以上。行高西文通常為1.3～1.5倍，中文采用1.5～2倍。iOS和MaterialDesign官方規范的字號7.圖標尺寸（1）應用圖標概念應用圖標即產品圖標，是品牌和產品的視覺表達，主要出現在主屏幕上，如圖所示。iOS和MaterialDesign應用圖標尺寸應用圖標的設計尺寸可以采用1024px，并根據iOS官方模版進行規范，如圖所示。正確的圖標設計稿應是直角矩形不帶圓角的，iOS會自動應用一個圓角遮罩將圖標的4個角遮住。iOS官方圖標模版由于屏幕分辨率的差異和使用場景的不同，所以iOS官方的圖標模板中，有非常多的圖標尺寸。我們只需要設計1024，然后將這個圖標置入到PS的智能對象，或者Sketch的Symbol中，就可以一次性生成所有尺寸，如圖所示。不同尺寸的iOS官方模版（2）功能圖標概念功能圖標即系統圖標，是通過簡潔現代的圖形表達一些常見功能，如圖所示。主要應用于界面中的導航欄、工具欄以及標簽欄等模塊。功能圖標尺寸創建功能圖標時，可以參考Materia