- 相關(guān)推薦
網(wǎng)頁(yè)設(shè)計(jì)的布局理解
矛盾出來(lái)了，像我們這些小作坊，基本都是設(shè)計(jì)布局一人搞定。甚至還有加后臺(tái)程序的。假設(shè)設(shè)計(jì)的時(shí)候考慮布局了，我們都有這個(gè)能力進(jìn)行調(diào)整。下面是小編為大家整理的網(wǎng)頁(yè)設(shè)計(jì)的布局理解，歡迎參考~
經(jīng)常看到有網(wǎng)友抱怨設(shè)計(jì)師給的稿子無(wú)法還原。因?yàn)樗麄儗?duì)瀏覽器和屏幕的理解不一樣。也有的是因?yàn)樾Чk，顏色太多。更有甚者是使用flash制作嫌浪費(fèi)，而html又雞肋.....好吧，我們拋開(kāi)這最后一種情況，只談對(duì)屏幕和效果以及設(shè)計(jì)布局的理解。
先談屏幕：
屏幕分辨率，還是以1024×768為主。而滿屏的定義則無(wú)從談起。為什么?請(qǐng)看一下原因：
你不能確定用戶的ie裝了幾個(gè)插件!插件越多，瀏覽器顯示高度越低! 你不能確定用戶的顯示器是否設(shè)置正確(歪一邊了，弧形的，截?cái)嗟模s小的放大的) 你不能確定用戶顯示器的分辨率是否為最佳分辨率。其典型在于某些寬屏或高屏顯示器，有的是等比例縮小后留白。而更有甚者則是滿屏拉伸。比例就不對(duì)了!
要使得網(wǎng)頁(yè)滿屏。很多人說(shuō)寬度1003，也有人說(shuō)是1004。而我則不這樣認(rèn)為。
假設(shè)客戶要求網(wǎng)頁(yè)滿屏。那么，你就要曉得用戶的顯示器尺寸的屏幕分辨率。如果客戶對(duì)這玩意認(rèn)知度很低。就不要輕易去改人家的分辨率。我1440×900的寬屏，我用1024×768的分辨率，我樂(lè)意!如果這客戶要求一定要滿屏，那么問(wèn)題又出現(xiàn)了，如果交貨的時(shí)候客戶換了一臺(tái)不同尺寸的顯示器呢?分辨率變大了，你的網(wǎng)頁(yè)窄了，分辨率小了，你的網(wǎng)頁(yè)寬了!你咋辦?
其實(shí)滿屏也分兩種，我姑且命名一種為內(nèi)容滿屏，一種為視覺(jué)滿屏!
所謂內(nèi)容滿屏，就是指網(wǎng)站上的東西，左邊界就在顯示器左邊界，右邊界就是在顯示器右邊界。最佳的解決辦法就是使用百分比。而百分比帶來(lái)的負(fù)面效應(yīng)：
瀏覽器bug 設(shè)計(jì)及制作難度增加
所謂視覺(jué)滿屏，其實(shí)是一種取巧的做法。而這種方法。其實(shí)很簡(jiǎn)單，一個(gè)網(wǎng)站的頭部，無(wú)非就是導(dǎo)航和banner，如果導(dǎo)航在最上邊，那么，將導(dǎo)航的背景呈100%，導(dǎo)航居中。如果banner在最上邊，那么注意處理圖片兩端，還是100%寬 背景!
OK，雖然內(nèi)容寬度還有可能是1000、1003、甚至是900或更低，視覺(jué)上依然是百分百的寬度，只要避免最小寬度大于瀏覽器寬度、或客戶的顯示器分辨率寬度大于你的最小寬度。永遠(yuǎn)OK。
談布局和循環(huán)：
其實(shí)呢，說(shuō)網(wǎng)頁(yè)制作，直角最簡(jiǎn)單，比如老印，他的東西全部是直角。用他的話說(shuō)就是刀切一樣!為嘛?簡(jiǎn)單方便速度快內(nèi)容清晰!
布局以按照設(shè)計(jì)稿為標(biāo)準(zhǔn)。或者說(shuō)叫使用html還原設(shè)計(jì)稿，如果html截圖能和設(shè)計(jì)稿重疊，再過(guò)了標(biāo)準(zhǔn)，我認(rèn)為就是最高境界了!
問(wèn)題最大的，其實(shí)還是在設(shè)計(jì)和還原效果上!雖然可以使用css的負(fù)值、浮動(dòng)、重疊等屬性進(jìn)行不規(guī)則布局，但問(wèn)題依然存在，工作量和難度有可能依然會(huì)翻倍。還有，那可惡的N種瀏覽器!
對(duì)于復(fù)雜的設(shè)計(jì)稿、復(fù)雜的效果、甚至是過(guò)分的設(shè)計(jì)，如何降低使用html還原設(shè)計(jì)稿的工作量及難度!
如果你有權(quán)力微調(diào)設(shè)計(jì)稿，那么，你可以在“可忍受”范圍內(nèi)微調(diào)。這個(gè)范圍，每個(gè)公司都不一樣! 如果你沒(méi)有權(quán)力懂設(shè)計(jì)稿的任何東西，那么，請(qǐng)和設(shè)計(jì)師或主管溝通，請(qǐng)?jiān)O(shè)計(jì)者進(jìn)行微調(diào)。但你要把你的難點(diǎn)描述的清晰，讓他們理解! 沒(méi)人同意改稿子，那么，恭喜你。加班吧! 或者，你可以把那些細(xì)節(jié)工作扔給flash!
問(wèn)題集中體現(xiàn)在設(shè)計(jì)和效果上!
先說(shuō)設(shè)計(jì)：
網(wǎng)頁(yè)設(shè)計(jì)，除了體現(xiàn)效果，還有很多不可缺少的東西。這里不談純粹用來(lái)欣賞的網(wǎng)站。畢竟大部分的站點(diǎn)需要被大量閱讀的。
網(wǎng)頁(yè)的柵格系統(tǒng)
很重要，非常的重要!減少圖片，使用背景圖整合降低http連接次數(shù)。能使用文字盡量使用文字。所以嘛，還是得注意啊! 背景圖的小圖循環(huán)和重復(fù)使用
大的就不說(shuō)了，弄幾個(gè)弧度上去，幾乎就要用大圖片了，像奧運(yùn)時(shí)候那么網(wǎng)站的大背景。
小的背景圖，小欄目的背景圖，以及子頁(yè)面的某個(gè)地方的背景圖。咱盡量一致!小背景循環(huán)，效果圖里的寬和高哪個(gè)小，盡量按哪個(gè)方向循環(huán)!目的就是保證速度! 效果
png，這個(gè)可以說(shuō)是效果的典型了!無(wú)背景的透明屬性。相信很多人都喜歡!但ie6卻有缺陷，好了，看碼頭的：【IE6的瘋狂之二】IE6中PNG Alpha透明(全集)
我在做設(shè)計(jì)的時(shí)候，一般的站點(diǎn)是不考慮布局的!但那些藝術(shù)氣息特濃厚，效果忒多忒強(qiáng)烈的站，在吃自己的虧吃了兩次之后，就開(kāi)始主動(dòng)考慮后期布局，盡量避免讓布局難度加大!
如果設(shè)計(jì)的時(shí)候，考慮到重復(fù)利用圖片、背景等。會(huì)降低布局切片的很多工作。或者我可以說(shuō)，頁(yè)面重復(fù)利用率越高，就越快!主頁(yè)雖然是主頁(yè)，子頁(yè)雖然更簡(jiǎn)單，但重復(fù)利用主頁(yè)上已經(jīng)下載了的東西，不更好么?我想說(shuō)的是，要有全局的思維!
當(dāng)然了，你肯定也想到了flash的應(yīng)用。但flash貌似也有瀏覽器兼容問(wèn)題!
如果設(shè)計(jì)和布局中間有某個(gè)問(wèn)題被耽擱或某一方不退讓，那么程序、交互就要延后，上線日期也要推遲。
如果制作方擅自行動(dòng)修改而設(shè)計(jì)方死活有意見(jiàn)......
唉，問(wèn)題可大可小!做個(gè)網(wǎng)頁(yè)也不容易啊!
【網(wǎng)頁(yè)設(shè)計(jì)的布局理解】相關(guān)文章：
常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)模式07-14
網(wǎng)頁(yè)的柵格設(shè)計(jì)思考-網(wǎng)頁(yè)設(shè)計(jì)教程07-14
網(wǎng)頁(yè)設(shè)計(jì)禁忌07-14
怎樣網(wǎng)頁(yè)設(shè)計(jì)03-30
網(wǎng)頁(yè)設(shè)計(jì)報(bào)告07-31
網(wǎng)頁(yè)設(shè)計(jì)總結(jié)11-09
普通網(wǎng)頁(yè)設(shè)計(jì)與淘寶網(wǎng)頁(yè)設(shè)計(jì)有什么不同？07-09
網(wǎng)頁(yè)設(shè)計(jì)求職信 個(gè)人求職網(wǎng)頁(yè)設(shè)計(jì)02-21