设计师也需要了解的一些前端知识
fmms 13年前
<div id="news_body"> <p style="text-align:center;"><a><img style="width:559px;height:197px;" alt="设计师也需要了解的一些前端知识" src="https://simg.open-open.com/show/3ede761813223176da9339294daa897d.jpg" /></a></p> <p> 国画中有句话，“画虎先画骨”。对应到网页上，视觉效果只是一张皮，前端代码是支撑这张皮的骨，了解骨架是怎么长的，有助于设计出更合理高效的页面。</p> <p> <strong>一、常见视觉效果是如何实现的</strong></p> <p> <strong>关于文字效果</strong></p> <p> 文字自身属性相关的效果 css 中都是有相对应的样式的，如字号、行高、加粗、倾斜、下划线等，但是一些特殊的效果，主要表现为 ps 中图层样式中的效果，css 是无能为力的。但是 css 也在不断发展，在 css3 中已经新增了文字阴影的效果，可惜 IE6、7、8均不支持。所以，一些比较特殊的文字效果，依然只能通过图片来实现。</p> <p> <strong>说说文字间距</strong></p> <p style="text-align:center;"><a><img alt="设计师也需要了解的一些前端知识" src="https://simg.open-open.com/show/38ed4cdeb5da63c60ea4e8a8c802ac10.jpg" width="240" height="200" /></a></p> <p> 在 css 中其实是可以控制文字间距的，但是现实中很少会使用，一方面是很多设计师不知道 css 中有相应的属性，并且需要使用文字间距的场景也不多，另一方面，浏览器解析文字间距的方式也令这一属性在某些场景下无法使用，比如在文字居中的时候，实际 居中的区域是包含了文字间距的（如上图），使得在视觉效果上让人无法接受，所在当需要在文字中保留一定空间的时候（比如两个字的按钮），会直接用空格来代 替。</p> <p> 不过多知道一种实现文字间距的方法总是好的，虽然目前来看应用场景很少，但是也许某天就派上用场了。比如 12 号的雅黑文本看上去会感觉密密麻麻的，但是加上一点文字间距，阅读效果就会好很多。</p> <p> <strong>关于字体</strong></p> <p> 网页里中文文本字体一般都是宋体，不建议使用其他字体，但是其实字体是可以上传到服务器，然后页面中引用该字体，就解决了用户电脑上没有相应字 体的问题。不过很少有人会这么做，为什么呢？1.浏览器是可以设置忽略网页字体，改用用户设置的字体(IE:工具->Internet 选项->辅助功能)。2.服务器上的字体是需要加载的，而一个字体一般都几兆，严重影响页面载入速度。所以对于特殊字体，通常都是做成图片。</p> <p> <strong>关于背景</strong></p> <p> 看看通常一个按钮是怎么拼出来。</p> <p style="text-align:center;"><a><img alt="设计师也需要了解的一些前端知识" src="https://simg.open-open.com/show/258f1b12c1e223dd5417160336fc26ea.jpg" width="506" height="458" /></a></p> <p> 产品类的按钮我们一般都是像A这样设计（中间段是横向的重复图案），而不是像B这样，因为产品类的按钮一般都是复用的，可以用两段拼出来一个按钮，而B这个宽度就限死了。</p> <p> <strong>关于渐变、圆角、投影</strong></p> <p> 在 css3 中终于实现了渐变、圆角和投影，不过可惜的是 IE6、7、8均不支持，但是已经可以在越来越多的网站中看到新 css 的应用，尤其是按钮，淡淡的渐变，hover 上去有点淡淡的阴影，效果很好，对于不支持的浏览器，设置一个颜色近似的背景，看到的是单色、直角效果。</p> <p style="text-align:center;"><a><img style="width:566px;height:381px;" alt="设计师也需要了解的一些前端知识" src="https://simg.open-open.com/show/75c78985d7a1db07c55c22443c60b320.jpg" /></a></p> <p> 需要注意的是：代码实现的只能是线性渐变，从某个颜色均匀的渐变到另外一个颜色，所以高光什么的只能舍弃了。css3中还有<a href="/misc/goto?guid=4958335188019251605" target="_blank">径向渐变</a>，不过暂时应用场景不多。</p> <p> 互联网发展速度很快，大大小小的新技术很多，多和前端交流吧。</p> <p> <strong>关于对齐</strong></p> <p style="text-align:center;"><a><img alt="设计师也需要了解的一些前端知识" src="https://simg.open-open.com/show/277264a8014fa62bfef6bb0eee5833be.jpg" width="240" height="126" /></a></p> <p> 主要是表单中文字的上下居中对齐，在 ps 里很简单，但是实现出来却如上图所示的，很难看，要想对齐，真是件麻烦的事情，没有好的办法。所以不是特别关键的地方，建议就随它去了。</p> <p> <strong>二、前端是如何切图的</strong></p> <p> <strong>第一步拼图</strong></p> <p style="text-align:center;"><a><img style="width:588px;height:432px;" alt="设计师也需要了解的一些前端知识" src="https://simg.open-open.com/show/bc4094e0b29a8c7b9d08c219b45ef864.jpg" /></a></p> <p> 为了加快页面加载速度，会把多张图片拼在一张图片上。</p> <p> <strong>第二步保存为 Web 所用格式</strong></p> <p> 网页上的图片，照片、banner 类一般保存为 jpg，其他的，通常都是保存为 png-8或 gif（除了动态图片需要用到 gif，其他场景 png-8完全可以替代 gif）。对于保存为 png-8或者 gif 的图片，有时候会看到图片呈现带状感（如下图右侧），失真很严重。</p> <p style="text-align:center;"><a><img style="width:554px;height:416px;" alt="设计师也需要了解的一些前端知识" src="https://simg.open-open.com/show/10188d0e5c41414eec78c62bc8e8f147.jpg" /></a></p> <p> 有两个办法，一是增加颜色的数量，但是增加数量会导致图片变大，需要在颜色数量和图片大小之间取一个平衡，而且如果图片上颜色太多，就算颜色数量增到最大 256，依旧会有明显的带状感，这时候可以把图片拆开，把颜色类似的图片拼在一张图上。</p> <p> <strong>三、页面布局相关</strong></p> <p> <strong>元素叠加的效果</strong></p> <p> 通过外补丁(margin)、绝对定位(position:absolute)可以实现多个元素互相叠加的效果，使得设计上不受布局的局限。</p> <p> <strong>固定屏幕的效果</strong></p> <p style="text-align:center;"><a><img alt="设计师也需要了解的一些前端知识" src="https://simg.open-open.com/show/b01f1782cdce3d46046f7c1821a8e129.jpg" width="521" height="267" /></a></p> <p> 某些特殊场景使用（如上图的“回顶部”），解决跟随的问题。</p> <p> 了解前端知识，不仅在沟通上更顺畅，设计上更合理，对于设计过程也有一定的帮助，比如在设计控件的时候，ps 里看 hover 样式始终不够直观，这时可以把控件实现出来，直观的去感受，调整你的设计稿直到满意为止。虽然成本比较大，但是对于需要仔细推敲的控件来说还是值得的。</p> <p> 某人曾说过，好的技术能带来设计上的突破，而好的设计也能促进前端技术的发展。css3、无极加载、在线编辑头像，很多技术的出现改变了设计的方式，向后多走一步吧！</p> </div>