任務1.4 掌握UI設計的規范與規則

1.4.1 任務引入

本任務要求讀者首先了解UI設計的設計單位、設計尺寸、適配方案、設計結構、間距規范、文字規范、圖標尺寸及圖片比例，然后到優設網搜索、閱讀與UI設計規范相關的文章，進一步熟悉UI設計的規范與規則。

1.4.2 任務知識

掌握UI設計的基礎規范與規則可以讓設計師在進行設計時事半功倍。下面主要介紹設計單位、設計尺寸、適配方案、設計結構、間距規范、文字規范、圖標尺寸以及圖片比例等基礎規范與規則。

1 設計單位

（1）PPI和DPI

●PPI：像素密度（Pixels Per Inch）是屏幕分辨率單位，表示的是每英寸的像素數量，通常用于iOS設備。

●DPI：網點密度（Dots Per Inch）是打印分辨率單位，表示每英寸打印的點數，通常用于Android設備。

（2）px、pt、dp、sp

●px：像素（pixels）是物理像素（Physical Pixel）的單位，屬于相對單位，會因為屏幕像素密度的變化而變化。px是用Photoshop進行UI設計時使用的單位，使用此單位需要兼容不同分辨率的界面。

●pt：點（points）是邏輯像素（Logic Point）的單位，屬于絕對單位，不會因為屏幕像素密度的變化而變化。pt是iOS開發及用Sketch進行UI設計時使用的單位。

●dp：獨立密度像素（Density-independent Pixels）是Android設備上的基本單位，屬于非文字單位，等同于iOS設備上的pt。

●sp：獨立縮放像素（Scale-independent Pixels）是Android設備上的字體單位。用戶可以根據自己的需求調整文字尺寸，當文字尺寸是“正?！睍r，1sp=1dp。

px、pt、dp、sp在不同分辨率下的換算如圖1-18所示，圖1-19所示為常見的圖標尺寸。

2 設計尺寸

iOS設備常見的尺寸如圖1-20所示。在進行UI設計時，為了適配大部分設備，推薦以iPhone X/XS/11 Pro的尺寸為基準。如果使用Photoshop，就創建750px×1624px（將375pt×812pt的畫布放大2倍，可以更好地在Photoshop中進行適配）的畫布；如果使用Sketch，就建立375pt×812pt的畫布。

Android設備常見的尺寸如圖1-21所示。在進行UI設計時，如果想要同時適配Android設備和iOS設備，就使用Photoshop新建720px×1280px的畫布。如果根據Material Design（材料設計語言，是由Google公司推出的設計語言）新規范單獨設計Android設備的設計稿，就使用Photoshop新建1080px×1920px的畫布。無論要滿足哪種需求，使用Sketch只需建立360dp×640dp的畫布。

3 適配方案

一套App UI設計通常在80～150頁。由于使用Photoshop進行UI設計用的單位是px，因此在適配時還需要額外設計出其他機型的頁面。而使用Sketch、XD、Figma等軟件進行UI設計用的單位是pt，如圖1-22所示，因此在適配時無須額外設計出其他機型的頁面。

4 設計結構

在iOS設備中，界面通常由狀態欄、導航欄、安全設計區及標簽欄（工具欄）組成。自全面屏上市以來，界面較之前還多了虛擬主頁鍵，如圖1-23所示。

Android設備和iOS設備的界面布局一樣，只是部分的叫法不同，如圖1-24所示。在Android設備中，界面通常由狀態欄、頂部應用欄、安全設計區、底部應用欄以及虛擬導航欄組成。

5 間距規范

在設計App的間距時，8的倍數和10的倍數的尺寸常被使用，如圖1-25所示。例如在iOS設備中，以@2x為基準，常見的邊距有20px、24px、30px、32px、40px及50px。而4的倍數的尺寸則可以用于較親密的元素之間。

6 文字規范

（1）系統字體

●iOS

舊金山字體：舊金山字體是非襯線字體，如圖1-26所示，它有SF UI Text（文本模式）和SF UI Display（展示模式）兩種尺寸模式。SF UI Text適用于小于等于19pt的文字，SF UI Display適用于大于等于20pt的文字。

紐約字體：紐約字體是襯線字體，如圖1-27所示，該字體旨在補充舊金山字體。對于小于20pt的文本使用小號，對于20～35pt的文本使用中號，對于36～53pt的文本使用大號，對于54pt或更大的文本使用特大號。

蘋方：在iOS中，中文使用的是蘋方字體，該字體共有6個字重，如圖1-28所示。

●Android系統

Roboto：在Android系統中，英文使用的是Roboto字體，該字體共有6個字重，如圖1-29所示。

思源黑體：在Android系統中，中文使用的是思源黑體字體，該字體又被稱為“Source Han Sans”或“Noto”，共有7個字重，如圖1-29所示。

（2）字體大小

iOS和Material Design提供的字號參考并不完全適用于中文，因為在相同字號下，中文比西文大。例如iOS官方規范中建議正文字號為17pt，如圖1-30所示，但使用中文時14pt和12pt更加合適。為了區分標題和正文，字體大小差異應至少保持在2pt及以上。西文行高通常為1.3～1.5倍，中文行高通常為1.5～2倍。

7 圖標尺寸

（1）應用圖標

應用圖標即產品圖標，主要出現在主屏幕上，如圖1-31所示。

應用圖標的設計尺寸可以采用1024px×1024px，并根據iOS官方模板進行規范，如圖1-32所示。正確的圖標設計稿應是直角矩形，而不是圓角矩形，iOS會自動應用一個圓角遮罩將圖標的4個角遮住。

由于屏幕分辨率的差異和使用場景的不同，iOS官方的圖標模板中有非常多的圖標尺寸。我們只需要設計1024 px×1024px的圖標，然后將這個圖標置入Photoshop的智能對象中，或者置入Sketch的Symbol中，就可以一次性生成所有尺寸的圖標，如圖1-33所示。

（2）功能圖標

功能圖標即系統圖標，是通過簡潔、現代的圖形表示一些常見功能的圖標，如圖1-34所示，主要應用于導航欄、工具欄以及標簽欄等模塊。

創建功能圖標時，可以參考Material Design，以24dp×24dp的尺寸為基準。圖標應該留出一定的邊距，以保證不同面積的圖標在應用時有協調一致的視覺效果，如圖1-35所示。

不同形狀的圖標可以根據正方形、圓形、垂直矩形及水平矩形這一套網格系統來進行尺寸規范，如圖1-36和圖1-37所示。

由于屏幕分辨率的差異和使用場景的不同，圖標的尺寸也有所不同。在iOS下，圖標尺寸通常是在48px的基礎上，進行4倍數的加減變化；而在Android系統下，圖標尺寸通常是在48px的基礎上，進行8倍數的加減變化，如圖1-38所示。具體的設計尺寸將在項目4中進行詳細講解。

8 圖片比例

圖片通常需要按照固定的比例進行設計，并應用于特定環境，例如1:1的圖片通常會作為頭像使用。圖1-39所示為整理好的圖片常用比例及其應用，方便大家進行后續設計。

1.4.3 任務實施

（1）啟動瀏覽器，打開優設網官網首頁，如圖1-40（a）所示。在搜索框中輸入關鍵詞“UI設計規范”，單擊右側的“搜索”按鈕或按Enter鍵，進入搜索結果頁面，選擇“文章”類別，即可檢索到有關UI設計規范的大量文章，如圖1-40（b）所示。

（2）單擊這些文章，進入詳細信息頁面，如圖1-41所示。閱讀這些與UI設計規范相關的文章，掌握UI設計的規范與規則。