今天赶着交活动页，临时学了把H5设计。本来以为又要被甲方催到吐血，结果摸出点门道，赶紧记下来。

开头两眼一抹黑

早上产品甩来个需求：“下班前弄个手机能打开的报名页”。我盯着电脑直挠头——以前只做过电脑版网页，手机屏幕窄得像条缝，鬼知道怎么排布。

• 直接套电脑版：把公司官网缩了缩，结果手机上看字小得像蚂蚁，报名按钮死活点不准
• 照搬手机App设计：切图切片传了半天，页面加载慢得像蜗牛爬

直到前端小哥看不下去：“你这整太复杂了，H5页面要用响应式设计！”

现学现卖的五个土法子

① 用手掌当尺子

直接拿手机截图当背景，在PS里把内容框拖到拇指能轻松戳到的位置。重要按钮全堆在屏幕下半截，单手指躺着也能操作。

② 字大就是王道

电脑上看刚好的字号，手机秒变视力表。正文直接怼到18px起跳，重点标题飙到36px。测试时举着手机隔一臂远，看不清就继续加字号。

③ 能滑动就别折叠

本来学人家搞折叠菜单，结果用户根本找不到。干脆把活动规则、常见问题全铺开，长长一页让人自己往下滑，反而没人来问客服了。

④ 色彩暴力点更醒目

电脑上看着高级的莫兰迪色，阳光下手机屏根本看不清。心一横改用番茄红配牛奶白，报名率噌噌涨。

⑤ 本地图片先压成渣

首页加载图原本3MB，大爷大妈用流量根本打不开。丢进在线压缩工具碾到100KB，画质虽然有点糊，但至少秒开了。

血泪换来的教训

蹲厕所拿自己手机测试时发现，华为和苹果显示效果差超多。华为的绿色偏得像中毒，赶紧把主色调改成蓝的。硬着头皮找运营部借了五台不同手机，每台亲手戳一遍才敢上线。

下午四点交活时，甲方居然夸“这回页面还挺顺手”。果然做手机网页就得用手机当尺子，坐电脑前空想全是坑！