2.1　分辨率與界面設(shè)計(jì)尺寸

很多讀者在開始學(xué)習(xí)iOS界面設(shè)計(jì)的時(shí)候，經(jīng)常問的就是怎么設(shè)定App的分辨率和尺寸。要想弄清楚分辨率和尺寸的概念，首先要了解像素和分辨率的關(guān)系。

2.1.1　像素與分辨率

很多設(shè)計(jì)師沒有搞懂分辨率和像素的原因是沒有明白什么是英寸。我們?cè)?jīng)稱呼電視機(jī)為21寸大彩電、25寸大彩電、29寸大彩電等。手機(jī)也有4.7英寸、5.0英寸等。用英寸來表示一個(gè)面，導(dǎo)致很多人把英寸當(dāng)成一個(gè)面積單位，也就是說把英寸當(dāng)成平方英寸了。這會(huì)對(duì)分辨率產(chǎn)生完全不一樣的認(rèn)識(shí)。其實(shí)這里的英寸指的是屏幕對(duì)角線的長(zhǎng)度，英寸實(shí)際上是長(zhǎng)度單位。不同型號(hào)iPhone手機(jī)屏幕的尺寸如圖2-1所示。

分辨率分為ppi和dpi兩種。

ppi：指的是每英寸所包含的像素點(diǎn)的數(shù)目。

dpi：指的是每英寸所包含的點(diǎn)的數(shù)目。

dpi和ppi區(qū)別并不大，只是像素和點(diǎn)的區(qū)別。像素是設(shè)計(jì)師的最小設(shè)計(jì)單位，點(diǎn)則是iOS開發(fā)的最小單位。設(shè)計(jì)師只需了解dpi即可，ppi才是重要的。

提示

我們?nèi)粘Ｋf的2倍圖、3倍圖就是指屏幕的一個(gè)點(diǎn)中有兩個(gè)像素或三個(gè)像素。一個(gè)設(shè)備究竟要使用2倍圖還是3倍圖，只需看ppi和dpi的比值就可以了。

2.1.2　iOS系統(tǒng)界面設(shè)計(jì)尺寸

iOS設(shè)備主要有iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸）、iPhone 11（6.1英寸）、iPhone 11 Max（6.5英寸）、iPhone 12（6.1英寸）、iPhone 12 Pro Max（6.8英寸），它們都采用了Retina視網(wǎng)膜屏幕。圖2-2所示為部分iOS設(shè)備的尺寸。

這些設(shè)備的屏幕尺寸各不相同，其中iPhone 6s/7/8 Plus、iPhone X/11/12和iPhone 11/12 Max都采用的是3倍率的分辨率，其他都采用的是2倍率的分辨率?？梢院?jiǎn)單理解為在3倍率情況下，1pt=3px，在2倍率情況下，1pt=2 px。不同設(shè)備的設(shè)計(jì)像素、開發(fā)像素和倍率如表2-1所示。

為了便于適配所有設(shè)備，在為iOS系統(tǒng)設(shè)計(jì)App界面時(shí)，一般都會(huì)以iPhone 6的尺寸為基準(zhǔn)，也就是750px×1334px。

提示

無論是欄高度還是應(yīng)用圖標(biāo)，設(shè)計(jì)師提供給開發(fā)人員的切片大小，前者始終是后者的1.5倍，并分別以@3x和@2x在文件結(jié)尾命名，程序根據(jù)不同分辨率自動(dòng)加載@3x或@2x的切片。

實(shí)戰(zhàn)練習(xí)01　使用Photoshop新建App文件

視　頻：資源包\視頻\第2章\2-1-2.mp4　　源文件：資源包\源文件\第2章\2-1-2.psd

● 案例分析

新建文件是移動(dòng)UI設(shè)計(jì)的第一步。為了方便完成App產(chǎn)品適配其他眾多設(shè)備，通常會(huì)以iPhone 6的尺寸作為標(biāo)準(zhǔn)設(shè)計(jì)界面。本案例將使用Photoshop新建一個(gè)App項(xiàng)目界面，如圖2-3所示。通過案例的制作，了解在Photoshop中自定義界面尺寸和設(shè)置分辨率的方法。

● 制作步驟

01　啟動(dòng)Photoshop軟件界面，如圖2-4所示。執(zhí)行“文件＞新建”命令，彈出“新建文檔”對(duì)話框，如圖2-5所示。

02　在“新建文檔”對(duì)話框頂部的菜單中選擇“移動(dòng)設(shè)備”選項(xiàng)，對(duì)話框效果如圖2-6所示。在“空白文檔預(yù)設(shè)”中選擇iPhone　8/7/6選項(xiàng)，如圖2-7所示。

03　可以在對(duì)話框右側(cè)的“預(yù)設(shè)詳細(xì)信息”中看到具體的參數(shù)，如圖2-8所示。單擊“創(chuàng)建”按鈕，即可完成文件的創(chuàng)建，如圖2-9所示。

提示

本書使用Photoshop CC 2019的版本，用戶可以通過Adobe官網(wǎng)下載試用版本免費(fèi)使用。新建文檔的單位為“像素”，分辨率為“72像素/英寸”，顏色模式為“RGB顏色”。