轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.bouu.cn  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里　

最近，一個(gè)朋友建議我寫點(diǎn)關(guān)于新聞?lì)惥W(wǎng)站界面設(shè)計(jì)的分析：什么是正確的新聞?lì)?strong>網(wǎng)頁(yè)設(shè)計(jì)，什么是錯(cuò)誤的。他認(rèn)為現(xiàn)今的線上新聞?dòng)脩趔w驗(yàn)非常落后，讓人感到厭倦無(wú)比，而且只是他們不用心做罷了，采用AJAX或者類似的技術(shù)就能把內(nèi)容呈遞的完善，而且導(dǎo)航做得十足精美。

一開始我非常贊同他的觀點(diǎn)。藍(lán)藍(lán)設(shè)計(jì)認(rèn)為新聞?lì)惥W(wǎng)站的約束在于：過去傳統(tǒng)的報(bào)紙以及雜志均為紙媒，動(dòng)輒就在頁(yè)面里融入了那些根深蒂固的慣例。因此用戶在瀏覽時(shí)會(huì)發(fā)現(xiàn)，這類網(wǎng)站的感覺很熟悉，但是卻限制了視覺表現(xiàn)。與此同時(shí)大部分新聞?lì)惥W(wǎng)站的用戶體驗(yàn)設(shè)計(jì)非常差，經(jīng)常會(huì)出現(xiàn)令人閱讀困難的小文本。

從《互聯(lián)網(wǎng)設(shè)計(jì)之道》開始，我知道這句話已經(jīng)別人重復(fù)無(wú)數(shù)次了，如果把網(wǎng)絡(luò)比作一種媒介的話，那么網(wǎng)絡(luò)是流動(dòng)的，是復(fù)雜的，也是美麗的。而且網(wǎng)絡(luò)的威力超出了大多數(shù)人的意料。
所以我們一起來(lái)看一下這些國(guó)際知名的新聞?lì)惥W(wǎng)站，看看他們的優(yōu)點(diǎn)與缺點(diǎn)。

歸根結(jié)底是移動(dòng)端的用戶體驗(yàn)

其實(shí)，主要還得是移動(dòng)端用戶的體驗(yàn)。然而很多新聞?lì)惥W(wǎng)站并沒有將此類用戶納入考慮。當(dāng)然，確實(shí)很多新聞網(wǎng)站已經(jīng)出了iOS或者Android版本的原生應(yīng)用，可惜效果并不理想，大部分的用戶下載完之后，用幾次就基本廢置到一旁了。

我們獲取信息的途徑是什么？因?yàn)樘^官方，內(nèi)容太過常規(guī)，現(xiàn)在的用戶很少主動(dòng)瀏覽新聞?lì)惥W(wǎng)站。他們通常是通過點(diǎn)擊朋友、親戚、網(wǎng)友的分享來(lái)得到信息。通過社交網(wǎng)絡(luò)，E-Mail，RSS Feed以及新聞源中的鏈接來(lái)得到信息。而鏈接導(dǎo)向的往往是網(wǎng)站，而不可能是應(yīng)用。因此，每個(gè)新聞?lì)惥W(wǎng)站都必須要注重移動(dòng)端的用戶體驗(yàn)?，F(xiàn)在用手機(jī)瀏覽消息的人實(shí)在是太多了。

那么問題又是什么？為什么新聞?lì)惥W(wǎng)站不改進(jìn)呢？
路很漫長(zhǎng)，前方有兩塊絆腳石有待清除。

帶寬

新聞?lì)惥W(wǎng)站，一般每頁(yè)都會(huì)呈遞大量信息，這就意味著讀取需要占用大量帶寬。一般都會(huì)有3-5條最近的新聞，用來(lái)吸引用戶注意，再來(lái)一點(diǎn)新聞攝影圖片以及滾動(dòng)的新聞，再加上一些JavaScript。這使得移動(dòng)端用戶需要下載大量的數(shù)據(jù)。（相對(duì)的，自己想）很多移動(dòng)端用戶所處的地方?jīng)]有免費(fèi)的Wi-Fi，手機(jī)的帶寬有限，即使很多有Wi-Fi的場(chǎng)所，平板和智能手機(jī)的瀏覽網(wǎng)頁(yè)速度也相當(dāng)慢。

因此，花里胡哨的風(fēng)格必須改變。

不是每個(gè)人的硬件設(shè)備都很發(fā)燒

還記得上面我提到過的嗎？我朋友認(rèn)為新聞?lì)惥W(wǎng)站應(yīng)該加入一點(diǎn)AJAX效果，這樣就能達(dá)到更好的用戶體驗(yàn)。但是我記得他用的是iPad,IPad硬件設(shè)備很不錯(cuò)，迅捷的很。最近有人送我了一個(gè)Hipstreet Titan。因?yàn)樘阋肆?，所以用起?lái)不如高端設(shè)備那么流暢，這是其一。

其二，使用低端設(shè)備的用戶遠(yuǎn)比使用高端設(shè)備的用戶多。就比方說別人送我那個(gè)平板，不但Wi-Fi慢，頁(yè)面讀取也慢，JS動(dòng)效最多。有時(shí)上下翻頁(yè)都慢的讓人糾結(jié)。順便說一下，新聞?lì)惥W(wǎng)站大都充滿了旋轉(zhuǎn)效果，這對(duì)于低端設(shè)備來(lái)說簡(jiǎn)直是殺手。不過有的低端設(shè)備可以通過更換瀏覽器來(lái)解決。我得平板用的是Opera，即便經(jīng)過了多重優(yōu)化，但是硬件還是限制太大，如果你的網(wǎng)站不能很好的兼容低端設(shè)備，那么你會(huì)流失大量用戶。

那么那些媒體巨頭是怎么做的呢？

似乎大多數(shù)新聞?lì)惥W(wǎng)站在依賴原生應(yīng)用，僅僅有少部分先行者在嘗試響應(yīng)式設(shè)計(jì)。

The Boston Globe

選取這個(gè)網(wǎng)站主要還是因?yàn)樗牧餍?，很多設(shè)計(jì)團(tuán)體大為贊嘆此網(wǎng)站的主頁(yè)。先不管頁(yè)面中大量的信息，整體設(shè)計(jì)看起來(lái)相當(dāng)整潔有序，鏈接也足夠大，便于觸摸敲擊。圖像略小。整體風(fēng)格看起來(lái)像是一張報(bào)紙，聚焦于字體和有序的排版，用我那糟糕的平板瀏覽起來(lái)還挺輕松，不錯(cuò)。

The Onion

布局方法上，感覺略像the Boston Globe：三欄縮小成兩欄，然后一欄。不管怎么樣，這個(gè)方法很有用，我的平板能夠流暢瀏覽。我覺得這就是這個(gè)網(wǎng)站流行的原因，流暢。

Time Magazine

新聞?lì)惥W(wǎng)站經(jīng)典的響應(yīng)式三欄布局，請(qǐng)看Time Magazine網(wǎng)站。

Breaking News

完全放棄了紙媒的視覺隱喻，喜歡用類似應(yīng)用的方法呈遞信息。特別照顧Rss Feed讀者。該網(wǎng)站的響應(yīng)式設(shè)計(jì)值得所有新聞?lì)惥W(wǎng)站學(xué)習(xí)。特別酷的是，他們?cè)诳紤]到移動(dòng)端用戶的同時(shí)兼顧到了桌面用戶。在我1600 x 900的顯示器上，效果也很棒。

應(yīng)該怎樣設(shè)計(jì)優(yōu)秀的新聞?lì)惥W(wǎng)站？

必須要高度重視移動(dòng)用戶，畢竟很多移動(dòng)用戶都是通過外部鏈接瀏覽新聞?lì)惥W(wǎng)站的。不能僅僅依賴原生應(yīng)用來(lái)提供移動(dòng)端用戶體驗(yàn)，因?yàn)楫吘惯€有很多是臨時(shí)用戶，他們不會(huì)為了瀏覽一次新聞?lì)惥W(wǎng)站而裝一款應(yīng)用。

簡(jiǎn)化網(wǎng)站，響應(yīng)式布局。

要注意對(duì)iOS、Android平臺(tái)的優(yōu)化，要兼顧到不同檔次（尤其是低端）設(shè)備。
其實(shí)我認(rèn)為就這么多，一旦做到了這些，便是創(chuàng)新和進(jìn)步。

你認(rèn)為對(duì)于新聞?lì)惥W(wǎng)站來(lái)說，什么是重要的？你最喜歡的新聞?lì)惥W(wǎng)站是什么？歡迎討論、