画板工具应用:在一个PSD文件中设计多个手机屏幕页面,UI设计师多页面管理的利器

画板工具应用：在一个PSD文件中设计多个手机屏幕页面，UI设计师多页面管理的利器

大家好，这里是甜姐姐～今天咱们聊个UI同学、产品同学、以及爱折腾手机界面的小伙伴都离不开的东西：PS 画板工具（Artboard）。

很多小伙伴做手机界面还停留在那种——一张 PSD 里就一屏，想再做一页就新建一个PSD，结果：

一个项目下来，PSD 文件多得跟相册似的；
版本改来改去，不知道哪个是最新版；
切图、导出预览全靠手动，一个字：乱。

其实 PS 早就给我们准备好了一个多页面管理利器——画板。简单理解就是：一个PSD文件里塞一整套手机界面还能排得整整齐齐，看着就很高级。

这篇文章，甜姐姐带你从零上手：

画板到底是啥，有啥用？
怎么在一个PSD里整齐放下好多手机屏幕？
如何快速复制页面、统一状态栏、导出所有页面？

放心，步骤全都有，快捷键也给你标好，照着做就能直接上手。

一、画板是啥？为啥UI设计必须要会

先把概念说人话一点：画板 = 画布里的小画布。

普通模式下，PS 只有一块大画布，你所有东西都堆在上面；而用了画板模式以后，这块大画布里面可以分出好多小”手机屏幕”区域，每一个画板就是一页界面。

1. 画板能帮你解决啥问题？

一个PSD管理整套页面

：登录、首页、详情、个人中心，全在一张 PSD 里。
一次导出所有页面

：不用一屏一屏截图，导出贼省心。
统一组件更方便

：比如状态栏、底部导航，这些复用组件改一次全同步。
项目结构一眼明了

：打开文件看到一排列好的手机屏幕，甲方都会觉得你”贼专业”。

小类比：把画板想象成PPT里的每一张幻灯片，只是现在它是在PS里，而且你能在一张大桌面上同时看到所有幻灯片。

2. 什么时候应该用画板？

只要你不是只做一张图，而是：

做完整 App 界面流；
做一套活动页、引导页；
做多状态页面（未登录、已登录、错误状态等等）；

统统建议用画板。

二、从零开始：新建一个专门给手机界面的画板文件

1. 新建画板文件的正确姿势

打开 PS，按 Ctrl+N（Mac：Cmd+N）新建文件。
在弹出的窗口里，注意找一下文档类型里有没有专门的移动设备/移动界面预设。
如果懒得找，你可以手动输参数，比如要做 iPhone 11 界面：

宽度：375 px
高度：812 px
分辨率：72 ppi

最关键一步：勾上“画板”（英文版是 Artboards）。
点击确定。

这样一来，你的第一块手机界面画板就建好了。

容易踩的坑：很多人新建文件的时候忘了勾“画板”，结果后面再改费劲。所以一开始就勾上，省心。

2. 已经有PSD了还能变成画板吗？

如果你之前已经有一张普通画布的 PSD，也可以改成画板：

在图层面板左下角，点击小菜单按钮（或者右键背景图层）。
选择“转换为画板”/“新建画板”类似选项。
给画板起个名字，比如“首页”。

这样老文件也能升级成多页面管理系统了。

三、一个PSD里放下多屏：画板的增删、排列和命名

1. 复制画板：让第二屏”秒长出来”

假设你已经设计好一屏“首页”，现在想做“首页-下拉刷新中”这一页，只是状态略有不同，这时候不用从头新建：

在图层面板里找到你的画板（看起来像一个文件夹图标，左边有画板的小图标）。
选中这个画板，按 Ctrl+J（Mac：Cmd+J）。
PS 会帮你复制一整个画板，所有层都在，简直像”克隆”了一整屏界面。
拿移动工具 V，把这个新画板拖到旁边排好。

小技巧：复制画板的时候，可以先把高度、状态栏这些定好，再复制，这样后面每一屏都整整齐齐。

2. 新建一个空白画板

如果你想完全从空白开始做第二屏：

切到移动工具（快捷键 V）。
顶部选项栏里会出现一个“画板工具”相关的选项。
点击新建画板，可以在旁边建一个同尺寸的空白画板。

3. 给画板起名字，别让自己迷路

不用名字的话，多做几屏你就会陷入“未标题-1 拷贝拷贝拷贝”的地狱。

甜姐姐建议你直接：

双击图层面板里画板的名称，比如“画板 1”。
改成有意义的名字：01_启动页、02_登录页、03_首页这类。
前面加上数字排序，后期导出、交接都巨清晰。

命名建议：“01_首页-默认”“02_首页-刷新中”“03_首页-空数据”，一眼看懂，还能知道流程顺序。

四、画板里的图层与对齐：像排PPT一样排你的一整套界面

1. 画板里的图层是怎么组织的？

每一个画板，就像一个单独的图层文件夹，里面可以有：

背景色 / 背景图
状态栏、导航栏
内容区域组件

移动的时候有两种思路：

只在画板内移动元素

：选中画板里的图层直接拖动。
整体移动画板

：选中画板本身，用移动工具拖动，整屏一起走。

常见误区：有时候你拉一个图层，结果跑到另一个画板里去了。解决方法：拖动时注意看图层面板里，它要归属哪个画板，放手前确认一下。

2. 快速对齐多个画板

想让画板排成一行，像整齐的手机展示墙：

按住 Shift，在图层面板里多选几个画板。
切到 V 移动工具。
上方工具栏里使用对齐图标（顶对齐、垂直居中、水平分布等）。

这样可以让多个画板之间间距一致，看上去非常有“系列感”。

五、怎么在多个画板之间复用组件：状态栏、底部导航一改全改

1. 普通复制粘贴

最简单粗暴，也是很多人一开始的用法：

在画板 A 里选中你要复用的图层或图层组。
按 Ctrl+C → 切到画板 B → Ctrl+V。
用 V 移动工具对齐到顶部或底部。

适合刚开始熟悉画板的小伙伴。

2. 按住 Alt 拖动复制（更直觉）

如果两个画板靠得近，你可以：

在画板 A 中选中状态栏图层组。
按住 Alt（Mac：Option）。
直接拖到画板 B 上方，松手。

这就像拽橡皮泥一样，拽一块过去就复制了一份。

3. 智能对象复用（进阶但很香）

如果你有一个在所有页面都一样的导航栏，且以后可能会改样式，就可以：

选中导航栏图层组，右键 → 转换为智能对象。
复制这个智能对象到所有需要的画板里。
以后你只要在任意一个画板里，双击智能对象缩略图修改，保存后，所有页面上的导航栏都会跟着变。

使用场景：统一的底部 TabBar、统一的顶部标题栏，统一修改，改一次全项目生效，非常适合迭代频繁的项目。

六、导出多页面：一键导出所有手机屏幕图

1. 用“导出为画板”一键导出

设计完一整套界面，甲方爸爸要你发全部页面预览，这时候就轮到画板的终极大招登场了：

菜单栏选择：文件 → 导出 → 将画板导出为文件（英文类似“Export Artboards to Files”）。
在弹出的窗口里：

选择导出格式：PNG 或 JPG。
设置文件命名前缀，比如“App_V1_”。
选择导出路径。

确定后，PS会按照你画板的名字，自动导出一批图。

比如画板名是“01_登录页”，导出来就会是“App_V1_01_登录页.png”，有序又清楚。

2. 快速导出单个画板

如果只想导出某一屏：

选中对应的画板。
右键 → 导出为（Export As）。
设置分辨率（一般 1x 或 2x，看你项目需求），点击导出。

注意：导出前最好检查一下画板背景是否填色，不然导出 PNG 可能是透明背景，看起来像没加载完似的。

七、常见坑 & 小贴士：让你的多画板文件更好用

1. 文件越来越大怎么办？

多画板虽然方便，但也容易让 PSD 体积一路飙升。甜姐姐几个小建议：

能用矢量图形就别全用位图（形状图层会比大量大图轻很多）。
背景图适当压缩尺寸和质量，手机界面不需要超高像素。
旧版本可以定期存一个精简版，把不再用的画板单独存出去归档。

2. 画板对齐混乱

如果你的画板排得东一块西一块，看着就很没秩序感：

用对齐和分布工具把画板排成整齐的一行或两行；
保持画板之间间距大致一致（比如 200px），画面会清爽很多。

3. 别在一个画板里塞太多状态

有的人图省事，把“弹窗状态”“加载中状态”全堆在一个画板里，想靠隐藏/显示图层区分。短期看着方便，时间久了你自己都会迷糊。

更推荐：

不同核心状态单独一个画板；
命名里把状态写清楚，比如“03_首页-加载中”。

八、最后总结：画板的高级感，其实来自“克制”和“整齐”

绕了一圈，甜姐姐帮你把重点捋一捋：

画板=一个PSD里的多块小画布

，非常适合做一整套手机界面。
新建文件时记得勾选“画板”，从一开始就搭好结构。
用 Ctrl+J 复制画板，一屏做完再克隆出新状态，省时省力。
统一命名、合理排列，让整个项目结构一眼明了。
学会用智能对象复用组件，让修改变成“改一次，全项目生效”。
最后用“将画板导出为文件”，一键导出所有页面，交付又快又整齐。

所谓设计里的“高级感”，很多时候不是炫酷效果堆出来的，而是：

结构清晰；
命名规范；
页面排布有秩序；
该分开的分开，该统一的统一。

画板工具就是帮你把这些做好的一把利器。用得越克制、有条理，你的 PSD 文件就越“高级”，别人一打开就知道：哎哟，这人做事挺讲究啊。

如果你已经会基本的画板操作，可以试着给自己布置个小练习：在一个PSD里完成一套3～5页的App流程（比如启动→登录→首页），从命名、排版到导出都走一遍，你会很快习惯这种多画板工作流。

以后如果你想让甜姐姐再聊聊“多分辨率导出”“配合切图插件用画板”的进阶用法，也可以在心里先记个小愿望，我们慢慢一起挖掘～