美國(guó)有線電視新聞的新網(wǎng)站設(shè)計(jì)

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

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

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

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

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

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

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

師宗網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)與制作

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

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

分享題目：美國(guó)有線電視新聞的新網(wǎng)站設(shè)計(jì)
分享路徑：http://www.muchs.cn/news/20108.html

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

廣告

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