被外包逼出来的官网
做这个《反乌托邦的掠夺者》官网，纯粹是被逼的。我们找了个外包设计团队，合同签得挺漂亮，结果花钱买了个教训。他们花了半个月，给我交上来一个什么玩意儿？一个贼亮的、蓝白配色的、感觉像卖保险或者卖理财产品的网页。跟我们游戏那股废土、金属、阴暗的调调，完全搭不上边。
我当时看了就火大。这哪里是反乌托邦？这分明是赛博朋克写字楼。钱都给出去了，但这种东西挂出去，只会让玩家觉得我们游戏跟宣传图货不对板。当场决定，行，我自己撸。外面的设计师根本不懂什么是“反乌托邦”，他们只懂“模板套用”。
定基调：要脏，要破，要故障
我的逻辑很简单，官网必须是游戏世界的一部分，而不是一个干净的宣传册。我把电脑重启了一遍，清理了脑子里那些商业模板的残渣，开始动手。
-
第一步，技术选型。为了追求速度和极致的自定义，我直接放弃了所有前端框架。什么Bootstrap，什么Vue，全不要。这玩意儿要的是速度和脏污感，用框架搞出来的东西太干净，太整齐。我直接上手写原生HTML和CSS，把控制权抓在自己手里。
-
抓住色彩核心：主色调定死了是生锈的铁红、破损的土黄和军用绿。背景图直接搞了一张高对比度、噪点多的金属废墟图，并且用一个很深的透明黑色图层把它压得死死的，让文字和按钮在上面显得特别突兀，像紧急警告。
-
字体处理是灵魂：我找了几个有点故障风、像素点比较明显的英文字体，中文字体也选了比较粗犷的黑体。关键是，我没让字体看起来光滑，我用CSS的
text-shadow和filter属性，把字体的边缘都搞得粗糙一点，模拟那种老旧的CRT屏幕显示效果，好像信号随时会中断一样。
细节是折磨人的鬼
真动手之后，发现细节才是最耗时间的。我自己抠图，把游戏里的几个主要角色立绘抠出来，边缘特意做了点磨损处理，让它们看起来像是从破旧的文件里挖出来的，而不是高清渲染图。
然后是布局，我故意用了不对称的设计。导航栏我把它横向拉长，但故意让其中的几个按钮错位，甚至用红色的“Error”框标记一些不重要的板块，让整个网站看起来有点“系统不稳定”的感觉。
最折腾的是动态效果。我没用复杂的JS库，就是用CSS的transition和简单的keyframes。比如，鼠标移到一个核心按钮上，按钮不是平滑过渡，而是要闪烁两下，抖动一下，像电压不稳一样。我甚至加了一个全局的、非常轻微的噪点动画层，让整个页面始终保持一种细微的“雪花”状态。这小细节，调试起来特别费劲，因为要保证它在各种浏览器里都得是这种“半坏不坏”的状态，不能真坏了。
验收与反思
从决定自己搞，到初版上线，我爆肝了四十八个小时。眼睛熬得跟游戏里的辐射怪一样红。但看到的效果，所有人都闭嘴了。一个看起来像是被黑客入侵、充满了废弃代码和紧急警报的官网，完美贴合了游戏调性。
我把链接丢给运营那边，他们立马就反馈说：“这才是我们的官网，之前那个是山寨货。”
虽然代码写得有点粗糙，响应式布局也做得让人想骂娘，因为太多元素需要手动微调，但它就是能把游戏的那个味儿给传递出去。这钱省下来了，但时间也搭进去了。可至少，我们有了自己的门面，一个真正属于“掠夺者”世界的门面。下次再也不相信那些只会套模板的外包了，真不如自己动手，丰衣足食。