网页效果图设计新思路

在网页设计的过程中,效果图一般总是通过Photoshop做出来,多则几十过百的图层以及各种PS效果的确是把网页的样式效果做出来了,并且也容易分块切图或者直接在其中取到某些图片素材。

但在当前响应式网站的设计并且内容都使用流式布局的时候,要对每种情况都对应着去做一张PS效果图,工程量巨大,并且显得不太现实。另外当你需要修改网页中某个元素的大小或背景的时候,手动对一张张PS效果图作修改简直是一个噩梦。

这引发了对设计流程以及使用工具的新思考。能否在贴近并尽量覆盖各种真实使用环境的情况下,又易于修改?答案是抛弃原有的在PS效果图制作方法,转而使用HTML以及CSS等构建真实的基础网页效果,最终以截图的形式获得效果图展示给客户。客户对某个地方提出修改意见是,你回去执行改动也会变得很轻松,或许只需要在CSS中修改一两行代码,若是使用less的话,有时只需改一个变量值,就能达到想要的效果。而这些,在传统Photoshop效果图的修改中,不可想象。

或许你会抨击这不就将样式设计与前端代码构建职能混淆了吗?其实HTML,CSS等只是制作效果图的工具,网站效果轮廓前后当然是差不多,但这并不是最终的前端代码,仅用作基本的效果展示。最终网站前端实现的代码还会跟后台输出浏览器兼容等有关,可以说它们完全是两码事。

这给网页设计者更高的要求,脱离Photoshop去学习基本的前端语言。新时代下,网页设计不再可能像平面设计那样的专职于图形图像,还要结合Web技术,来使设计更贴近真实,也减少不必要的重复劳动。可能在固定布局的设计中,Photoshop依然是最好的工具,但流式布局响应式设计的浪潮涌来,能突破传统结合Web技术来做设计,才能走在前端,赢在未来。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。