好的设计促进前端技术:视觉效果实现的方法(2)

二、前端是如何切图的

第一步 拼图

为了加快页面加载速度，会把多张图片拼在一张图片上。

第二步 保存为Web所用格式

网页上的图片，照片、banner类一般保存为jpg，其他的，通常都是保存为png-8或gif（除了动态图片需要用到gif，其他场景png-8完全可以替代gif）。对于保存为png-8或者gif的图片，有时候会看到图片呈现带状感（如下图右侧），失真很严重。

有两个办法，一是增加颜色的数量，但是增加数量会导致图片变大，需要在颜色数量和图片大小之间取一个平衡，而且如果图片上颜色太多，就算颜色数量增到最大256，依旧会有明显的带状感，这时候可以把图片拆开，把颜色类似的图片拼在一张图上。

三、页面布局相关

元素叠加的效果

通过外补丁（margin）、绝对定位（position:absolute）可以实现多个元素互相叠加的效果，使得设计上不受布局的局限。

固定屏幕的效果

某些特殊场景使用（如上图的“回顶部”），解决跟随的问题。

了解前端知识，不仅在沟通上更顺畅，设计上更合理，对于设计过程也有一定的帮助，比如在设计控件的时候，ps里看hover样式始终不够直观，这时可以把控件实现出来，直观的去感受，调整你的设计稿直到满意为止。虽然成本比较大，但是对于需要仔细推敲的控件来说还是值得的。

某人曾说过，好的技术能带来设计上的突破，而好的设计也能促进前端技术的发展。css3、无极加载、在线编辑头像，很多技术的出现改变了设计的方式，向后多走一步吧！