上周三折腾的破事儿
那天老板突然甩过来个需求，让我赶紧搞个新页面出来。我心想这有啥难的？打开电脑就准备开干。结果对着空白画布傻眼了半小时，鼠标晃来晃去根本下不去手。这才想起以前总跳步骤吃过的亏，老老实实翻出笔记重走流程。
第一步：瞎逛找感觉
我先把常用APP全点开瞎翻，看到顺眼的页面就咔嚓截图。淘宝商品详情页、微信读书的排版，连小区买菜群的接龙界面都没放过。存了二十多张图扔进文件夹，边翻边琢磨：为啥人家这个按钮我就想点？那个标题排版看着不累？ 乱逛了俩小时，总算在便签纸上划拉出几个关键词：要留白、字得大、重点色得扎眼。
第二步：鬼画符阶段
掏出土黄色草稿本开始乱涂。先画个大方块当屏幕，拿铅笔戳出几个黑疙瘩：这儿放标题，那儿塞图片，底下横着摆一排按钮。画着画着发现导航栏没地儿搁，赶紧在顶上补条狗皮膏药。领导路过瞅了眼冷笑：“你这火柴人画得挺别致？” 不管了！反正把按钮位置、文字长短这些坑先踩一遍，总比在电脑上返工强。
第三步：电脑上磨洋工
打开设计软件照着手稿搭积木。先从最上面堆导航栏，搜图标网站拖了个房子符号当首页入口。正文标题用超大粗体，副标题直接调灰。放图片时栽跟头了：随便找的网图尺寸歪七扭八，文字全挤变形了。气得我把杯子里的水一口闷了，重新裁图统一成3：4比例才顺眼。
- 图片尺寸：统一！统一！统一！
- 按钮间距：手抖拉出参考线量了三遍
- 字体颜色：灰了怕看不清，黑了又像墓碑
第四步：配色闹笑话
自信满满配了个蓝配黄，发工作群显摆。同事秒回：“你这是美团打车联名款？” 憋着火推翻重来。这回学乖了，主色直接抄公司LOGO的深蓝，按钮用亮橙色提神，其他全用深浅不同的灰。把饱和度拉低20%后，终于没人说像外卖APP了。
第五步：动态效果翻车
想着加点高级的交互，给按钮做了个弹跳动画。测试时手快点太快，按钮还在抽搐，新页面就哐当弹出来了。老板试用时满脸问号：“这按钮咋抽筋了？”赶紧删掉花哨效果，老老实实做颜色渐变动画——按下去变深色，松开恢复，简单粗暴最保险。
摔的跟头
熬到半夜觉得完美了，发给前端小哥。十分钟后他发来链接，我美滋滋点开——购买按钮？！ 原来设计稿最底下的按钮，在真机上被手机底部横条挡得严严实实。血压飙升改布局，所有重要按钮往上提了至少40像素。
现在这套流程已经刻烟吸肺：找参考→画草稿→搭框架→磨细节→测交互→真机跑。上周页面上线后用户停留时间涨了1.8倍，呵，都是被无数跟头摔出来的教训。
