白宮網站改版淺談

來源:互聯網
上載者:User

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 官方網站

相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。