简介面向高校人机交互课程学生与需要完成交互设计项目的开发者这份人机交互设计大作业资源包围绕企业食堂订餐系统的完整设计流程展开。包内含22个文件涵盖docx文档、pptx演示文稿、PDF理论资料、HTML网页及原型压缩包等类型整体大小17.62MB兼顾需求分析、原型设计、代码规范与汇报展示等多个环节。内容从订餐系统需求分析、WBS任务分解到交互原型、界面规范与模型理论均有涉及并配有git使用指南、文件命名规范等过程性文档可帮助读者快速理解人机交互设计大作业的完整输出结构。其中web目录包含可打开的页面文件原型压缩包则保留可编辑的设计版本便于二次修改与复用。目前已有4538人学习下载适合用于课程设计参考、答辩准备或团队协作流程梳理尤其是对订餐类交互系统感兴趣的人群。1. 一份人机交互设计大作业.zip交出去之前先搞懂评审拆开压缩包后想看什么期末前夜把 Figma 链接、Axure 源文件、十几张截图和一份 8000 字的 Word 文档一股脑拖进文件夹右键压缩为 zip就提交——这是人机交互设计大作业最常见的翻车现场。评审老师下载这份人机交互设计大作业.zip 后第一件事不是逐张看图而是先看文件树能不能在 30 秒内定位到报告、原型 demo 和演示视频。这篇文章不讲空泛的设计思维只讲一份拿得出手的 zip 该怎么组织内容、怎么写报告、怎么做可运行原型、怎么打包不出乱子以及答辩现场怎么把 zip 里的东西讲明白。适合正在赶课程大作业的学生也适合带毕设或课程设计的指导老师参考。2. 拆解大作业.zip 的交付结构先把文件树搭对再往里面填内容很多人写大作业的习惯是把所有材料先堆在桌面最后一天才开始整理结果压缩包里全是新建文档最终版2.0未命名.png。评审不是考古专家不会帮你在乱糟糟的文件堆里找重点。正确的顺序是写第一行字之前先把空的目录树建好每产出一个文件就丢进对应目录最后打包时只做核对不做整理。这个习惯和写代码之前先建工程目录一模一样。目录结构本身就在表达你的设计流程它让老师不点开任何文档就已经看出你做了需求调研、原型迭代、测试评估这几件事。下面我把一套我用过四年的结构完整写出来你可以直接抄。2.1 文件树该怎么排让老师 30 秒找到核心交付物一套规范的顶层结构大概长这样交互设计大作业_学号_姓名/ ├── 01_需求与调研/ │ ├── 需求分析报告.pdf │ ├── 用户访谈记录.docx │ └── 竞品分析表格.xlsx ├── 02_设计过程/ │ ├── 设计报告.pdf │ ├── 原型迭代记录.docx │ └── 线框图_初版_v1/ ├── 03_交互原型/ │ ├── 可运行Demo/ │ │ ├── index.html │ │ └── assets/ │ └── 原型演示视频.mp4 ├── 04_测试与评估/ │ ├── 可用性测试报告.pdf │ ├── SUS量表原始数据.xlsx │ └── 测试任务记录.md └── README.txt第一层目录用序号_类别命名是因为文件管理器默认按名称排序01、02、03、04 按顺序排列后恰好构成一条阅读动线先看需求再看设计接着打开原型体验最后看测试证据。这个顺序和评审的打分逻辑一致老师从左到右点一遍你的工作过程就完整呈现了。有几个细节容易踩坑。第一命名里不要带空格和中文括号因为很多学校的作业系统跑在 Linux 服务端解压后中文可能乱码带空格的文件名在命令行里还要转义等于给助教增加操作成本。第二README.txt 一定要写内容不需要长三段话就够项目一句话简介、各目录里放什么、Demo 怎么启动。老师打开压缩包第一眼先看它相当于是你的交付物地图。第三过程稿不要和最终稿混放草稿单独放一个过程文件目录或者干脆不放让 04 之后永远只有最终交付物。下面这张对照表可以帮你自查命名是否合格错误示范正确示范原因新建文件夹(3).zip交互设计大作业_学号_姓名.zip顶层文件名就要标识身份报告.docx设计报告.pdf避免 Word 版本差异排版不乱最终版最终版2.0.pdf原型迭代记录.docx版本信息写进文档标题不靠文件名截图1.png线框图_初版_v1.png写明是什么、哪一版方便回溯demo/index.html可运行Demo/index.html老师能直接找到入口2.2 四类必备文件与命名规范从需求文档到交互原型的目录清单压缩包里到底该装哪几类文件取决于这门课想考察什么。绝大多数人机交互设计大作业要考察的是你有没有完整走一遍以用户为中心的设计流程所以最少需要四类东西正好对应上面的一级目录。第一类是需求与调研包括需求分析报告、用户访谈记录、竞品分析表格。需求分析报告建议导出成 PDF因为 Word 在不同设备上打开排版会乱访谈记录保留 docx 反而方便老师批注竞品分析表格用 xlsx最好带一列可借鉴点和本设计对应方案不要只罗列竞品截图。访谈原始录音不要打包进 zip体积大且有隐私问题只需要放转录后的文字。第二类是设计过程核心是设计报告和原型迭代记录。设计报告是整份 zip 的正文页数不限但结构要清晰背景与问题定义、用户研究、设计目标、信息架构、线框图、高保真、迭代记录。线框图部分不要只放最终版把 v1、v2、v3 并列能直观展示你的演进过程。原型迭代记录可以单独成文我在第 3 章会细讲它怎么写。第三类是交互原型也就是可运行的 demo 和演示视频。这里有一个高频翻车点只交 Axure 源文件。老师的电脑上不一定装了 Axure你交一个 .rp 文件等于没交。必须导出一份纯 HTML/JS 的可运行版本或者录一段 MP4 演示视频。如果两者都给视频优先展示核心流程HTML 让老师自己点。第四类是测试与评估包括可用性测试报告和原始数据。原始数据比结论重要老师会翻你的 SUS 量表、任务完成率表格判断你的测试是不是真的做了还是编的。测试报告里写明测试时间、地点、人数、任务列表、测量指标、被试筛选条件这些细节最能体现严谨性。2.3 可交互原型 vs 静态图纸为什么评审两者都要看我见过两类极端作业一类只有设计报告里贴满截图没有任何可交互的东西另一类是只有一个 Axure 源文件没有任何过程文档。前者的问题是无法验证交互是否成立静态图纸上画得再漂亮按钮能不能点、页面怎么跳转老师看不到后者的问题是无法验证你是否有完整的设计流程你到底有没有做调研、有没有迭代老师完全不知道。正确的做法是让两者互相印证。设计报告里的线框图和高保真图解决的是你设计过什么的问题可交互 demo 解决的是你的设计能不能跑起来的问题。评审双线并行先点开 demo 走一遍主流程如果发现某个按钮点了没反应会翻到设计报告里去找交互说明如果报告里也没写这处交互就等于没做。反过来报告里写了十个功能点demo 里只能跑到三个也会被扣分。所以压缩包里这两类内容必须同时存在且要保持一致。demo 里的页面结构、文案、颜色必须和报告里的高保真图对得上。不一致的结果比缺文件更糟老师会认为你工作态度有问题。我的做法是改一版设计就同步更新报告截图和 demo宁可多花十分钟也不要留下两个版本对不上的痕迹。3. 把设计过程写进报告从用户研究到可用性测试的证据链怎么做报告是大作业.zip 的灵魂但很多人的报告写得像说明书堆了一堆问卷截图、用户访谈记录、任务完成率表格却没说清楚这些数据到底怎么影响了设计决策。评审想看的是证据链——你通过什么方法得到了什么结论这个结论又怎么转化为具体的界面设计。这一章把报告里最关键的三个部分拆开讲。3.1 用户研究部分别只贴问卷截图要讲出决策逻辑用户研究是报告的第一块内容也是最容易写成流水账的地方。典型写法是我们设计了问卷通过微信群发放回收 50 份其中男生 28 人女生 22 人然后就没有然后了。这种写法等于告诉老师你只做了数据收集没有做分析。我一般要求报告里每一个数据后面都要跟一句所以形成闭环。比如50 人中有 42 人每周使用二手交易平台 1 到 3 次其中 30 人抱怨找不到想要的物品、22 人抱怨图片加载慢——所以本次设计把搜索与筛选作为首页核心模块并对图片列表做懒加载优化。访谈记录同理不要整段贴两个人的对话而是提炼典型引用然后说明这句话对应了哪个设计决策。颗粒度也要控制。问卷只写总体结论和交叉分析的关键发现交叉表放附录访谈每一段引用后必须有分析不能只引不加。记住评审老师大概率不会逐字读你的用户研究部分他找的是数据到决策的推导过程。每个设计决策至少能找到一条支撑数据这个报告就算立住了。3.2 原型迭代记录截图对比加修改理由最容易拿分的章节原型迭代记录是整份报告里性价比最高的一章因为它不需要数据只需要真实记录你改稿的过程。哪怕你从头到尾只改了三次也比一次性给出完美终版更能体现设计能力。评审想看的是你怎么发现问题、怎么权衡方案、怎么做出取舍。标准格式是一张对比表加一段说明文字。表格里放三个版本每一行一个关键修改点版本问题描述修改内容修改理由v1价格筛选放在二级页面筛选器移到列表页顶部常驻可用性测试中 3/5 用户没找到筛选入口v2搜索框宽度 200px弱于左侧分类导航搜索框放大并置顶用户调研显示搜索找到物品是最高频诉求v3确认订单页信息层级混乱金额、地址、商品图分卡片呈现用户完成订单平均耗时 v2 为 48 秒v3 降至 32 秒这个表格的好处是让老师一眼看到你的思考过程发现问题、定位原因、给出方案、验证效果。迭代不需要多三四轮足够每一轮的改动点都要具体。不要写调整了整体风格这种模糊描述要写清楚改了哪个控件、为什么改、对用户行为有什么影响。没有测试支撑的修改就写根据竞品分析或依据尼尔森原则总之每个改动都要有出处。3.3 可用性测试任务完成率、出错率与 SUS 量表怎么报可用性测试是很多学生最心虚的部分因为看起来不科学。其实课程大作业不需要几十个被试5 到 8 人就能得到有效结果Nielsen 在 1993 年的经典论文里就说过5 个用户能暴露约 80% 的可用性问题。关键是测试设计要规范。报告里至少写清楚五件事测试目的、被试信息年龄、是否相关专业、有无同类产品使用经验、测试任务3 到 5 个每个任务写成场景句比如你想买一台二手相机请找到价格在 3000 到 5000 元之间的在售商品、测量指标任务完成率、操作时间、出错次数、测试环境。不要只写测试顺利完成要把失败任务也列出来失败才是迭代的依据。SUS 量表是可用性测试最通用的标准化工具10 道题每题 1 到 5 分。计算时奇数题得分减 1偶数题用 5 减所有题处理后的分数相加再乘 2.5满分 10070 分以上属于可用性可接受范围。我习惯用一段小脚本处理原始数据responses [ [5, 4, 4, 3, 4, 3, 5, 4, 4, 3], # 用户1的10道题得分 [4, 4, 3, 4, 4, 3, 4, 3, 3, 4], # 用户2 [5, 5, 4, 3, 5, 2, 4, 4, 5, 3], # 用户3 ] for idx, r in enumerate(responses, 1): odd_sum sum(r[i] for i in range(0, 10, 2)) # 奇数题: 得分减1 even_sum sum(r[i] for i in range(1, 10, 2)) # 偶数题: 5减得分 sus (odd_sum - 5 25 - even_sum) * 2.5 print(f用户{idx} SUS {sus:.1f})逻辑说明SUS 的标准算法中奇数题正向计分减 1偶数题反向计分5 减两项分别求和后相加再乘 2.5 换算成百分制。脚本里 odd_sum 对第 1、3、5、7、9 题求和再统一减 5等价于逐项减 1even_sum 对第 2、4、6、8、10 题求和用 25 减等价于逐项做 5 减。如果算出来总分低于 60说明你的设计还需要大改不要强行解释直接写基于测试结果我们在 v3 中进行了以下修改反而能体现迭代意识。4. 用 Figma 或 Axure 做一版能跑的 demo选型、导出参数与兼容性原型工具选什么取决于你手里的时间和习惯。Figma 适合页面流线线框流程快、团队协作方便的Axure 适合要表现复杂条件分支和动态效果的。课程大作业层面两者都能满足要求但导出方式差异很大这里把常见做法和参数设置拆开讲。4.1 Figma 原型连线与分享链接导出前必调的三个参数Figma 做可点击原型核心操作是在 Prototype 模式下给 Frame 之间连线。选中一个按钮右侧会出现一个小圆点拖到目标页面就建立一次跳转。连线本身不难容易翻车的是导出前的三个参数。第一个是 Flow 起点必须在 Prototype 面板里点一下某个 Frame 上的小圆圈把它设为 Starting Frame。如果不设置导出的原型从哪个页面开始是随机的老师打开可能直接落在空白画板。第二个是背景填充Figma 导出 HTML 预览时默认用深色背景高保真页面如果没有铺满 Frame 背景色演示时四周一圈黑色非常难看建议给顶层 Frame 设置浅灰或白色背景和页面保持一致。第三个是分享权限导出时要选 Prototype 而不是 Design否则老师拿到的是左侧有编辑栏的编辑界面而不是干净的演示视图。Figma 导出 HTML通过菜单 Share 里的 Present Prototype 生成链接也可以下载桌面版后用插件导出离线包。离线包是一整个文件夹压缩时别只压里面的 HTML 文件要连 assets 目录一起压进去。给老师的 README 里写清楚解压后双击 index.html如果浏览器拦截了本地脚本用 Chrome 的允许本地文件访问选项放行一次。4.2 Axure 动态面板与变量把条件分支做成看得见的交互Axure 的交互能力比 Figma 强代价是学习曲线陡。大作业里最常用的两个机制是动态面板和变量很多评审眼中的交互复杂度都靠它们撑起来。动态面板适合做弹窗、切换、折叠这类同一区域多状态的内容变量适合做登录状态切换、表单输入回传这类需要记住用户操作的场景。举一个登录后导航栏变化的例子拖入一个 Dynamic Panel添加两个 StateState1 放未登录状态显示登录按钮State2 放已登录状态显示用户名和退出。选中登录按钮添加交互用例Click or Tap → Set Panel State → State2触发方式选 Push方向选向左滑动。这样点击后导航栏会有一个过渡动画演示观感比干巴巴的跳变好很多。Axure 导出 HTML 是 Publish → Generate HTML Files。参数里面有两个值得注意Page 后缀选 html不要选 php 之类的动态后缀纯静态文件在任何 Web 环境下都能跑浏览器兼容选 All Browsers避免只在 Chrome 下正常而在评审的 Edge 上错乱。Axure 生成的 HTML 是一堆 .js 和 .html 文件必须保持目录完整压缩时选中整个生成的文件夹不要只拖一个 index.html。4.3 导出 HTML 或录制演示视频给老师一个不依赖账号的 demo无论用哪个工具最终交付形态只有两种最稳离线 HTML 文件夹或 MP4 演示视频。HTML 的好处是老师可以自己点坏处是遇到底层交互报错时你不在现场视频的好处是稳定展示核心流程坏处是无法体验完整交互。我的习惯是两者都交视频控制在 3 分钟以内只讲主流程和亮点。录视频如果手头没有 OBS用 ffmpeg 也能完成桌面录制命令如下ffmpeg -f gdigrab -framerate 30 -i desktop -c:v libx264 -pix_fmt yuv420p demo.mp4参数说明-f gdigrab是 Windows 下的桌面录制输入设备Linux 上换成x11grabmacOS 上换成avfoundation-framerate 30控制帧率课程演示 30 帧足够60 帧徒增文件体积-c:v libx264指定 H.264 编码兼容性最好-pix_fmt yuv420p把色彩格式转成 4:2:0避免部分播放器出现花屏或无法解码。录制时鼠标不要乱晃每个页面停留 3 秒以上点按动作要慢宁愿录长一点后期剪辑也不要录完发现关键按钮没点到。5. 打包与解压的坑zip 伪加密、中文乱码与损坏排查文件内容都做好了最后一步右键压缩看起来最简单实际上坑最多。这一章全部是血泪经验每一条我都亲自踩过或者帮学生排查过按现象 → 原因 → 解决写清楚。5.1 zip 伪加密没设密码却弹密码框多半是 flag 位被改了现象老师和同学下载压缩包后双击弹窗要求输入密码但你很清楚自己压缩时根本没设密码。用 7-Zip 打开却能直接看到文件列表。这就是典型的 zip 伪加密。原因zip 格式中每个文件头里有一个通用位标志字段它的第 0 位代表是否加密。伪加密是指该标志位被人为置为 1但文件数据实际没有加密。网上下载的一些模板、工具生成的 zip 会用这招来制造付费解锁假象如果大作业素材里有从这类站点下载的图片模板打包时会把这个标志继承下来。真正的加密数据需要密码才能读出内容而伪加密只是骗过不了解格式的软件。解决判断和修复都可以用一段 Python 脚本核心逻辑是对比本地文件头和中央目录的加密标志位import struct import zipfile def parse_local_file_flags(zip_path): 读取每个文件在本地文件头里的通用位标志 flags {} with open(zip_path, rb) as f: data f.read() offset 0 while True: idx data.find(bPK\x03\x04, offset) if idx -1: break flag struct.unpack(H, data[idx6:idx8])[0] name_len struct.unpack(H, data[idx26:idx28])[0] extra_len struct.unpack(H, data[idx28:idx30])[0] name data[idx30:idx30name_len].decode(utf-8, errorsreplace) flags[name] flag offset idx 30 name_len extra_len return flags with zipfile.ZipFile(人机交互设计大作业.zip) as zf: local_flags parse_local_file_flags(人机交互设计大作业.zip) for info in zf.infolist(): local_bit bool(local_flags.get(info.filename, 0) 0x1) central_bit bool(info.flag_bits 0x1) if local_bit ! central_bit: print(f伪加密: {info.filename}) elif local_bit and central_bit: print(f真加密: {info.filename})逻辑说明zipfile 读取的是中央目录里的 flag而资源管理器弹出密码框时读取的是本地文件头里的 flag。如果同一个文件两个位置的加密位不一致说明中间被工具改动过属于伪加密。修复方法是用 7-Zip 打开压缩包全选文件后重新解压到新目录再用 7-Zip 重新打包新生成的 zip 会重写所有文件头伪加密位自然消失。注意zip 伪加密不具备任何安全性不要指望它保护内容它能造成的唯一后果就是打不开。5.2 中文文件名乱码Windows 自带压缩与 7-Zip 的编码差异现象在 Windows 上用系统自带的压缩为 zip 文件夹生成压缩包发到 Mac 或 Linux 上解压后原本的中文文件名变成一串乱码比如设计报告变成设计æ¥å。原因Windows 自带压缩工具写入文件名时使用本地语言编码简体中文系统是 GBK且不设置 zip 格式的 UTF-8 标志位。7-Zip 和 macOS 自带解压默认按 UTF-8 解码GBK 字节被按 UTF-8 解析就成了乱码。这是编码约定不一致导致的不是文件损坏。解决最稳妥的办法是打包时统一用 7-Zip并强制写入 UTF-8 文件名。命令行方式7z a -tzip -mcuon 人机交互设计大作业.zip ./交互设计大作业_学号_姓名参数说明-tzip指定打包为 zip 格式-mcuon表示使用 UTF-8 编码文件名这样在任何系统上解压都不会乱码。如果已经收到一个乱码压缩包Linux 下有unzip -O GBK可以指定解码字符集Windows 下用 7-Zip 打开后在设置里把文件名编码切换为 GBK 再解压。Python 层面有一个经典修复姿势zipfile 读出的文件名如果是乱码可以按 CP437 重新编码再解码import zipfile with zipfile.ZipFile(乱码.zip) as zf: for info in zf.infolist(): raw info.filename.encode(cp437) # zipfile 默认按 cp437 解码 try: name raw.decode(utf-8) except UnicodeDecodeError: name raw.decode(gbk, errorsreplace) print(name)这段脚本用于排查而不是修复确认了正确的文件名后用脚本重命名解压出来的文件即可。最省心的做法还是前面说的统一用 7-Zip 加-mcuon打包从源头消灭乱码。5.3 附件超限怎么办分卷压缩与自解压的正确用法现象学校作业系统限制单个附件 50MB你的演示视频压完还有 120MBREADM 里放了网盘链接老师又说不行。原因短视频时代录屏 3 分钟 H.264 编码的 1080p 视频确实很容易超过这个体积。很多人的第一反应是把 zip 压缩等级拉到最高但对于视频编码文件zip 压缩几乎没有效果因为 H.264 内部已经压过一遍。解决先压视频再打包文件。视频用 HandBrake 转码编码选 H.264质量参数 CRF 设 23 到 26分辨率降到 1080p帧率保持 30这样体积通常能压到原来的三分之一。如果还超限再考虑分卷压缩7z a -v50m -t7z 大作业.7z ./交互设计大作业_学号_姓名参数说明-v50m表示每个分卷最大 50MB-t7z使用 7z 格式来获得更好的压缩率。分卷生成的是 大作业.7z.001、大作业.7z.002 等多个文件需要全部上传评分系统如果不支持分卷上传这条路就走不通。另一种常见做法是做成自解压文件7z a -sfx 大作业.exe ./交互设计大作业_学号_姓名老师双击 exe 自行解压不需要装解压软件但部分学校系统禁止上传 exe 附件。如果所有本地交付手段都受限最后妥协是把演示视频单独放网盘README 里写明提取码并在正文先说明这件事不要等老师自己发现。另外说一句Win10 右键菜单里的压缩为 zip 文件夹用的就是系统自带压缩既不支持分卷也不支持 UTF-8 文件名建议课程作业场景一律绕开它。5.4 解压报错 unexpected end of data损坏压缩包的急救现象同学反馈说压缩包解压到一半报错提示unexpected end of data或者压缩包已损坏是否尝试恢复。原因zip 是流式格式每个文件的压缩数据独立存储。报这个错通常有三种可能下载中断导致文件末尾缺失、用微信或网盘传输时被截断、U 盘在文件写入完成前被拔出。它不意味着整个压缩包都废了往往是某一两个文件的数据段损坏其余文件可能完好。解决先用 7-Zip 打开损坏的压缩包它读取时如果还能列出文件列表就直接全选解压7-Zip 会跳过损坏文件并提示警告这样至少能救出大部分文档和图片。如果连文件列表都打不开在 Linux 上可以尝试用 zip 自带的修复模式zip -FF 损坏.zip --out 修复.zip-FF尝试扫描压缩包内的文件结构并重建中央目录它只对文件数据完整但目录区损坏有效如果数据本身被截断截断点之后的文件无法恢复。所以你不动机器也救不回来最实用的后悔药是提交前在本地留一份未解压的原始文件夹压缩包只是交付物不是唯一的副本。我现在的习惯是压缩前在项目目录里跑一次find . -type f | wc -l记录文件总数提交后把压缩包下载回来再解压一次核对数量和首页能否打开。这套流程十五分钟能避免答辩现场打不开 demo 的最坏情况。6. 答辩现场把 zip 里的内容讲出彩三分钟演示脚本与追问预案交付物没问题最后还差临门一脚演示。很多人在台上打开压缩包花两分钟翻文件树再点开报告念一页时间就没了。正确的做法是压缩包只当备份答辩全程演示可交互 demo把报告数据放在手边备用。6.1 三分钟演示脚本按问题-方案-验证推进时间分配建议30 秒讲背景和核心用户诉求90 秒演示三个关键交互流程剩余 60 秒讲测试结论和迭代效果。演示前把鼠标停在首页的搜索框入口不要现场找按钮每演示完一个流程说一句这个页面的改动来自可用性测试第 X 条结论。如果要打开 HTML demo先在地址栏或文件管理器里把路径准备好不要现场翻目录。视频演示适合放在最后 30 秒作为补充不要一上来就放视频评委想看到的是真人点按的现场反馈。6.2 高频追问与应答预案配色、字体与交互范式老师最爱问的三类问题是为什么用这套配色、为什么这个按钮放在这里、为什么用这种交互范式。每类问题背后都是同一个要求你的设计决策要有依据不能我觉得好看。配色就答竞品分析和用户偏好调研引用报告里那个数据按钮位置就答 Fitts 定律说明目标大小和距离对操作效率的影响再补一句测试数据作为验证交互范式就答你比较过哪几种方案测试或点评中哪个指标更好。不确定的资料不硬答说这个我记得报告第 X 部分有记录稍后我指给您比现场编一个理由好得多。6.3 给未来的自己留一份可复现的交互设计资产答辩结束不要急着删文件。把整套交付结构存一份备份里面除了最终版再保留三样东西Figma 或 Axure 源文件、可用性测试的原始数据、一份标记了如果重做会改哪里的备忘。我自己的教训是有次答辩前一天发现导出的 HTML 里中文字体全变成方块原因是 Axure 导出时没勾选嵌入字体从此提交前必做三件事换一台没装设计的电脑解压并双击 index.html、用手机流量重新下载一次压缩包、核对文件数。这份流程不能保证不翻车但能保证翻车发生在家里而不是答辩现场。希望帮到你。本文还有配套的精品资源点击获取