开始动手前的准备

这事儿我是从零开始的，压根没做过电商网站。琢磨着先看看别人家咋整的。那几天抱着手机疯狂刷各种购物APP，淘宝京东拼多多轮着来，看人家商品图片怎么摆的、介绍咋写的、颜色选择放哪。边看边记笔记，还专门找几个买东西上瘾的朋友，看他们下单时手指头怎么点，眼睛在哪儿瞟。重点记了几个反人类的操作——比如找尺码表得划拉半天，详情图小得要用放大镜那种。

画了个草稿框架

看完心里有点数了，直接抓了张A4纸瞎画。第一个版本画得跟狗啃似的：上面扔个超大的产品主图轮播，右边给产品标题和价格搞个显眼位置，下头先塞产品基础信息。划重点——我特意把颜色尺码选配这玩意儿搁在购买按钮上头！就因为我朋友总跟我抱怨，好几次刚点购买才发现没选颜色。手机上看的话，这些选项按钮我都画得贼大，拇指能轻松戳中那种。

动手搭原型图

草稿能看懂了就开软件整线框图。用了个简单的在线工具，主要摆区块位置和文字。这儿踩了第一个坑：开始把用户评价和商品详情摞一块放，结果看的人直接蒙圈，分不清哪块是卖家的吹牛皮，哪块是真买家吐槽。赶紧改！硬生生加了个醒目的分割条，还弄了个“用户说”的标题栏。至于产品参数，一开始堆成一大坨字，我朋友瞅了眼说“脑壳疼”，马上拆成带小标题的豆腐块，看着清楚多了。

死磕视觉效果

线框定了就开始上色上图。挑了个蓝配橙的主色调，橙色专门留给“立即抢购”这种关键按钮，蓝的拿来当底色显得清爽。图片这块麻烦死了：主图必须得能左右划着看，我这儿那儿都记点儿，生怕加载慢被骂死。图片下头添了排小图预览，不然人家想看细节还得翻回主图去点，烦死人。详情图试过左右滑动看，结果划半天找不到重点，干脆直接改回上下滚，把重点信息全都往上顶。

找人来挑刺儿

原型看着有点模样了，立马抓了五个熟人当小白鼠。盯着他们用手机玩我这个假页面，提了三条猛料：

• 那个收藏的小心心，塞在购物车按钮边上简直是找骂——好几个人一激动就戳错
• 有个大兄弟买茶叶，死活找不着冲泡说明，原来是我把它压在产品参数最底下
• 所有手机壳配色里，缺个标签说明哪个是“透明款”哪个是“磨砂款”，急得人家直挠头

的修补阶段

按着吐槽声改！收藏图标被我挪到标题旁边去了，和购物车离得十万八千里。冲泡说明直接提到参数前头，加了个小茶杯图标。手机壳的每个颜色旁边都贴上文字标签。为这事儿重画了三遍流程图，按钮位置调了七八次才不打架。最搞笑的是有次以为改好了，结果在旧手机上测试时字糊成一团，再回去调字号行距折腾到半夜。

搞完这一大圈才明白，那些看着顺眼的页面全是血泪堆出来的。你以为摆个按钮很简单？放哪儿、多大、啥颜色，全特么有讲究。下次再让我弄，绝对先去盯着人买十次东西再说。