检查线框并选择导出方式

在正式设计前检查文案顺序、设备呈现,并按接收者选择 Figma、HTML 或 CSV。

Share

先检查结构与文案

线框把构成中的完稿文案排成页面,供团队检查阅读顺序与内容覆盖。对照左侧页面构成目录逐块查看,核对标题、说明、按钮和关键条件是否一致。先判断页面是否讲得通,再讨论最终配色或摄影风格。

线框并不是已完成的品牌视觉稿。图像可能仍是占位内容;把这点写进交接说明,避免接收者把缺少真实素材误认为导出损坏。

电脑与手机分别检查

切换电脑和手机预览,检查首屏是否说明价值、长标题是否遮住内容、按钮与说明是否分离、表格或图像是否难以阅读。需要连续检查时使用全屏。不要因为电脑上结构正确,就认定手机上同样合理。

对于很长的比较或 FAQ,检查移动端信息顺序是否仍能支持决策。可以缩短不必要的留白,但不要为了压低页面高度删掉重要条件和证据。

把调整要求写到具体区块

通过右侧对话说明要调整的区块和目的,例如“精简 FAQ 的留白,保留全部问答”或“首屏增加说明空间,不改变核心主张”。一次尽量围绕同一类问题修改,再检查新结果与构成是否一致。

如果实际要修改的是诉求或大段文案,先回到构成确认,再更新线框。不要只在线框里改变业务承诺,让企划与交付页面保留两套不同说明。

按交付用途选择导出格式

生成和保存完成后,打开线框界面的导出菜单,按用途选择格式。

  • Figma:交给设计人员继续制作,导入后分别检查电脑和手机线框。
  • HTML:用浏览器查看结构或交给开发参考。这是线框的 HTML 文件,图片可能为占位内容,与页面编辑器的 HTML ZIP 不同。
  • 构成 CSV:以表格核对构成案、板块序号、名称和要点等内容,用于交接文案与结构。

下载后打开文件,检查内容、版本与缺项。CSV 不能代替页面布局。

获取 Figma 导出码并导入

  1. 选择导出到 Figma,等待数据准备完成,复制显示的导出码。
  2. 在 Figma 的 Ptengine 插件中打开“Import wireframe”,粘贴代码并导入。
  3. 检查所需的电脑、手机数据是否齐全,再核对板块数量、顺序与文字。

界面显示有效期或使用状态时,按对应提示操作。若提示过期、已使用或无效,回到导出入口重新获取代码后再试。不要反复粘贴旧码,也不要把复制完成当成导入成功。

导出后确认交付内容

检查文件是否来自最后确认的版本、占位图是否标明、需要补的素材是否有负责人。导出失败时记录所选格式和原始错误提示,再重试;持续失败时提供这些信息协助排查。若由你继续制作,可以进入编辑器;若由其他人制作,一并交付企划依据,而不只发送孤立截图。下一步见页面制作的不同入口。

自行继续制作时,确认线框至少有 3 个板块,且生成与同步已完成,再点击“进入编辑器”。操作和更新目标见从企划制作第一个页面。