Long Hoang Portfolio

这份作品集想证明的是一位做产品设计的人也能把三维和开发做到底。Long Hoang 在介绍自己的 ABOUT ME 页里写，他在教育类应用这一行做了三年半产品设计，和朋友做过一家没成功的创业公司。他放在站上的项目都是手机上的语言学习应用，要展示的却是设计师很少碰的三维建模、渲染和编程。所以 Long Hoang 没有把项目排成一页列表，而是造了一座工厂，让访客开着坦克去找。访客进门先看到的开始画面上，左上角有一段话也在讲同一件事，他说这个站不是给 AI 写一句话生成的，而是花了 2300 多个小时做出来的。

访客按下 LET'S GO 之后，先在一座草坡上学会开坦克。坦克停在一条土路上，访客往前开，路边会依次出现四张教学卡。第一张教 W、A、S、D 四个键移动，第二张教按住 Shift 加速，第三张教用空格或鼠标左键开炮，第四张教按 G 抓取物体。到开炮那一课，一辆红色的敌方坦克会朝访客开过来。教学之后的场地是一座工厂，站上把它叫作 Factory Playground，欢迎词写的是随便跑、随便砸、去打敌人、去探索。

界面上的说明写出了完整的玩法，访客要收集四种零件，再用它们启动一台机器。四种零件是齿轮、工具、电路板和燃料，访客把它们拖进一台叫 Power Core 的机器，机器启动之后，地图上的快速传送和作品展示才会解锁。工厂里还有两种敌人，一种小兵和一个首领，坦克有三十点生命值。坦克被打坏时，屏幕上会出现一句自嘲的话，恭喜访客又发现了一种行不通的办法，然后让坦克重新出生。

不想玩的访客有一条近路可走，刚进游戏时屏幕底部有一行字，写着时间不够的话可以跳过游戏，快速看看我的作品。访客点下去，画面被一片网点盖住再揭开，坦克已经停在工厂院子里的作品机器旁边。这条近路进入的是站上所说的 View mode，敌人、生命值和零件都不再出现，地图也直接可用，上面有作品、自我介绍、联系和幕后四个传送点。

四个传送点后面的内容加起来不少。作品机器里有四个项目，分别是中文学习应用 Hanzii、中文会话应用 Niubii、日语词典 Mazii 和德语学习应用 Todaii，其中只有 Hanzii 可以点开完整的案例，另外三个的按钮写着 LOCKED。Hanzii 的案例是一篇约 47 屏长的设计过程记录，由三十张长图和五段录屏组成。ABOUT ME 页有四屏，讲他的经历、设计观和技能。联系区立着五座社交账号的基座，另有一张写着 LET'S COLLAB 的联系表单。幕后页交代了这个站用了哪些工具和素材。

Long Hoang 把画面分成了两层，底下是卡通渲染的三维世界，上面是一层像从漫画里剪下来的纸片界面。两层用的是同一套颜色，荧光绿、近乎黑色的深蓝和白色。坦克是荧光绿的，按钮是荧光绿的，标题里要强调的那个词也是荧光绿的，访客在任何一屏都能凭这个颜色找到主角和下一步该按的地方。

三维世界的做法是少面数的模型加上漫画式的明暗。工厂里的油罐、木箱、路锥和机器都只有很少的面，颜色是平涂的，阴影里铺着一层细密的网点，物体的边缘勾着深色的线。画面的边角还带着一点红蓝错位的色边，像老电视的画面。Long Hoang 在幕后页里把这套画法列了出来，低面数、卡通明暗、网点、排线阴影、粗描边和一点色差。除了这些固定的画法，这个世界里的光线还会随时间变化，访客在站上停留一两分钟，天空会从蓝色的白天变成橙色的黄昏，再变成紫色的夜晚。

界面上的每一块面板都做成了撕下来的纸。教学卡、项目卡、地图和设置面板的边缘都是歪的，四个角不一样高，外面套着一圈粗黑边，有的还带着两个图钉孔。标题用的字体是 Crocante，这是一款又粗又圆的大写字，套着厚厚的深色描边，看上去像贴纸。正文用的是无衬线体 Barlow，字号比标题小得多。Long Hoang 在幕后页里说，他想要的是波普艺术和撕纸的感觉，边缘不齐，形状多变。

作品机器那一屏是全站构图最完整的一处。镜头落到和坦克差不多高的位置，画面左边是一台顶着深色圆盖的机器，机器正面嵌着一块屏幕，屏幕上是当前项目的宣传图，一束发光的管线从机器侧面垂到地上的开关。画面右边是项目卡，卡的左上角贴着应用图标，下面是项目名、一句介绍、职位、类别和日期，再下面是应用商店的图标和 SEE MORE 按钮。访客切换项目时，屏幕上的图换了，管线的颜色也跟着换。Hanzii 的管线是蓝白色，Niubii 的是绿色，Todaii 的是黄色。

Hanzii 的案例页换了一种和游戏完全不同的语气。访客点 SEE MORE 之后，游戏画面退到后面，屏幕左边四分之三是白底的长图，右边是一条深色的侧栏。侧栏里一张撕纸卡片列出本页的二十八个小节，当前读到的那一节前面有一个小三角。长图本身是很规矩的产品设计汇报，标题是 Hanzii 如何为一款五百万用户的应用重建界面架构，后面依次是问题、调研、线框、测试、设计规范和上线后的数据。游戏负责让人记住这个人，案例页负责说明他平时的工作是什么样。

这辆坦克开起来像一辆真的履带车。A 和 D 两个键让车身原地转向，W 和 S 让它沿着车头的方向前进和后退，炮塔则独立于车身，一直指向鼠标的位置。坦克开进草地时，草叶会向两边倒下，身后留下一条压过的深色痕迹，开在土路上则留下两道履带印。访客在行驶时按住 Shift，坦克会加速冲出去。

镜头的位置会跟着坦克所在的区域变化。草坡上的镜头压得很低，贴在坦克斜后方，能看到地平线是弯的，这个世界像一颗小星球。坦克开进草地深处或者工厂的院子，镜头升到头顶，变成俯视。访客在作品机器前按下 F，镜头又降到地面，正对着屏幕，空中飘下一阵彩色纸屑。镜头每换一次位置，访客看到的都是一种不同的游戏画面。

抓取物体是这个站最有游戏感的动作。访客按下 G，画面四周泛起一圈绿光，屏幕底部列出松开、升降和旋转三组按键。鼠标移到木箱或者木托盘上，物体上会出现一个四向箭头的标记。访客点一下鼠标，炮口射出一道波浪形的绿色光束连到物体上，物体被吊离地面，跟着鼠标移动。访客再按一次 G，光束消失，物体就掉回地上。物体的下落和碰撞由物理引擎 Rapier 计算，它负责算出每个箱子该怎么滚、怎么停。

场景和场景之间的切换，用的是一片铺满屏幕的网点。访客用地图传送，或者点下跳过游戏的按钮，屏幕会被大大小小的圆点铺满变黑，再由圆点散开露出新的地点。这个转场和阴影里的网点是同一种图案，所以它看起来像这个世界自己的一部分。纸片面板的出场比场景切换短得多，只带着一个很短的弹出动作。

整个站运行起来很平稳，坦克在草坡、草地和工厂里行驶时，画面都保持在每秒 60 帧，ABOUT ME 页和幕后页滚动时也是 60 帧。Hanzii 的案例页有 47 屏长，访客从头滚到尾，绝大部分时间同样是 60 帧，只在个别大图刚露出来的一瞬间会顿一下。页面后段有五段会自动播放的录屏，访客滚过那一段时，画面也保持在 60 帧。

这个站没有用网页框架，三维部分用 three.js，物理用 Rapier，声音交给播放库 Howler.js。界面动画交给动画库 GSAP，长页面的平滑滚动交给 Lenis。three.js 新一代的渲染器本来可以走更新的 WebGPU 接口，这个站让它固定使用兼容面更广的 WebGL。

访客在看到开始画面之前，浏览器要下载约 10 MB，分成 449 个请求。最大的一类是声音，58 个文件共 3.9 MB，除了几段背景音乐，光是碰撞声就按塑料、金属、木头、水泥和砖块分了几种。其次是 48 个三维模型共 1.9 MB，脚本 1.4 MB，界面上的纸片和图标是 247 个矢量图，共 0.46 MB。访客进入工厂之后，浏览器再下载约 1.4 MB 的贴图和图片。案例页的三十张长图只有头三张在开头下载，其余的不算在这 10 MB 里。

加载是访客在这个站上等得最久的环节。进度条在 0.2 到 0.3 秒就出现了，但开始画面要到第 12 秒左右才能点。在这十二秒里，浏览器累计有十一秒多被脚本占着，其中最长的一段连续 4.3 到 4.6 秒，Google 建议这类长任务不超过 0.05 秒。浏览器被占住的时候，页面对点击没有反应，进度条也只能走走停停。加载完成之后，页面没有任何布局跳动。

进了游戏之后，显卡的负担反而不重。画面每一帧大约画十九万到三十七万个三角形，显卡每帧收到七十五到一百三十次绘制指令，画面一直保持在 60 帧。设置面板里有一个 High quality 开关，访客关掉它，每帧的三角形会减少一成多，这是留给慢机器的退路。

Long Hoang 在三维游戏之外，又给整个站配了一整套普通网页的骨架。首页、作品、ABOUT ME、联系和幕后各有自己的网址，服务器会为每个网址返回带着各自标题和简介的页面。别人直接打开 ABOUT ME 页的链接，看到的就是这一页，不用先过开始画面。页面里还藏着一层访客看不见的文字，有站点标题、导航、四个项目的名字和简介，搜索引擎和读屏软件读到的是这一层。

读屏软件在这个站上能用的不只是那层隐藏文字。所有图片都带了替代文字属性，页面语言也声明了。不过 Hanzii 案例页的文字都排在图片里，访客没法选中和搜索这些文字，读屏软件也读不到正文。

键盘用户在这个站上进得了门，也能把游戏玩起来。访客在开始画面上按 Tab 键，焦点依次落在声音按钮和 LET'S GO 上，两个按钮都有看得见的焦点框，按回车就能进入游戏。之后开车和开炮本来就用键盘，Esc 能关掉地图和设置面板。问题在第三次按 Tab 之后，焦点会走进那层看不见的导航链接，屏幕上没有任何提示，键盘用户不知道自己选中了什么。瞄准也只能靠鼠标，炮塔只认鼠标的位置。

这个站对系统里的减少动态效果设置只响应了一半。这个设置的用处是让网页少做动画，它在这里只管得住界面。访客开启它之后，纸片面板不再弹出来，而是直接出现，开炮时镜头也不再后坐。游戏世界本身、网点转场和镜头的移动都照常进行，因为它们就是游戏的内容。

FWA 给这个站的分数是 85，由 21 张票算出，归在好玩可互动、游戏和个人作品集三类下面。Long Hoang 在 FWA 上写的说明只有两句，说他是一位把产品从零做到一的产品设计师和创意开发者，把三维设计和可扩展的设计系统结合起来，做有情绪的界面。这段说明讲的是他这个人，没有提到坦克和工厂。

这个站是 Long Hoang 在 FWA 上的第一个奖，署名只有他一个人。他在幕后页里交代了每样工具的用处。写代码时他用了 Codex 和 Antigravity 两个 AI 编程助手，界面在 Figma 和 Photoshop 里画，三维模型用 Blender 做，特效先在 Unity 里试。声音素材则买自 Envato 和 Epidemic Sound 两个素材库。幕后页的最后一段说，源代码暂时不公开，要等他把几个网站奖项都拿到再说。这段话下面是一个请访客投票的按钮。