廣州4.18書(shū)友會(huì)主題的內(nèi)容提綱自己參與撰寫(xiě)，同時(shí)還參與組織和主持。通過(guò)這次的深入?yún)⑴c，我發(fā)現(xiàn)胡曉同學(xué)能堅(jiān)持下來(lái)多不容易，先贊下。由于天公不作美，原定的以春游踏青小組討論的形式無(wú)法實(shí)行，只能30號(hào)人一起參與，其中的各種不適大家可以看看胡曉同學(xué)的踏青歸來(lái)（UCD廣州書(shū)友會(huì)第七期回顧）的描述，下面開(kāi)始我們的主題。

1. 屏幕分辨率和布局的定義

1）分辨率
分辨率（Resolution） - 影象清晰度或濃度的度量標(biāo)準(zhǔn)。舉例來(lái)說(shuō)，分辨率代表垂直及水平顯示的每英寸點(diǎn)（dpi）的數(shù)量。BitWare 可以用普通或標(biāo)準(zhǔn)（100 乘 200 dpi）及精細(xì)分辨率（200 乘 200 dpi）發(fā)送及接收傳真文檔。分辨率是一個(gè)表示平面圖像精細(xì)程度的概念，通常它是以橫向和縱向點(diǎn)的數(shù)量來(lái)衡量的，表示成水平點(diǎn)數(shù)×垂直點(diǎn)數(shù)的形式。在一個(gè)固定的平面內(nèi)，分辨率越高，意 味著可使用的點(diǎn)數(shù)越多，圖像越細(xì)致。分辨率有多種，在顯示器上有表示顯示精度的顯示分辨率，在打印機(jī)上有表示打印精度的打印分辨率，在掃描儀上有表示掃描 精度的掃描分辨率。

這里大家更多的討論的是我們?nèi)粘５囊恍┮曈X(jué)感知，對(duì)CRT和LCD顯示器有過(guò)多的討論。

討論到這里大家討論到一個(gè)關(guān)鍵點(diǎn)，就是顯示器都有自己的最佳分辨率，人們都喜歡大尺寸、高分辨率，但不是顯示分辨率越高越好。我們還要考慮一個(gè)因素，就是人眼能否識(shí)別。例如，在14英寸最高分辨率為1024×768的顯示器上800×600是人眼能識(shí)別的最高分辨率(我們暫時(shí)稱(chēng)為最佳分辨率)，在1024×768這個(gè)分辨率下顯示器雖然可以精確的顯示圖像，但人眼已不能準(zhǔn)確的識(shí)別屏幕信息了。在相同大小的屏幕上，分辨率越高，顯示就越小。這就給我們?cè)诋a(chǎn)品設(shè)計(jì)上需要更多的考慮到這個(gè)因素，例如整站的字號(hào)是否應(yīng)該大點(diǎn)等等。

2）布局

網(wǎng)頁(yè)中的布局嚴(yán)格意義上來(lái)說(shuō)并沒(méi)有一個(gè)統(tǒng)一的定義。

網(wǎng)頁(yè)布局大致可分為“國(guó)”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型。

關(guān)于第一屏

所謂第一屏，是指我們到達(dá)一個(gè)網(wǎng)站在不拖動(dòng)滾動(dòng)條時(shí)能夠看到的部分。那么第一屏有多“大”呢？其實(shí)這是未知的。一般來(lái)講，例如在1024*768的屏 幕顯示模式(這也是最常用的)下，在IE安裝后默認(rèn)的狀態(tài)(即工具欄地址欄等沒(méi)有改變)下，IE窗口內(nèi)能看到的部分為1002px*645px。一般來(lái)講， 我們以這個(gè)大小為標(biāo)準(zhǔn)就行了。畢竟，在無(wú)法適合所有人的情況下，我們只能為大多數(shù)考慮了。

2. 現(xiàn)行主流使用的屏幕分辨率和布局與用戶(hù)體驗(yàn)的關(guān)系

由于現(xiàn)在使用的顯示器的尺寸越來(lái)越大，臺(tái)式PC越來(lái)越多的使用19吋到22吋的顯示器。我們自己使用的筆記本雖然尺寸在10吋到14.1吋居多，但分辨率基本都是在1280X800.主流的發(fā)展趨勢(shì)是寬屏+高分辨率?？梢哉f(shuō)，電腦顯示器發(fā)展到30寸可以算是終極尺寸了，再大就不適合當(dāng)顯示器用了。

寬屏液晶顯示器的字體到底有多??？像素點(diǎn)和字體的大小是對(duì)應(yīng)的，像素點(diǎn)小了，文字就會(huì)變小。寬屏面板的分辨率一般比同尺碼的普屏面板高得多，所以寬屏的字體小得多，對(duì)視力也不好。

寬屏的字體到底有多小呢（以筆記本為例）？

像素高度(與字體大小成正比)：
15′普屏 0.298mm
15.4′（寬） 0.259mm
14.1′普屏 0.280mm
14.1′（寬） 0.237mm
13′（寬） 0.219mm
12′普屏 0.238mm
12′（寬）就不說(shuō)了，那個(gè)字體小到不正?！?/P>

現(xiàn)在流行的網(wǎng)頁(yè)布局（以門(mén)戶(hù)為例），網(wǎng)頁(yè)布局大多是采用“國(guó)”字型，寬960（也有采用950的）的固定版式。現(xiàn)在網(wǎng)頁(yè)的布局設(shè)計(jì)變得越來(lái)越重要，訪問(wèn)者不愿意再看到只注重內(nèi)容的站點(diǎn)。雖然內(nèi)容很重要，但只有當(dāng)網(wǎng)頁(yè)布局和網(wǎng)頁(yè)內(nèi)容成功接合時(shí)，這種網(wǎng)頁(yè)帶給用戶(hù)的體驗(yàn)才是最好的，為大家所喜歡。

網(wǎng)易的一位同學(xué)說(shuō)到了網(wǎng)頁(yè)布局中使用黃金分割率的原理。黃金分割率的概念大家都知道。下面我引用一段非常專(zhuān)業(yè)的解釋?zhuān)骸包S金分割最早見(jiàn)于古希臘和古埃及。黃金分割又 稱(chēng)黃金率、中外比，即把一根線段分為長(zhǎng)短不等的a、b兩段，使其中長(zhǎng)線段的比(即a+b)等于短線段b對(duì)長(zhǎng)線段a的比，列式即為a:(a+b)=b:a， 其比值為0.6180339……這種比例在造型上比較悅目，因此，0.618又被稱(chēng)為黃金分割率?！贝蠹乙部辞宄耸裁唇悬S金分割。

我們中國(guó)也有一種類(lèi)似于這樣的概念叫九宮格。這個(gè)也許就有一些朋友不清楚了，這是一種用以臨寫(xiě)碑帖的一種界格紙?；拘问且粋€(gè)長(zhǎng)方形等分九格。在這個(gè)九宮格中中間部分就產(chǎn)生了四個(gè)交叉點(diǎn)，這四個(gè)交叉點(diǎn)就是視覺(jué)中心點(diǎn)。

PConline的同學(xué)特別提到了最近比較流行的網(wǎng)頁(yè)柵格系統(tǒng)設(shè)計(jì)，其中所提到的理論大家可以看下藍(lán)色理想這里介紹的網(wǎng)頁(yè)柵格系統(tǒng)設(shè)計(jì)，同時(shí)有興趣的話可以去買(mǎi)這本書(shū)來(lái)看看《柵格系統(tǒng)與版式設(shè)計(jì)》。

3. 屏幕分辨率和布局與瀏覽器、顯示終端的關(guān)系

屏幕分辨率和布局在不同的瀏覽器和顯示終端下的表現(xiàn)是不同的，千鳥(niǎo)寫(xiě)的《網(wǎng)頁(yè)頁(yè)面適應(yīng)不同客戶(hù)端瀏覽器和分辨率》大家可以看看，特別提到我們?cè)趯?shí)際設(shè)計(jì)操作中通常有三種情況：版面自適應(yīng)、視覺(jué)自適應(yīng)、內(nèi)容自適應(yīng)。所有的這一切都是為了適應(yīng)現(xiàn)在顯示器寬屏高分辨率的結(jié)果。

特別近幾年電子數(shù)碼產(chǎn)品的軟硬件設(shè)備飛速發(fā)展，PC、手持設(shè)備、電視等等顯示終端都成為了我們?yōu)g覽網(wǎng)頁(yè)的目標(biāo)終端。不同的終端對(duì)網(wǎng)頁(yè)設(shè)計(jì)布局都有不同的要求。討論到這里，3G.cn的同學(xué)特別提到了他們?cè)谑謾C(jī)上設(shè)計(jì)產(chǎn)品的一些見(jiàn)解。由于到這里的時(shí)候我開(kāi)小差去了，沒(méi)認(rèn)真聽(tīng)，無(wú)法回憶記錄下來(lái)，希望3G.cn的同學(xué)能寫(xiě)出來(lái)。我們的菜心同學(xué)提供了一些國(guó)外關(guān)于手機(jī)屏幕的資料：Mobile screen size trends 和 More on mobile screen size trends ，大家可以看看。

4. 屏幕分辨率和布局對(duì)前端開(kāi)發(fā)，產(chǎn)品設(shè)計(jì)的影響

在我們充分的認(rèn)識(shí)到屏幕分辨率和布局的矛與盾以后，就為我們以后的工作有了更多的指導(dǎo)意義。產(chǎn)品設(shè)計(jì)上需要從不同的角度去考慮適應(yīng)不同屏幕分辨率下的網(wǎng)頁(yè)呈現(xiàn)，同時(shí)對(duì)前端開(kāi)發(fā)也是挑戰(zhàn)，前端開(kāi)發(fā)需要做大量的工作，從框架的規(guī)劃到具體的頁(yè)面實(shí)現(xiàn)都要考慮到這些。

5.總結(jié)

這次的ucd書(shū)友會(huì)雖然在下雨中進(jìn)行，影響了討論的效果，但來(lái)參與的同學(xué)們都很自覺(jué)的參與其中，很是欣慰。一位出差廣州的PConline的同學(xué)對(duì)廣州這邊ucd書(shū)友會(huì)氛圍的肯定，多少是對(duì)我們的組織工作的認(rèn)可，他之前也在上海參加過(guò)ucd書(shū)友會(huì)。希望更多的交流和分享為大家的日常工作和學(xué)習(xí)帶來(lái)便利。

來(lái)源：http://www.xisoo.net