2.3 创建和管理画板
在Adobe XD中，画板代表App的屏幕或者网站中的网页，它可以简化设计流程，并且在一个文件内可以创建多个画板，用于适配不同屏幕尺寸或者完善UI的整体设计。
2.3.1 创建新画板
进入新建文件后，无论Adobe XD的工作区域是否存在画板，用户都可以创建新的画板。单击工具栏中的“画板”按钮
，工作界面右侧的“属性”面板中将出现画板尺寸列表框。选择任意画板尺寸，如图2-5所示，即可将该尺寸的画板添加到工作区域中，如图2-6所示。
图2-5 选择画板尺寸
图2-6 添加画板到工作区域
用户也可以使用“画板工具”在工作区域的空白处单击并向下和向右拖曳创建自定尺寸的画板。创建自定画板时，“属性”面板中的W和H值随画板大小的变化而变化，如图2-7所示。
松开鼠标后，自定画板创建完成。如果对画板尺寸不满意，可以继续调整“属性”面板中W和H的数值，直到满意为止，如图2-8所示。
图2-7 创建自定画板
图2-8 调整画板尺寸
？疑问解答 了解像素与分辨率
很多设计师在开始学习iOS系统UI设计时，经常问到的就是如何设定App的分辨率和尺寸。要想弄清楚分辨率和尺寸的概念，首先要了解像素和分辨率的关系。
很多设计师之所以没有弄清楚分辨率和像素，是因为没有弄明白什么是英寸。电视机有21英寸、25英寸和29英寸等尺寸，同样手机也有4.7英寸和5.0英寸等尺寸。
用英寸来表示一个面，很多人误以为英寸是一个面积单位，也就是说把英寸看成了是平方英寸。这会对分辨率产生完全不一样的认识。其实这里的英寸是指屏幕对角线的长度，英寸实际上是长度单位。图2-9所示为不同型号的iPhone手机屏幕的尺寸。
图2-9 不同型号iPhone手机屏幕的尺寸
分辨率的单位分为ppi和dpi。
ppi：是指每英寸所包含的像素点的数目。
dpi：是指每英寸所包含的点的个数。
dpi和ppi区别并不大，只是像素和点的区别。像素是设计师使用的最小设计单位，点则是iOS开发的最小单位。对于dpi，设计师只需了解即可，ppi才是需要重点掌握的。
提示
设计师日常所说的二倍图和三倍图就是指屏幕中一个点中有两个像素或者三个像素。一个设备究竟要使用二倍图还是三倍图，只需看ppi和dpi的比值就可以了。
2.3.2 应用案例——创建iOS系统App文件
源文件：资源包\源文件\第2章\2-3-2.xd
素材：无
技术要点：掌握【创建iOS系统中App界面尺寸】的方法
扫描查看演示视频
STEP 01 启动Adobe XD软件，单击主页界面中“画板预设”区域的“移动端UI尺寸”下拉按钮
，打开如图2-10所示的移动端UI设计尺寸下拉列表框。
STEP 02 选择“iPhone 6、7、8、SE（375×667）”选项，进入如图2-11所示的工作界面。
图2-10 移动端UI设计尺寸下拉列表框
图2-11 进入工作界面
STEP 03 单击工具箱中的“画板”按钮，在右侧的“属性”面板中将出现如图2-12所示的UI设计尺寸列表框。
STEP 04 选择“iPhone6/7/8/SE”选项，得到如图2-13所示的新画板。
图2-12 UI设计尺寸列表框
图2-13 得到新画板
？疑问解答 iOS系统的UI设计尺寸
本案例为创建iOS系统UI设计，界面尺寸要符合iOS系统的要求。为了便于适配iOS系统的所有设备，以iPhone 6的屏幕尺寸为基准，也就是375px×667px，图2-14所示为iPhone 6的界面尺寸。状态栏的高度为20px，导航栏的高度为44px，标签栏的高度为49px，图2-15所示为iPhone 6组件的名称和高度。
图2-14 iPhone 6的界面尺寸
图2-15 iPhone 6组件的名称和高度
2.3.3 使用现有画板
用户可以将PSD或者AI文件中的现有画板导入Adobe XD中。执行“文件>导入”命令，弹出“打开”对话框，选择一个文件，如图2-16所示。单击对话框右下角的“导入”按钮，即可在Adobe XD中导入该文件的画板，如图2-17所示。
图2-16 选择文件
图2-17 导入画板
提示
导入的每个画板和其包含的图层都是完整的，并且用户可以在Adobe XD中对其进行编辑。
2.3.4 管理画板
用户在使用画板的过程中，可以根据自己的需求对画板进行重命名、调整大小、调整位置、复制和重新排列等管理操作。
● 重命名画板
双击画板标题名称，标题将变为被选中的文本框，如图2-18所示。在文本框中输入新的标题名称，完成后单击工作区域的空白处确认操作，如图2-19所示。
图2-18 标题变为文本框
图2-19 完成重命名操作
● 调整画板大小
选中画板并将鼠标光标放置在画板边缘线中间的圆形手柄上，当光标变为箭头状态时，按住鼠标左键的同时向下、向左或者向右拖曳圆形手柄，可以调整画板的大小。松开鼠标左键，完成调整画板大小的操作，如图2-20所示。
● 复制画板
按【Ctrl+D】组合键可以快速复制当前选中的画板；选中一个或者多个画板，按住【Alt】键不放的同时向任意方向拖曳画板，可复制一个或者多个画板，如图2-21所示。
图2-20 调整画板大小
图2-21 复制画板
提示
选中画板后，单击鼠标右键，在弹出的快捷菜单中选择“拷贝”命令，继续在工作区域的空白处单击鼠标右键，在弹出的快捷菜单中选择“粘贴”命令，即可完成复制操作。
● 对齐与分布
选择多个画板，单击“属性”面板中“对齐与分布”选项组中的某个按钮，被选中的画板将按照提示所描述的内容进行分布与排列，如图2-22所示。
图2-22 分布与对齐
● 调整画板位置
选中一个或者多个画板，按下鼠标左键将其向任意方向的空白位置拖曳，松开鼠标左键即可将画板移至当前位置，如图2-23所示。
图2-23 移动画板位置
？疑问解答 了解屏幕密度与开发单位
屏幕密度是指单位长度内的像素数量，也就是dpi。如图2-24所示的两个手机设备中，同时设置2px宽度的按钮，在屏幕密度较高的手机上会显示得比较小；而同时设置的2dp长度的按钮，在两个手机上显示的大小是一样的。
图2-24 不同屏幕密度的显示效果
为了简化设计环节，Android系统平台对屏幕进行了区分，按照像素密度分为低密度屏（LDPI）、中密度屏（MDPI）、高密度屏（HDPI）、超高密度屏（XHDPI）、超超高密度屏（XXHDPI）和超超超高密度屏（XXXHDPI）。它的密度之间的比例关系为3∶4∶6∶8∶12∶16。
Android系统的屏幕像素密度对照表如表2-1所示。
表2-1 Android系统的屏幕像素密度对照表
表2-1（续）
一部Android手机的屏幕属于哪个等级的像素密度，可以通过下面的公式来计算：
例如：华为Mate 40 Pro手机的尺寸为6.76英寸，屏幕分辨率为2772px×1334px。
接近480，所以该手机的屏幕密度属于XXHDPI。
目前Android系统最高的屏幕密度已经达到XXXHDPI级别，但目前来看，并没有太大的使用价值，因为正常人类的视力在达到Retina屏幕（即分辨率达到300ppi）时，就已经无法分辨像素点了。
当然，将来的VR技术会对屏幕密度有着更高的要求，也许届时，屏幕密度会有更大的提高。
2.3.5 应用案例——创建Android系统App文件
源文件：资源包\源文件\第2章\2-3-5.xd
素材：无
技术要点：掌握【创建Android系统中App界面尺寸】的方法
扫描查看演示视频
STEP 01 启动Adobe XD软件，单击主页界面中“画板预设”区域的“自定大小”选项的W和H输入框，输入如图2-25所示的画板尺寸。
STEP 02 为画板设定尺寸后，选择“自定大小”选项，进入该画板尺寸的工作界面，如图2-26所示。
图2-25 自定画板尺寸
图2-26 工作界面
STEP 03 双击画板标题名称，当标题名称变为文本框时，输入新的画板名称，如图2-27所示，单击工作区域的空白处确认操作。
STEP 04 连续两次按【Ctrl+D】组合键，复制当前画板，完成后Adobe XD的工作区域如图2-28所示。
图2-27 重命名画板
图2-28 复制画板
？疑问解答 创建Android系统的UI设计尺寸
Android设备的发展速度远远快于iOS设备，最新发布的三星Galaxy S21（2400px×1080px）和华为Mate 40 Pro（2772px×1334px）的屏幕分辨率都达到了XXHDPI。因此，本案例采用1080px×1920px的尺寸进行设计，如图2-29所示。设计完成后再输出不同尺寸的素材，供开发人员使用。
Android系统的基本组件与iOS系统相同，同样包括状态栏、导航栏和标签栏。不同的设备，组件的高度也不相同，本案例中采用的UI设计尺寸其状态栏高度为60px，导航栏高度为144px，标签栏的高度为150px，如图2-30所示。
图2-29 Android系统的UI设计尺寸
图2-30 Android系统的组件高度