網(wǎng)站分析：多個(gè)細(xì)節(jié)幫助你更優(yōu)雅地書寫頁(yè)面
來源:網(wǎng)站推廣 2013-01-26
頁(yè)面的DOM結(jié)構(gòu)因人而異
【編者按】本文作者@EdwardUp 我們常以“整齊”,“易讀”,“親切”,“易于維護(hù)”,“復(fù)用性強(qiáng)”等來形容一些優(yōu)秀的開發(fā)者所寫的代碼現(xiàn)在,對(duì)代碼的好評(píng)還有一個(gè)更為時(shí)尚的詞“優(yōu)雅”,是不是聽起來覺得很親切呢?
頁(yè)面是互聯(lián)網(wǎng)產(chǎn)品的表現(xiàn)層面,不僅講求外觀,而且會(huì)應(yīng)對(duì)更新迅速的互聯(lián)網(wǎng)產(chǎn)品需求要成為一名優(yōu)秀的開發(fā)者,經(jīng)驗(yàn)積累是必不可少的,而一部分經(jīng)驗(yàn)歸納起來正是在工作過程中的細(xì)節(jié)下文介紹的即是在頁(yè)面開發(fā)流程中的多方面的細(xì)節(jié)內(nèi)容,希望對(duì)這些細(xì)節(jié)內(nèi)容的探討,可以幫助各位頁(yè)面開發(fā)者做得更出色,以更優(yōu)雅的姿態(tài)來書寫頁(yè)面
從Photoshop開始
從UI設(shè)計(jì)稿到靜態(tài)頁(yè)面一般都稱作“切圖”這個(gè)詞很容易令人聯(lián)想到Photoshop中的“切片工具”,但現(xiàn)在切片工具用得并不多,大部分在頁(yè)面中需要用到的視覺元素,都需要拼合到一個(gè)或多個(gè)單獨(dú)的圖片中
視覺元素的分離和拼合
快速更新的互聯(lián)網(wǎng)產(chǎn)品需求使得UI設(shè)計(jì)師需要優(yōu)先保證UI設(shè)計(jì)稿的視覺效果,也因此有時(shí)候沒有時(shí)間整理UI設(shè)計(jì)稿源文件所以,拿到手邊的UI設(shè)計(jì)稿,可能存在圖層缺少命名,分組混亂等問題
如何快速找到需要分離的視覺元素所在的圖層?這時(shí)候應(yīng)該使用的是Photoshop的“自動(dòng)選擇”另外要注意的是,某些邊緣陰影及高光是由圖層樣式生成的,在選取這些部分時(shí)應(yīng)選取旁邊的實(shí)際繪圖內(nèi)容
Photoshop的“移動(dòng)工具“,在使用時(shí)勾選一個(gè)“自動(dòng)選擇”的復(fù)選框即可此外可以設(shè)置是自動(dòng)選擇圖層還是圖層所在的分組
拼合是在一個(gè)新建立的psd源文件上進(jìn)行,命名應(yīng)當(dāng)與最后輸出的圖片命名相同拼合時(shí)應(yīng)當(dāng)使用網(wǎng)格做整齊的排列(快捷鍵Ctrl + ‘ 切換網(wǎng)格顯示)整齊的拼圖不僅方便多人編輯,而且css代碼中的背景坐標(biāo)定位會(huì)更加快捷(誰都喜歡有規(guī)律的數(shù)字)
在Photoshop的編輯→首選項(xiàng)中可以設(shè)置合適的網(wǎng)格尺寸
為方便后續(xù)編輯,拼圖源文件應(yīng)適當(dāng)保留原UI設(shè)計(jì)稿圖層(如保留文本圖層,不做圖層合并,方便以后的文本更改),同時(shí)做好圖層命名和分組此外,推薦在底部增加2個(gè)圖層:底色層和網(wǎng)格尺寸描述層
底色層:Photoshop默認(rèn)的表示透明區(qū)域的網(wǎng)格背景(和前面的尺寸標(biāo)識(shí)的“網(wǎng)格”不同)中,子網(wǎng)格的邊線不容易看清而加上一個(gè)鋪滿全畫布的底色,網(wǎng)格線就很容易辨識(shí)了底色一般用純白色即可,對(duì)于部分顏色偏白的UI元素,可以填充黑色作為底色底色層只是方便排列元素,在輸出圖片時(shí),底色層設(shè)置為不可見再輸出
網(wǎng)格尺寸描述層:空白圖層,采用“20×20”這種格式的命名,說明使用的網(wǎng)格尺寸大小這樣,多人編輯時(shí),可以方便別人很快的設(shè)置出適合編輯此拼圖源文件的的網(wǎng)格尺寸
拼圖源文件一定要保存到開發(fā)目錄中,可以在images目錄中,單獨(dú)建立命名為_psd的目錄,然后相關(guān)的拼圖源文件都保存在這個(gè)目錄中
對(duì)應(yīng)的,在靜態(tài)頁(yè)中用作圖片占位和示意的臨時(shí)圖片(如用戶頭像),可以保存在命名為_temp的目錄中
gif與png-8圖片的雜邊
為什么gif和png-8格式的圖片存在雜邊?這是因?yàn)?gif和png-8格式的圖片使用的是索引顏色編碼,而索引顏色中,只存在全透明索引顏色(用來繪制全透明的像素點(diǎn),也即空白點(diǎn)),而不存在半透明索引顏色但是,一般的視覺元素的邊緣都存在半透明的像素點(diǎn)以形成視覺上的平滑過渡,這些半透明點(diǎn)要保留到gif和png-8,就必須指定用一種實(shí)色替代這也就是Photoshop中的雜邊選項(xiàng)的意義
Photoshop的這個(gè)顏色表中可以看到,只有這一個(gè)全透明索引色
Photoshop中也可以選擇雜邊為“無”,這時(shí)半透明點(diǎn)會(huì)被丟棄,不再保留到輸出的圖像中由于邊緣缺少用作過渡的像素點(diǎn),這樣的圖像可能會(huì)有明顯的鋸齒,多數(shù)情況下效果不佳
點(diǎn)擊“雜邊”旁邊的小箭頭,下拉菜單中即可以選擇“無”
如果選擇一個(gè)顏色作為雜邊色,Photoshop在生成索引顏色表時(shí)會(huì)把圖像中的半透明像素點(diǎn)也考慮進(jìn)去,并用合適的索引顏色(參考選定的雜邊色)替換這些半透明像素點(diǎn)存在雜邊色的gif和png-8圖中的視覺元素,處于和雜邊色相同的背景色中的時(shí)候,效果最佳,所以雜邊色的選取應(yīng)參考最終元素所在的背景
如果有多種類別的背景而無法保證效果,應(yīng)使用png-24這里的png-24實(shí)際上基本都是png-32,即應(yīng)包含透明度alpha通道這樣表述也是因?yàn)樵赑hotoshop中,只用了一個(gè)復(fù)選框的設(shè)置來區(qū)分png-24和png-32
勾選“透明度”后,實(shí)際上保存的是png-32
針對(duì)不支持png-32的IE6,單獨(dú)輸出一個(gè)效果較差的png-8或gif,在一定程度上保證IE6的正常外觀這也是針對(duì)不同瀏覽器的“漸進(jìn)增強(qiáng)”開發(fā)思想的體現(xiàn)
為IE6單獨(dú)保存的png-8圖
書寫內(nèi)容與HTML
在寫html之前,仔細(xì)閱讀UI設(shè)計(jì)稿是必要的一方面,理清頁(yè)面的各個(gè)組成部分以及這些組成部分相互之間的聯(lián)系另一方面,分析頁(yè)面及頁(yè)面的組成部分應(yīng)該用怎樣的DOM結(jié)構(gòu)實(shí)現(xiàn)從基礎(chǔ)的層面來說,只要能夠?qū)崿F(xiàn)UI設(shè)計(jì)稿的意圖,用什么DOM結(jié)構(gòu)都是可行的而從專業(yè)的層面來說,頁(yè)面的DOM結(jié)構(gòu)不僅要易于其他的開發(fā)者辨識(shí)和讀取,方便協(xié)同開發(fā),而且要有良好的可維護(hù)性和拓展性,方便后續(xù)的增減和更新
語義化or非語義化
“語義化”的意思是說,在寫html時(shí),依照頁(yè)面的內(nèi)容,選取最合適的html標(biāo)簽,以體現(xiàn)html標(biāo)簽的本意如
表示文本段落,那么如果一段文本確實(shí)是段落,那么就應(yīng)該把它們放在
標(biāo)簽中,而不是使用沒有語義的
語義化,不僅有利于SEO,而且更重要的是使網(wǎng)頁(yè)內(nèi)容層次和結(jié)構(gòu)清晰,在可讀性上十分友好試想一下,如果一個(gè)頁(yè)面的標(biāo)簽中的內(nèi)容,從上下文看確實(shí)就是emphasis(強(qiáng)調(diào))的內(nèi)容,會(huì)不會(huì)覺得這個(gè)頁(yè)面很整潔很親切呢?
但是,語義化也不是絕對(duì)的微博的新的的站外組件(widget),并不遵從語義,僅使用限定的標(biāo)簽,如塊元素只使用
,非鏈接行內(nèi)元素只使用,圖標(biāo)只使用如下圖所示最近的新版集體微博組件
新版集體微博組件的標(biāo)題部分(紅線圈出部分)的代碼:
這樣無視語義并限定標(biāo)簽的使用,是為了盡可能減少組件被引用的站點(diǎn)的樣式,對(duì)組件本身樣式的干擾和都是很少使用的標(biāo)簽,
又是非語義的標(biāo)簽,這樣,站點(diǎn)css中以標(biāo)簽作為選擇器寫的樣式,就很少會(huì)影響到組件(沒有多少站點(diǎn)會(huì)直接對(duì)
等非語義標(biāo)簽寫reset或默認(rèn)樣式)
完備的class命名
先來看使用Firebug查看的以下一段html代碼(取自開發(fā)中的微博話題組件)
能看出特別的地方嗎?沒錯(cuò),就是所有的html節(jié)點(diǎn),不管位于DOM結(jié)構(gòu)中多深的位置,都有自己的class命名
為什么要這么做?
首先,需要明確,少一些class命名,通過節(jié)點(diǎn)之間的相互關(guān)系,當(dāng)然也可以實(shí)現(xiàn)對(duì)正確的html節(jié)點(diǎn)設(shè)置樣式這也是我們過去寫html一般的做法,并認(rèn)為這樣可以精簡(jiǎn)html事實(shí)的確如此,但現(xiàn)在我們應(yīng)該認(rèn)識(shí)到,精簡(jiǎn)的html卻會(huì)帶給我們?cè)絹碓铰闊┑腸ss維護(hù)
CSS Wizardry的Harry Roberts對(duì)此做了簡(jiǎn)單的解釋說明
Imagine a teacher trying to control a class of kids who have no names. That’s how we used to write HTML >. 外觀與CSS
CSS本身很容易寫,但合理的CSS架構(gòu)卻不是一個(gè)簡(jiǎn)單的事情要保持CSS的可維護(hù)性,最簡(jiǎn)單的做法就是追求CSS的復(fù)用性,盡可能減少CSS量
任何時(shí)候,都要寫CSS注釋
CSS一般來說可讀性較差,因此需要我們多寫CSS注釋注釋內(nèi)容越豐富和細(xì)致越好,而且建議結(jié)合ASCII Art(字符畫)如果有時(shí)間,甚至可以在一個(gè)CSS文件中寫一個(gè)目錄
如果是后續(xù)增加更改,還可以附上時(shí)間和項(xiàng)目相關(guān)信息,這在多人協(xié)作中很有用
優(yōu)雅的CSS選擇器
優(yōu)雅的CSS選擇器不僅看起來親切,而且也可以提升瀏覽器的樣式渲染效率
主要使用類名(CLASS)作為選擇符,不做額外的限定
上圖中下一種寫法更好是因?yàn)榉?/p>
標(biāo)簽元素也有效,標(biāo)簽可以隨意替換,而且樣式渲染時(shí)更加高效
避免不必要的繼承關(guān)系繼承寫法是為了避免相同命名的選擇符的樣式相互影響,但在層級(jí)使用上要注意適度
瀏覽器樣式渲染引擎是按照從右向左的順序來解析CSS選擇器,最右邊的選擇符稱為關(guān)鍵選擇符(Key Selector),每一個(gè)額外的繼承選擇符都會(huì)增加樣式渲染引擎的查找匹配時(shí)間而且,如果沒有額外的繼承關(guān)系,子元素會(huì)有更好的重用性
總結(jié)
在實(shí)際的經(jīng)歷中,我們開發(fā)者所遵循的,主要是在經(jīng)驗(yàn)積累中的成果,稱為“最佳實(shí)踐”在心中明確這樣一種“最佳實(shí)踐”的理念,就可以幫助自己培養(yǎng)良好的習(xí)慣,在頁(yè)面書寫上做得更加自然,更加“優(yōu)雅”
期待和各位前端開發(fā)者共同進(jìn)步!
(文中截圖取自Photoshop,Firebug,Sublime text 2)
設(shè)計(jì)團(tuán)隊(duì):微博UDC
文章編輯: 365webcall網(wǎng)上客服軟件(www.365webcall.com)
我的評(píng)論
| 登錄賬號(hào)： | 密碼： | 快速注冊(cè) | 找回密碼 |  |
