美國有線電視新聞的新網站設計解

介紹了美國有線電視新聞的新網站設計解，使一些重大的變化，其信息重布局。
這個新的設計是美麗的，干凈的，有組織和結構。它使眼睛掃描并找到點擊另一個頁面的目標很有趣。
以前的設計有點混亂，不是很誘人；內容像是被迫的非結構化的空間。這個新的布局是非常不同的，包含了許多現代的網站設計和可用性的最佳實踐及發展趨勢。
所以，讓我們更詳細地看一下不僅顯著改善，但一些可疑的設計和可用性的決定。

網格布局的啟發
我使用的短語“網格啟發”，因為新的設計似乎是基于一個網格，但元素的精確對準是不是有。
在他們的一個粗略的看主樣式表，他們似乎松散地基于其風格和網格Blueprint CSS框架。
他們的CSS重置與藍圖框架有許多相似之處，和“藍圖”，包括在頂部，所以這將是一個基于自己有限的知識邏輯評價藍圖。
在分析了他們的主頁屏幕捕捉，我得出的結論是，如果他們根據新的布局上的網格，網格，將細節：16列，每列用12px水槽50px，（列之間的空間），共計980px寬度。
下面是一個視覺表現我的網格估計，作為PS圖象處理軟件的嘲笑：

盡管頁面上的元素不按類排列和平衡，通常是一個網格布局的預期，有一個明顯的改善，這種布局在以前的設計，如下圖所示：
CNN.com的舊設計
新的布局使所有頁面元素在980px寬的容器與笨重尋找以前的設計，有一個流體寬度的頭，跨越了一個固定寬度的內容部分在整個頁面。
另外，在舊的設計似乎不能決定圓角和廣場之間，新設計的一貫特點方角與微妙的斜角效果分離合適的元素，如下圖所示。
CNN.com斜邊
雖然格式是網格狀的，它是，如前所述，沒有一個嚴格的網格格式，和下面的部分折疊雜有從上述結構。
 
大大提高了標題部分
一個在新的設計中最明顯的改進是標題部分。
水平導航欄是現代，干凈，清晰。搜索框，注冊和登錄鏈接選項在右上角，它們應該在的地方。
而且，雖然它在現代設計中心網站標志是不習慣，在這種情況下，它的作品。它創造了一個很有優勢的，生動的，品牌體驗是不容易忘記的。

有效利用空間
右邊的頁面，下面的原生廣告單元，他們包括手風琴式內容交換機，允許用戶查看預覽，在一個相對較小的區域，內容涉及多個不同的主題。

在視頻和故事的流行重點
在以往的設計中，視頻有相當強的關注，出現在右側的框。在新的設計中，視頻是一個大類的主要的導航欄，給出了幾乎相同的視覺重要性作為“家”的鏈接。
CNN.com視頻鏈接
視頻故事精選整個網站，并明確了慣常的“播放按鈕”鏈接，鏈接到視頻內容的照片顯示，如下圖所示：
CNN.com視頻按鈕
另一類給予同樣的重視，“家”和“視頻”，如上圖所示，是“newspulse”部分，這是新的，還是在測試。
本節顯示新聞故事的普及（這似乎是計算總頁面瀏覽，不評論），并讓讀者來過濾結果按類別或故事類型。
CNN newspulse
 
強大的分類頁面
主類別頁面（“美國”、“世界”、“政治”等），通過主導航欄，工作同樣的主頁。
事實上，如果你不知道你在哪一頁，你會覺得你的主頁。“美國”范疇所示：

每一個部分的方便顯示上面的故事，最新的消息，和其他這一類相關的項目。
黑與白的標題下面的圖片，也可以在首頁和文章頁，醒目易讀，不使用過于花哨的圖形或字體樣式。
 
強大的文章頁
文章頁，對于大多數的一部分，保持鮮明的品牌主頁。正文是很好的顯示在14px宋體具有可讀性很高的線高度。
雖然頁面上的一些元素似乎小了一點，我個人喜歡的方式，文章正文字體的大小代表了網頁上，讓讀者可以專注于它。
CNN.com正文
同時，在每個故事的左側，有一條叫“故事集錦”，總結了當前的故事在幾個符號列表點。這表明，美國有線電視新聞網的設計師了解用戶的在線趨勢“掃描”冗長的材料。
 
信息過載
所有新設計的消極方面，可能是第一個問題，明顯是在首頁上的鏈接和信息過載雖然是結構化的和有組織的，如前面所討論的。
的主頁是大約兩個半簾長，包括部分重復項在主導航欄，大約半打子鏈接在每個類別。這些路段出現以下圖中顯示的是：
CNN.com以下
由于美國有線電視新聞網是世界上最受歡迎的網站（3800萬獨立訪客每月），這些部分將在其他網站，比較得到可觀的流量但是，因為他們的出現，到目前為止，在折疊的，因為有這么多的環節，相對流量訪問這些鏈接通過首頁會可能很低。
 
重要路段埋？
正如上文所指出的，很多在首頁出現以下信息。而且，明顯，似乎有些重要的內容是完全埋在下面的網頁，超過兩全屏幕下面的標題。
例如，一個題為“熱門話題”出現在底部，在右側，只是上面的一些促銷和廣告。
CNN.com的熱點話題
它似乎更有意義，本節將取代手風琴內容交換機，否則被納入手風琴。
廣告和促銷，出現下面的“熱門話題”也似乎比他們更重要的位置了。再次，雖然這樣一個高流量的網站會在這些方面獲得很多的點擊，點擊率比較的部分和廣告倍以上可能大大不同。
當然，美國有線電視新聞網的生產商知道哪些內容是最重要的，他們了解用戶的習慣比別人更好，但這些布局和可用性的挑戰，有助于分析其他開發商面臨相似的抉擇。
 
可用性的奧秘
在新的網站，可能不是最優的可用性設計的幾個要素。
一個例子是向右的三角，出現在每個微網站鏈接。乍一看，我不知道那些三角形是。他們似乎是某種JavaScript滑塊部分，會彈出。
一些用戶沒有充分重視甚至可能認為他們向下產生下拉菜單箭頭。
CNN.com微網站鏈接
有沒有更好的方法來表示同一個窗口的微型網站的鏈接？我真的不知道。也許類似于著名的維基百科圖標就足夠了，但就目前的用戶假設在新窗口中打開鏈接的問題，在這種情況下是不真實的。
手風琴內容交換機，前面所討論的，也有一些可用性問題。首先，當禁用了JavaScript，手風琴是無用的和不顯示任何內容。
應擴大默認顯示所有內容，否則顯示的項目之一。同時，該超鏈接的標題為手風琴節還是應該鏈接到他們各自的部分，但是他們沒有。
與手風琴內容的另一個問題是，因為它包含的文本是非常小的，它并不總是很清楚什么是點擊里面的手風琴。這使得鏈接不太明顯的從其余的手風琴內容。
在下圖中，我畫的紅色箭頭指向兩個列表項。在這些列表項的文本鏈接，但這不是明顯的第一眼。
CNN.com手風琴鏈接
 
部分路段仍然反映了舊的設計
如將任何重新設計一個網站的美國有線電視新聞網的規模的情況下，部分路段仍將反映出古老的設計直到所有頁面完全集成。
這通常是與舊的內容，不會去經常的情況，但在美國有線電視新聞網的情況下，一些重要的部分仍然有老皮。
兩個例子是關于和聯系網頁
 
小字體
一個特定的設計問題，不符合現代網頁設計的趨勢是使用小文字和小的元素。
在手風琴內容字體小的前面討論的。也有出現在文章和視頻頁面的“分享”工具欄，在首頁的“最新消息”部分，“注冊”和“登錄”的標題鏈接和文本鏈接，主頁上的褶皺，還有一些。
CNN.com分享吧
將上面的“分享”工具欄，與大字體，更有效？什么是“建議”部分，如下圖所示，或其他部分較小的類型？
CNN推薦
 
結論
新的CNN網站已經添加了一些這里不討論功能，更多地涉及到他們的新聞服務和定制的內容。下面的第一個鏈接包含視頻的美國有線電視新聞網，討論一些新的功能，提出了。
我絕對認為新網站提出了比舊的更美麗和有趣的用戶體驗，除了在手風琴內容交換機的弱點，對新設計的缺點是不是真的那么重要。
好像很多時間和計劃去設計新的CNN，我認為網頁設計師和那些有興趣在提高可用性在自己的網站上都會認真考慮并嘗試從中學習一些改變了美國有線電視新聞網的新網站。

牧羊人設計文章推薦：

重新設計網站的準備與規劃

網站設計重要的設計趨勢

考慮你的網站設計的用戶體驗