DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 白宮網站改版淺談
白宮網站改版淺談
編輯:關於網頁技巧     
COMSHARP CMS 寫道 "美國政府是一個品牌,當白宮易主,人們希望看到一些新東西。這不是換個招牌那麼簡單,人們期待奧巴馬兌現精選時的諾言,雖然這一切需要時間,不過,人們已經從白宮網站的改版中看到了巨大的變化。本文對新的白宮網站進行剖析,並同布什時代的白宮網站做一對比,兩個政府的變化已經體現在新網站的設計,內容與技術當中(圖文)。" 視覺設計與版式

先看看布什時代的白宮網站(如下圖),使用了單一背景色,以及比較暗淡的配色,白色,淺灰,海軍藍。Logo 位於左上角,很顯眼,導航區占據了1/3 的頁面空間,還略有點 CSS 對齊問題。

現在的白宮網站,白宮的標志低調了很多,位於頁面主體內容之外,原先占據1/3空間的導航區不見了,而是大量使用了 jQuery 實現動態導航,jQuery 在菜單,Banner 圖片等場合被大量使用。

微妙的漸變色以及水洗效果被保留下來,不過,藍色變得更廣更深。還在鼠標盤旋菜單中引入了紅色元素。有趣的是,主導航條的左邊加了個小小的星條旗標志,是否在暗示競選期間的“星條旗胸章”之爭?

在頁面右上角,出現了郵件列表注冊框,那個“GET UPDATES” 按鈕的色調據說和奧巴馬的膚色是一樣的(美國人八卦起來也很無敵)。新設計中加入了一些古典元素,主背景中的五角星與建築細節,以及頁腳上方的灰色總統章。

頁面側邊欄的配色和整個站點的配色呈現一致的低飽和度顏色,按鈕同樣適用咖啡色系,略呈漸變色。

字體

正文使用的是 Lucida Sans 字體,標題用的是 Georgia。這些老式字體為網站增添了些許古典與懷舊傾向。由於 sans-serif 字體在 Web 上的可讀性,主要內容的字體使用了 Arial,不過圖形化頁首的文字不太清楚,似乎是加粗的 Serif 字體,用的是老式傳單的字體風格,小寫的代詞,加全部大寫的名詞。

網站結構

從結構上看,整個站點顯示了一種干淨的結構,從上到下,從左到右。頁首部分的幻燈式新聞圖片帶來華麗的視覺感受,左邊關聯的文字內容,可以讓低分辨率用戶,或使用代用浏覽器(如屏幕閱讀器)的用戶在沒看到圖片之前就能理解圖片的意思。

在800x600屏幕分辨率下,屏幕上只會顯示到那個藍色的內容標題,在這個分辨率下,頁面並不左右滾動,但新聞標題部分就成了視覺的焦點。

新聞區域的下方,是三欄結構,分別為 Blog, 搜索與 Agenda,以及一個視頻區域。易用性與可訪問性

網站的易用性方面似乎走了不少彎路,那個搜索框位於新聞去三欄結構的中間,使用的都是淺灰配色,很難被發現。右上角的郵件列表注冊倒是很顯眼,不過,那似乎應該是搜索框的位置。

文字的縮放可以正確地進行,不過主導航條是圖片式的,這個縮放不了,但下拉菜單以及後面的頁腳部分的文字都可以正確的縮放(當然在 IE6 中不行 -譯者)。考慮到白宮網站的訪問之廣泛,如果對讀屏軟件更友好一些會更好,目前,主導航條的下拉菜單是無法被讀屏軟件讀取的,其頁腳部分的鏈接也要等整個頁面全部完成後才會讀到。

網站中的圖片也做了很好的優化,雖然對撥號用戶來說,不是問題,不過如果能提供一個純文字版,也許會更好地實現可訪問性。能否通過驗證?

恐怕不成。在 CSS2.1 驗證測試中,有41處錯誤和1840個警告。

不過,從感官來說,新網站有了很大的改觀,所使用的技術,風格都顯示出美國政府正在努力改觀其品牌形象與透明度,新的白宮網站走向一種新的,良好的設計路線。原文作者

Katie Kelly 白天做 Web 前端開發設計,晚上沉迷於視頻游戲。15年的經驗讓她欣賞干淨的代碼,友好的內容,以及客戶導向的電子商務。在不和怪獸作戰的時候,她在自己的網站 mediapyre 寫一些 ASP.NET 設計方面的文章。

本文國際來源:http://www.smashingmagazine.com/2009/02/01/whitehousegov-redesign-the-change-has-come/
中文翻譯來源:COMSHARP CMS 官方網站

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved