摘要：这引发了对设计流程以及使用工具的新思考能否在贴近并尽量覆盖各种真实使用环境的情况下，又易于修改答案网页效果图设计新思路答案是抛弃原有的在效果图制作方法，转而使用以及等构建真实的基础网页效果，最终以截图的形式获得效果图展示给客户。
旧流程：P图传统的PS网页设计已经跟不上如今流式布局潮流的发展了，PS不可能把所有移动设备的尺寸都做一个版本出来。如果PS的页面过多，期间要修改一个通用的东西，也是牵一发而动全身。网页效果图设计新思路：使用html+css+less完成你的任务吧！
在网页设计的过程中，效果图一般总是通过Photoshop做出来的。多则几十过百的图层以及各种PS效果的确是把网页的样式效果做出来了，并且也容易分块切图或者直接在其中取到某些图片素材。
新思考：P的图太多，有好多小地方要修改怎么办？如果要用在响应式网站的设计并且内容都要使用流式布局的时候，要对每种情况都对应着去做一张PS效果图，工程量巨大，并且显得不太现实。另外当你需要修改网页中某个元素的大小或背景的时候，手动对一张张PS效果图作修改简直是一个噩梦。
这引发了对设计流程以及使用工具的新思考：能否在贴近并尽量覆盖各种真实使用环境的情况下， 又易于修改？
答案：网页效果图设计新思路答案是抛弃原有的在PS效果图制作方法，转而使用HTML以及CSS等构建真实的基础网页效果，最终以截图的形式获得效果图展示给客户。客户对某个地方提出修改意见时，你回去执行改动也会变得很轻松，只需修改CSS中的一两行代码；若是使用less的话，有时只需改一个变量值，就能达到想要的效果。
或许你会抨击这不就将样式设计与前端代码构建的职能混淆了吗？ 其实HTML、CSS等只是制作效果图的工具，网站效果轮廓前后当然是差不多，但这并不是最终的前端代码，仅用作基本的效果展示。最终网站前端实现的代码结构，还会跟后台输出、适应组件化复用、还有浏览器兼容等有关，可以说它们完全是两码事。
不要害怕学习要做到蜕变，这给网页设计者更高的要求，脱离Photoshop去学习基本的前端语言。新时代下， 网页设计不再可能像平面设计那样的专职于图形图像，还要结合Web技术来使设计更贴近浏览器的真实环境，同时也减少了不必要的重复劳动。
可能在固定布局的设计中，Photoshop依然是最好的工具，但流式布局响应式设计的浪潮涌来，能突破传统结合Web技术来做设计，才能走在前端，赢在未来。
收获的感动我多年前已经开始尝试使用PS和前端技术混用，收到的效果很大。特别对于独立开发者来说，我们经常要同时做UI设计和前端开发，在UI这一端使用HTML和CSS的话，后面的开发流程更加轻松，在前端开发时能参考或者复用的地方你会发现有很多，节省了你重复狂敲Emmet的时光。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50413.html
摘要：这引发了对设计流程以及使用工具的新思考能否在贴近并尽量覆盖各种真实使用环境的情况下，又易于修改答案网页效果图设计新思路答案是抛弃原有的在效果图制作方法，转而使用以及等构建真实的基础网页效果，最终以截图的形式获得效果图展示给客户。 传统的PS网页设计已经跟不上如今流式布局潮流的发展了，PS不可能把所有移动设备的尺寸都做一个版本出来。如果PS的页面过多，期间要修改一个通用的东西，也是牵一发...
摘要：前言这里筑梦师是一名正在努力学习的开发工程师目前致力于全栈方向的学习希望可以和大家一起交流技术共同进步用简书记录下自己的学习历程个人学习方法分享本文目录更新说明目录学习方法学习态度全栈开发学习路线很长知识拓展很长在这里收取很多人的建议以后决 前言 这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程...
阅读 2570·2021-09-26 10:13
阅读 5968·2021-09-08 10:46
阅读 685·2019-08-30 15:53
阅读 2956·2019-08-29 16:13
阅读 2749·2019-08-26 12:23
阅读 3477·2019-08-26 11:24
阅读 1084·2019-08-23 18:09
阅读 1028·2019-08-23 17:08
