界面原型需要把页面和操作连接起来，让参与讨论的人能看清按钮点下去以后会发生什么。导出图片则用于展示或交付素材，两者的用途不同。下面介绍“Sketch怎么制作界面原型Sketch设计稿导出失败怎么办”，以Mac应用的英文界面为例，使用当前的Frame和原型工具。开始练习时，可以先制作首页、详情页和一个弹窗。

　　一、Sketch怎么制作界面原型

　　先完成页面内容，再连接主要操作，预览时检查是否能按预期返回。原型中的跳转用于演示交互，不会自动生成应用程序。

　　1、创建界面容器

　　Frame用于组织页面和内部元素。相同设备的页面应采用一致尺寸，方便检查布局和切换效果。

　　①按Command+N新建文档。

　　②按F创建Frame，在右侧选择尺寸模板或填写宽高。

　　③按R绘制按钮和内容区域，按T添加文字，将元素放入对应Frame。

　　④复制Frame制作详情页，修改内容并给各页面命名，按Command+S保存。

　　2、连接按钮与目标页面

　　链接可以从按钮图层连接到目标Frame。返回按钮可以回到之前浏览的页面，不必为每个来源单独创建一份详情页。

　　①选中首页按钮，按I拖出连接线，点击详情页Frame。

　　②在【Prototype】中检查【Target】，通过【Animation】选择切换效果。

　　③选中返回按钮，按I连接首页，再将【Target】设为【Previous Frame】。

　　3、制作弹窗

　　弹窗通常叠加在当前页面上，尺寸小于主界面。弹窗的位置和关闭方式需要单独设置。

　　①创建弹窗Frame，在原型面板中开启【Set as overlay】。

　　②点击【Aligned to View】，设置位置和遮罩，将【Interactions】设为【Closes Overlay】。

　　③选中打开弹窗的按钮，按I连接到弹窗，将【Trigger】设为【Tap】。

　　4、预览主要流程

　　预览起点决定演示从哪里开始。链接目标正确，但起点不合适，也可能让查看者看不到完整流程。

　　①选中首页，在【Prototype】中勾选【Set as prototype start point】。

　　②按Command+P打开预览，依次测试进入详情、返回首页和打开弹窗；发现错误后回到对应图层修改。

　　二、Sketch设计稿导出失败怎么办

　　先确认是没有导出项目、文件无法保存，还是导出时卡住。保留原稿，再用单个页面测试，便于缩小问题范围。

　　1、检查导出项目和预设

　　批量导出只会列出已设置为可导出的项目。选中了页面，并不代表它已经进入批量导出列表。

　　①选中目标Frame或图层，在右侧点击【Make Exportable】。

　　②在导出预设中检查【Size】和【Format】，先使用1x、PNG测试。

　　③点击【Export Selected】；批量导出时，打开【File】→【Export】→【All Assets】，勾选目标项目后点击【Export】。

　　2、检查保存位置

　　磁盘空间不足、目录没有写入权限或外接磁盘断开，都可能影响保存。文件没有出现在预期目录，也可能只是保存位置选错。

　　①在保存窗口中改选本地可写文件夹，使用简短文件名重新导出。

　　②检查磁盘剩余空间和文件夹权限；导出成功后，通过底部提示中的箭头打开实际保存目录。

　　3、缩小导出范围

　　超长页面、高倍导出和大量图片会增加处理量。只有某个页面失败时，应进一步检查其中的图层，不能据此认定整个文档损坏。

　　①将批量导出改为单个Frame，检查是否仅某个页面失败。

　　②降低【Size】中的倍数，关闭其他占用内存较多的应用后重试。

　　③在文档副本中分批移除图片或复杂效果，每次重新导出，定位异常对象。

　　④重新导入异常图片或重建相关图层，再按实际交付尺寸导出。

　　4、排查插件和版本影响

　　安装了插件的版本，可以通过安全模式判断问题是否与插件有关。部分导出故障也可能由软件缺陷引起，应结合版本更新记录核对。

　　①保存文档并退出Sketch，按住Shift重新启动，使用内置导出功能测试。

　　②安全模式下恢复正常时，打开【Plugins】→【Manage Plugins】，逐个排查插件，更新或停用异常插件。

　　③仍然失败时，在新文档中创建简单Frame测试；确认属于版本问题后，安装与当前macOS兼容的修复版本。

　　三、Sketch原型和设计稿怎么交付

　　需要查看页面外观时，可以导出静态文件；需要体验操作流程时，则分享原型。导出成功后还应打开成品，检查内容是否完整。

　　1、选择合适的输出格式

　　PNG适合展示界面，SVG适合交付矢量素材，PDF便于集中查看多个页面。部分效果无法在所有格式中一致呈现，图片和PDF也不能代替可交互原型。

　　①导出矢量素材时，在【Format】中选择SVG，打开成品核对边框、文字和效果。

　　②导出多个页面时，点击【File】→【Export】→【Export Frames to PDF】，选择需要的Frame，保存后检查页面顺序。

　　2、分享可交互原型

　　原型分享需要文档保存在Workspace中。对方能打开文档，并不一定有素材下载权限；网页预览也可能暂时显示旧版本。

　　①保存Workspace文档，在原型预览窗口中点击分享图标，复制原型链接。

　　②在文档的分享设置中核对查看权限；需要下载素材时，检查【Can download and inspect】。

　　③网页仍显示旧内容时，退出原型播放器，从文档最新版本重新打开；批量素材下载还需在Mac应用中设置可导出项目。

　　总结

　　希望“Sketch怎么制作界面原型Sketch设计稿导出失败怎么办”这篇文章能帮到大家。界面设计需要把想法表达清楚，也需要在交流中不断完善。专业工具能为讨论提供直观依据，让设计、产品和开发人员更容易理解彼此的工作。熟悉软件需要时间，对使用体验的判断也来自平时的观察和积累。希望大家能在实践中有所收获，把所学用到合适的项目中，让设计成果更贴近实际需求。如果有Sketch软件选用方面的需求，欢迎联系咨询。