技術(shù)資訊
設(shè)計(jì)和布局之間的思考
2008-10-10 16:44:00
矛盾出來了,像我們這些小作坊,基本都是設(shè)計(jì)布局一人搞定。甚至還有加后臺程序的。假設(shè)設(shè)計(jì)的時(shí)候考慮布局了,我們都有這個(gè)能力進(jìn)行調(diào)整。但像大公司,分工嚴(yán)格的情況下,如果設(shè)計(jì)師不懂css不會(huì)布局。或者理解有誤,那么設(shè)計(jì)稿就會(huì)讓布局人員耗費(fèi)大量的時(shí)間和精力。因?yàn)闉g覽器太多!
經(jīng)??吹接芯W(wǎng)友抱怨設(shè)計(jì)師給的稿子無法還原。因?yàn)樗麄儗g覽器和屏幕的理解不一樣。也有的是因?yàn)樾Чk,顏色太多。更有甚者是使用flash制作嫌浪費(fèi),而html又雞肋.....好吧,我們拋開這最后一種情況,只談對屏幕和效果以及設(shè)計(jì)布局的理解。
先談屏幕:
屏幕分辨率,還是以1024×768為主。而滿屏的定義則無從談起。為什么?請看一下原因:
- 你不能確定用戶的ie裝了幾個(gè)插件!插件越多,瀏覽器顯示高度越低!
- 你不能確定用戶的顯示器是否設(shè)置正確(歪一邊了,弧形的,截?cái)嗟?,縮小的放大的)
- 你不能確定用戶顯示器的分辨率是否為最佳分辨率。其典型在于某些寬屏或高屏顯示器,有的是等比例縮小后留白。而更有甚者則是滿屏拉伸。比例就不對了!
要使得網(wǎng)頁滿屏。很多人說寬度1003,也有人說是1004。而我則不這樣認(rèn)為。
假設(shè)客戶要求網(wǎng)頁滿屏。那么,你就要曉得用戶的顯示器尺寸的屏幕分辨率。如果客戶對這玩意認(rèn)知度很低。就不要輕易去改人家的分辨率。我1440×900的寬屏,我用1024×768的分辨率,我樂意!如果這客戶要求一定要滿屏,那么問題又出現(xiàn)了,如果交貨的時(shí)候客戶換了一臺不同尺寸的顯示器呢?分辨率變大了,你的網(wǎng)頁窄了,分辨率小了,你的網(wǎng)頁寬了!你咋辦?
其實(shí)滿屏也分兩種,我姑且命名一種為內(nèi)容滿屏,一種為視覺滿屏!
所謂內(nèi)容滿屏,就是指網(wǎng)站上的東西,左邊界就在顯示器左邊界,右邊界就是在顯示器右邊界。最佳的解決辦法就是使用百分比。而百分比帶來的負(fù)面效應(yīng):
- 瀏覽器bug
- 設(shè)計(jì)及制作難度增加
所謂視覺滿屏,其實(shí)是一種取巧的做法。而這種方法。其實(shí)很簡單,一個(gè)網(wǎng)站的頭部,無非就是導(dǎo)航和banner,如果導(dǎo)航在最上邊,那么,將導(dǎo)航的背景呈100%,導(dǎo)航居中。如果banner在最上邊,那么注意處理圖片兩端,還是100%寬+背景!
OK,雖然內(nèi)容寬度還有可能是1000、1003、甚至是900或更低,視覺上依然是百分百的寬度,只要避免最小寬度大于瀏覽器寬度、或客戶的顯示器分辨率寬度大于你的最小寬度。永遠(yuǎn)OK。
#p#再談布局和循環(huán):
這里有篇文章http://weilaixu.cn/read.php/174.htm
其實(shí)呢,說網(wǎng)頁制作,直角最簡單,比如老印,他的東西全部是直角。用他的話說就是刀切一樣!為嘛?簡單方便速度快內(nèi)容清晰!
布局以按照設(shè)計(jì)稿為標(biāo)準(zhǔn)?;蛘哒f叫使用html還原設(shè)計(jì)稿,如果html截圖能和設(shè)計(jì)稿重疊,再過了標(biāo)準(zhǔn),我認(rèn)為就是最高境界了!
問題最大的,其實(shí)還是在設(shè)計(jì)和還原效果上!雖然可以使用css的負(fù)值、浮動(dòng)、重疊等屬性進(jìn)行不規(guī)則布局,但問題依然存在,工作量和難度有可能依然會(huì)翻倍。還有,那可惡的N種瀏覽器!
對于復(fù)雜的設(shè)計(jì)稿、復(fù)雜的效果、甚至是過分的設(shè)計(jì),如何降低使用html還原設(shè)計(jì)稿的工作量及難度!
- 如果你有權(quán)力微調(diào)設(shè)計(jì)稿,那么,你可以在“可忍受”范圍內(nèi)微調(diào)。這個(gè)范圍,每個(gè)公司都不一樣!
- 如果你沒有權(quán)力懂設(shè)計(jì)稿的任何東西,那么,請和設(shè)計(jì)師或主管溝通,請?jiān)O(shè)計(jì)者進(jìn)行微調(diào)。但你要把你的難點(diǎn)描述的清晰,讓他們理解!
- 沒人同意改稿子,那么,恭喜你。加班吧!
- 或者,你可以把那些細(xì)節(jié)工作扔給flash!
問題集中體現(xiàn)在設(shè)計(jì)和效果上!
先說設(shè)計(jì):
網(wǎng)頁設(shè)計(jì),除了體現(xiàn)效果,還有很多不可缺少的東西。這里不談純粹用來欣賞的網(wǎng)站。畢竟大部分的站點(diǎn)需要被大量閱讀的。
- 網(wǎng)頁的柵格系統(tǒng)
看這篇文章:http://ued.taobao.com/blog/2008/09/17/grid_systems/ - 速度
很重要,非常的重要!減少圖片,使用背景圖整合降低http連接次數(shù)。能使用文字盡量使用文字。所以嘛,還是得注意啊! - 背景圖的小圖循環(huán)和重復(fù)使用
大的就不說了,弄幾個(gè)弧度上去,幾乎就要用大圖片了,像奧運(yùn)時(shí)候那么網(wǎng)站的大背景。
小的背景圖,小欄目的背景圖,以及子頁面的某個(gè)地方的背景圖。咱盡量一致!小背景循環(huán),效果圖里的寬和高哪個(gè)小,盡量按哪個(gè)方向循環(huán)!目的就是保證速度! - 效果
png,這個(gè)可以說是效果的典型了!無背景的透明屬性。相信很多人都喜歡!但ie6卻有缺陷,好了,看碼頭的:【IE6的瘋狂之二】IE6中PNG Alpha透明(全集)
我在做設(shè)計(jì)的時(shí)候,一般的站點(diǎn)是不考慮布局的!但那些藝術(shù)氣息特濃厚,效果忒多忒強(qiáng)烈的站,在吃自己的虧吃了兩次之后,就開始主動(dòng)考慮后期布局,盡量避免讓布局難度加大!
如果設(shè)計(jì)的時(shí)候,考慮到重復(fù)利用圖片、背景等。會(huì)降低布局切片的很多工作?;蛘呶铱梢哉f,頁面重復(fù)利用率越高,就越快!主頁雖然是主頁,子頁雖然更簡單,但重復(fù)利用主頁上已經(jīng)下載了的東西,不更好么?我想說的是,要有全局的思維!
當(dāng)然了,你肯定也想到了flash的應(yīng)用。但flash貌似也有瀏覽器兼容問題!
如果設(shè)計(jì)和布局中間有某個(gè)問題被耽擱或某一方不退讓,那么程序、交互就要延后,上線日期也要推遲。
如果制作方擅自行動(dòng)修改而設(shè)計(jì)方死活有意見......
唉,問題可大可小!做個(gè)網(wǎng)頁也不容易?。?/P>
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計(jì)開發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2009-01-23 11:06:00] 2009年海外Web2.0風(fēng)格設(shè)計(jì)風(fēng)潮(上)
- [2009-03-10 08:53:00] 我們?yōu)槭裁磿?huì)失敗
- [2009-02-20 08:48:00] 在網(wǎng)絡(luò)時(shí)代請用戶參與設(shè)計(jì)
- [2014-06-10 14:51:04] 青島網(wǎng)站建設(shè)之SEO優(yōu)化
- [2008-10-22 08:31:00] 我來設(shè)計(jì)支付寶的登錄窗口
- [2009-01-19 08:44:00] 潛談產(chǎn)品設(shè)計(jì)中的可用性和可訪問性
- [2014-09-27 13:47:22] HTML5特效技術(shù)分析與12個(gè)案例欣賞
- [2009-02-05 21:42:00] 網(wǎng)站設(shè)計(jì)中清晰有效的信息傳達(dá)
- [2013-09-24 23:27:29] 網(wǎng)站設(shè)計(jì)切圖與重構(gòu)的質(zhì)量分析
- [2015-08-02 14:53:49] 織夢圖片僅網(wǎng)址dede:img text=
- [2019-07-25 10:40:02] 網(wǎng)站設(shè)計(jì)中的色彩
- [2011-11-05 21:28:33] seo一定要膽子大,要敢于實(shí)踐,要拿的起放的下!
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
網(wǎng)站改版 html和css 青島好的網(wǎng)站優(yōu)化公司 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 互聯(lián)網(wǎng) 手機(jī)網(wǎng)站 企業(yè)網(wǎng)站建設(shè) 青島做網(wǎng)站多少錢 SEO 色彩心理學(xué) 響應(yīng)式設(shè)計(jì) 青島網(wǎng)站建設(shè)公司哪家好 微信開發(fā) 網(wǎng)站優(yōu)化 網(wǎng)站開發(fā) 營銷型網(wǎng)站建設(shè) 搜索引擎 GOOGLE IT資訊 高端輪胎網(wǎng)站設(shè)計(jì) 手機(jī)網(wǎng)站建設(shè) 網(wǎng)站交互設(shè)計(jì) 企業(yè)建站 力圖數(shù)字科技 青島網(wǎng)站建設(shè) 青島網(wǎng)站制作 H5 企業(yè)網(wǎng)站為什么要備案 網(wǎng)站制作 青島輪胎網(wǎng)站設(shè)計(jì)