設(shè)計(jì)師也需要了解的一些前端知識(shí)
國(guó)畫中有句話，“畫虎先畫骨”。對(duì)應(yīng)到網(wǎng)頁(yè)上，視覺效果只是一張皮，前端代碼是支撐這張皮的骨，了解骨架是怎么長(zhǎng)的，有助于設(shè)計(jì)出更合理高效的頁(yè)面。
一、常見視覺效果是如何實(shí)現(xiàn)的
關(guān)于文字效果
文字自身屬性相關(guān)的效果css中都是有相對(duì)應(yīng)的樣式的，如字號(hào)、行高、加粗、傾斜、下劃線等，但是一些特殊的效果，主要表現(xiàn)為ps中圖層樣式中的效果，css是無(wú)能為力的。但是css也在不斷發(fā)展，在css3中已經(jīng)新增了文字陰影的效果，可惜IE6、7、8均不支持。所以，一些比較特殊的文字效果，依然只能通過(guò)圖片來(lái)實(shí)現(xiàn)。
說(shuō)說(shuō)文字間距
在css中其實(shí)是可以控制文字間距的，但是現(xiàn)實(shí)中很少會(huì)使用，一方面是很多設(shè)計(jì)師不知道css中有相應(yīng)的屬性，并且需要使用文字間距的場(chǎng)景也不多，另一方面，瀏覽器解析文字間距的方式也令這一屬性在某些場(chǎng)景下無(wú)法使用，比如在文字居中的時(shí)候，實(shí)際居中的區(qū)域是包含了文字間距的（如上圖），使得在視覺效果上讓人無(wú)法接受，所在當(dāng)需要在文字中保留一定空間的時(shí)候（比如兩個(gè)字的按鈕），會(huì)直接用空格來(lái)代替。
不過(guò)多知道一種實(shí)現(xiàn)文字間距的方法總是好的，雖然目前來(lái)看應(yīng)用場(chǎng)景很少，但是也許某天就派上用場(chǎng)了。比如12號(hào)的雅黑文本看上去會(huì)感覺密密麻麻的，但是加上一點(diǎn)文字間距，閱讀效果就會(huì)好很多。
關(guān)于字體
網(wǎng)頁(yè)里中文文本字體一般都是宋體，不建議使用其他字體，但是其實(shí)字體是可以上傳到服務(wù)器，然后頁(yè)面中引用該字體，就解決了用戶電腦上沒有相應(yīng)字體的問(wèn)題。不過(guò)很少有人會(huì)這么做，為什么呢？1.瀏覽器是可以設(shè)置忽略網(wǎng)頁(yè)字體，改用用戶設(shè)置的字體(IE:工具->Internet選項(xiàng)->輔助功能)。2.服務(wù)器上的字體是需要加載的，而一個(gè)字體一般都幾兆，嚴(yán)重影響頁(yè)面載入速度。所以對(duì)于特殊字體，通常都是做成圖片。
關(guān)于背景
看看通常一個(gè)按鈕是怎么拼出來(lái)。
產(chǎn)品類的按鈕我們一般都是像A這樣設(shè)計(jì)（中間段是橫向的重復(fù)圖案），而不是像B這樣，因?yàn)楫a(chǎn)品類的按鈕一般都是復(fù)用的，可以用兩段拼出來(lái)一個(gè)按鈕，而B這個(gè)寬度就限死了。
關(guān)于漸變、圓角、投影
在css3中終于實(shí)現(xiàn)了漸變、圓角和投影，不過(guò)可惜的是IE6、7、8均不支持，但是已經(jīng)可以在越來(lái)越多的網(wǎng)站中看到新css的應(yīng)用，尤其是按鈕，淡淡的漸變，hover上去有點(diǎn)淡淡的陰影，效果很好，對(duì)于不支持的瀏覽器，設(shè)置一個(gè)顏色近似的背景，看到的是單色、直角效果。
需要注意的是：代碼實(shí)現(xiàn)的只能是線性漸變，從某個(gè)顏色均勻的漸變到另外一個(gè)顏色，所以高光什么的只能舍棄了。css3中還有徑向漸變，不過(guò)暫時(shí)應(yīng)用場(chǎng)景不多。
互聯(lián)網(wǎng)發(fā)展速度很快，大大小小的新技術(shù)很多，多和前端交流吧。
關(guān)于對(duì)齊
主要是表單中文字的上下居中對(duì)齊，在ps里很簡(jiǎn)單，但是實(shí)現(xiàn)出來(lái)卻如上圖所示的，很難看，要想對(duì)齊，真是件麻煩的事情，沒有好的辦法。所以不是特別關(guān)鍵的地方，建議就隨它去了。
二、前端是如何切圖的
第一步 拼圖
為了加快頁(yè)面加載速度，會(huì)把多張圖片拼在一張圖片上。
第二步 保存為Web所用格式
網(wǎng)頁(yè)上的圖片，照片、banner類一般保存為jpg，其他的，通常都是保存為png-8或gif（除了動(dòng)態(tài)圖片需要用到gif，其他場(chǎng)景png-8完全可以替代gif）。對(duì)于保存為png-8或者gif的圖片，有時(shí)候會(huì)看到圖片呈現(xiàn)帶狀感（如下圖右側(cè)），失真很嚴(yán)重。
有兩個(gè)辦法，一是增加顏色的數(shù)量，但是增加數(shù)量會(huì)導(dǎo)致圖片變大，需要在顏色數(shù)量和圖片大小之間取一個(gè)平衡，而且如果圖片上顏色太多，就算顏色數(shù)量增到最大256，依舊會(huì)有明顯的帶狀感，這時(shí)候可以把圖片拆開，把顏色類似的圖片拼在一張圖上。
三、頁(yè)面布局相關(guān)
元素疊加的效果
通過(guò)外補(bǔ)丁(margin)、絕對(duì)定位(position:absolute)可以實(shí)現(xiàn)多個(gè)元素互相疊加的效果，使得設(shè)計(jì)上不受布局的局限。
固定屏幕的效果
某些特殊場(chǎng)景使用（如上圖的“回頂部”），解決跟隨的問(wèn)題。
了解前端知識(shí)，不僅在溝通上更順暢,設(shè)計(jì)上更合理，對(duì)于設(shè)計(jì)過(guò)程也有一定的幫助，比如在設(shè)計(jì)控件的時(shí)候，ps里看hover樣式始終不夠直觀，這時(shí)可以把控件實(shí)現(xiàn)出來(lái)，直觀的去感受，調(diào)整你的設(shè)計(jì)稿直到滿意為止。雖然成本比較大，但是對(duì)于需要仔細(xì)推敲的控件來(lái)說(shuō)還是值得的。
某人曾說(shuō)過(guò)，好的技術(shù)能帶來(lái)設(shè)計(jì)上的突破，而好的設(shè)計(jì)也能促進(jìn)前端技術(shù)的發(fā)展。css3、無(wú)極加載、在線編輯頭像，很多技術(shù)的出現(xiàn)改變了設(shè)計(jì)的方式，向后多走一步吧！
原文鏈接：設(shè)計(jì)師也需要了解的一些前端知識(shí)
【編輯推薦】
