前几天刷手机看到别人做的H5页面挺酷炫，心一痒就想自己试试。结果打开教程满屏的英文术语直接给我整懵了，关掉网页点了根烟冷静半天——咱这种非科班出身的，搞设计总不能从写代码开始？

第一步：抄作业先找对地方

我先翻了十几个设计网站，要么收费贵得离谱，要么模板丑得没法看。蹲厕所刷手机时，偶然发现个国内平台，首页挂着"零基础三分钟建站"的广告。将信将疑点进去，发现真能直接套模板，当场拍了桌子："早说！这不比啃代码强？"

第二步：玩积木式排版

选了个卖水果的模板开始折腾。本想搞个高大上的渐变色背景，结果手一滑调成荧光绿配芭比粉，朋友看到截图笑到打嗝："你这页面是卖农药的？"赶紧撤回重来，老老实实用了平台推荐的薄荷绿+奶白色组合。

栽坑记录：
• 图片尺寸没统一，有的被拉成宽屏有的压成豆干
• 按钮随便扔角落，用户得拿放大镜找"购买"键

第三步：动效千万别上头

看见特效库里几十种动画效果，兴奋得跟过年似的。给标题加了旋转，给图片设置弹跳，连分隔线都搞成波浪扭动。预览时差点吐了——满屏元素都在抽风跳舞。隔壁工位同事伸头看一眼："你这网页癫痫发作了？"只留了商品图淡入效果，其他全关掉。

第四步：手机才是亲祖宗

电脑上看着挺美的页面，传到手机直接崩盘。价格表挤成俄罗斯方块，"立即购买"按钮跑到屏幕外修仙去了。蹲公司楼梯间测试了二十多次，发现三个致命伤：

• 字体小于14px的根本看不清
• 横屏图片会把手机撑爆
• 按钮间隔太近总误触

后来学乖了，每改一次就掏手机扫码预览，举着胳膊像在测试5G信号。

第五步：土法子测兼容性

完工后抓了五个同事帮忙测试，设备从华为到iPhone都有。结果三星手机打开全是马赛克，小米浏览器显示错位三厘米。最绝的是用iPad的老王说："你这页面怎么在跳广场舞？"发现是某个动画效果兼容性问题，干脆删掉保平安。

折腾三天搞出个卖橘子的H5页，点击量还没我朋友圈自拍高。但看着自己东拼西凑的"作品"能正常显示，比过年抢到红包还乐呵。这玩意儿就跟做菜似的，菜谱看一千遍不如亲自烧糊两次，下次试试加点音效——希望别再整成午夜凶铃特效就行。