2014-07-07 分類: 網(wǎng)站設(shè)計
介紹了美國有線電視新聞的新網(wǎng)站設(shè)計解,使一些重大的變化,其信息重布局。
這個新的設(shè)計是美麗的,干凈的,有組織和結(jié)構(gòu)。它使眼睛掃描并找到點擊另一個頁面的目標(biāo)很有趣。
以前的設(shè)計有點混亂,不是很誘人;內(nèi)容像是被迫的非結(jié)構(gòu)化的空間。這個新的布局是非常不同的,包含了許多現(xiàn)代的網(wǎng)站設(shè)計和可用性的好實踐及發(fā)展趨勢。
所以,讓我們更詳細(xì)地看一下不僅顯著改善,但一些可疑的設(shè)計和可用性的決定。
網(wǎng)格布局的啟發(fā)
我使用的短語“網(wǎng)格啟發(fā)”,因為新的設(shè)計似乎是基于一個網(wǎng)格,但元素的精確對準(zhǔn)是不是有。
在他們的一個粗略的看主樣式表,他們似乎松散地基于其風(fēng)格和網(wǎng)格Blueprint CSS框架。
他們的CSS重置與藍圖框架有許多相似之處,和“藍圖”,包括在頂部,所以這將是一個基于自己有限的知識邏輯評價藍圖。
在分析了他們的主頁屏幕捕捉,我得出的結(jié)論是,如果他們根據(jù)新的布局上的網(wǎng)格,網(wǎng)格,將細(xì)節(jié):16列,每列用12px水槽50px,(列之間的空間),共計980px寬度。
下面是一個視覺表現(xiàn)我的網(wǎng)格估計,作為PS圖象處理軟件的嘲笑:
盡管頁面上的元素不按類排列和平衡,通常是一個網(wǎng)格布局的預(yù)期,有一個明顯的改善,這種布局在以前的設(shè)計,如下圖所示:
CNN.com的舊設(shè)計
新的布局使所有頁面元素在980px寬的容器與笨重尋找以前的設(shè)計,有一個流體寬度的頭,跨越了一個固定寬度的內(nèi)容部分在整個頁面。
另外,在舊的設(shè)計似乎不能決定圓角和廣場之間,新設(shè)計的一貫特點方角與微妙的斜角效果分離合適的元素,如下圖所示。
CNN.com斜邊
雖然格式是網(wǎng)格狀的,它是,如前所述,沒有一個嚴(yán)格的網(wǎng)格格式,和下面的部分折疊雜有從上述結(jié)構(gòu)。
大大提高了標(biāo)題部分
一個在新的設(shè)計中最明顯的改進是標(biāo)題部分。
水平導(dǎo)航欄是現(xiàn)代,干凈,清晰。搜索框,注冊和登錄鏈接選項在右上角,它們應(yīng)該在的地方。
而且,雖然它在現(xiàn)代設(shè)計中心網(wǎng)站標(biāo)志是不習(xí)慣,在這種情況下,它的作品。它創(chuàng)造了一個很有優(yōu)勢的,生動的,品牌體驗是不容易忘記的。
有效利用空間
右邊的頁面,下面的原生廣告單元,他們包括手風(fēng)琴式內(nèi)容交換機,允許用戶查看預(yù)覽,在一個相對較小的區(qū)域,內(nèi)容涉及多個不同的主題。
在視頻和故事的流行重點
在以往的設(shè)計中,視頻有相當(dāng)強的關(guān)注,出現(xiàn)在右側(cè)的框。在新的設(shè)計中,視頻是一個大類的主要的導(dǎo)航欄,給出了幾乎相同的視覺重要性作為“家”的鏈接。
CNN.com視頻鏈接
視頻故事精選整個網(wǎng)站,并明確了慣常的“播放按鈕”鏈接,鏈接到視頻內(nèi)容的照片顯示,如下圖所示:
CNN.com視頻按鈕
另一類給予同樣的重視,“家”和“視頻”,如上圖所示,是“newspulse”部分,這是新的,還是在測試。
本節(jié)顯示新聞故事的普及(這似乎是計算總頁面瀏覽,不評論),并讓讀者來過濾結(jié)果按類別或故事類型。
CNN newspulse
強大的分類頁面
主類別頁面(“美國”、“世界”、“政治”等),通過主導(dǎo)航欄,工作同樣的主頁。
事實上,如果你不知道你在哪一頁,你會覺得你的主頁。“美國”范疇所示:
每一個部分的方便顯示上面的故事,最新的消息,和其他這一類相關(guān)的項目。
黑與白的標(biāo)題下面的圖片,也可以在首頁和文章頁,醒目易讀,不使用過于花哨的圖形或字體樣式。
強大的文章頁
文章頁,對于大多數(shù)的一部分,保持鮮明的品牌主頁。正文是很好的顯示在14px宋體具有可讀性很高的線高度。
雖然頁面上的一些元素似乎小了一點,我個人喜歡的方式,文章正文字體的大小代表了網(wǎng)頁上,讓讀者可以專注于它。
CNN.com正文
同時,在每個故事的左側(cè),有一條叫“故事集錦”,總結(jié)了當(dāng)前的故事在幾個符號列表點。這表明,美國有線電視新聞網(wǎng)的設(shè)計師了解用戶的在線趨勢“掃描”冗長的材料。
信息過載
所有新設(shè)計的消極方面,可能是第一個問題,明顯是在首頁上的鏈接和信息過載雖然是結(jié)構(gòu)化的和有組織的,如前面所討論的。
的主頁是大約兩個半簾長,包括部分重復(fù)項在主導(dǎo)航欄,大約半打子鏈接在每個類別。這些路段出現(xiàn)以下圖中顯示的是:
CNN.com以下
由于美國有線電視新聞網(wǎng)是世界上最受歡迎的網(wǎng)站(3800萬獨立訪客每月),這些部分將在其他網(wǎng)站,比較得到可觀的流量但是,因為他們的出現(xiàn),到目前為止,在折疊的,因為有這么多的環(huán)節(jié),相對流量訪問這些鏈接通過首頁會可能很低。
重要路段埋?
正如上文所指出的,很多在首頁出現(xiàn)以下信息。而且,明顯,似乎有些重要的內(nèi)容是完全埋在下面的網(wǎng)頁,超過兩全屏幕下面的標(biāo)題。
例如,一個題為“熱門話題”出現(xiàn)在底部,在右側(cè),只是上面的一些促銷和廣告。
CNN.com的熱點話題
它似乎更有意義,本節(jié)將取代手風(fēng)琴內(nèi)容交換機,否則被納入手風(fēng)琴。
廣告和促銷,出現(xiàn)下面的“熱門話題”也似乎比他們更重要的位置了。再次,雖然這樣一個高流量的網(wǎng)站會在這些方面獲得很多的點擊,點擊率比較的部分和廣告倍以上可能大大不同。
當(dāng)然,美國有線電視新聞網(wǎng)的生產(chǎn)商知道哪些內(nèi)容是最重要的,他們了解用戶的習(xí)慣比別人更好,但這些布局和可用性的挑戰(zhàn),有助于分析其他開發(fā)商面臨相似的抉擇。
可用性的奧秘
在新的網(wǎng)站,可能不是最優(yōu)的可用性設(shè)計的幾個要素。
一個例子是向右的三角,出現(xiàn)在每個微網(wǎng)站鏈接。乍一看,我不知道那些三角形是。他們似乎是某種JavaScript滑塊部分,會彈出。
一些用戶沒有充分重視甚至可能認(rèn)為他們向下產(chǎn)生下拉菜單箭頭。
CNN.com微網(wǎng)站鏈接
有沒有更好的方法來表示同一個窗口的微型網(wǎng)站的鏈接?我真的不知道。也許類似于著名的維基百科圖標(biāo)就足夠了,但就目前的用戶假設(shè)在新窗口中打開鏈接的問題,在這種情況下是不真實的。
手風(fēng)琴內(nèi)容交換機,前面所討論的,也有一些可用性問題。首先,當(dāng)禁用了JavaScript,手風(fēng)琴是無用的和不顯示任何內(nèi)容。
應(yīng)擴大默認(rèn)顯示所有內(nèi)容,否則顯示的項目之一。同時,該超鏈接的標(biāo)題為手風(fēng)琴節(jié)還是應(yīng)該鏈接到他們各自的部分,但是他們沒有。
與手風(fēng)琴內(nèi)容的另一個問題是,因為它包含的文本是非常小的,它并不總是很清楚什么是點擊里面的手風(fēng)琴。這使得鏈接不太明顯的從其余的手風(fēng)琴內(nèi)容。
在下圖中,我畫的紅色箭頭指向兩個列表項。在這些列表項的文本鏈接,但這不是明顯的第一眼。
CNN.com手風(fēng)琴鏈接
部分路段仍然反映了舊的設(shè)計
如將任何重新設(shè)計一個網(wǎng)站的美國有線電視新聞網(wǎng)的規(guī)模的情況下,部分路段仍將反映出古老的設(shè)計直到所有頁面完全集成。
這通常是與舊的內(nèi)容,不會去經(jīng)常的情況,但在美國有線電視新聞網(wǎng)的情況下,一些重要的部分仍然有老皮。
兩個例子是關(guān)于和聯(lián)系網(wǎng)頁
小字體
一個特定的設(shè)計問題,不符合現(xiàn)代網(wǎng)頁設(shè)計的趨勢是使用小文字和小的元素。
在手風(fēng)琴內(nèi)容字體小的前面討論的。也有出現(xiàn)在文章和視頻頁面的“分享”工具欄,在首頁的“最新消息”部分,“注冊”和“登錄”的標(biāo)題鏈接和文本鏈接,主頁上的褶皺,還有一些。
CNN.com分享吧
將上面的“分享”工具欄,與大字體,更有效?什么是“建議”部分,如下圖所示,或其他部分較小的類型?
CNN推薦
結(jié)論
新的CNN網(wǎng)站已經(jīng)添加了一些這里不討論功能,更多地涉及到他們的新聞服務(wù)和定制的內(nèi)容。下面的第一個鏈接包含視頻的美國有線電視新聞網(wǎng),討論一些新的功能,提出了。
我絕對認(rèn)為新網(wǎng)站提出了比舊的更美麗和有趣的用戶體驗,除了在手風(fēng)琴內(nèi)容交換機的弱點,對新設(shè)計的缺點是不是真的那么重要。
好像很多時間和計劃去設(shè)計新的CNN,我認(rèn)為網(wǎng)頁設(shè)計師和那些有興趣在提高可用性在自己的網(wǎng)站上都會認(rèn)真考慮并嘗試從中學(xué)習(xí)一些改變了美國有線電視新聞網(wǎng)的新網(wǎng)站。
創(chuàng)新互聯(lián)設(shè)計文章推薦:
師宗網(wǎng)頁設(shè)計、網(wǎng)頁設(shè)計與制作
安寧企業(yè)網(wǎng)站制作、安寧網(wǎng)站制作公司
嵩明網(wǎng)站建設(shè)公司、嵩明企業(yè)網(wǎng)站建設(shè)多少錢
網(wǎng)站標(biāo)題:美國有線電視新聞的新網(wǎng)站設(shè)計
文章起源:http://m.rwnh.cn/news8/20108.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站設(shè)計等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容