哪个电子游戏平台不朽情缘不作假

書名：設(shè)計(jì)必修課：Adobe XD移動(dòng)UI設(shè)計(jì)
作者名：盧斌編著
本章字?jǐn)?shù)： 2949字
更新時(shí)間： 2022-05-06 17:51:15

2.3 創(chuàng)建和管理畫板

在Adobe XD中，畫板代表App的屏幕或者網(wǎng)站中的網(wǎng)頁(yè)，它可以簡(jiǎn)化設(shè)計(jì)流程，并且在一個(gè)文件內(nèi)可以創(chuàng)建多個(gè)畫板，用于適配不同屏幕尺寸或者完善UI的整體設(shè)計(jì)。

2.3.1 創(chuàng)建新畫板

進(jìn)入新建文件后，無(wú)論Adobe XD的工作區(qū)域是否存在畫板，用戶都可以創(chuàng)建新的畫板。單擊工具欄中的“畫板”按鈕，工作界面右側(cè)的“屬性”面板中將出現(xiàn)畫板尺寸列表框。選擇任意畫板尺寸，如圖2-5所示，即可將該尺寸的畫板添加到工作區(qū)域中，如圖2-6所示。

圖2-5 選擇畫板尺寸

圖2-6 添加畫板到工作區(qū)域

用戶也可以使用“畫板工具”在工作區(qū)域的空白處單擊并向下和向右拖曳創(chuàng)建自定尺寸的畫板。創(chuàng)建自定畫板時(shí)，“屬性”面板中的W和H值隨畫板大小的變化而變化，如圖2-7所示。

松開(kāi)鼠標(biāo)后，自定畫板創(chuàng)建完成。如果對(duì)畫板尺寸不滿意，可以繼續(xù)調(diào)整“屬性”面板中W和H的數(shù)值，直到滿意為止，如圖2-8所示。

圖2-7 創(chuàng)建自定畫板

圖2-8 調(diào)整畫板尺寸

？疑問(wèn)解答了解像素與分辨率

很多設(shè)計(jì)師在開(kāi)始學(xué)習(xí)iOS系統(tǒng)UI設(shè)計(jì)時(shí)，經(jīng)常問(wèn)到的就是如何設(shè)定App的分辨率和尺寸。要想弄清楚分辨率和尺寸的概念，首先要了解像素和分辨率的關(guān)系。

很多設(shè)計(jì)師之所以沒(méi)有弄清楚分辨率和像素，是因?yàn)闆](méi)有弄明白什么是英寸。電視機(jī)有21英寸、25英寸和29英寸等尺寸，同樣手機(jī)也有4.7英寸和5.0英寸等尺寸。

用英寸來(lái)表示一個(gè)面，很多人誤以為英寸是一個(gè)面積單位，也就是說(shuō)把英寸看成了是平方英寸。這會(huì)對(duì)分辨率產(chǎn)生完全不一樣的認(rèn)識(shí)。其實(shí)這里的英寸是指屏幕對(duì)角線的長(zhǎng)度，英寸實(shí)際上是長(zhǎng)度單位。圖2-9所示為不同型號(hào)的iPhone手機(jī)屏幕的尺寸。

圖2-9 不同型號(hào)iPhone手機(jī)屏幕的尺寸

分辨率的單位分為ppi和dpi。

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

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

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

提示

設(shè)計(jì)師日常所說(shuō)的二倍圖和三倍圖就是指屏幕中一個(gè)點(diǎn)中有兩個(gè)像素或者三個(gè)像素。一個(gè)設(shè)備究竟要使用二倍圖還是三倍圖，只需看ppi和dpi的比值就可以了。

2.3.2 應(yīng)用案例——?jiǎng)?chuàng)建iOS系統(tǒng)App文件

源文件：資源包\源文件\第2章\2-3-2.xd

素材：無(wú)

技術(shù)要點(diǎn)：掌握【創(chuàng)建iOS系統(tǒng)中App界面尺寸】的方法

掃描查看演示視頻

STEP 01 啟動(dòng)Adobe XD軟件，單擊主頁(yè)界面中“畫板預(yù)設(shè)”區(qū)域的“移動(dòng)端UI尺寸”下拉按鈕，打開(kāi)如圖2-10所示的移動(dòng)端UI設(shè)計(jì)尺寸下拉列表框。

STEP 02 選擇“iPhone 6、7、8、SE（375×667）”選項(xiàng)，進(jìn)入如圖2-11所示的工作界面。

圖2-10 移動(dòng)端UI設(shè)計(jì)尺寸下拉列表框

圖2-11 進(jìn)入工作界面

STEP 03 單擊工具箱中的“畫板”按鈕，在右側(cè)的“屬性”面板中將出現(xiàn)如圖2-12所示的UI設(shè)計(jì)尺寸列表框。

STEP 04 選擇“iPhone6/7/8/SE”選項(xiàng)，得到如圖2-13所示的新畫板。

圖2-12 UI設(shè)計(jì)尺寸列表框

圖2-13 得到新畫板

？疑問(wèn)解答 iOS系統(tǒng)的UI設(shè)計(jì)尺寸

本案例為創(chuàng)建iOS系統(tǒng)UI設(shè)計(jì)，界面尺寸要符合iOS系統(tǒng)的要求。為了便于適配iOS系統(tǒng)的所有設(shè)備，以iPhone 6的屏幕尺寸為基準(zhǔn)，也就是375px×667px，圖2-14所示為iPhone 6的界面尺寸。狀態(tài)欄的高度為20px，導(dǎo)航欄的高度為44px，標(biāo)簽欄的高度為49px，圖2-15所示為iPhone 6組件的名稱和高度。

圖2-14 iPhone 6的界面尺寸

圖2-15 iPhone 6組件的名稱和高度

2.3.3 使用現(xiàn)有畫板

用戶可以將PSD或者AI文件中的現(xiàn)有畫板導(dǎo)入Adobe XD中。執(zhí)行“文件>導(dǎo)入”命令，彈出“打開(kāi)”對(duì)話框，選擇一個(gè)文件，如圖2-16所示。單擊對(duì)話框右下角的“導(dǎo)入”按鈕，即可在Adobe XD中導(dǎo)入該文件的畫板，如圖2-17所示。

圖2-16 選擇文件

圖2-17 導(dǎo)入畫板

提示

導(dǎo)入的每個(gè)畫板和其包含的圖層都是完整的，并且用戶可以在Adobe XD中對(duì)其進(jìn)行編輯。

2.3.4 管理畫板

用戶在使用畫板的過(guò)程中，可以根據(jù)自己的需求對(duì)畫板進(jìn)行重命名、調(diào)整大小、調(diào)整位置、復(fù)制和重新排列等管理操作。

● 重命名畫板

雙擊畫板標(biāo)題名稱，標(biāo)題將變?yōu)楸贿x中的文本框，如圖2-18所示。在文本框中輸入新的標(biāo)題名稱，完成后單擊工作區(qū)域的空白處確認(rèn)操作，如圖2-19所示。

圖2-18 標(biāo)題變?yōu)槲谋究?/p>

圖2-19 完成重命名操作

● 調(diào)整畫板大小

選中畫板并將鼠標(biāo)光標(biāo)放置在畫板邊緣線中間的圓形手柄上，當(dāng)光標(biāo)變?yōu)榧^狀態(tài)時(shí)，按住鼠標(biāo)左鍵的同時(shí)向下、向左或者向右拖曳圓形手柄，可以調(diào)整畫板的大小。松開(kāi)鼠標(biāo)左鍵，完成調(diào)整畫板大小的操作，如圖2-20所示。

● 復(fù)制畫板

按【Ctrl+D】組合鍵可以快速?gòu)?fù)制當(dāng)前選中的畫板；選中一個(gè)或者多個(gè)畫板，按住【Alt】鍵不放的同時(shí)向任意方向拖曳畫板，可復(fù)制一個(gè)或者多個(gè)畫板，如圖2-21所示。

圖2-20 調(diào)整畫板大小

圖2-21 復(fù)制畫板

提示

選中畫板后，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“拷貝”命令，繼續(xù)在工作區(qū)域的空白處單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“粘貼”命令，即可完成復(fù)制操作。

● 對(duì)齊與分布

選擇多個(gè)畫板，單擊“屬性”面板中“對(duì)齊與分布”選項(xiàng)組中的某個(gè)按鈕，被選中的畫板將按照提示所描述的內(nèi)容進(jìn)行分布與排列，如圖2-22所示。

圖2-22 分布與對(duì)齊

● 調(diào)整畫板位置

選中一個(gè)或者多個(gè)畫板，按下鼠標(biāo)左鍵將其向任意方向的空白位置拖曳，松開(kāi)鼠標(biāo)左鍵即可將畫板移至當(dāng)前位置，如圖2-23所示。

圖2-23 移動(dòng)畫板位置

？疑問(wèn)解答了解屏幕密度與開(kāi)發(fā)單位

屏幕密度是指單位長(zhǎng)度內(nèi)的像素?cái)?shù)量，也就是dpi。如圖2-24所示的兩個(gè)手機(jī)設(shè)備中，同時(shí)設(shè)置2px寬度的按鈕，在屏幕密度較高的手機(jī)上會(huì)顯示得比較小；而同時(shí)設(shè)置的2dp長(zhǎng)度的按鈕，在兩個(gè)手機(jī)上顯示的大小是一樣的。

圖2-24 不同屏幕密度的顯示效果

為了簡(jiǎn)化設(shè)計(jì)環(huán)節(jié)，Android系統(tǒng)平臺(tái)對(duì)屏幕進(jìn)行了區(qū)分，按照像素密度分為低密度屏（LDPI）、中密度屏（MDPI）、高密度屏（HDPI）、超高密度屏（XHDPI）、超超高密度屏（XXHDPI）和超超超高密度屏（XXXHDPI）。它的密度之間的比例關(guān)系為3∶4∶6∶8∶12∶16。

Android系統(tǒng)的屏幕像素密度對(duì)照表如表2-1所示。

表2-1 Android系統(tǒng)的屏幕像素密度對(duì)照表

表2-1（續(xù)）

一部Android手機(jī)的屏幕屬于哪個(gè)等級(jí)的像素密度，可以通過(guò)下面的公式來(lái)計(jì)算：

例如：華為Mate 40 Pro手機(jī)的尺寸為6.76英寸，屏幕分辨率為2772px×1334px。

接近480，所以該手機(jī)的屏幕密度屬于XXHDPI。

目前Android系統(tǒng)最高的屏幕密度已經(jīng)達(dá)到XXXHDPI級(jí)別，但目前來(lái)看，并沒(méi)有太大的使用價(jià)值，因?yàn)檎Ｈ祟惖囊暳υ谶_(dá)到Retina屏幕（即分辨率達(dá)到300ppi）時(shí)，就已經(jīng)無(wú)法分辨像素點(diǎn)了。

當(dāng)然，將來(lái)的VR技術(shù)會(huì)對(duì)屏幕密度有著更高的要求，也許屆時(shí)，屏幕密度會(huì)有更大的提高。

2.3.5 應(yīng)用案例——?jiǎng)?chuàng)建Android系統(tǒng)App文件

源文件：資源包\源文件\第2章\2-3-5.xd

素材：無(wú)

技術(shù)要點(diǎn)：掌握【創(chuàng)建Android系統(tǒng)中App界面尺寸】的方法

掃描查看演示視頻

STEP 01 啟動(dòng)Adobe XD軟件，單擊主頁(yè)界面中“畫板預(yù)設(shè)”區(qū)域的“自定大小”選項(xiàng)的W和H輸入框，輸入如圖2-25所示的畫板尺寸。

STEP 02 為畫板設(shè)定尺寸后，選擇“自定大小”選項(xiàng)，進(jìn)入該畫板尺寸的工作界面，如圖2-26所示。

圖2-25 自定畫板尺寸

圖2-26 工作界面

STEP 03 雙擊畫板標(biāo)題名稱，當(dāng)標(biāo)題名稱變?yōu)槲谋究驎r(shí)，輸入新的畫板名稱，如圖2-27所示，單擊工作區(qū)域的空白處確認(rèn)操作。

STEP 04 連續(xù)兩次按【Ctrl+D】組合鍵，復(fù)制當(dāng)前畫板，完成后Adobe XD的工作區(qū)域如圖2-28所示。

圖2-27 重命名畫板

圖2-28 復(fù)制畫板

？疑問(wèn)解答創(chuàng)建Android系統(tǒng)的UI設(shè)計(jì)尺寸

Android設(shè)備的發(fā)展速度遠(yuǎn)遠(yuǎn)快于iOS設(shè)備，最新發(fā)布的三星Galaxy S21（2400px×1080px）和華為Mate 40 Pro（2772px×1334px）的屏幕分辨率都達(dá)到了XXHDPI。因此，本案例采用1080px×1920px的尺寸進(jìn)行設(shè)計(jì)，如圖2-29所示。設(shè)計(jì)完成后再輸出不同尺寸的素材，供開(kāi)發(fā)人員使用。

Android系統(tǒng)的基本組件與iOS系統(tǒng)相同，同樣包括狀態(tài)欄、導(dǎo)航欄和標(biāo)簽欄。不同的設(shè)備，組件的高度也不相同，本案例中采用的UI設(shè)計(jì)尺寸其狀態(tài)欄高度為60px，導(dǎo)航欄高度為144px，標(biāo)簽欄的高度為150px，如圖2-30所示。

圖2-29 Android系統(tǒng)的UI設(shè)計(jì)尺寸

圖2-30 Android系統(tǒng)的組件高度

官术网_书友最值得收藏!