我的“诺艾尔”项目：从被嘲笑到实现
谁说我周末只能躺尸？我那个搞UI的朋友老是嘲笑我，说我写前端只会搭架子，页面做得跟狗啃的一样。气不过老子就决定搞一个真家伙出来，还得是能把细节拉满的那种。既然要搞，就搞个最努力的，诺艾尔。我就直接拍板，起名就叫“官方正式版下载最新版”，听着多唬人，我就要让它看起来比真的还真。
起步：素材的扒取与眼睛的抗议
我的习惯，先动手，再想架构。第一步，素材先行。我打开游戏，对着屏幕就是一顿截。把角色立绘、技能图标、背景图全都扒了一遍，分辨率不够的，还得上放大工具自己去补像素。光是把那些复杂的技能图标抠干净，把边上的毛刺处理掉，我就花了整整一个晚上，眼睛疼得像是要爆出来一样。我用PS磨那些图，跟雕刻似的，每一个阴影，每一个光泽，都得对上。
- 第一晚： 抠图与切图，主要解决素材清晰度问题。
- 第二天： 确定主色调，把诺艾尔那种偏暖的，带点金属质感的颜色确定下来。
中期：死磕那该死的“质感”
抠图只是体力活，真正的折磨从代码开始。我这回没用那些花哨的React还是Vue的，我就硬啃的原生HTML和CSS。我主要花时间在两个地方：顶部的导航栏，和那个“下载”按钮。
朋友说我的按钮做得没质感，这回我非要用CSS写出金属光泽感。我为了这个效果，调渐变、调阴影、调高光，TMD，那个颜色数值我换了不下五十遍。每次改完我就得刷新去看，感觉自己像个神经病一样，盯着一个按钮看半小时。实现那个点击后微小的“下沉”效果，用了CSS的transform，光是确保它在各种浏览器里表现一致，就折腾到了凌晨。
我为什么对这些小细节这么执着？这事儿跟我之前被甲方折腾的经历有关。前几年我给一个甲方做站，项目都快上线了，结果甲方老板的儿子非要改一个字体，说那个字体“不够努力”。当时我就被逼着把整个站的字体库换了一遍，熬了三天。那次我就发誓，以后我做自己的东西，细节一定要做到自己满意，谁也别想指手画脚。这个诺艾尔的网站，虽然只是个展示页面，但它凝聚了我憋着的一口气。
收尾：移动端的适配与的炫耀
原以为代码写完就解放了，结果最让我崩溃的是做适配。我用电脑看没问题，用我的旧手机一看，排版全乱套了。文字溢出，图片错位，简直没法看。我TM凌晨三点起来，硬是把所有的flex布局和media query全部重写了一遍，把那些像素单位都换成了百分比，才勉强摆平。
我把链接甩给我那朋友，没说这是我做的，只说是网上新出的一个“官方版”。他一看那个金属质感的下载按钮，还有那个像素级还原的公告栏设计，直接沉默了五分钟。他才反应过来是我搞的，说了两个字：“牛逼。”
实践证明，只要愿意花时间，随便一个小项目也能给你带来巨大的成就感。我这回用最土的办法，把细节拉满了。下一步，我打算把这个站加上一点轻量级的动效，让诺艾尔真的在页面上“努力”起来。