在許多設計師看來(lái)，新聞網(wǎng)站簡(jiǎn)直就是無(wú)趣、冗長(cháng)、枯燥的代名詞，跟炫酷惹眼的設計一點(diǎn)邊兒都不沾好嗎？那小編可就要提醒你嘍，你對新聞網(wǎng)站的觀(guān)念可是落后了十年。

和許多華而不實(shí)的設計網(wǎng)站相比，新聞網(wǎng)站的優(yōu)秀之處就在于標準，沒(méi)有浮夸的炫技，卻不乏相當驚艷的用戶(hù)體驗。技術(shù)永遠是為人服務(wù)的，無(wú)論你的網(wǎng)頁(yè)設計的多么復雜惹眼，如果缺乏實(shí)用性甚至阻礙了正常功能的發(fā)揮，依舊無(wú)法留住用戶(hù)。

新聞網(wǎng)站的設計方式更利于新手設計師理解用戶(hù)體驗的意義（因為無(wú)論是優(yōu)點(diǎn)還是缺點(diǎn)，新聞網(wǎng)站都暴露得很明顯），也更容易上手。下面我們一起看看吧。

1.搜索框帶來(lái)的安心與專(zhuān)業(yè)

導航欄對于每個(gè)網(wǎng)站都是至關(guān)重要的，我們在制作導航欄時(shí)往往被橫向排列還是豎向擺放、是否可伸縮、是否要浮動(dòng)、怎樣塞下更多的欄目目錄搞得焦頭爛額，但往往忘記了一個(gè)關(guān)鍵——搜索框。

FOX選擇經(jīng)典的條塊狀搜索框

搜索框承擔了網(wǎng)站的搜索功能，當一個(gè)用戶(hù)瀏覽你的網(wǎng)站并被吸引，他決定進(jìn)一步尋找自己感興趣的內容，卻失望的發(fā)現，根本找不到搜索框。用戶(hù)就決定走了。

如果有幸他還記得你的網(wǎng)站的話(huà)，他會(huì )給別人說(shuō)一句，“哦，那個(gè)網(wǎng)站只能找到他想給我的內容，根本找不到我想要的東西。”

這時(shí)候，我們可以看看新聞網(wǎng)站是如何重視搜索框擺放的，甚至一些時(shí)候，他們還出現了非常棒的用戶(hù)體驗創(chuàng )新。

BBC的條塊狀搜索框

搜索框的重要特點(diǎn)就是醒目、可靠、流暢，zui好和網(wǎng)站底色、其他元素顏色有所區別，略微偏離導航欄參考線(xiàn)。理想化的搜索框是那種大大的豪氣長(cháng)條塊，致命缺點(diǎn)是擠占了其他信息空間。一些網(wǎng)站選擇了搜索框開(kāi)關(guān)。

ABC新聞網(wǎng)的搜索框開(kāi)關(guān)

但 Al Jazeera English和36氪的開(kāi)關(guān)顯然更闊氣，這種下拉彈出的方式可能會(huì )帶來(lái)更好的用戶(hù)體驗。打開(kāi)后一整行的內容都是搜索框，做到了醒目，用戶(hù)更無(wú)需擔心打字過(guò)多在搜索框內顯示不完整。同時(shí)，這種排版方式整齊流暢，視覺(jué)體驗很棒。

36氪下拉彈出式搜索框

你可能還會(huì )說(shuō)，搜索框沒(méi)那么重要，網(wǎng)易爸爸的搜索框就放在了頁(yè)面zui后非常不明顯的地方。

網(wǎng)易爸爸灰常隱蔽的搜索框

BUT，首先，搜索放到導航欄是用戶(hù)長(cháng)期形成的網(wǎng)頁(yè)瀏覽習慣，如果你的網(wǎng)站并不知名、如果你的創(chuàng )新并不能帶來(lái)更好的用戶(hù)體驗，還是采用搜索框開(kāi)關(guān)吧。

其次，我di一次用網(wǎng)易新聞時(shí)，真的找了很久的搜索框，后來(lái)發(fā)現知乎上居然真還有“網(wǎng)易首頁(yè)為什么沒(méi)有搜索框？ ”這個(gè)問(wèn)答。

2.與欄目相關(guān)的提示

幾乎所有的網(wǎng)頁(yè)設計師都了解欄目的重要性，但在這里小編想要提醒幾個(gè)關(guān)于欄目的小細節。

反饋是用戶(hù)體驗的核心要素之一，你敲桌子桌子會(huì )響、躺到床上床會(huì )塌陷，我們對生活中的反饋是如此習以為常，以至于在設計網(wǎng)頁(yè)時(shí)忘記了反饋的存在。

《DON’T MAKE ME THINK》一書(shū)中說(shuō)過(guò)標簽分割器是一種制作導航器的優(yōu)秀反饋思路，用戶(hù)單擊的標簽頁(yè)位于其他標簽頁(yè)之前。這種模式就比單純的字體加粗、改變字體顏色更具趣味性，也更像是模仿我們讀書(shū)翻頁(yè)的狀態(tài)，但后者可以容納更多的信息量。

虎嗅網(wǎng)頂部導航欄上的小紅點(diǎn)很有意思，鼠標點(diǎn)過(guò)后就不會(huì )再出現，類(lèi)似于微信消息提醒的小紅點(diǎn)。引導用戶(hù)，又能及時(shí)給出反饋。

子菜單太長(cháng)怎么辦，澎湃新聞垂直導航就不錯

其次是強調導航欄，下面這個(gè)新聞網(wǎng)站就做的不錯。下圖右側的“NEWS”提示了用戶(hù)所在的子頁(yè)面，幫助用戶(hù)分辨位置、強化了導航欄的印象，又彌補了右側留白過(guò)多的缺憾。

3.給用戶(hù)選擇的空間

如果你做的是信息服務(wù)類(lèi)網(wǎng)站，為用戶(hù)創(chuàng )建個(gè)性化內容能夠獲得用戶(hù)體驗加分。

BBS設立的“不喜歡就點(diǎn)叉”小窗口試圖在提供這樣的服務(wù)。

4.好頭不如爛尾？

這一點(diǎn)無(wú)疑是錯誤，但一個(gè)美麗的網(wǎng)頁(yè)底部導航欄也是必備的。澎湃網(wǎng)站這種“難以觸及的網(wǎng)站底部”可就有點(diǎn)扎心了。

只要網(wǎng)速快，你永遠點(diǎn)不到“聯(lián)系我們”那一欄，因為網(wǎng)站底部會(huì )隨著(zhù)新刷出的新聞下移。

這并不是說(shuō)zui好把網(wǎng)頁(yè)底部導航也該成浮動(dòng)式，我看到大部分的網(wǎng)站還是嵌入式。但如果像澎湃新聞這樣首頁(yè)內容過(guò)多,滑動(dòng)很多次也沒(méi)法到底的話(huà)，就要想想新的辦法了，比如放到右邊。因為畢竟一般網(wǎng)頁(yè)底部都留有招聘和商業(yè)合作聯(lián)系方式。

總結

這篇文章主要講述了有關(guān)良好用戶(hù)體驗的細節，但只要細心觀(guān)察，其實(shí)在新聞網(wǎng)站，你也能看到分屏式、標簽式等各種潮流設計。

一般來(lái)說(shuō)，網(wǎng)站設計感的實(shí)現需要優(yōu)質(zhì)酷炫的圖片作為支撐，但新聞網(wǎng)站既沒(méi)有酷炫的圖片，又多了許多文字。因而新聞網(wǎng)站想要好看、擁有良好的用戶(hù)體驗，就需要更精心的頁(yè)面布置。這也是我推薦跟著(zhù)新聞網(wǎng)站學(xué)設計的原因。

復習一下：優(yōu)秀的網(wǎng)頁(yè)設計，你需要：

1.令用戶(hù)感到安心的搜索框

2.導航欄的小技巧

3.給用戶(hù)選擇的空間

4.重視結尾

http://ezekroy.com/wangzhansheji/3446.html 為什么要跟著(zhù)新聞網(wǎng)站學(xué)網(wǎng)頁(yè)設計？