• 
• 
• 
• 
• 
• 
• 

返回貼子列表		發(fā)表新貼
主題： 屏幕分辨率和布局簡述	共有1371人瀏覽過本貼	主貼管理 置　頂 加　精 結(jié)　貼 轉(zhuǎn)　貼

昵稱：奈薇建站網(wǎng) 論壇積分：108000 發(fā)貼等級：21 發(fā)貼數(shù)：1156 回貼數(shù)：1282 被砸雞蛋：1 獲贈鮮花：182

發(fā)表時間：2019/7/29 18:39:00 樓　主 屏幕分辨率和布局簡述 　　廣州4.18書友會主題的內(nèi)容提綱自己參與撰寫，同時還參與組織和主持。通過這次的深入?yún)⑴c，我發(fā)現(xiàn)胡曉同學(xué)能堅(jiān)持下來多不容易，先贊下。由于天公不作美，原定的以春游踏青小組討論的形式無法實(shí)行，只能30號人一起參與，其中的各種不適大家可以看看胡曉同學(xué)的踏青歸來（UCD廣州書友會第七期回顧）的描述，下面開始我們的主題。 　　1.屏幕分辨率和布局的定義 　　1）分辨率分辨率（Resolution）-影象清晰度或濃度的度量標(biāo)準(zhǔn)。舉例來說，分辨率代表垂直及水平顯示的每英寸點(diǎn)（dpi）的數(shù)量。BitWare可以用普通或標(biāo)準(zhǔn)（100乘200dpi）及精細(xì)分辨率（200乘200dpi）發(fā)送及接收傳真文檔。分辨率是一個表示平面圖像精細(xì)程度的概念，通常它是以橫向和縱向點(diǎn)的數(shù)量來衡量的，表示成水平點(diǎn)數(shù)×垂直點(diǎn)數(shù)的形式。在一個固定的平面內(nèi)，分辨率越高，意味著可使用的點(diǎn)數(shù)越多，圖像越細(xì)致。分辨率有多種，在顯示器上有表示顯示精度的顯示分辨率，在打印機(jī)上有表示打印精度的打印分辨率，在掃描儀上有表示掃描精度的掃描分辨率。 　　這里大家更多的討論的是我們?nèi)粘５囊恍┮曈X感知，對CRT和LCD顯示器有過多的討論。 　　討論到這里大家討論到一個關(guān)鍵點(diǎn)，就是顯示器都有自己的最佳分辨率，人們都喜歡大尺寸、高分辨率，但不是顯示分辨率越高越好。我們還要考慮一個因素，就是人眼能否識別。例如，在14英寸最高分辨率為1024×768的顯示器上800×600是人眼能識別的最高分辨率(我們暫時稱為最佳分辨率)，在1024×768這個分辨率下顯示器雖然可以精確的顯示圖像，但人眼已不能準(zhǔn)確的識別屏幕信息了。在相同大小的屏幕上，分辨率越高，顯示就越小。這就給我們在產(chǎn)品設(shè)計(jì)上需要更多的考慮到這個因素，例如整站的字號是否應(yīng)該大點(diǎn)等等。 　　2）布局 　　網(wǎng)頁中的布局嚴(yán)格意義上來說并沒有一個統(tǒng)一的定義。 　　網(wǎng)頁布局大致可分為“國”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型。 　　關(guān)于第一屏 　　所謂第一屏，是指我們到達(dá)一個網(wǎng)站在不拖動滾動條時能夠看到的部分。那么第一屏有多“大”呢？其實(shí)這是未知的。一般來講，例如在1024*768的屏幕顯示模式(這也是最常用的)下，在IE安裝后默認(rèn)的狀態(tài)(即工具欄地址欄等沒有改變)下，IE窗口內(nèi)能看到的部分為1002px*645px。一般來講，我們以這個大小為標(biāo)準(zhǔn)就行了。畢竟，在無法適合所有人的情況下，我們只能為大多數(shù)考慮了。 　　2.現(xiàn)行主流使用的屏幕分辨率和布局與用戶體驗(yàn)的關(guān)系 　　由于現(xiàn)在使用的顯示器的尺寸越來越大，臺式PC越來越多的使用19吋到22吋的顯示器。我們自己使用的筆記本雖然尺寸在10吋到14.1吋居多，但分辨率基本都是在1280X800.主流的發(fā)展趨勢是寬屏+高分辨率?？梢哉f，電腦顯示器發(fā)展到30寸可以算是終極尺寸了，再大就不適合當(dāng)顯示器用了。 　　寬屏液晶顯示器的字體到底有多??？像素點(diǎn)和字體的大小是對應(yīng)的，像素點(diǎn)小了，文字就會變小。寬屏面板的分辨率一般比同尺碼的普屏面板高得多，所以寬屏的字體小得多，對視力也不好。 　　寬屏的字體到底有多小呢（以筆記本為例）？ 　　像素高度(與字體大小成正比)：15′普屏0.298mm15.4′（寬）0.259mm14.1′普屏0.280mm14.1′（寬）0.237mm13′（寬）0.219mm12′普屏0.238mm12′（寬）就不說了，那個字體小到不正?！?br /> 　　現(xiàn)在流行的網(wǎng)頁布局（以門戶為例），網(wǎng)頁布局大多是采用“國”字型，寬960（也有采用950的）的固定版式?，F(xiàn)在網(wǎng)頁的布局設(shè)計(jì)變得越來越重要，訪問者不愿意再看到只注重內(nèi)容的站點(diǎn)。雖然內(nèi)容很重要，但只有當(dāng)網(wǎng)頁布局和網(wǎng)頁內(nèi)容成功接合時，這種網(wǎng)頁帶給用戶的體驗(yàn)才是最好的，為大家所喜歡。 　　網(wǎng)易的一位同學(xué)說到了網(wǎng)頁布局中使用黃金分割率的原理。黃金分割率的概念大家都知道。下面我引用一段非常專業(yè)的解釋：“黃金分割最早見于古希臘和古埃及。黃金分割又稱黃金率、中外比，即把一根線段分為長短不等的a、b兩段，使其中長線段的比(即a+b)等于短線段b對長線段a的比，列式即為a:(a+b)=b:a，其比值為0.6180339……這種比例在造型上比較悅目，因此，0.618又被稱為黃金分割率?！贝蠹乙部辞宄耸裁唇悬S金分割。 　　我們中國也有一種類似于這樣的概念叫九宮格。這個也許就有一些朋友不清楚了，這是一種用以臨寫碑帖的一種界格紙。基本形是一個長方形等分九格。在這個九宮格中中間部分就產(chǎn)生了四個交叉點(diǎn)，這四個交叉點(diǎn)就是視覺中心點(diǎn)。 　　PConline的同學(xué)特別提到了最近比較流行的網(wǎng)頁柵格系統(tǒng)設(shè)計(jì)，其中所提到的理論大家可以看下藍(lán)色理想這里介紹的網(wǎng)頁柵格系統(tǒng)設(shè)計(jì)，同時有興趣的話可以去買這本書來看看《柵格系統(tǒng)與版式設(shè)計(jì)》。 　　3.屏幕分辨率和布局與瀏覽器、顯示終端的關(guān)系 　　屏幕分辨率和布局在不同的瀏覽器和顯示終端下的表現(xiàn)是不同的，千鳥寫的《網(wǎng)頁頁面適應(yīng)不同客戶端瀏覽器和分辨率》大家可以看看，特別提到我們在實(shí)際設(shè)計(jì)操作中通常有三種情況：版面自適應(yīng)、視覺自適應(yīng)、內(nèi)容自適應(yīng)。所有的這一切都是為了適應(yīng)現(xiàn)在顯示器寬屏高分辨率的結(jié)果。 　　特別近幾年電子數(shù)碼產(chǎn)品的軟硬件設(shè)備飛速發(fā)展，PC、手持設(shè)備、電視等等顯示終端都成為了我們?yōu)g覽網(wǎng)頁的目標(biāo)終端。不同的終端對網(wǎng)頁設(shè)計(jì)布局都有不同的要求。討論到這里，yuhou.cn的同學(xué)特別提到了他們在手機(jī)上設(shè)計(jì)產(chǎn)品的一些見解。由于到這里的時候我開小差去了，沒認(rèn)真聽，無法回憶記錄下來，希望yuhou.cn的同學(xué)能寫出來。我們的菜心同學(xué)提供了一些國外關(guān)于手機(jī)屏幕的資料：Mobilescreensizetrends和Moreonmobilescreensizetrends，大家可以看看。 　　4.屏幕分辨率和布局對前端開發(fā)，產(chǎn)品設(shè)計(jì)的影響 　　在我們充分的認(rèn)識到屏幕分辨率和布局的矛與盾以后，就為我們以后的工作有了更多的指導(dǎo)意義。產(chǎn)品設(shè)計(jì)上需要從不同的角度去考慮適應(yīng)不同屏幕分辨率下的網(wǎng)頁呈現(xiàn)，同時對前端開發(fā)也是挑戰(zhàn)，前端開發(fā)需要做大量的工作，從框架的規(guī)劃到具體的頁面實(shí)現(xiàn)都要考慮到這些。 　　5.總結(jié) 　　這次的ucd書友會雖然在下雨中進(jìn)行，影響了討論的效果，但來參與的同學(xué)們都很自覺的參與其中，很是欣慰。一位出差廣州的PConline的同學(xué)對廣州這邊ucd書友會氛圍的肯定，多少是對我們的組織工作的認(rèn)可，他之前也在上海參加過ucd書友會。希望更多的交流和分享為大家的日常工作和學(xué)習(xí)帶來便利。 奈薇建站網(wǎng)致力于，讓每個中國人、每個中國企業(yè)都擁有自己的“官方網(wǎng)站”！ 回復(fù)此貼 單貼管理 修　改 刪　除 清理簽名 TOP

共0個回貼   分0頁

上一頁 / 下一頁   當(dāng)前第頁

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶