螢幕解析度與網頁布局和使用者體驗的關係

來源:互聯網
上載者:User

廣州4.18書友會主題的內容提綱自己參與撰寫,同時還參與組織和主持。通過這次的深入參與,我發現胡曉同學能堅持下來多不容易,先贊下。由於天公不作美,原定的以春遊踏青小組討論的形式無法實行,只能30號人一起參與,其中的各種不適大家可以看看胡曉同學的踏青歸來(UCD廣州書友會第七期回顧)的描述,下面開始我們的主題。

1. 螢幕解析度和布局的定義

1)解析度
解析度(Resolution) - 影象清晰度或濃度的度量標準。舉例來說,解析度代表垂直及水平顯示的每英寸點(dpi)的數量。BitWare 可以用普通或標準(100 乘 200 dpi)及精細解析度(200 乘 200 dpi)發送及接收傳真文檔。解析度是一個表示平面映像精細程度的概念,通常它是以橫向和縱向點的數量來衡量的,表示成水平點數×垂直點數的形式。在一個固定的平面內,解析度越高,意 味著可使用的點數越多,映像越細緻。解析度有多種,在顯示器上有表示顯示精度的顯示解析度,在印表機上有表示列印精度的列印解析度,在掃描器上有表示掃描 精度的掃描解析度。

這裡大家更多的討論的是我們日常的一些視覺感知,對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.298mm
15.4′(寬) 0.259mm
14.1′普屏 0.280mm
14.1′(寬) 0.237mm
13′(寬) 0.219mm
12′普屏 0.238mm
12′(寬)就不說了,那個字型小到不正常……

現在流行的網頁布局(以門戶為例),網頁布局大多是採用“國”字型,寬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書友會。希望更多的交流和分享為大家的日常工作和學習帶來便利。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。