最近腰一直不太舒服，坐久了真要命。老婆看我总是躺在沙发上抱着个老笔记本捣鼓，就说我：“你不是老说要看看那本讲极简布局的设计书吗？光看理论没用。” 我一听，对，与其干躺着，不如找个小项目来练练手，把书上的东西直接敲出来。就想到了搞一个单页面的游戏介绍站，主题就叫《巫师的悖论》。
第一步：硬着头皮搭骨架
我这人比较糙，做这种东西就喜欢直接上最基础的。没用那些花里胡哨的框架，直接打开Sublime Text，从最原始的HTML5结构开始敲。我决定把这个页面分成几个大块，结构必须清晰，不能让人看起来是一团麻。
- 顶栏区域：放游戏Logo和几个导航按钮（虽然是单页，但点击能平滑滚下去的那种）。
- 主视觉区：一张巨大的概念图，上面写着“巫师的悖论”几个大字，配上一个“立即加入内测”的按钮。
- 游戏介绍区：得把这个“悖论”讲清楚，这部分文字量最大，我打算用两栏布局。
- 角色展示区：放几个主要的NPC或者职业，用卡片形式排列。
- 底部版权：常规操作，备案信息和公司名（反正都是瞎编的）。
第二步：搞定视觉和内容填充
骨架有了，没肉不行。我得先自己把游戏背景故事给编出来。这个“巫师的悖论”的核心设定就是：魔法力量越强，理智值越低，最终会变成怪物。我把这段核心设定使劲往介绍区塞，力求让玩家看一眼就能明白这游戏是玩心跳的。
在样式方面，我这回的要求就是“极简”。我选择了深色背景和少量的撞色，突出神秘感。我发现以前用习惯了Bootstrap，现在纯手写CSS，光是调整字体大小和行间距就让我折腾了好久，尤其是那个主视觉图，为了让它在不同分辨率下都能完整铺满，我来回调整了background-size十几次，真叫一个磨人。
第三步：细节的打磨与反思
做完主体布局和基础配色后，我才发现真正的麻烦在细节上。我想要那个“立即加入内测”的按钮能跳动一下，增加吸引力，所以又花时间手写了一小段CSS的@keyframes动画。以前觉得动画是小事，真自己从零写，才发现逻辑要捋清楚。
最让我头疼的是响应式设计。因为一开始没想太多，等我把窗口缩小到手机尺寸一看，好家伙，文字全挤到一块儿了，卡片堆叠得像豆腐块。我又硬着头皮，重新回去加了媒体查询（Media Query）。我意识到，好的实践记录，就是你发现问题、解决问题的过程。
我原本以为这个官网介绍，我一下午就能搞定，结果我从周三晚上一直敲到了周四中午。虽然只是一个简单到不能再简单的静态页面，但通过这回从零开始的实践，我才真正理解了设计书里那些“结构清晰是第一生产力”的鬼话。不是理论没用，是自己手太生了。
最终效果还挺满意，虽然代码粗糙，但《巫师的悖论》的神秘感算是立住了。下次再分享我用Go语言写这个网站后端接口的实践记录，那又是另一番折腾了。