美國有線電視新聞的新網(wǎng)站設計

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

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

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

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

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

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

創(chuàng)新互聯(lián)設計文章推薦：

師宗網(wǎng)頁設計、網(wǎng)頁設計與制作

安寧企業(yè)網(wǎng)站制作、安寧網(wǎng)站制作公司

嵩明網(wǎng)站建設公司、嵩明企業(yè)網(wǎng)站建設多少錢

網(wǎng)站標題：美國有線電視新聞的新網(wǎng)站設計
文章起源：http://www.muchs.cn/news8/20108.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有網(wǎng)站設計等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)