為(wèi)什麽要跟着新(xīn)聞網站學(xué)網頁(yè)設計？

在許多(duō)設計師看來，新(xīn)聞網站簡直就是無趣、冗長(cháng)、枯燥的代名(míng)詞，跟炫酷惹眼的設計一點邊兒都不沾好嗎？那小(xiǎo)編可(kě)就要提醒你喽，你對新(xīn)聞網站的觀念可(kě)是落後了十年。

和許多(duō)華而不實的設計網站相比，新(xīn)聞網站的優秀之處就在于标準，沒有(yǒu)浮誇的炫技(jì )，卻不乏相當驚豔的用(yòng)戶體(tǐ)驗。技(jì )術永遠(yuǎn)是為(wèi)人服務(wù)的，無論你的網頁(yè)設計的多(duō)麽複雜惹眼，如果缺乏實用(yòng)性甚至阻礙了正常功能(néng)的發揮，依舊無法留住用(yòng)戶。

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

1.搜索框帶來的安(ān)心與專業

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

FOX選擇經典的條塊狀搜索框

搜索框承擔了網站的搜索功能(néng)，當一個用(yòng)戶浏覽你的網站并被吸引，他(tā)決定進一步尋找自己感興趣的内容，卻失望的發現，根本找不到搜索框。用(yòng)戶就決定走了。

如果有(yǒu)幸他(tā)還記得你的網站的話，他(tā)會給别人說一句，“哦，那個網站隻能(néng)找到他(tā)想給我的内容，根本找不到我想要的東西。”

這時候，我們可(kě)以看看新(xīn)聞網站是如何重視搜索框擺放的，甚至一些時候，他(tā)們還出現了非常棒的用(yòng)戶體(tǐ)驗創新(xīn)。

BBC的條塊狀搜索框

搜索框的重要特點就是醒目、可(kě)靠、流暢，zui好和網站底色、其他(tā)元素顔色有(yǒu)所區(qū)别，略微偏離導航欄參考線(xiàn)。理(lǐ)想化的搜索框是那種大大的豪氣長(cháng)條塊，緻命缺點是擠占了其他(tā)信息空間。一些網站選擇了搜索框開關。

ABC新(xīn)聞網的搜索框開關

但 Al Jazeera English和36氪的開關顯然更闊氣，這種下拉彈出的方式可(kě)能(néng)會帶來更好的用(yòng)戶體(tǐ)驗。打開後一整行的内容都是搜索框，做到了醒目，用(yòng)戶更無需擔心打字過多(duō)在搜索框内顯示不完整。同時，這種排版方式整齊流暢，視覺體(tǐ)驗很(hěn)棒。

36氪下拉彈出式搜索框

你可(kě)能(néng)還會說，搜索框沒那麽重要，網易爸爸的搜索框就放在了頁(yè)面zui後非常不明顯的地方。

網易爸爸灰常隐蔽的搜索框

BUT，首先，搜索放到導航欄是用(yòng)戶長(cháng)期形成的網頁(yè)浏覽習慣，如果你的網站并不知名(míng)、如果你的創新(xīn)并不能(néng)帶來更好的用(yòng)戶體(tǐ)驗，還是采用(yòng)搜索框開關吧。

其次，我di一次用(yòng)網易新(xīn)聞時，真的找了很(hěn)久的搜索框，後來發現知乎上居然真還有(yǒu)“網易首頁(yè)為(wèi)什麽沒有(yǒu)搜索框？ ”這個問答(dá)。

2.與欄目相關的提示

幾乎所有(yǒu)的網頁(yè)設計師都了解欄目的重要性，但在這裏小(xiǎo)編想要提醒幾個關于欄目的小(xiǎo)細節。

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

《DON’T MAKE ME THINK》一書中(zhōng)說過标簽分(fēn)割器是一種制作(zuò)導航器的優秀反饋思路，用(yòng)戶單擊的标簽頁(yè)位于其他(tā)标簽頁(yè)之前。這種模式就比單純的字體(tǐ)加粗、改變字體(tǐ)顔色更具(jù)趣味性，也更像是模仿我們讀書翻頁(yè)的狀态，但後者可(kě)以容納更多(duō)的信息量。

虎嗅網頂部導航欄上的小(xiǎo)紅點很(hěn)有(yǒu)意思，鼠标點過後就不會再出現，類似于微信消息提醒的小(xiǎo)紅點。引導用(yòng)戶，又(yòu)能(néng)及時給出反饋。

子菜單太長(cháng)怎麽辦(bàn)，澎湃新(xīn)聞垂直導航就不錯

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

3.給用(yòng)戶選擇的空間

如果你做的是信息服務(wù)類網站，為(wèi)用(yòng)戶創建個性化内容能(néng)夠獲得用(yòng)戶體(tǐ)驗加分(fēn)。

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

4.好頭不如爛尾？

這一點無疑是錯誤，但一個美麗的網頁(yè)底部導航欄也是必備的。澎湃網站這種“難以觸及的網站底部”可(kě)就有(yǒu)點紮心了。

隻要網速快，你永遠(yuǎn)點不到“聯系我們”那一欄，因為(wèi)網站底部會随着新(xīn)刷出的新(xīn)聞下移。

這并不是說zui好把網頁(yè)底部導航也該成浮動式，我看到大部分(fēn)的網站還是嵌入式。但如果像澎湃新(xīn)聞這樣首頁(yè)内容過多(duō),滑動很(hěn)多(duō)次也沒法到底的話，就要想想新(xīn)的辦(bàn)法了，比如放到右邊。因為(wèi)畢竟一般網頁(yè)底部都留有(yǒu)招聘和商(shāng)業合作(zuò)聯系方式。

總結

這篇文(wén)章主要講述了有(yǒu)關良好用(yòng)戶體(tǐ)驗的細節，但隻要細心觀察，其實在新(xīn)聞網站，你也能(néng)看到分(fēn)屏式、标簽式等各種潮流設計。

一般來說，網站設計感的實現需要優質(zhì)酷炫的圖片作(zuò)為(wèi)支撐，但新(xīn)聞網站既沒有(yǒu)酷炫的圖片，又(yòu)多(duō)了許多(duō)文(wén)字。因而新(xīn)聞網站想要好看、擁有(yǒu)良好的用(yòng)戶體(tǐ)驗，就需要更精(jīng)心的頁(yè)面布置。這也是我推薦跟着新(xīn)聞網站學(xué)設計的原因。

複習一下：優秀的網頁(yè)設計，你需要：

1.令用(yòng)戶感到安(ān)心的搜索框

2.導航欄的小(xiǎo)技(jì )巧

3.給用(yòng)戶選擇的空間

4.重視結尾

/wangzhansheji/3446.html 為(wèi)什麽要跟着新(xīn)聞網站學(xué)網頁(yè)設計？