網頁設計的屏幕分辨率和網頁佈局簡述

1. 屏幕分辨率和網頁佈局的定義1)分辨率分辨率(Resolution) - 影像清晰度或濃度的度量標準。舉例來說,分辨率代表垂直及水平顯示的每英吋點(dpi)的數量。BitWare 可以用普通或標準(100 乘 200 dpi)及精細分辨率(200 乘 200 dpi)發送及接收傳真文檔。Web Design分辨率是一個表示平面圖像精細程度的概念,通常它是以橫向和縱向點的數量來衡量的,表示成水平點數×垂直點數的形式。在一個固定的平面內,分辨率越高,意 味著可使用的點數越多,圖像越細緻。分辨率有多種,在顯示器上有表示顯示精度的顯示分辨率,在打印機上有表示打印精度的打印分辨率,在掃瞄儀上有表示掃瞄 精度的掃瞄分辨率。這裡大家更多的討論的是我們日常的一些視覺感知,對CRT和LCD顯示器有過多的討論。討論到這裡大家討論到一個網站設計關鍵點,就是顯示器都有自己的最佳分辨率,人們都喜歡大尺寸、高分辨率,但不是顯示分辨率越高越好。我們還要考慮一個因素,就是人眼能否識別。例如,在14英吋最高分辨率為1024×768的顯示器上800×600是人眼能識別的最高分辨率(我們暫時稱為最佳分辨率),在1024×768這個分辨率下顯示器雖然可以精確的顯示圖像,但人眼已不能準確的識別屏幕信息了。在相同大小的屏幕上,分辨率越高,顯示就越小。這就給我們在產品設計上需要更多的考慮到這個因素,例如整站的字號是否應該大點等等。2)佈局網頁中的佈局嚴格意義上來說並沒有一個統一的定義。網頁佈局大致可分為“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型。關於第一屏所謂第一屏,是指我們到達一個網站在不拖動滾動條時能夠看到的部分。那麼第一屏有多“大”呢?其實這是未知的。一般來講,例如在1024*768的屏 幕顯示模式(這也是最常用的)下,在IE安裝後默認的狀態(即工具欄地址欄等沒有改變)下,IE窗口內能看到的部分為1002px*645px。一般來講, 我們以這個大小為標準就行了。畢竟,在無法適合所有人的情況下,我們只能為大多數考慮了。2. 現行主流使用的屏幕分辨率和佈局與用戶體驗的關係由於現在使用的顯示器的尺寸越來越大,台式PC越來越多的使用19吋到22吋的顯示器。我們自己使用的筆記本雖然尺寸在10吋到14.1吋居多,但分辨率基本都是在1280X800.主流的發展趨勢是寬屏+高分辨率。可以說,電腦顯示器發展到30寸可以算是終極尺寸了,再大就不適合當顯示器用了。寬屏液晶顯示器的字體到底有多小?像素點和字體的大小是對應的,像素點小了,文字就會變小。寬屏面板的分辨率一般比同尺碼的普屏面板高得多,所以寬屏的字體小得多,對視力也不好。寬屏的字體到底有多小呢(以筆記本為例)?像素高度(與字體大小成正比):15′普屏 0.298mm15.4′(寬) 0.259mm14.1′普屏 0.280mm14.1′(寬) 0.237mm13′(寬) 0.219mm12′普屏 0.238mm12′(寬)就不說了,那個字體小到不正常......現在流行的網頁佈局(以門戶為例),網頁佈局大多是採用“國”字型,寬960(也有採用950的)的固定版式。現在網頁的佈局設計變得越來越重要,訪問者不願意再看到只注重內容的站點。雖然內容很重要,但只有當網頁佈局和網頁內容成功接合時,這種網頁帶給用戶的網頁寄存體驗才是最好的,為大家所喜歡。網易的一位同學說到了網頁佈局中使用黃金分割率的原理。黃金分割率的概念大家都知道。下面我引用一段非常專業的解釋:“黃金分割最早見於古希臘和古埃及。黃金分割又 稱黃金率、中外比,即把一根線段分為長短不等的a、b兩段,使其中長線段的比(即a+b)等於短線段b對長線段a的比,列式即為a:(a+b)=b:a, 其比值為0.6180339......這種比例在造型上比較悅目,因此,0.618又被稱為黃金分割率。”大家也看清楚了什麼叫黃金分割。我們中國也有一種類似於這樣的概念叫九宮格。這個也許就有一些朋友不清楚了,這是一種用以臨寫碑帖的一種界格紙。基本形是一個長方形等分九格。在這個九宮格中中間部分就產生了四個交叉點,這四個交叉點就是視覺中心點。PConline的同學特別提到了最近比較流行的網頁柵格系統設計,其中所提到的理論大家可以看下藍色理想這裡介紹的網頁柵格系統設計,同時有興趣的話可以去買這本書來看看《柵格系統與版式設計》。3. 屏幕分辨率和佈局與瀏覽器、顯示終端的關係屏幕分辨率和佈局在不同的瀏覽器和顯示終端下的表現是不同的,千鳥寫的《網頁頁面適應不同客戶端瀏覽器和分辨率》大家可以看看,特別提到我們在實際設計操作中通常有三種情況:版面自適應、視覺自適應、內容自適應。所有的這一切都是為了適應現在顯示器寬屏高分辨率的結果。特別近幾年電子數碼產品的軟硬件設備飛速發展,PC、手持設備、電視等等顯示終端都成為了我們瀏覽網頁的目標終端。不同的終端對網頁設計佈局都有不同的要求。討論到這裡,3G.cn的同學特別提到了他們在手機上設計產品的一些見解。由於到這裡的時候我開小差去了,沒認真聽,無法回憶記錄下來,希望3G.cn的同學能寫出來。我們的菜心同學提供了一些國外關於手機屏幕的資料:Mobile screen size trends 和 More on mobile screen size trends ,大家可以看看。4. 屏幕分辨率和佈局對前端開發,產品設計的影響在我們充分的認識到屏幕分辨率和佈局的矛與盾以後,就為我們以後的工作有了更多的指導意義。產品設計上需要從不同的角度去考慮適應不同屏幕分辨率下的網頁呈現,同時對前端開發也是挑戰,前端開發需要做大量的工作,從框架的規劃到具體的頁面實現都要考慮到這些。5.總結這次的ucd書友會雖然在下雨中進行,影響了討論的效果,但來參與的同學們都很自覺的參與其中,很是欣慰。一位出差廣州的PConline的同學對廣州這邊ucd書友會氛圍的肯定,多少是對我們的組織工作的認可,他之前也在上海參加過ucd書友會。希望更多的交流和分享為大家的日常工作和學習帶來便利。