論web標(biāo)準(zhǔn)的網(wǎng)頁制作和符合web標(biāo)準(zhǔn)的網(wǎng)站UI
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:28:13 作者:佚名
我要評論

Web標(biāo)準(zhǔn)的web UI——來源、謬誤與個(gè)人理解
序
我從2004年末開始接觸web標(biāo)準(zhǔn),2005年5月正式采取完全的web標(biāo)準(zhǔn)方式的網(wǎng)頁制作,2005年8月,第一個(gè)符合web標(biāo)準(zhǔn)的網(wǎng)站UI開發(fā)工作完成。直至今日,經(jīng)歷了無數(shù)的艱辛,也有過許多的困惑。所幸,我的瑞典籍的Projec
Chapter 4 web標(biāo)準(zhǔn)的局限
web標(biāo)準(zhǔn)并沒有有些人說的那么天花亂墜無所不能。正如很多在學(xué)習(xí)web標(biāo)準(zhǔn)開發(fā)的朋友所體會(huì)到的那樣,如果想要開發(fā)的產(chǎn)品完全符合web標(biāo)準(zhǔn),它的局限性其實(shí)很大。舉例來說,如果按照web標(biāo)準(zhǔn)的建議不使用空結(jié)構(gòu)塊(如空div)、不使用無意義塊(如僅作為裝飾邊角的圖片)、不做無意義的DOM結(jié)構(gòu)嵌套,那么想實(shí)現(xiàn)一個(gè)可拉伸大小的園角塊都是非常困難的。目前網(wǎng)上流行的幾種做法都不符合這個(gè)要求。這就是為什么歐美的許多網(wǎng)站往往結(jié)構(gòu)以方塊為主并且非常干凈簡練,一個(gè)原因是他們習(xí)慣這樣的風(fēng)格,但更重要的原因是為了UI的可用性和符合標(biāo)準(zhǔn)而在犧牲了美觀,因?yàn)榫W(wǎng)站的DOM結(jié)構(gòu)越復(fù)雜,互動(dòng)表現(xiàn)越復(fù)雜,觸發(fā)BUG的可能性就越大,兼容性也越難調(diào)整,此外,這些效果往往還不能完善。有興趣的朋友不妨仔細(xì)看看一直被設(shè)計(jì)人員稱道的大多數(shù)韓國網(wǎng)站,這種類型的網(wǎng)站和歐美的主流風(fēng)格正好完全相背,走了另一個(gè)極端,以界面華麗花哨著稱,因此特別能獲得美術(shù)出身的朋友的青睞,在使用過程中總會(huì)出現(xiàn)各種各樣的小問題。在 FF下也沒有幾個(gè)可以完美表現(xiàn)的。此外,這類網(wǎng)站在中國也是行不通的。大家不妨想想,究竟有哪個(gè)模仿韓國的網(wǎng)站能夠獲得比較高的知名度的?原因嘛,第一是它們經(jīng)常造成瀏覽器速度過慢,第二是在網(wǎng)絡(luò)條件不好的情況下下載經(jīng)常很慢,第三,對服務(wù)器的負(fù)載壓力非常大,很容易提高服務(wù)器的投入成本,最后,帶來高帶寬成本。
Chapter 5 web標(biāo)準(zhǔn)的背后,企業(yè)該如何適應(yīng)web標(biāo)準(zhǔn)?
web標(biāo)準(zhǔn)有諸多好處,也帶來了美好的前景,應(yīng)當(dāng)普及和推廣。然而,盲目地追隨標(biāo)準(zhǔn),卻可能造成整個(gè)項(xiàng)目的失敗。要知道,web標(biāo)準(zhǔn)并非孤立的產(chǎn)生,而是于整個(gè)軟件工程和web項(xiàng)目管理的發(fā)展有關(guān)。下面,我們來看一下,在適應(yīng)web標(biāo)準(zhǔn)的過程中,究竟有哪些問題會(huì)造成項(xiàng)目失敗。
1. 對標(biāo)準(zhǔn)的理解錯(cuò)誤
前面說了,國內(nèi)其實(shí)大多數(shù)企業(yè)和開發(fā)人員并不了解web標(biāo)準(zhǔn)。甚至有很多連web標(biāo)準(zhǔn)這個(gè)概念都不知道。反而對div css這個(gè)被人錯(cuò)誤解釋出來的怪胎耳熟能詳。設(shè)計(jì)師在進(jìn)行設(shè)計(jì)的時(shí)候,往往天馬行空的去做設(shè)計(jì),完全沒有任何章法可言,同樣的內(nèi)容,甚至在首頁是三個(gè)字的標(biāo)題,到了二級欄目頁就會(huì)變成五個(gè)字,從根本上破壞了結(jié)構(gòu)的可重用性。而UI程序員(請?jiān)徫沂褂眠@個(gè)詞語,因?yàn)榘l(fā)展到現(xiàn)在的web標(biāo)準(zhǔn)網(wǎng)頁開發(fā)已經(jīng)不是美術(shù)出身的設(shè)計(jì)師能夠完全掌握的了)為了適應(yīng)設(shè)計(jì)師的設(shè)計(jì),只好拼命疊加各種奇怪的DOM結(jié)構(gòu),結(jié)果使本來用十行html代碼就能寫出來的頁面最后用了三十行甚至更多,結(jié)構(gòu)也一片混亂。css就更不用說了,不僅亂,而且亂的毫無章法。這種開發(fā)的方式經(jīng)常造成最后只要設(shè)計(jì)上修改一點(diǎn),就要對代碼作非常大的改動(dòng),甚至整個(gè)開發(fā)流程從頭做一遍,根本沒有做到web標(biāo)準(zhǔn)中宣傳的改版成本小,正好相反,改版成本有時(shí)會(huì)被無限提高。而混亂的結(jié)構(gòu)和樣式也會(huì)引發(fā)瀏覽器更多的BUG,讓UI程序員不得不花更多的精力去寫hack。從而進(jìn)一步提高開發(fā)成本。
2. 沒有任何規(guī)劃,上手就做
在早期,由于表格布局的完全可視化編輯,使網(wǎng)頁開發(fā)是可以完全不需要規(guī)劃,一邊做一邊修改的。而我們大多數(shù)企業(yè)目前的開發(fā)流程也是如此。往往網(wǎng)站開發(fā)接近完成,策劃人員還沒有完全確定網(wǎng)站要展示的內(nèi)容和提供的功能。但歐美許多公司的做法卻是先做一份十分完善的策劃和需求描述,然后建立用例模型、分析網(wǎng)站需求、建立邏輯模型,規(guī)劃UI模塊、規(guī)劃功能模塊、定義UI和功能模塊的接口(大多數(shù)情況下這個(gè)接口就是我們現(xiàn)在經(jīng)常使用的各種模板標(biāo)簽,事實(shí)上在歐洲比較完善的團(tuán)隊(duì),這些標(biāo)簽在開始設(shè)計(jì)前就已經(jīng)規(guī)定好了)、定義 flash應(yīng)用程序的數(shù)據(jù)接口(一般情況下是XML文檔)、定義內(nèi)容框架(以便設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站時(shí)了解網(wǎng)站的每個(gè)頁面上究竟應(yīng)該放些什么),這一大堆的各種文檔幾乎可以讓任何兩個(gè)不同的團(tuán)隊(duì)做出功能一模一樣的兩個(gè)網(wǎng)站來,除了美術(shù)設(shè)計(jì)不同。我就見過一份不過二十多個(gè)模板的策劃案,僅僅是涉及UI設(shè)計(jì)和開發(fā)的策劃和分析文檔打印出來有300多頁,密密麻麻的幾十萬字!為什么要說中國和歐美企業(yè)的開發(fā)過程的不同呢?原因很簡單。中國的流程隨意性更大,而歐美的流程則更加系統(tǒng)。然而web標(biāo)準(zhǔn)在設(shè)計(jì)的時(shí)候卻是以歐美的設(shè)計(jì)流程為主。這就是我上面說的,沒有任何規(guī)劃,上手就做經(jīng)常會(huì)造成項(xiàng)目失敗的原因。一個(gè)邊策劃邊構(gòu)建的開發(fā)流程,采用了一份為完善的系統(tǒng)工程要求訂制的標(biāo)準(zhǔn),不失敗才是奇跡!
3. 主導(dǎo)人員角色錯(cuò)誤,外行管理內(nèi)行
這幾乎是中國百分之八十項(xiàng)目失敗的主要原因!對比東西方的管理,會(huì)發(fā)現(xiàn)一個(gè)奇怪的現(xiàn)象,在西方一個(gè)項(xiàng)目是由專業(yè)的項(xiàng)目經(jīng)理主導(dǎo),而東方則是誰職位最高就由誰主導(dǎo)??偨?jīng)理、部門行政經(jīng)理甚至市場人員干預(yù)網(wǎng)站開發(fā)進(jìn)程在中國屢見不鮮,甚至有向非web專業(yè)市場人員主導(dǎo)項(xiàng)目管理的傾向。在一個(gè)web開發(fā)團(tuán)隊(duì)中,有時(shí)起主導(dǎo)作用的項(xiàng)目經(jīng)理或者策劃人員并非專業(yè)的項(xiàng)目經(jīng)理或者web策劃人員,最夸張的,我目前在做的項(xiàng)目竟然是以設(shè)計(jì)師的設(shè)計(jì)稿為主導(dǎo),設(shè)計(jì)成什么樣子,就必須作成什么樣子,并且整個(gè)網(wǎng)站的設(shè)計(jì)稿完全沒有任何關(guān)于互動(dòng)方面的說明(其實(shí)是繪圖師,他們對web的結(jié)構(gòu)和技術(shù)限制是完全懂的)。而我認(rèn)識的很多朋友也都因?yàn)樯霞壴陂_發(fā)進(jìn)程中的胡亂干預(yù)(注意,是開發(fā)進(jìn)程中,而不是策劃過程)叫苦連天,甚至有時(shí)會(huì)造成整個(gè)項(xiàng)目必須徹底推翻重來的尷尬境地。不斷延期或者推翻重來的項(xiàng)目開發(fā)過程,無限翻倍的項(xiàng)目成本,造成項(xiàng)目失敗也就不怎么新鮮了。似乎這一點(diǎn)與web標(biāo)準(zhǔn)并沒有關(guān)系,然而,在web標(biāo)準(zhǔn)化開發(fā)要求的團(tuán)隊(duì)和流程里,第一點(diǎn)要求就是項(xiàng)目經(jīng)理和策劃人員必須專業(yè)并且其技能范圍符合項(xiàng)目規(guī)模!事實(shí)上這也是任何項(xiàng)目管理的必要條件。
那么,企業(yè)和開發(fā)人員究竟該如何適應(yīng)web標(biāo)準(zhǔn)?以下幾點(diǎn)注意事項(xiàng)僅供參考:
-
完善的前期策劃和分析
完善的前期邏輯模型以及項(xiàng)目規(guī)范性文檔的制定
盡可能將行政性干預(yù)移到策劃階段(按照國內(nèi)的情況,做到這一點(diǎn)可能很困難)
盡可能向后兼容,在項(xiàng)目規(guī)范性文檔制定階段對網(wǎng)站進(jìn)行完善的模塊化規(guī)范(主要是為了提高網(wǎng)站模塊代碼的可重用性以及最大程度上降低改版成本)。
盡可能簡化UI代碼的DOM結(jié)構(gòu),以降低維護(hù)成本
在設(shè)計(jì)和開發(fā)過程中首先保證UI的可用性,在此基礎(chǔ)上保證其美觀(好用第一,好看第二)。
項(xiàng)目階段明確,要讓單位的高層明白,在項(xiàng)目的alpha期之前是不可能有能讓他們看的懂用的通的完善網(wǎng)站出現(xiàn)的。
項(xiàng)目團(tuán)隊(duì)主要成員必須要用專業(yè)人員,并且要讓這些人員有足夠的決定權(quán)(如果項(xiàng)目負(fù)責(zé)人無法主導(dǎo)項(xiàng)目走向,項(xiàng)目就必然產(chǎn)生缺陷甚至失?。?。
這篇文章到這里已經(jīng)結(jié)束了,我不知道這篇文章究竟會(huì)不會(huì)讓那些一意孤行的BOSS們看到,更不指望能給他們帶來多少影響。如果哪個(gè)BOSS看到了,希望你考慮一下你的投資和鈔票。我所說的這一切,不僅僅是為了減輕開發(fā)人員的負(fù)擔(dān),更是為了讓開發(fā)人員能夠?qū)崿F(xiàn)一個(gè)賺錢的項(xiàng)目,從而在這個(gè)賺錢的項(xiàng)目中獲得更多的金錢和良好的心情。而能夠決定這一切的,并非開發(fā)和設(shè)計(jì)人員。
相關(guān)文章
AudioContext 實(shí)現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實(shí)現(xiàn)音頻可視化,要實(shí)現(xiàn)音頻可視化得先實(shí)現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext,下面詳細(xì)內(nèi)容2022-02-23- 這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流,文章內(nèi)容圍繞主題展相關(guān)資料,需要的小伙伴可以參考一下,希望對你有所幫助2022-02-23
- 這是我通過網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范,用于鞏固對html,css頁面重構(gòu)時(shí)的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開發(fā)協(xié)作,提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范,其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。我們知道,當(dāng)一個(gè)團(tuán)隊(duì)開始指定并實(shí)行2017-01-21- 這篇文章主要為大家介紹了前端開發(fā)團(tuán)隊(duì)遵循和約定的代碼書寫規(guī)范,意在提高代碼的規(guī)范性和可維護(hù)性,需要的朋友可以參考下2017-01-21
響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法。希望對大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0,但是有安裝vtp6.0經(jīng)驗(yàn)的朋友確很少,在安裝過程中總會(huì)出現(xiàn)這樣那樣的問題,基于這些問題,下面小編抽個(gè)時(shí)間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29