UI設(shè)計（項目式全彩微課版）課件 項目1、2　走進UI設(shè)計的世界-UI設(shè)計基礎(chǔ)、設(shè)計趣味的圖標(biāo)-UI圖標(biāo)設(shè)計

本章介紹：

本章對UI設(shè)計的基本概念、常用軟件、項目流程以及規(guī)范與規(guī)則進行系統(tǒng)講解。通過本章的學(xué)習(xí)，讀者可以對UI設(shè)計有一個系統(tǒng)的認識，有助于高效便利地進行后續(xù)的UI設(shè)計工作。項目1走進UI設(shè)計的世界—UI設(shè)計基礎(chǔ)學(xué)習(xí)引導(dǎo)理解UI設(shè)計的基本概念了解UI設(shè)計的常用軟件熟悉UI設(shè)計的項目流程熟悉UI設(shè)計的軟件操作掌握UI設(shè)計的規(guī)范與規(guī)則培養(yǎng)對UI設(shè)計的基本興趣任務(wù)1.1

理解UI設(shè)計的基本概念任務(wù)引入任務(wù)知識任務(wù)實施1.1.1任務(wù)引入

本任務(wù)通過掌握UI設(shè)計的相關(guān)概念了解UI設(shè)計，并通過到花瓣網(wǎng)調(diào)研UI設(shè)計的實際應(yīng)用，進一步理解UI設(shè)計的基本概念。1.1.2任務(wù)知識：UI設(shè)計的基本概念UI即UserInterface（用戶界面）的簡稱，是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。優(yōu)秀的UI設(shè)計不僅要保證界面的美觀，更要保證交互設(shè)計（InteractionDesign，IxD）的可用性及用戶體驗（UserExperience，UE/UX）的友好度。1.1.3任務(wù)實施（1）啟動瀏覽器，打開花瓣網(wǎng)官網(wǎng)，單擊右側(cè)的“登錄/注冊”按鈕，在彈出的對話框中選擇登錄方式并登錄。1.1.3任務(wù)實施（2）在搜索框中輸入關(guān)鍵詞“UI設(shè)計”，按Enter鍵，進入搜索頁面。（3）單擊頁面上方的“畫板”選項，發(fā)現(xiàn)與UI設(shè)計相關(guān)的有圖標(biāo)設(shè)計、App界面設(shè)計以及網(wǎng)頁設(shè)計等畫板。選擇其中的“APP界面”畫板，單擊“關(guān)注”按鈕，收藏該畫板。也可以根據(jù)調(diào)研需要關(guān)注收藏其他UI設(shè)計相關(guān)的畫板。1.1.3任務(wù)實施（4）單擊收藏的“APP界面”畫板，進入該畫板，通過調(diào)研賞析該畫板中UI設(shè)計的實際應(yīng)用案例，更好地理解UI設(shè)計的基本概念。使用上述方法，調(diào)研賞析其他UI設(shè)計相關(guān)的畫板，進一步理解UI設(shè)計。任務(wù)1.2了解UI設(shè)計的常用軟件任務(wù)引入任務(wù)知識任務(wù)實施1.2.1任務(wù)引入本任務(wù)通過了解UI設(shè)計的常用軟件來熟悉UI設(shè)計的具體內(nèi)容，并通過到各軟件相關(guān)官網(wǎng)調(diào)研了解軟件輔助UI設(shè)計的功能、技術(shù)和實現(xiàn)效果。1.2.2任務(wù)知識：UI設(shè)計的常用軟件根據(jù)軟件的專業(yè)性、市場的認可度及用戶的使用量等因素可以將UI設(shè)計的常用軟件總結(jié)為界面設(shè)計、動效設(shè)計、網(wǎng)頁設(shè)計、3D渲染、思維導(dǎo)圖以及交互原型這六類，建議初學(xué)者先掌握Photoshop（簡稱PS）和Illustrator（簡稱AI），有條件購買蘋果電腦的話還要掌握Sketch和Figma。1.2.3任務(wù)實施（1）以軟件Photoshop為例。Photoshop是Adobe公司旗下的圖像處理軟件，因此，啟動瀏覽器，打開Adobe公司中國官網(wǎng)，單擊“創(chuàng)意和設(shè)計”按鈕，在展開的選項中選擇“Photoshop”選項，跳轉(zhuǎn)到Photoshop相關(guān)網(wǎng)頁。1.2.3任務(wù)實施（2）在此頁面中有著Photoshop軟件的相關(guān)功能介紹和具體操作方法，能夠更好地了解Photoshop軟件，使用上述方法，了解Illustrator、Sketch和Figma等其他UI設(shè)計常用軟件的相關(guān)功能、技術(shù)和實現(xiàn)效果。任務(wù)1.3熟悉UI設(shè)計的項目流程任務(wù)引入任務(wù)知識任務(wù)實施1.3.1任務(wù)引入本任務(wù)通過到UI中國調(diào)研、賞析UI設(shè)計中的完整項目，熟悉UI設(shè)計的項目流程。1.3.2任務(wù)知識：UI設(shè)計的項目流程針對整個產(chǎn)品的設(shè)計流程而言，UI設(shè)計僅是其中的一部分。一個產(chǎn)品從啟動到上線，會經(jīng)歷多個環(huán)節(jié)、由多個角色共同協(xié)作完成。每個角色基本都會有對應(yīng)的1個或多個環(huán)節(jié)。1.3.3任務(wù)實施（1）啟動瀏覽器，打開UI中國官網(wǎng)，單擊右側(cè)的“登錄/注冊”按鈕，在彈出的對話框中選擇登錄方式并登錄。1.3.3任務(wù)實施（2）單擊左側(cè)的“發(fā)現(xiàn)”按鈕，在彈出的菜單中選擇“作品”選項，進入作品頁面。1.3.3任務(wù)實施（3）單擊頁面左上角的“全部分類”選項，選擇“App”選項，出現(xiàn)了大量App項目。點擊進入其中一個項目，可以查看到該項目的完整設(shè)計過程，通過調(diào)研賞析該App項目，可以熟悉UI設(shè)計的項目流程。使用上述方法，調(diào)研賞析其他UI設(shè)計項目，進一步熟悉UI設(shè)計的項目流程。任務(wù)1.4掌握UI設(shè)計規(guī)范與規(guī)則任務(wù)引入任務(wù)知識任務(wù)實施1.4.1任務(wù)引入本任務(wù)通過掌握設(shè)計單位、設(shè)計尺寸、適配方案、設(shè)計結(jié)構(gòu)、間距規(guī)范、文字規(guī)范、圖標(biāo)尺寸以及圖片比例掌握UI設(shè)計規(guī)范與規(guī)則，并通過到優(yōu)設(shè)網(wǎng)收集、閱讀UI設(shè)計規(guī)范相關(guān)的文章，進一步掌握UI設(shè)計的規(guī)范與規(guī)則。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則UI設(shè)計的基礎(chǔ)規(guī)范與規(guī)則可以令設(shè)計師在進行設(shè)計時更加事半功倍。下面主要介紹單位、尺寸、適配、結(jié)構(gòu)、間距、文字圖標(biāo)以及圖片的基礎(chǔ)規(guī)范與規(guī)則。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則1.單位介紹（1）DPI和PPIPPI：像素密度（PixelsPerInch，PPI）是屏幕分辨率單位，表示的是每英寸所擁有的像素數(shù)量，通常代表蘋果手機。DPI：網(wǎng)點密度（DotsPerInch，DPI）是打印分辨率單位，表示每英寸打印的點數(shù)，通常代表安卓手機。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則1.單位介紹（2）px、pt、dp、sppx：像素（pixels，px）是物理像素（PhysicalPixel）的單位，屬于相對單位，會因為屏幕像素密度變化而變化。運用Photoshop軟件進行UI設(shè)計時使用的單位,運用此單位需要兼容不同分辨率的界面。pt：點（points，pt）是邏輯像素（LogicPoint）的單位，屬于絕對單位，不會因為屏幕像素密度變化而變化。iOS開發(fā)及運用Sketch軟件進行UI設(shè)計使用的單位。dp：獨立密度像素（Density-independentPixels，dp），是安卓設(shè)備上的基本單位，用于非文字單位，等同于蘋果設(shè)備上的pt。sp：獨立縮放像素（Scale-independentPixels，sp），是Android設(shè)備上的字體單位。用戶可以根據(jù)自己需求調(diào)整字體尺寸，當(dāng)文字尺寸是“正?！睜顟B(tài)時，1sp=1dp。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則2.設(shè)計尺寸iOS常見的設(shè)備尺寸在進行界面設(shè)計時，為了適配大部分尺寸，推薦以iPhoneX/Xs/11pro為基準。如果使用Photoshop就創(chuàng)建750px×1624px尺寸的畫布，如果使用Sketch就建立375pt×812pt尺寸的畫布。Android常見的設(shè)備尺寸，在進行界面設(shè)計時，如果想要一稿適配Android和iOS，就使用Photoshop新建720px×1280px尺寸的畫布。如果根據(jù)MaterialDesign新規(guī)范單獨設(shè)計Android設(shè)計稿，就使用Photoshop新建1080px×1920px尺寸的畫布。無論哪種需求，使用Sketch只建立360dp×640dp尺寸的畫布即可。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則3.適配方案一套App界面設(shè)計數(shù)量通常在80～150頁。由于Photoshop是使用px單位進行UI設(shè)計，因此在適配時還需要額外設(shè)計出其他機型的頁面。而Sketch、XD、Figma等軟件是使用pt單位進行UI設(shè)計，因此在適配時無需額外設(shè)計。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則4.設(shè)計結(jié)構(gòu)在iOS系統(tǒng)中，界面通常由狀態(tài)欄、導(dǎo)航欄、安全涉及區(qū)以及標(biāo)簽欄組成。自全面屏上市，界面較之前還多了虛擬主頁鍵。Android和iOS一樣，只是叫法不同。在Android中，界面通常由狀態(tài)欄、頂部應(yīng)用欄、安全設(shè)計區(qū)、底部應(yīng)用欄以及虛擬導(dǎo)航欄組成。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則5.間距規(guī)范在App間距中，8倍數(shù)和10倍數(shù)的尺寸常被使用，例如在iOS中以@2x為基準,常見的邊距有20px、24px、30px、32px、40px及50px。而4倍數(shù)的尺寸則可以用于較親密的元素之間。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則6.文字規(guī)范系統(tǒng)字體（1）iOS系統(tǒng)舊金山字體：舊金山字體是非襯線字體，其中SF字體有SFUIText（文本模式）和SFUIDisplay（展示模式）兩種尺寸。SFUIText（文本模式）適用與小于19pt的文字，SFUIDisplay（展示模式）適用于大于20pt的文字。紐約字體：紐約字體是襯線字體，旨在補充舊金山字體。對于小于20pt的文本使用小號，對于20到35pt之間的文本使用中號，對于36到53pt之間的文本使用大號，對于54pt或更大的文本使用特大號。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則6.文字規(guī)范系統(tǒng)字體（2）Android系統(tǒng)Roboto：在Android系統(tǒng)中，英文使用的是Roboto字體，該字體共有6個字重。思源黑體：在Android系統(tǒng)中，中文使用的是思遠黑體字體，又稱為“SourceHanSans”或“Noto”，共有7個字重。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則6.文字規(guī)范字體尺寸蘋果和MaterialDesign提供的字號參考并不完全適用于中文，因為相同字號下，中文比西文大。如iOS官方規(guī)范正文為17pt，但使用中文時14pt和12pt更加合適。為了區(qū)分標(biāo)題和正文，字體大小差異至少保持在2pt及以上。行高西文通常為1.3～1.5倍，中文采用1.5～2倍。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則7.圖標(biāo)尺寸（1）應(yīng)用圖標(biāo)概念：應(yīng)用圖標(biāo)即產(chǎn)品圖標(biāo)，是品牌和產(chǎn)品的視覺表達，主要出現(xiàn)在主屏幕上。尺寸：應(yīng)用圖標(biāo)的設(shè)計尺寸可以采用1024px，并根據(jù)iOS官方模版進行規(guī)范，正確的圖標(biāo)設(shè)計稿應(yīng)是直角矩形不帶圓角的，iOS會自動應(yīng)用一個圓角遮罩將圖標(biāo)的4個角遮住。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則7.圖標(biāo)尺寸（2）功能圖標(biāo)概念：功能圖標(biāo)即系統(tǒng)圖標(biāo)，是通過簡潔現(xiàn)代的圖形表達一些常見功能，主要應(yīng)用于界面中的導(dǎo)航欄、工具欄以及標(biāo)簽欄等模塊。尺寸：創(chuàng)建功能圖標(biāo)時，可以參考MaterialDesign設(shè)計語言，以24dp尺寸為基準。圖標(biāo)應(yīng)該留出一定的邊距，保證不同面積的圖標(biāo)有協(xié)調(diào)一致的視覺效果。1.4.2任務(wù)知識：UI設(shè)計規(guī)范與規(guī)則8.圖片比例圖片通常需要按照固定比例進行設(shè)計，并應(yīng)用于特定環(huán)境，如1:1尺寸的圖片通常會作為頭像使用。以下為整理好的圖片常用比例及特定應(yīng)用，以便大家進行后續(xù)設(shè)計。1.4.3任務(wù)實施（1）啟動瀏覽器，打開優(yōu)設(shè)網(wǎng)官網(wǎng)，在搜索框中輸入關(guān)鍵詞“UI規(guī)范”，單擊右側(cè)的搜索按鈕或按Enter鍵，進入檢索頁面，選擇“文章”這一類別，即可檢索到有關(guān)UI規(guī)范的大量文章。1.4.3任務(wù)實施（2）單擊這些文章，進入文章的詳細信息頁面，通過閱讀這些UI設(shè)計規(guī)范相關(guān)的文章，熟悉掌握UI設(shè)計的規(guī)范與規(guī)則。本章介紹：

本章針對UI設(shè)計中常用的線性圖標(biāo)、面性圖標(biāo)以及線面圖標(biāo)進行系統(tǒng)的知識講解與實操演練。通過本章的學(xué)習(xí)，讀者可以對圖標(biāo)設(shè)計有一個系統(tǒng)的認識，并快速掌握繪制圖標(biāo)的規(guī)范和方法，為接下來的UI設(shè)計打下基礎(chǔ)。項目2設(shè)計趣味的圖標(biāo)—UI圖標(biāo)設(shè)計學(xué)習(xí)引導(dǎo)掌握線性圖標(biāo)的風(fēng)格特點掌握面性圖標(biāo)的風(fēng)格特點掌握線面圖標(biāo)的風(fēng)格特點掌握線性圖標(biāo)的制作方法掌握面性圖標(biāo)的制作方法掌握線面圖標(biāo)的制作方法培養(yǎng)良好的UI圖標(biāo)設(shè)計勞動習(xí)慣培養(yǎng)一定的UI圖標(biāo)設(shè)計創(chuàng)新能力和藝術(shù)審美能力任務(wù)2.1

設(shè)計旅游類App線性圖標(biāo)任務(wù)引入任務(wù)知識設(shè)計理念任務(wù)實施2.1.1任務(wù)引入本任務(wù)通過學(xué)習(xí)使用軟件Illustrator繪制旅游類App標(biāo)簽欄中的“行程”圖標(biāo)，掌握線性圖標(biāo)的設(shè)計要點與制作方法。2.1.2設(shè)計理念在設(shè)計過程中，圍繞旅游類App標(biāo)簽欄中的“行程”圖標(biāo)進行創(chuàng)意。圖形選用“日歷”作為核心創(chuàng)作元素，形象地表達行程之意。未點擊狀態(tài)采用形象簡潔、設(shè)計輕盈的線性圖標(biāo)，呈現(xiàn)出干凈的視覺效果。點擊狀態(tài)通過調(diào)整未點擊狀態(tài)的線性圖標(biāo)，轉(zhuǎn)變?yōu)樯鷦尤の?、俏皮可愛的線面圖標(biāo)。色彩選灰色和橙色兩種顏色，可以更好地區(qū)別不同的顯示狀態(tài)。同時橙色能夠體現(xiàn)旅游的歡快熱情，契合主題。2.1.3任務(wù)知識：Illustrator-變換命令熟練掌握“屬性”面板調(diào)整基礎(chǔ)圖形，運用“變換”命令進行快速復(fù)制，通過“擴展外觀”命令變成真實圖像。2.1.4任務(wù)實施任務(wù)2.2設(shè)計旅游類App面性圖標(biāo)任務(wù)引入任務(wù)知識設(shè)計理念任務(wù)實施2.2.1任務(wù)引入本任務(wù)通過學(xué)習(xí)使用軟件Photoshop繪制旅游類App金剛區(qū)中的“酒店”圖標(biāo)，掌握面性圖標(biāo)的設(shè)計要點與制作方法。2.2.2設(shè)計理念在設(shè)計過程中，圍繞旅游類App金剛區(qū)中的“酒店”圖標(biāo)進行創(chuàng)意。圖形選用“高樓”作為核心創(chuàng)作元素，形象地表達酒店之意。整體采用形象飽滿、視覺突出的面性圖標(biāo)，幫助用戶快速進行圖標(biāo)的位置定位。色彩選用紅橙漸變，能夠體現(xiàn)入住酒店的溫暖。2.2.3任務(wù)知識熟練掌握“圓角矩形”工具、“屬性”面板和“合并形狀“命令繪制基礎(chǔ)圖形，運用“漸變”工具為圖標(biāo)添加顏色漸變，通過“不透明度”選項的設(shè)置調(diào)整圖標(biāo)不透明度。2.2.4任務(wù)實施任務(wù)2.3設(shè)計旅游類App線面圖標(biāo)任務(wù)引入設(shè)計理念任務(wù)知識任務(wù)實施2.3.1任務(wù)引入本任務(wù)通過學(xué)習(xí)使