起个头

今天想跟你们唠唠我折腾网页UI这事儿。月初公司说要做个新功能页，得好看又好用，我寻思这不就是个机会嘛正好把脑子里那些想法试试水。一开始真没想这么复杂，谁知道踩坑踩得我都快成土行孙了。

第一步：需求把我整蒙圈了

产品经理甩了段话给我，写得云里雾里的。“用户友好”“简洁大气”“突出重点”，这种词儿听得我耳朵起茧子了。我直接冲他工位拍桌子：“哥！你就说用户到底要在这页面上干点点啥按钮！看啥信息！”掰扯了俩下午，终于抠明白了：

• 用户得一眼找到搜索框
• 重点活动图必须够大够抢眼
• 俩核心按钮（提交和取消）位置要显眼

第二步：纸笔画成草稿大王

甭管啥设计软件，我习惯先摸笔。拿了个午饭外卖的纸壳子，背面就开始鬼画符。导航放头顶？试试。搜索框搁中间？再画一个版本。按钮在下面还是右边？多画几个摆一起对比。画了七八张，感觉手都酸了，才挑出个最顺眼的布局。重点就是别怕丑！这阶段越糙越好改！

第三步：电子稿改到眼冒金星

把纸壳子草稿塞进电脑里做电子版，没想到这才是痛苦的开始。第一稿发给前端小哥，他回我：“哥，你这按钮挨这么近，用户手指头粗点能戳一起了！”得，拉间距。调完给产品看，他说：“这个标题颜色不够跳，老板说不够喜庆！”调红色，太扎眼；调橘色，像促销页；改回蓝色，产品又说太冷清。翻来覆去折腾了快一礼拜，改版本号改到V17，感觉连配色都认不得了。

第四步：死磕细节真掉头发

等大框架都定得差不多了，开始抠细节。你们知道那个表单输入框的边框颜色，能调出多少种蓝么？光标移上去是变深一点还是浅一点？按钮按下去那一下到底该往下沉几个像素？我对着屏幕调了整晚，感觉眼珠子都快对焦不上了。后来学乖了，拿其他成熟网站的页面来比对，照着人家的间距颜色微调，省了一缸子力气。

第五步：攒零件才是硬道理

折腾完这页面，我把自己搞出来的按钮、图标、字体样式全扒拉出来，单独存了个库。结果第二个月改版另一个页面，直接把按钮样式拖进去，换俩图标就完事儿了！省下半天时间美滋滋冲了杯咖啡。这玩意儿跟攒乐高似的，好零件攒多了，拼新玩意儿自然快！

叨叨两句

真不是多牛逼的流程，纯粹是边被坑边总结。最大心得就仨：问需求要像审犯人一样问到底；别跟像素死磕，多抄成熟的（合理抄！）；零件攒得加班少到老。下回再折腾新页面，估计还能省半罐子头发。