今天这事儿得从上周说起。当时接了个私活，甲方让我改个网页按钮颜色，结果我吭哧吭哧把整个页面布局全调了。交活时人家一脸懵：“我只要UI微调，你咋把网页结构都动了？” 嗐，当时我老脸一红，发现自个儿连基本概念都搞混了！

查资料踩的坑

当晚就抓着电脑猛搜“UI和网页设计区别”，结果越看越晕。有的说UI只管颜色图标，有的说网页设计包含UI。干脆把浏览器标签页开得满屏都是，咖啡喝了三杯还没捋明白。

动手做对比表

第二天直接祭出白板笔，左边写“UI设计”，右边写“网页设计”。先画个购物网站当例子：UI设计就是给商品图加阴影、把购买按钮调成骚气的玫红色、让购物车图标蹦蹦跳跳；网页设计？得琢磨商品展示排三列还是四列、运费说明该塞在页面底部还是侧边栏、用户手机打开时图片会不会挤变形。

• UI像化妆师：只管按钮圆不圆、字体萌不萌、加载动画转几圈
• 网页设计像搭积木：导航栏放头顶还是侧边？用户得点几次能付款？手机电脑显示会不会劈叉？
• UI专注颜值：用PS调渐变色能调俩小时
• 网页操心命脉：用户从哪进来？咋留住人？怎么让人爽快下单？

拿自己网站开刀

翻出去年做的摄影博客当小白鼠。先把所有UI元素用红色框标出来——包括那个被我改成荧光绿的点赞按钮。再拿蓝色笔圈网页设计部分：相册网格间距、联系方式折叠框、电脑转手机时的图片缩放规则。标记完倒吸凉气：原来之前加载慢是因为我把1080P大图硬塞进手机端！

最打脸的测试

找邻居大姐帮忙看页面，结果她指着产品详情页问：“为啥付款按钮藏这么深？”我支吾说按钮颜色调得很醒目了！她翻白眼：“颜色再亮也得让我找得着！” 这才彻底悟了：UI是让东西好看，网页设计是让东西好用。

做完活彻底清醒了

现在接活第一句就问：“您是要改脸蛋（UI）还是动筋骨（网页设计）？” 上周那个甲方又找我改界面，这回直接甩给他六个问题：

• 改外观还是改布局？
• 主要在什么设备看？
• 用户最常点哪里？
• 现有页面哪里卡壳？
• 重点突出什么内容？
• 要用户看完做什么？

对面直接发来语音：“哥们专业！” 心里偷乐：再也不会把字体设计和页面排版混成一锅粥了！