網頁設計的架構要適用何種解析度
一:網頁設計基礎
1:設計師設計的一個網頁會被很多很多人訪問,而訪問者的螢幕大小差異很大,因此需要考慮到這螢幕大小這一因素,確保你的絕大多數目標訪問者可以舒服地閱讀你設計的網頁。
2:對於電腦知識基本為零的人,描述螢幕大小,通常類似於我們描述電視機的方式,比如17吋、19寸等等,這是對的,但還不夠;對於電腦知識有所瞭解的人知道“螢幕解析度”這個概念,也即是說,電腦顯示器的螢幕是由矩形點陣構成,螢幕解析度就是這個點陣水準和豎直方向的點數,每一個點稱為一個“像素”,比如說某顯示器的解析度為“1024X768”,意思就是說水準方向有1024個像素,豎直方向有768個像素,螢幕上一共有1024X768=786432 個像素。
3:目前,通常使用的顯示器,分為傳統的CRT顯示器和新潮的液晶LCD顯示器。CRT顯示器可以設置多種解析度,都可以清晰顯示,而液晶顯示只有一種最佳解析度,如果通過作業系統設置為其他解析度,雖然也可以,但是通常效果很差。
二:網頁設計基本原則
1:設計師在設計一個網頁的時候,應該考慮到你的目標用戶群,如果你估計訪問者大多數是社會上的富有者,比如假設你給銷售名車、豪宅的公司做一個網站,你可以認為訪問者都會使用比較大的顯示器,應該主要考慮這些人的訪問體驗。
2:目前來說,通常已經不需要考慮800*600這種古董級顯示器的存在了,為了照顧著些訪問者,會使絕大多數使用主流顯示器的訪問者,浪費螢幕的很大面積,這對於你的網站來說,降低了大多數人的瀏覽體驗,是不值得的。
3:從我們前沿視頻教室這個網站的訪問者統計資料看,目前99%的訪問者使用1024*768或更大的顯示器。因此設計網頁至少應該以1024*768的顯示器為標準。
三:那麼現在到底各種分辨的顯示器分別有多少人在使用呢?
我們下面分別列出2008年9月和2007年9月,訪問“前沿視頻教室”的所有訪問者的螢幕分辨統計資料,既可以看出現狀,也可以通過比較時隔一年的比較,看出一些發展的趨勢。
當然不同的網站一定會有不同的結果,也歡迎其他朋友統計一下你的情況,在留言中貼出來,供大家參考,當然如果網站的訪問量太小,資料的準確性也就小一些。下表中統計的兩列總訪問者數量分別大於兩萬和三萬人。
解析度 2007-9 2008-9
1024×768 73.57% 55.63%
1280×800 5.86% 14.38%
1440×900 4.45% 9.40%
1280×1024 7.56% 8.83%
1152×864 2.66% 3.17%
1680×1050 <1% 2.69%
800×600 3.16% 1.61%
1280×960 <1% 1.33%
其餘 2.74% 2.96%
從中可以看出:
1:第一名的1024*768解析度的顯示器目前占55.63%,說明他仍然是我們目前在設計網頁時,考慮的主要目標,同時可以看看出,一年時間從73.57%降至55.63%,說明新買顯示其的人,已經不會購買這麼小的顯示了,只是這些現存的大量顯示器,在很長的時間內,仍然會佔據著很大的比例,因此在未來很長時間內,我們都需要照顧到這些顯示器的存在。
2:更大解析度的顯示器增長非常迅猛,顯然與現在液晶顯示器的價格飛降、以及筆記本電腦的迅速增加有關。目前位居第二的1280*800就是14吋寬屏筆記本的顯示解析度,第三位元的1440*900則是19吋寬屏臺式液晶顯示器的標準解析度。這二者都在一年間佔有率大漲,增長了1~2倍。
3:排名第4、5的分別是1280×1024和1152×864,他們的比例已經很小了,前者是17吋和19寸非寬平液晶顯示的標準解析度,後者通常是17寸等不太大的CRT顯示器的解析度。二者所占比例都較去年稍有增長,說明他們並不像寬屏顯示那麼受歡迎,但是還有一些偏好者的喜愛。
4:排名第6名的1680*1050則是2008年的新潮流,它是20、21、22寸的寬屏顯示器的標準解析度,可以看出所占比例雖然不大,但是增長一定是非常迅速的。
5:排名第7名的則是古董級的800*600了,相信它會很快離開我們的視野。
6:排名第8名的是1280*960解析度,他是19寸CRT的通常使用的解析度。對於19寸顯示,普通消費者一般不會選擇CRT顯示器,但是一些對顏色要求比較高的設計師,堅持使用CRT的顯示,他們會選擇19寸或更大的CRT顯示器。
四、總結
1:1024*768 目前以及未來相當長的時間,將是主流的或不可忽視的解析度。
2:使用CSS進行頁面佈局,可以用變寬的佈局方式,靈活地適應瀏覽器的寬度,在《CSS設計徹底研究》裏有一章專門深入分析如何製作變寬佈局。可以參考我們視頻教程,一看就明白了。甚至可以使用特殊的“魔術佈局”方式,使頁面的板塊排版方式都隨寬度變化,不過這種比較複雜的方式,並不常見。
3:大多數專業的網站,仍然是使用固定寬度佈局,因為變寬佈局雖然有優勢,但是也有缺點,一行文字很寬再折行,讀者閱讀很不舒服。因此,變寬佈局常見於網上商店這類賣東西的網站,希望充分利用空間,而對於內容網站,大多數仍然使用固定寬度佈局,比如幾大門戶網站,沒有使用變寬佈局的。
轉貼來源:前沿視頻教室
參考文獻:
1.李青蓉等編著.(1998).人機介面設計,台北縣:空大。
2.邱柏清.(2004).網頁介面愉悅行之研究,國立台灣科技大學設計研究所碩士論文。
3.石恩綸(2000)。女性網路使用者的網站印象與網路使用行為。台北大學企業管例研究所碩士論文,未出版,台北。
相關文章
廣告設計的各種展示法參考瞭解一個網頁設計的架構從事網站設計的工作為何要瞭解CSS?從事程式設計的人,生活上的幾個怪習慣傳統軟體設計與網站設計的差別
最新文章
HVACKer:入侵隔離網絡的新型攻擊技術還有什麼不會被入侵?路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌,最狂的是一家估值 124 億美的數據分析新創!【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala,下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了