说实话，干这行十五年，我见过太多小白拿着PS界面当编辑器，在那儿对着像素点发呆。昨天有个刚入行的小兄弟问我：“哥，我用ps做网站编排，为啥导出来的图在手机上看全变形了？”我听完心里一紧，这哪是问技术，这是在问命啊。
咱们先不说那些大道理，就说说我当年刚入行那会儿。那时候不懂HTML，也不懂CSS，觉得PS强大得很，拖拖拽拽就能出页面。于是乎，我就用ps做网站编排，搞了一个所谓的“高保真原型”。那时候觉得挺牛，觉得把设计图做得跟真网站似的，客户肯定满意。结果呢？一交给开发，开发大哥看着那满屏的切图，脸都绿了。他说：“你让我用代码还原这个布局，得累死我，而且还容易出bug。”
那时候我才明白，ps做网站编排，它本质上是个设计工具，不是构建工具。你在那儿排版的每一个文字、每一个按钮，在PS里只是一个图层。你把它导出来，就是一张死板的图片。要是客户说：“哎，这个标题字太小了，改大点。”你怎么办？改图，重新导出，再上传。要是改十个地方呢？改五十个地方呢？那不得把你累散架？
我记得有次给客户做个企业官网，客户非要用那种很花哨的排版，还要动态效果。我硬是用ps做网站编排，搞了一套复杂的背景图和文字叠加。结果上线后，加载速度慢得像蜗牛，用户在4G网络下打开要等好几秒。客户投诉电话打爆了，说我做的网站卡得没法用。我当时真是欲哭无泪，明明设计得挺精美啊，怎么就没人懂我的艺术呢？
后来我学乖了，开始研究前端代码。虽然刚开始写CSS布局的时候，各种margin、padding调得我想砸键盘，但一旦通了，那种感觉真爽。你想改个字体大小，改行间距，直接在代码里敲几下，页面立马刷新，所见即所得。这才是真正的“编排”，而不是在画板上“摆拍”。
当然，我也不是全盘否定PS。PS在设计阶段还是很有用的，你可以用它来构思页面的视觉风格，配色方案，甚至是一些复杂的图标设计。但是，千万别把PS当成最终的交付物。你要知道，现在的网站，响应式设计是标配。你用ps做网站编排出来的静态页面，到了不同尺寸的手机、平板上，肯定乱套。文字会重叠，图片会拉伸，按钮会错位。这时候，你就得靠CSS的媒体查询，靠Flexbox或者Grid布局，去让页面自适应。
我有个朋友，也是做设计的，他以前也执着于ps做网站编排。后来他转行做了前端，现在过得风生水起。他说：“以前我总想着怎么把页面做得好看，现在我更想着怎么让页面好用、好改、好维护。”这话虽然糙，但理不糙。
所以，各位同行，尤其是刚入行的朋友们，听我一句劝。别再把时间浪费在那些无法维护的静态排版上了。去学学HTML和CSS吧，哪怕只是基础的水平。你会发现，真正的网站编排，不是靠鼠标拖拽，而是靠逻辑和代码。
当然，如果你非要问我，有没有什么办法能让ps做网站编排的效果更贴近真实网站？我的建议是，尽量保持布局简单，多用网格系统，少用绝对定位。但这只是治标不治本。要想从根本上解决问题，还是得回归代码。
最后，我想说，技术更新换代很快，今天流行的方法，明天可能就过时了。但底层逻辑是不变的。那就是：用户体验至上，代码质量为本。别为了炫技而炫技，别为了省事而偷懒。做一个真正能解决问题的网站，才是我们从业者的价值所在。
希望这篇文章能帮到那些还在迷茫中的朋友。别纠结了，放下PS，拿起键盘，开始你的代码之旅吧。虽然过程有点痛苦，但结果绝对值得。毕竟，咱们是靠手艺吃饭的，得有点真本事才行。
