线下约 60 名学生，转为线上博览会，超过 12,000 名学生登录

(站内 AI 客服)

回答只用指定数据，每句附出处

(挑战)

学校信息多且复杂，难以让学生一眼看出选择之多

交换学校遍布全球各大洲，共 289 所，信息量大且复杂。一般一页式网站难以一次呈现这么多学校，画面也不易整齐。

活动的目的，是让这些信息更简单、清楚地传达，并吸引学生报名交换。核心信息是一句打破既定印象的话：每个人都有交换的机会。

(做法)

首页以 3D 世界地图呈现全部学校，细节交给单页网站

近年许多线上展览采用 VR，适合呈现空间感；但要完整逛完一个 VR 展览需要较多操作，用户容易迷失，内容又多以图片与视频为主，不适合放置大量文字。

首页因此采用 3D 世界地图，一进入页面便能看出学校之多；复杂信息则以单页网站呈现，阅读更轻松。地图形式也能引导学生主动探索，增加逛展的参与感。

前端以 Three.js 在浏览器渲染 3D 模型，并自行调整滑动速度、地图大小、边界与阻尼等参数，让各种设备的操作都符合预期。为保持性能，场景不实时打光，以贴图预先烘焙，板块下的阴影以图片文件处理并尽量压低文件大小，视觉带有些许像素风格。

桌面端

先看整个世界，再逐步缩到各洲

首页以云层与纸飞机开场，按下开始探索后镜头飞入 3D 世界地图，并以六步教学说明世界地图、找学校、申请门槛、学长学姐心得、问问 AI 与收藏。之后滚轮缩放、拖动移动，即可由全景飞进各洲，学校以小屋立于地图板块上。菜单集中节目与直播、活动、公告、日历、学校图鉴与合作单位。

(关键设计)

三项关键设计

学校信息

积分、抽奖等页面收合在弹窗中，不直接放在地图页，专属学生的活动与其余内容得以区隔，非学生的访客也不会觉得落差太大。各校信息除了地图探索，也提供清单列表，搭配筛选器更快找到目标学校；弹窗内并有学校答题，让学生更了解各校。

(后台系统)

活动期间，后台先看待处理事项

登录后先看待处理事项，接着是趋势与接下来的场次。每个指标可点开完整算法，与数据查询同一份定义。

(成果)

合作四年，参与学生由约 60 名增至超过 12,000 名

2022 至 2026 年间，博览会由约 60 名学生参与的线下活动，转为超过 12,000 名学生登录参与的线上博览会。其中一届开展 7 天，便有 2,000 名学生使用学生邮箱登录；前一年整年的网站浏览次数为 10 万，该届仅花 10 天便超越，直播节目的观看数也突破历史纪录。

超过 20% 的登录学生连续浏览网页超过 7 天，单次最长体验 3 小时，超过 10% 的学生单次体验超过 2 小时。

各洲依风格调性设计学校的屋顶与主体，通过排列组合避免画面单调；开场以翱翔飞越的音效搭配专属配乐，带领用户从世界出发到各地。

(Client note)