網頁設計公司
您現在的位置:首頁  >  新聞中心
  • 軟體設計
    Software Development
  • 品牌及LOGO設計
    Brand and LOGO Design
  • 網站設計及建制
    Web Design
  • 多媒體動畫制作
    Multimedia Presentations
  • 聯絡我們
    Contact US
  • 新聞中心
    網頁設計公司必讀的文章 ( 69 ) 設計和佈局之間的思考

    矛盾出來了,一些小型工作室,基本都是設計佈局一人搞定。甚至還有加後台程式的。假設設計的時候考慮佈局了,我們都有這個能力進行調整。但像大公司,分工嚴格的情況下,如果設計師不懂CSS不會佈局。或者理解有誤,那麼設計稿就會讓佈局人員耗費大量的時間和精力。因為瀏覽器太多!

    經常看到有網友抱怨設計師給的稿子無法還原。因為他們對瀏覽器和螢幕的理解不一樣。也有的是因為效果太絢,顏色太多。更有甚者是使用flash製作嫌浪費,而html又雞肋.....好吧,我們拋開這最後一種情況,只談對屏幕和效果以及設計佈局的理解。

    先談螢幕:

    螢幕分辨率,還是以1024×768為主。而全螢幕的定義則無從談起。為什麼?請看一下原因:

    1. 你不能確定用戶的ie裝了幾個插件!插件越多,瀏覽器顯示高度越低!
    2. 你不能確定用戶的顯示器是否設置正確(歪一邊了,弧形的,截斷的,縮小的放大的)
    3. 你不能確定用戶顯示器的分辨率是否為最佳分辨率。其典型在於某些寬螢幕或高檢析顯示器,有的是等比例縮小後留白。而更有甚者則是全螢幕拉伸。比例就不對了!

    要使得網頁全螢幕。很多人說寬度1003,也有人說是1004。每個人的認知都有不同。

    假設客戶要求網頁全螢幕設計。那麼,你就要曉得用戶的顯示器尺寸的螢幕解析度。如果客戶對這玩意認知度很低。就不要輕易去改人家的螢幕解析度。使用1440×900的寬螢幕,或用1024×768的分辨率,都很樂意!如果這客戶要求一定要全螢幕,那麼問題又出現了,如果交貨的時候客戶換了一台不同尺寸的顯示器呢?分辨率變大了,你的網頁窄了,分辨率小了,你的網頁寬了!你怎麼解釋?

    其實全螢幕也分兩種,姑且命名一種為內容全螢幕,一種為視覺全螢幕!

    所謂內容全螢幕,就是指網站上的東西,左邊界就在顯示器左邊界,右邊界就是在顯示器右邊界。最佳的解決辦法就是使用百分比。而百分比帶來的負面效應:

    1. 瀏覽器bug
    2. 設計及製作難度增加

    所謂視覺全螢幕,其實是一種取巧的做法。而這種方法。其實很簡單,一個網站的頭部,無非就是導航和banner,如果導航在最上邊,那麼,將導航的背景呈100%,導航居中。如果banner在最上邊,那麼注意處理圖片兩端,還是100%寬+背景!

    OK,雖然內容寬度還有可能是1000、1003、甚至是900或更低,視覺上依然是百分百的寬度,只要避免最小寬度大於瀏覽器寬度、或客戶的顯示器解析度寬度大於你的最小寬度。永遠OK。

    再談佈局和循環:

    這裡有篇文章 http://weilaixu.cn/read.php/174.htm

    其實呢,說網頁製作,直角最簡單,有些網站,他的東西全部是直角。用直角的方式就如刀切一樣!簡單方便速度快內容清晰!

    佈局以按照設計稿為標準。或者說叫使用html還原設計稿,如果html截圖能和設計稿重疊,再過了標準,一般認為就是最高境界了!

    問題最大的,其實還是在設計和還原效果上!雖然可以使用css的負值、浮動、重疊等屬性進行不規則佈局,但問題依然存在,工作量和難度有可能依然會翻倍。還有,不斷出新的N種瀏覽器!

    對於複雜的設計稿、複雜的效果、甚至是過分的設計,如何降低使用html還原設計稿的工作量及難度!

    1. 如果你有權力微調設計稿,那麼,你可以在「可忍受」範圍內微調。這個範圍,每個公司都不一樣!
    2.如果你沒有權力懂設計稿的任何東西,那麼,請和設計師或主管溝通,請設計者進行微調。但你要把你的難點描述的清晰,讓他們理解!
    3. 沒人同意改稿子,那麼,恭喜你。加班吧!
    4. 或者,你可以把那些細節工作扔給flash!

    問題集中體現在設計和效果上!

    先說設計:

    網頁設計,除了體現效果,還有很多不可缺少的東西。這裡不談純粹用來欣賞的網站。畢竟大部分的站點需要被大量閱讀的。

    1. 網頁的柵格系統
    看這篇文章:http://ued.taobao.com/blog/2008/09/17/grid_systems/
    2. 速度
    很重要,非常的重要!減少圖片,使用背景圖整合降低http連接次數。能使用文字盡量使用文字。所以嘛,還是得注意啊!
    3. 背景圖的小圖循環和重複使用
    大的就不說了,弄幾個弧度上去,幾乎就要用大圖片了,像奧運時候那麼網站的大背景。
    小的背景圖,小欄目的背景圖,以及子頁面的某個地方的背景圖。咱盡量一致!小背景循環,效果圖裡的寬和高哪個小,盡量按哪個方向循環!目的就是保證速度!
    4. 效果
    png,這個可以說是效果的典型了!無背景的透明屬性。相信很多人都喜歡!但ie6卻有缺陷,好了,看碼頭的:【IE6的瘋狂之二】IE6中PNG Alpha透明(全集)

    做設計的時候,一般的站點是不考慮佈局的!但那些藝術氣息特濃厚,效果忒多忒強烈的站,在吃自己的虧吃了兩次之後,就開始主動考慮後期佈局,盡量避免讓佈局難度加大!

    如果設計的時候,考慮到重複利用圖片、背景等。會降低佈局切片的很多工作。或者我可以說,頁面重複利用率越高,就越快!主頁雖然是主頁,子頁雖然更簡單,但重複利用主頁上已經下載了的東西,不更好麼?我想說的是,要有全局的思維!

    當然了,你肯定也想到了flash的應用。但flash貌似也有瀏覽器兼容問題!

    如果設計和佈局中間有某個問題被耽擱或某一方不退讓,那麼程序、交互就要延後,上線日期也要推遲。

    如果製作方擅自行動修改而設計方死活有意見......

    唉,問題可大可小!做個網頁也不容易啊!

     

    首頁 | 關於我們 | 新闻中心 | 聯絡我們 | 加入最愛
    Bay Stars Design 網頁設計公司 Copyright © 2005-2008 Bay Stars Design Web Design Company All risghts reserved.