人机交互设计大作业.zip：压缩包体检、乱码修复与原型运行指南

简介这是一份面向人机交互课程设计及期末大作业的完整参考包以「企业食堂订餐系统」为贯穿案例覆盖需求分析、交互原型、设计规范到演示汇报的完整流程。资源共22个文件、约17.62MB其中12份docx文档用于编写需求分析、开发规范及各类报告2份pptx用于课堂演示与开题答辩另外还包含Web原型页面、任务分解图、理论模型PDF、图片与打包原型文件可帮助理解一个交互项目从用户场景梳理、任务流程设计到高保真原型输出的各阶段做法案例同时涉及订餐类与日记类产品便于对比不同业务下的交互设计重点。目前已吸引4536人学习下载特别适合正在为人机交互大作业感到无从下手的同学既可参考其选题思路与项目结构也可借鉴文档格式、原型设计方法还能直接复用其演示模板与git协作规范减少踩坑、提升作品完整度与专业感。1. 拿到人机交互设计大作业.zip先想清楚它到底是什么“为什么我双击解压之后里面全是看不懂的文件”这是大多数人和这份压缩包第一次打交道时的反应。人机交互设计大作业.zip 不是一个安装包也不是某个程序的发行版它通常是一个课程项目交付物的集合里面既有 Word/Markdown 设计文档、线框图、界面截图也有可交互原型源码、录屏、问卷数据甚至还有从网上找来的现成模板。真正的难点不是“打开”而是怎样判断这份压缩包是否完整、怎样把里面的原型跑起来、又该按什么标准判断这份作业值多少分。文章按接手一份交付物的完整路径来讲先做压缩包的体检再按人机交互设计流程审查内容然后把原型跑起来最后重新打成一份规范、可递交的 zip。这里要先把心态从“解压”切到“验收”。一份压缩包拿到手第一件该做的不是看某个界面好不好看而是确认它能被稳定地打开、里面不存在缺胳膊少腿的文件。很多“作业打不开”的现场最后都定位在压缩包本身而不是原型代码。2. 解压前先给 ZIP 做体检EOCD 校验、中文编码与密码边界2.1 先用 7-Zip 测试命令排除 invalid zip archive“Invalid zip archive: could not find EOCD”是 zip 文件最常见的死法。EOCD 是 End of Central Directory位于压缩包最尾部记录了文件总数和中央目录偏移量。文件上传中断、微信发送后被平台转存、或者下载到一半被改名都会导致尾部缺失这时任何解压工具都会报错。error read zip archive往往是同一个原因在不同工具里的另一种表达。拿到人机交互设计大作业.zip之后我会先用 7-Zip 的命令行做一次“和解压无关”的完整性测试7z t 人机交互设计大作业.zip参数说明t表示 test只校验压缩包结构和每个文件的 CRC不写盘。输出最后一行如果是Everything is Ok说明压缩包本身没有坏如果出现Could not find EOCD或Data Error就不要浪费时间强制解压了。先看文件是不是真的 zipfile 人机交互设计大作业.zip正常情况下file会输出Zip archive data如果输出HTML document或者data说明它根本不是压缩包而是某个下载页或重定向后的错误内容。此时重新获取源文件比重试修复更快。如果结构损坏但文件头还在可以尝试一次“低风险抢救”zip -FF 人机交互设计大作业.zip --out repaired.zip unzip -t repaired.zip-FF会通过扫描文件里的本地文件头重建中央目录。它只能处理“中央目录丢了但文件数据还在”的情况如果尾部一大段真的没了zip -FF能把已扫描到的文件尽量导出来但整体目录和文件名不一定完整。修复后的压缩包必须再过一遍unzip -t确认没有error read zip archive再继续。2.2 中文文件名乱码ZIP 没有规定编码怎么解才不乱zip 规范在文件名编码上没有统一答案。Windows 老式压缩工具默认用 GBK 写文件名macOS/Linux 的脚本按 UTF-8 读错位之后就变成“浠鏂囦欢”一类的乱码。zipfile模块读取时默认把非 UTF-8 文件头按 cp437 处理这等于叠加了一层额外的错误。我一般会写一个很小的 Python 脚本解压这类 zipimport os import zipfile src 人机交互设计大作业.zip out_dir extracted os.makedirs(out_dir, exist_okTrue) with zipfile.ZipFile(src) as zf: for info in zf.infolist(): name info.filename if not (info.flag_bits 0x800): # 0x800: 文件名 UTF-8 标志 raw name.encode(cp437, replace) for enc in (gbk, utf-8): try: name raw.decode(enc) break except UnicodeDecodeError: continue info.filename name # zip slip 防御确保解压路径不跳出目标目录 target os.path.normpath(os.path.join(out_dir, name)) if not target.startswith(os.path.abspath(out_dir)): continue zf.extract(info, out_dir)逻辑说明flag_bits的第 11 位0x800表示文件名是 UTF-8。如果没置位就把 Python 已经按 cp437 解出来的字符串反编码回原始字节再用 GBK 和 UTF-8 依次尝试。zipfile.extract会使用修改后的info.filename所以乱码能被修正。后面那段路径判断必须保留恶意 zip 可以使用../../evil把文件写到目标目录之外这就是常说的 zip slip。如果你赶时间不想写脚本那么 7-Zip 的默认参数对 GBK 兼容性较好Windows 自带文件资源管理器在简体中文系统上也能处理。关键不是“用什么工具”而是解压后先看一眼最外层目录名是否正常再决定是否批量处理。2.3 “zip 压缩包密码破解工具”在作业场景下怎么用有时候记得文件是加密的但想不起密码。网上搜到的大多是“zip密码移除工具”或“zip压缩包密码破解工具”先用哪个、能不能用得先分清加密方式zip2john 人机交互设计大作业.zip hash.txt john --wordlist/usr/share/wordlists/rockyou.txt hash.txt参数说明zip2john把 zip 里的加密元数据提取成 John the Ripper 能识别的哈希--wordlist指定字典路径。传统 ZipCrypto 算法对弱密码很敏感几百万行的通用字典经常几十秒内出结果如果是 AES-256 加密同样的字典可能要慢几个数量级。这里要非常克制只能对自己拥有的压缩包或者明确被授权恢复的内容做这类操作。课程作业通常没必要上爆破直接找发件人重发更省时间。另外把压缩包放进任何“在线破解”网站等于把作业内容直接交给对方我从来不建议这么做尤其里面还有可交互原型的源码时。3. 按人机交互设计大作业的内容清单检查 ZIP 里有什么3.1 一份合格的作业有哪些交付物人机交互设计大作业的常见包内结构其实非常固定先在脑子里有一张表再看文件就不会慌路径/文件主要作用要不要看docs/需求分析.md用户调研、需求背景、用户场景核心任务能不能对上原型docs/线框图/低保真草图、信息架构有没有从低保真到高保真的层层递进prototype/可交互原型代码或 Axure 导出关键任务流是否走得通test/测试记录.md可用性测试过程与结果是否记录了任务完成率、失败点录屏或截图演示和证据是否覆盖主流程README.md运行说明缺了 README 的项目基本很难评审如果只有一堆零散的.png没有文档也没有可运行原型那么作业大概率没有把“交互设计”做闭环。反过来说如果这些都齐只是不会解压那就按下面这些命令看。3.2 解压前先用 zipinfo 和 zipgrep 看内容很多时候我们不需要把所有文件解出来用zipinfo列目录就够了zipinfo -1 人机交互设计大作业.zip unzip -l 人机交互设计大作业.zip | tail -20 zipgrep -li 用户画像 人机交互设计大作业.zip命令的参数说明zipinfo -1只输出每个条目的完整路径不附带压缩率、时间等冗余信息适合快速总览unzip -l输出更细的列表tail -20只关注体积最大的几个文件zipgrep的-l表示只输出文件名-i忽略大小写。第二条命令同时也是检查中文文件名是否正常的最快方式如果列出来的路径出现乱码直接跳到上一章的编码处理。用上述命令发现prototype/index.html和docs/需求分析.md都存在后可以只解压需要的部分unzip 人机交互设计大作业.zip prototype/* -d ./work参数说明prototype/*必须用双引号包起来避免 Shell 把*展开成当前目录的文件名-d ./work指定解压位置。这条命令每次只解压一小块比全量解压后再慢慢找更可控。3.3 从文件时间戳和命名规律反推设计迭代过程一个容易被忽略的细节是ZIP 内每个文件都保留了修改时间这正是人机交互设计大作业里最值钱的信息之一。用zipinfo -lh可以按时间排序查看zipinfo -lh 人机交互设计大作业.zip时间戳能告诉你很多课堂上看不到的事情。如果prototype_v1.html和prototype_v3.html之间存在半周间隔说明作者经历了至少两轮改版如果所有文件的修改时间都集中在提交前一天晚上你大概能猜到这份“迭代记录”是怎么补出来的。把时间戳和文档里的版本号放在一起对照比单纯看最终界面更能判断设计过程是否真实。这一步属于“审阅作业”的进阶用法。如果压缩包是从 Git 仓库导出的 zip还可以额外看有没有.git目录。多数在线代码托管平台下载的 zip 不会包含.git但有package.json、pubspec.yaml或app.json时说明里面装着一份可以运行的原型工程这就是下一章要处理的对象。如果压缩包里同时存在docs/访谈记录.xlsx和docs/访谈分析.md说明调研部分不是拍脑袋如果只有一张原型.png那这份作业更接近视觉设计而不是人机交互设计。评审时我会把“有没有用户数据”作为第一条硬性指标。4. 人机交互设计大作业.zip 里的原型怎么跑起来4.1 先按文件特征判断技术栈压缩包里的原型不是只有一种形态。按入口文件判断最快入口特征类型运行方式index.html js/css静态原型本地静态服务pubspec.yamlFlutter 工程flutter pub get 后运行app.json pages/微信小程序微信开发者工具导入package.jsonNode 前端工程npm install 后 dev.apkAndroid 应用模拟器或真机安装看到.rp或.rplib时要特别注意那不是 zip 可解压内容而是 Axure 的源文件格式通常得用 Axure 打开导出。zipinfo -1列出的文件只要包含上述特征就能确定后面几条命令。4.2 GitHub 下载的 zip 包解包后为什么跑不起来人机交互设计大作业里大量出现从 GitHub 下载的现成模板。托管平台提供的 zip 包只包含仓库快照不包含node_modules所以直接把人机交互设计大作业.zip解压到本地之后运行npm start几乎必然报“模块找不到”或error read zip archive。标准处理顺序是unzip 人机交互设计大作业.zip -d hci-project cd hci-project npm install npm run dev命令说明npm install会按照package.json里的依赖声明重新生成node_modulesnpm run dev是否可用取决于scripts里有没有定义 dev。如果之前解压出来的某个依赖压缩包已经损坏会看到类似invalid zip archive的报错这时不要手动补文件直接删掉依赖环境重来rm -rf node_modules package-lock.json npm cache clean --force npm installnpm cache clean --force是最后手段目的是清掉本地缓存的坏包。正常情况下先删node_modules并重装就够不需要强制清缓存。记住GitHub 的 zip 包从来不是开箱即用的交付物它只是源码的快递包装。4.3 静态 HTML 原型用一条命令起本地服务很多作业的原型是 Axure 导出的 HTML 或手写的单页应用。直接用浏览器双击index.html打开经常出现界面空白、图片不显示原因不是代码坏而是浏览器对file://协议的跨域限制。最稳的启动方式是用 Python 自带模块cd prototype python3 -m http.server 8000 --bind 127.0.0.1参数说明8000是监听端口--bind 127.0.0.1表示只允许本机访问避免原型被同一局域网内其他人扫描到。启动后访问http://127.0.0.1:8000就是正常网络环境下的页面。如果端口被占用直接换成8080或9000。这个方式不需要任何依赖适合在没有 Node 的机器上临时演示。4.4 Flutter Lottie 与微信小程序里的 zip 资源包加载失败再往前一步作业里如果用了 Lottie 动效经常出现flutter lottie 加载网络 lottie zip 包失败的问题。常见原因不是 Lottie 代码写错而是 zip 包本身不完整或没有先解压。很多在线动效平台导出的压缩包里是xxx.jsonimages/Lottie 并不直接播放 zip。正确思路是把 zip 下载到临时目录、校验、解压再把 json 路径交给 Lottie。先确认服务端文件完整curl -L -o animation.zip https://example.com/animation.zip unzip -t animation.zipcurl -L跟随重定向-o指定本地文件名unzip -t校验 zip 完整性。如果unzip -t报could not find EOCD说明文件没有完整传下来而 Lottie 加载到残缺数据时通常只报一个通用错误真正原因在压缩包本身。如果作业是微信小程序答案是可以下载 zip 文件但直接解压经常会失败因为wx.downloadFile拿到的临时路径有时不是.zip结尾基础库调用unzip会报错。常见做法是先用 FileSystemManager 保存成正式文件再解压wx.downloadFile({ url: https://example.com/assets.zip, success(res) { const fs wx.getFileSystemManager(); fs.saveFile({ tempFilePath: res.tempFilePath, success(saved) { fs.unzip({ zipFilePath: saved.savedFilePath, targetPath: ${wx.env.USER_DATA_PATH}/assets, success() { console.log(unzip ok); } }); } }); } });这里的关键是saveFile把临时文件转成持久文件拿到一个稳定的本地路径unzip的zipFilePath必须是本地文件路径不能是https://开头。解压后还需要单独记录 targetPath因为小程序下次启动时临时目录很可能已经被清理。5. 从交互设计规范给大作业做一次可用性体检5.1 别只看界面看 test 目录里的证据评审一份《人机交互设计大作业.zip》时最容易犯的错是只看界面截图就打分。更有说服力的证据在test/目录里任务清单、用户原始记录、录屏、SUS 问卷结果。如果压缩包里没有这一层说明作业缺少“验证”环节。拿到文件后我一般会先看录屏格式和时长file test/record/*.mp4 ls -lh test/file输出分辨率和编码信息能判断录屏是不是直接从手机拍摄ls -lh看文件体积能确认测试记录的覆盖面。录屏不是摆设把每个任务的关键点击轨迹和报错时刻记录下来才能和下面这套原则对照。5.2 用尼尔森十大启发式逐条对照尼尔森启发式评估Nielsen’s 10 Usability Heuristics是最适合用来给大作业做“代码评审”的清单因为每一条都能找到对应的证据。下面这张表是我自己审作业时的对照关系启发式原则在 ZIP 里找什么证据状态可见性原型里有没有 loading、进度条、提交反馈系统与现实匹配文案是否使用用户语言而非技术术语用户可控撤销/返回/退出是否可达一致性与标准同类型按钮是否同名同色图标是否统一防错表单提交前有没有格式校验和确认识别而非回忆关键操作是否可见而不是藏在记忆里灵活高效老用户有没有快捷键、默认值、批量操作简约美观是否有冗余元素遮挡主任务错误恢复报错信息是否说清楚怎么修复帮助文档README 或页面里有没有操作说明实际操作时不需要把每条都展开挑三个“和作业实现最相关”的原则做深挖比十条全部浅尝辄止更有效。比如课程作业通常弱在“错误恢复”打开原型故意输错一个邮箱看它给的是“Error 500”还是“请检查邮箱格式”。这个行为可以直接录下来当作修改证据。5.3 用 SUS 问卷算可用性分数如果 test 目录里有 10 道题的问卷数据可以快速算 SUSSystem Usability Scale。规则是奇数题得分减 1偶数题用 5 减得分最后乘 2.5。用一小段 Python 就能处理def sus_score(responses): if len(responses) ! 10: raise ValueError(SUS 问卷必须包含 10 道题) total 0 for i, r in enumerate(responses): if i % 2 0: total r - 1 else: total 5 - r return total * 2.5 # 示例一位测试者对 10 道题的打分 sample [4, 2, 5, 1, 4, 2, 3, 2, 5, 1] print(round(sus_score(sample), 1))逻辑说明索引从 0 开始所以i % 2 0对应第 1、3、5、7、9 题这些题是积极表述原始分越高越好偶数题是消极表述分越高说明可用性越差。最后乘 2.5 把总分折算到 0-100。学术上的经验区间是60 分以下有明显的可用性缺陷70-80 属于可接受85 以上是优秀产品。但单看 SUS 不够还需要结合任务完成率和完成时间一起来看。5.4 把评审结论写成可复核的修改清单审查完不能只给一个分数要落成“哪个文件、哪个规则、哪种证据”的修改项。一个我常用的做法是在 ZIP 里的docs/review.md里用固定格式记录文件prototype/index.html原则错误恢复问题邮箱输入错误后提示“Error”证据test/records/03.mp4第 12 秒修改建议改为“请输入合法的邮箱地址”然后用zipgrep检查文档里是不是真的写了对应关键词zipgrep -n 错误恢复 人机交互设计大作业.zip-n会输出匹配行号因为没有必要解压全文。这里的关键是评审动作必须能从压缩包里找到证据不然所谓的“交互设计规范”就变成了空话。6. 把修复后的作业重新打成规范 ZIP编码、压缩参数与校验6.1 用 7-Zip 按交付标准重新打包最后一步不是随便右键“压缩”。前面第 2 章的乱码问题在这里就要用-utf8参数解决同时把.git、node_modules这类临时目录排除掉避免压缩包体积膨胀。我常用的命令cd 人机交互设计大作业 7z a -tzip -mx5 -mmton -utf8 ../人机交互设计大作业_v2.zip . -xr!.git -xr!node_modules参数说明-tzip强制输出 zip 格式-mx5是压缩级别对混合文档和代码来说是速度和体积的平衡点不需要追求最高压缩率的-mx9-mmton开启多线程-utf8让文件名以 UTF-8 写入避免换一台机器又乱码-xr!按通配符排除目录!后面跟要排除的目录名。注意命令是在进入作业目录后执行的这样 zip 内部的顶层目录才是内容本身。6.2 交付前的完整性验证打包完成不等于可以交付。最终提交之前一定要完整测试。我习惯在压缩包旁边放一个验证记录内容类似检查项命令期望结果结构完整zipinfo -1包含 docs/ prototype/ test/内容校验unzip -tNo errors detected in compressed data中文名正常unzip -l文件名没有乱码哈希记录sha256sum64 位十六进制字符串生成校验值只需要一条命令sha256sum 人机交互设计大作业_v2.zip把这条路输出的 64 位哈希贴到 README 的末尾。接收方在解压后跑一次相同的命令就能确认自己拿到的文件和发出时一致。如果文件在传输过程中被截断unzip -t会直接报error read zip archive哈希对不上也能立刻发现。如果作业内容不想直接公开再追加一层 AES-256 加密7z a -tzip -memAES256 -p你的密码 人机交互设计大作业_v2.zip .-memAES256指定加密算法比传统 ZipCrypto 安全得多但也要提醒密码必须通过单独渠道发给接收方不能直接写在同一个 zip 里。带着哈希值发出去之后评审方遇到的第一个问题就不再是“打不开”而是“这份设计有没有解决用户问题”。本文还有配套的精品资源点击获取