您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

網(wǎng)頁設(shè)計(jì)師也需要了解的一些前端知識(shí)

國畫中有句話,“畫虎先畫骨”。對應(yīng)到網(wǎng)頁上,視覺效果只是一張皮,前端代碼是支撐這張皮的骨,了解骨架是怎么長的,有助于設(shè)計(jì)出更合理高效的頁面。

一、常見視覺效果是如何實(shí)現(xiàn)的

關(guān)于文字效果

文字自身屬性相關(guān)的效果css中都是有相對應(yīng)的樣式的,如字號(hào)、行高、加粗、傾斜、下劃線等,但是一些特殊的效果,主要表現(xiàn)為ps中圖層樣式中的效果,css是無能為力的。但是css也在不斷發(fā)展,在css3中已經(jīng)新增了文字陰影的效果,可惜IE6、7、8均不支持。所以,一些比較特殊的文字效果,依然只能通過圖片來實(shí)現(xiàn)。

說說文字間距

 

在css中其實(shí)是可以控制文字間距的,但是現(xiàn)實(shí)中很少會(huì)使用,一方面是很多設(shè)計(jì)師不知道css中有相應(yīng)的屬性,并且需要使用文字間距的場景也不多,另一方面,瀏覽器解析文字間距的方式也令這一屬性在某些場景下無法使用,比如在文字居中的時(shí)候,實(shí)際居中的區(qū)域是包含了文字間距的(如上圖),使得在視覺效果上讓人無法接受,所在當(dāng)需要在文字中保留一定空間的時(shí)候(比如兩個(gè)字的按鈕),會(huì)直接用空格來代替。

不過多知道一種實(shí)現(xiàn)文字間距的方法總是好的,雖然目前來看應(yīng)用場景很少,但是也許某天就派上用場了。比如12號(hào)的雅黑文本看上去會(huì)感覺密密麻麻的,但是加上一點(diǎn)文字間距,閱讀效果就會(huì)好很多。

關(guān)于字體

網(wǎng)頁里中文文本字體一般都是宋體,不建議使用其他字體,但是其實(shí)字體是可以上傳到服務(wù)器,然后頁面中引用該字體,就解決了用戶電腦上沒有相應(yīng)字體的問題。不過很少有人會(huì)這么做,為什么呢?1.瀏覽器是可以設(shè)置忽略網(wǎng)頁字體,改用用戶設(shè)置的字體(IE:工具->Internet選項(xiàng)->輔助功能)。2.服務(wù)器上的字體是需要加載的,而一個(gè)字體一般都幾兆,嚴(yán)重影響頁面載入速度。所以對于特殊字體,通常都是做成圖片。

關(guān)于背景

看看通常一個(gè)按鈕是怎么拼出來。

產(chǎn)品類的按鈕我們一般都是像A這樣設(shè)計(jì)(中間段是橫向的重復(fù)圖案),而不是像B這樣,因?yàn)楫a(chǎn)品類的按鈕一般都是復(fù)用的,可以用兩段拼出來一個(gè)按鈕,而B這個(gè)寬度就限死了。

關(guān)于漸變、圓角、投影

在css3中終于實(shí)現(xiàn)了漸變、圓角和投影,不過可惜的是IE6、7、8均不支持,但是已經(jīng)可以在越來越多的網(wǎng)站中看到新css的應(yīng)用,尤其是按鈕,淡淡的漸變,hover上去有點(diǎn)淡淡的陰影,效果很好,對于不支持的瀏覽器,設(shè)置一個(gè)顏色近似的背景,看到的是單色、直角效果。

需要注意的是:代碼實(shí)現(xiàn)的只能是線性漸變,從某個(gè)顏色均勻的漸變到另外一個(gè)顏色,所以高光什么的只能舍棄了。css3中還有徑向漸變,不過暫時(shí)應(yīng)用場景不多。

互聯(lián)網(wǎng)發(fā)展速度很快,大大小小的新技術(shù)很多,多和前端交流吧。

關(guān)于對齊


主要是表單中文字的上下居中對齊,在ps里很簡單,但是實(shí)現(xiàn)出來卻如上圖所示的,很難看,要想對齊,真是件麻煩的事情,沒有好的辦法。所以不是特別關(guān)鍵的地方,建議就隨它去了。

二、前端是如何切圖的

第一步 拼圖


為了加快頁面加載速度,會(huì)把多張圖片拼在一張圖片上。

第二步 保存為Web所用格式

網(wǎng)頁上的圖片,照片、banner類一般保存為jpg,其他的,通常都是保存為png-8或gif(除了動(dòng)態(tài)圖片需要用到gif,其他場景png-8完全可以替代gif)。對于保存為png-8或者gif的圖片,有時(shí)候會(huì)看到圖片呈現(xiàn)帶狀感(如下圖右側(cè)),失真很嚴(yán)重。

有兩個(gè)辦法,一是增加顏色的數(shù)量,但是增加數(shù)量會(huì)導(dǎo)致圖片變大,需要在顏色數(shù)量和圖片大小之間取一個(gè)平衡,而且如果圖片上顏色太多,就算顏色數(shù)量增到最大256,依舊會(huì)有明顯的帶狀感,這時(shí)候可以把圖片拆開,把顏色類似的圖片拼在一張圖上。

三、頁面布局相關(guān)

元素疊加的效果

通過外補(bǔ)丁(margin)、絕對定位(position:absolute)可以實(shí)現(xiàn)多個(gè)元素互相疊加的效果,使得設(shè)計(jì)上不受布局的局限。

固定屏幕的效果


某些特殊場景使用(如上圖的“回頂部”),解決跟隨的問題。

了解前端知識(shí),不僅在溝通上更順暢,設(shè)計(jì)上更合理,對于設(shè)計(jì)過程也有一定的幫助,比如在設(shè)計(jì)控件的時(shí)候,ps里看hover樣式始終不夠直觀,這時(shí)可以把控件實(shí)現(xiàn)出來,直觀的去感受,調(diào)整你的設(shè)計(jì)稿直到滿意為止。雖然成本比較大,但是對于需要仔細(xì)推敲的控件來說還是值得的。

某人曾說過,好的技術(shù)能帶來設(shè)計(jì)上的突破,而好的設(shè)計(jì)也能促進(jìn)前端技術(shù)的發(fā)展。css3、在線編輯頭像,很多技術(shù)的出現(xiàn)改變了設(shè)計(jì)的方式,向后多走一步吧!

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1125.html
新年給設(shè)計(jì)師的10個(gè)新年決議
網(wǎng)頁設(shè)計(jì)準(zhǔn)則從何而來
圖趣網(wǎng)微信
建議反饋
×