9.2 产品经理利器：PS与XD的结合使用

9.2  产品经理利器：PS与XD的结合使用

UI设计也是一个时下非常流行的话题，好的UI 设计常常需要深入地考虑用户的操作使用习惯，以及在使用过程中的具体体验。

基于以上种种原因，仅仅使用PS来完成画面操作就不足以满足日益精细的UI设计需求了。很多像“多2个像素”这样的口头需求，也很难让设计师直观理解，在这里，我推荐产品经理可以使用Adobe XD。

使用PS导出PNG图片或JPG图片，随后在XD中新建自己所需要的文件，或直接使用“您的计算机”打开已经整理好分组的PSD文件（如图9-3）。

图9-3

如果是新建的文件，则需要使用矩形框或将预先处理好的一些图片直接拖入你的文件，按住Shift键可以等比缩放调整大小。完成后，你可以在左上角的“原型”中设置页面跳转热区和跳转响应画。通过这种方式，你可以更高效地处理画面之间的比例和转换，揣摩用户的使用习惯。

如果你是通过“您的计算机”打开现成的PSD文件，那么你在XD中看到的文件依旧是分层的，而分层规则是依据了之前在PS中的“编组”。

当然作为Adobe的成员，XD所拥有的强大兼容性远远不止服从图层调整那么简单。在XD中也同样存在着图层的概念，如果你想更细微地调整某一具体图层中画面元素的位置，就可以找到左侧的图层按钮，找到具体的图层位置（如图9-4）。

图9-4