UI界面設(shè)計與制作電子教案

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