美國政府是一個品牌，當白宮易主，人們希望看到一些新東西。這不是換個招牌那么簡單，人們期待奧巴馬兌現(xiàn)競選時的諾言，雖然這一切需要時間，不過，人們已經(jīng)從白宮網(wǎng)站的改版中看到了巨大的變化。本文對 新的白宮網(wǎng)站 進行剖析，并同布什時代的白宮網(wǎng)站做一對比，兩個政府的變化已經(jīng)體現(xiàn)在新網(wǎng)站的設(shè)計，內(nèi)容與技術(shù)當中。

視覺設(shè)計與版式

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

現(xiàn)在的白宮網(wǎng)站，白宮的標志低調(diào)了很多，位于頁面主體內(nèi)容之外，原先占據(jù)1/3空間的導航區(qū)不見了，而是大量使用了 jQuery 實現(xiàn)動態(tài)導航，jQuery 在菜單，Banner 圖片等場合被大量使用。

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

在頁面右上角，出現(xiàn)了郵件列表注冊框，那個“GET UPDATES” 按鈕的色調(diào)據(jù)說和奧巴馬的膚色是一樣的（美國人八卦起來也很無敵）。新設(shè)計中加入了一些古典元素，主背景中的五角星與建筑細節(jié)，以及頁腳上方的灰色總統(tǒng)章。

頁面?zhèn)冗厵诘呐渖驼麄€站點的配色呈現(xiàn)一致的低飽和度顏色，按鈕同樣適用咖啡色系，略呈漸變色。

字體

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

網(wǎng)站結(jié)構(gòu)

從結(jié)構(gòu)上看，整個站點顯示了一種干凈的結(jié)構(gòu)，從上到下，從左到右的建構(gòu)。頁首部分的幻燈式新聞圖片帶來華麗的視覺感受，左邊關(guān)聯(lián)的文字內(nèi)容，可以讓低分辨率用戶，或使用代用瀏覽器（如屏幕閱讀器）的用戶在沒看到圖片之前就能理解圖片的意思。

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

新聞區(qū)域的下方，是三欄結(jié)構(gòu)，分別為 Blog, 搜索與 Agenda，以及一個視頻區(qū)域。

易用性與可訪問性

網(wǎng)站的易用性方面似乎走了不少彎路，那個搜索框位于新聞區(qū)三欄結(jié)構(gòu)的中間，使用的都是淺灰配色，很難被發(fā)現(xiàn)。右上角的郵件列表注冊倒是很顯眼，不過，那似乎應該是搜索框的位置。

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

網(wǎng)站中的圖片也做了很好的優(yōu)化，雖然對撥號用戶來說，不是問題，不過如果能提供一個純文字版，也許會更好地實現(xiàn)可訪問性。

能否通過驗證？

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

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

原文作者

Katie Kelly 白天做 Web 前端開發(fā)設(shè)計，晚上沉迷于視頻游戲。15年的經(jīng)驗讓她欣賞干凈的代碼，友好的內(nèi)容，以及客戶導向的電子商務(wù)。在不和怪獸作戰(zhàn)的時候，她在自己的網(wǎng)站 mediapyre 寫一些 ASP.NET 設(shè)計方面的文章。

本文國際來源：http://www.smashingmagazine.com/2009/02/01
中文翻譯來源：COMSHARP CMS 官方網(wǎng)站