我前阵子想给自己做个小工具页面放手机上用，就冲去搞了个H5设计。刚开始屁都不懂，结果踩坑踩得满脚泡，气得我直跳脚。今天就叨叨整个过程，帮新手们躲着点儿雷。
一上来就瞎动手找骂
没计划就开干，找了个免费模板直接套。第一下就傻眼，页面在手机上加载慢得像乌龟爬，字小得近视眼都看不清。我火急火燎改这儿改那儿，忙活半天没个头绪，这才想起根本没想清楚功能是赶紧停下手，拿笔划拉个草图，标清楚哪儿放按钮、哪儿塞内容。现在学乖了：千万别学我，设计前脑子先动起来！
测试偷懒摔大跟头
草图画完，我就屁颠屁颠开始敲代码。用个编辑器写了点HTML和CSS，觉得挺顺溜，心想省钱没多测试。结果发给朋友一看，人家用苹果手机根本打不开页面，急得我满身汗。原来兼容性没搞，不同浏览器显示全乱套。只好硬着头皮借朋友手机，一个一个浏览器试。折腾一整天，加了个简单重置样式才搞定。避坑教训：测试别省事儿，不同设备和浏览器都滚一遍！
中途我还犯了个二缺错误：塞图太大拖慢速度。随手拉了张高清图往页面扔，加载卡得像老牛拉车。查半天才明白，文件尺寸得压一压。下载个免费压缩工具，缩到合理大小，速度嗖嗖快起来了。
交互瞎搞白忙活
设计按钮时候又翻车。我模仿别人加个酷炫动画，按下去闪半天才响应，用户都跑了。研究一番才懂，反馈得太慢不跟手。改成一点就变色加震动提示，简单粗暴效果这里总结个铁律：交互别花里胡哨，快准狠才是王道！
- 动画别滥用：太多闪瞎眼，分分钟劝退用户。
- 字体统一清：开头我混用三种字体，排版看着像垃圾堆。
- 响应式死规矩：媒体查询没设对，平板电脑上布局崩成渣。
磨到出成果
反复踩坑调试，页面总算跑通了。放手机上一滑，速度流畅、点哪儿都顺，这才舒坦了口气。整个过程学的最深教训：新手最忌拍脑门就干，慢下来多琢磨，躲坑像躲瘟神！下次再搞H5，我肯定先画图、后测试、再上线，绝不手贱瞎搞了。
