dedesigntheweb

dedesigntheweb官网

dedesigntheweb 是一款由芝加哥设计训练营 Designation 推出的网页设计测验小游戏，官网为 dedesigntheweb.com，玩法是”通过原型图来分辨是哪个网站”。游戏把 Twitter、YouTube、Facebook 等热门网站的页面去掉文字、图片和配色，只保留灰白线框骨架，玩家需仅凭布局结构猜出对应的网站域名。它上线于 2014 年，曾被 Fast Company、Gizmodo 等媒体推荐，证明了优秀的网页设计即使剥去”皮肤”依然可辨认。由于站点年代久远，目前官网可能无常访问，用户可通过其 GitHub 开源仓库查看源码或在本地运行体验；想系统学习网页布局，也可以配合 Pixso、MasterGo 莫高设计 等在线设计工具动手练习。

dedesigntheweb的主要功能

1. 线框图猜网站：展示热门网站去掉细节后的线框原型图，玩家凭布局结构猜出网站；
2. 12 关题目设置：共收录 12 个知名网站的骨架图，答对一题进入下一关；
3. 填空式作答：直接输入猜测的网站域名提交答案，无需在选项中挑选；
4. 跳过机制：遇到认不出的线框图可以选择跳过并继续下一关，保持游戏流畅；
5. 键盘快捷操作：支持按回车键提交答案，全程不必离开键盘；
6. 开源发布：项目在 GitHub 上以 MIT 协议开源，可自行下载研究或本地运行。

如何使用dedesigntheweb

1. 在浏览器打开 dedesigntheweb 官网，阅读”How well do you know the Web?”的游戏说明；
2. 查看页面下方展示的网站线框图，回忆对应网站的页面布局；
3. 在输入框中输入你猜测的网站域名（不含 .com 后缀也可）；
4. 按回车键或点击提交按钮验证答案，答对后点击进入下一关；
5. 遇到不确定的题目可选择跳过，稍后再回头尝试；
6. 完成 12 关后查看战绩；若官网无法访问，可前往 GitHub 搜索 Dedesign-The-Web 仓库获取源码本地体验。

dedesigntheweb的使用场景

1. UX 学习者训练：帮助新手理解知名网站的布局骨架与信息层级，培养对结构的敏感度；随手画结构草图可以用 TldRAW 这类白板工具；
2. 网页设计教学：课堂互动佳品，引导学生讨论”为什么去掉配色和图片仍能认出网站”；
3. 团队趣味活动：设计团队比赛认图，看谁对主流网站的布局最熟悉，之后用 CoDesign 把设计稿走查流程也顺一遍；
4. 布局分析素材：线框图本身可拆解研究，作为竞品结构分析的教学案例。

dedesigntheweb的常见问题解答

dedesigntheweb 现在还能玩吗？

该游戏于 2014 年上线，官网年代久远，目前访问可能不稳定或已失效；好在项目开源，可到 GitHub 查找 DesignationLabs/Dedesign-The-Web 仓库在本地运行，或选择其他设计类测验游戏替代。

dedesigntheweb 是免费的吗？

是的，它由 Designation Labs 出于兴趣制作并免费开放，源码采用 MIT 许可证。

题目里的网站是固定的吗？

是的，共 12 个当时的主流网站，答完即通关；由于收录的是十年前的网站结构，部分界面与今天已有差异。

dedesigntheweb官网网址

dedesigntheweb官网入口网址：http://dedesigntheweb.com

OpenI AI时代点评

dedesigntheweb 的创意在今天看来依然聪明：它用”去掉皮肤看骨架”的方式提醒设计者，网页的价值首先在于结构与信息层级，而不是视觉装饰。作为 UX 教学素材它相当出色，Fast Company 等媒体的当年报道也印证了其话题性。但客观地说，它是一款明显的时代产物：题目固定且收录的是十年前的网站，官网长期缺乏维护、访问不稳定，可玩性如今主要靠开源仓库延续。总体来看，它适合 UX 新手、网页设计教师和怀旧的互联网老用户，作为一次轻量而有启发的体验；若你希望做结构练习，用它认识布局思维即可，实际项目中的原型与协作还是应交给当代在线设计工具来完成。