項(xiàng)目1　走進(jìn)UI設(shè)計(jì)的世界-UI設(shè)計(jì)基礎(chǔ)

本章介紹：

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

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

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