《Photoshop 移動(dòng)UI設(shè)計(jì)案例教程（全彩慕課版）（第2版）》課件 第2章 移動(dòng)UI設(shè)計(jì)規(guī)范

本章介紹：設(shè)計(jì)規(guī)范在移動(dòng)UI設(shè)計(jì)的工作中有著保證視覺(jué)統(tǒng)一性、提升項(xiàng)目工作效率、提升設(shè)計(jì)細(xì)節(jié)等諸多好處。本章對(duì)iOS系統(tǒng)以及Android系統(tǒng)的基礎(chǔ)設(shè)計(jì)規(guī)范進(jìn)行講解。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)移動(dòng)UI設(shè)計(jì)的基礎(chǔ)規(guī)范有一個(gè)基本的認(rèn)識(shí)，有助于高效便利地進(jìn)行移動(dòng)UI設(shè)計(jì)工作。第二章移動(dòng)UI設(shè)計(jì)規(guī)范了解移動(dòng)UI設(shè)計(jì)的設(shè)計(jì)單位掌握移動(dòng)UI設(shè)計(jì)的基本布局掌握移動(dòng)UI設(shè)計(jì)的文字規(guī)范掌握移動(dòng)UI設(shè)計(jì)的圖標(biāo)規(guī)范掌握移動(dòng)UI的設(shè)計(jì)尺寸熟練搭建移動(dòng)UI的網(wǎng)格系統(tǒng)熟練設(shè)置動(dòng)移UI的字號(hào)掌握適配移動(dòng)UI的不同設(shè)備學(xué)習(xí)目標(biāo)2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范iOS設(shè)計(jì)單位及尺寸iOS界面結(jié)構(gòu)iOS基本布局iOS字體規(guī)范iOS圖標(biāo)規(guī)范1.相關(guān)單位?PPI：像素密度（PixelsPerInch，PPI）。?Asset：比例因子。?物理像素、渲染像素和邏輯像素2.1.1iOS設(shè)計(jì)單位及尺寸2.設(shè)計(jì)尺寸iOS常見(jiàn)的設(shè)備尺寸如圖。在進(jìn)行界面設(shè)計(jì)時(shí)，為了適配大部分尺寸，推薦以iPhone14Pro/15/15Pro為基準(zhǔn)。如果使用Photoshop就創(chuàng)建786px×1704px尺寸的畫布，如果使用Sketch就建立393pt×852pt尺寸的畫布。在iOS系統(tǒng)中，界面通常由狀態(tài)欄、導(dǎo)航欄、安全設(shè)計(jì)區(qū)以及標(biāo)簽欄組成。自全面屏上市，界面較之前還多了虛擬主頁(yè)鍵。2.1.2iOS界面結(jié)構(gòu)1.網(wǎng)格系統(tǒng)網(wǎng)格系統(tǒng)，英文名稱“GridSystems”，又稱為“柵格系統(tǒng)”。在APP中，是利用一系列垂直和水平的參考線，將頁(yè)面分割成若干個(gè)有規(guī)律的列或格子，再以這些格子為基準(zhǔn)，進(jìn)行頁(yè)面的布局設(shè)計(jì)，使布局規(guī)范簡(jiǎn)潔有秩序。2.1.3iOS基本布局2.組成元素網(wǎng)格系統(tǒng)由①列、②水槽以及③邊距三個(gè)元素組成。列是內(nèi)容放置的區(qū)域。水槽是列與列之間的距離，有助于分離內(nèi)容。邊距是內(nèi)容與屏幕左右邊緣之間的距離。3.網(wǎng)格運(yùn)用?單元格：iOS的最小點(diǎn)擊區(qū)域是44pt，即88px（@2x）。因此，在適用性方面，能被整除的偶數(shù)4和8作為iOS最小單元格比較合適。其中4px容易將頁(yè)面切割細(xì)碎，所以比較推薦使用8px。?列：列的數(shù)量有4、6、8、10、12、24這幾種情況。其中4列通常在2等分的簡(jiǎn)潔頁(yè)面時(shí)使用，6、12和24基本滿足所有等分情況，然而24列將頁(yè)面切割太碎，因此實(shí)際使用還是以12列和6列為主。?水槽：水槽、邊距以及橫向間距的寬度可以依照最小單元格8px為增量進(jìn)行統(tǒng)一設(shè)置，如24、32、40。其中32px（16pt@2x）最為常用。?邊距：邊距的寬度也可以與水槽有所區(qū)別。在iOS中以@2x為基準(zhǔn),常見(jiàn)的邊距有20px、24px、30px、32px、40px以及50px。邊距的選擇應(yīng)結(jié)合產(chǎn)品本身的氣質(zhì)，其中30px是最為舒適的邊距，也是絕大多數(shù)APP首選的邊距。iOS中的設(shè)置及通用頁(yè)面都采用了30px的邊距。1.系統(tǒng)字體舊金山字體：舊金山字體是非襯線字體，如圖2-13所示，其中SF字體有SFUIText（文本模式）和SFUIDisplay（展示模式）兩種尺寸。SFUIText（文本模式）適用與小于19pt的文字，SFUIDisplay（展示模式）適用于大于20pt的文字。2.1.4iOS字體規(guī)范紐約字體：紐約字體是襯線字體，旨在補(bǔ)充舊金山字體。對(duì)于小于20pt的文本使用小號(hào)，對(duì)于20到35pt之間的文本使用中號(hào)，對(duì)于36到53pt之間的文本使用大號(hào)，對(duì)于54pt或更大的文本使用特大號(hào)。蘋方：在iOS系統(tǒng)中，中文使用的是蘋方字體，該字體共有6個(gè)字重。2.字號(hào)大小iOS設(shè)計(jì)時(shí)要注意字號(hào)的大小。蘋果官網(wǎng)的建議全部是針對(duì)英文SF字體而言的，中文字體需要UI設(shè)計(jì)師靈活運(yùn)用，以最終呈現(xiàn)效果的實(shí)用性和美觀度為基準(zhǔn)進(jìn)行調(diào)整。在iOS中，圖標(biāo)規(guī)范可以從應(yīng)用圖標(biāo)和系統(tǒng)圖標(biāo)兩個(gè)方面進(jìn)行詳盡的剖析。2.1.5iOS圖標(biāo)規(guī)范2.2Android系統(tǒng)設(shè)計(jì)規(guī)范Android設(shè)計(jì)單位及尺寸Android界面結(jié)構(gòu)Android基本布局Android字體規(guī)范Android圖標(biāo)規(guī)范1.相關(guān)單位?DPI：網(wǎng)點(diǎn)密度（DotPerinch，DPI）?獨(dú)立密度像素與獨(dú)立縮放像素2.2.1Android設(shè)計(jì)單位及尺寸2.設(shè)計(jì)尺寸Android常見(jiàn)的設(shè)備尺寸可以分成大小兩類。Android和iOS一樣，只是叫法不同。在Android中，界面通常由狀態(tài)欄、頂部應(yīng)用欄、安全設(shè)計(jì)區(qū)、底部應(yīng)用欄以及虛擬導(dǎo)航欄組成。2.2.2Android界面結(jié)構(gòu)在iOS中已經(jīng)剖析了網(wǎng)格系統(tǒng)及其組成元素，因此在Android布局中不再贅述，直接進(jìn)行Android中網(wǎng)格的布局。?單元格：Android的最小點(diǎn)擊區(qū)域是48dp，因此能被整除的偶數(shù)4和8作為Android最小單元格比較合適。2.2.3Android基本布局?列：列的數(shù)量在手機(jī)設(shè)備上推薦4列，平板電腦上推薦8列。右側(cè)為平板電腦列的數(shù)量。?水槽：水槽和邊距的寬度在手機(jī)設(shè)備上推薦16dp，平板電腦上推薦24dp。?邊距：邊距的寬度可以和水槽統(tǒng)一，也可以根據(jù)產(chǎn)品和水槽不同。當(dāng)Android中邊距的寬度和水槽不同時(shí)，其寬度的設(shè)置具體可以參考iOS布局中邊距的寬度。1.系統(tǒng)字體Android英文使用的是Roboto字體，共有6個(gè)字重。中文使用的是思源黑體，又稱為“SourceHanSans”或“Noto”，共有7個(gè)字重。2.2.4Android字體規(guī)范2.字號(hào)大小Android設(shè)計(jì)時(shí)要注意字號(hào)的大小。Android各元素以720x1280px為基準(zhǔn)設(shè)計(jì)，可以與iOS對(duì)應(yīng)，其常見(jiàn)的字號(hào)大?。?