如果你看了這篇文章的標題，你可能會感到驚訝：什么？ 關注新聞網(wǎng)站學習網(wǎng)頁設計？

在很多設計師眼里，新聞網(wǎng)站簡直就是乏味、冗長、乏味的代名詞，與炫酷奪目的設計毫無關系。 那么小編提醒你，你的新聞網(wǎng)站概念落后十年了。

與許多設計華而不實的網(wǎng)站相比，新聞網(wǎng)站的優(yōu)秀之處在于規(guī)范，不浮夸，但也不乏令人驚嘆的用戶體驗。 科技永遠為人服務。 無論您的網(wǎng)頁設計多么復雜和引人注目，如果缺乏實用性甚至妨礙正常功能，仍然無法留住用戶。

新聞站點的設計方式使新手設計者更容易理解用戶體驗的含義（因為新聞站點的優(yōu)點和缺點都清楚地暴露出來），并且更容易上手。 下面我們一起來看看吧。

1、搜索框帶來的安心與專業(yè)

導航欄對于每個網(wǎng)站來說都是非常重要的。 我們在做導航欄的時候，常常會糾結到底是水平排列還是垂直排列，是否可伸縮，是否應該浮動，如何塞進更多的欄目和目錄，但往往會忘記一個關鍵——搜索框。

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

搜索框承擔了網(wǎng)站的搜索功能。 當用戶瀏覽你的網(wǎng)站并被吸引時，他決定進一步搜索自己感興趣的內容，卻失望地發(fā)現(xiàn)根本沒有搜索框。 用戶決定離開。

如果他有幸記住了你的網(wǎng)站，他就會對別人說，“哎呀，那個網(wǎng)站只能給我找到他要的，根本找不到我要的”。

這個時候，我們可以看到新聞網(wǎng)站是多么重視搜索框的放置，甚至有的時候，他們在用戶體驗上有很大的創(chuàng)新。

BBC的條形搜索框

搜索框的重要特征是醒目、可靠和流暢。 最好與網(wǎng)站的背景色和其他元素的顏色不同，稍微偏離導航欄參考線。 理想的搜索框是一個又大又粗的長塊，但致命的缺點是占用了其他信息空間。 一些網(wǎng)站選擇搜索框開關。

ABC新聞網(wǎng)搜索框切換

不過Al和36氪開關的價格明顯更高，這種下拉彈出的方式或許能帶來更好的用戶體驗。 打開后，整行內容都是一個搜索框，醒目醒目，用戶不用擔心打字過多搜索框顯示不全。 同時，這種排版方式工整流暢，視覺體驗極佳。

（視頻大小為1.3M，請放心食用~）

36氪下拉彈出搜索框

你也可能會說搜索框沒那么重要，網(wǎng)易爸爸的搜索框放在了頁尾一個很不顯眼的地方。

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

BUT，首先，把搜索放在導航欄是用戶長期瀏覽網(wǎng)頁的習慣。 如果你的網(wǎng)站知名度不高，如果你的創(chuàng)新不能帶來更好的用戶體驗，你應該使用搜索框開關。

其次，我第一次用網(wǎng)易新聞的時候，真的找了一個搜索框找了半天。 后來發(fā)現(xiàn)知乎居然有個問答“為什么網(wǎng)易首頁沒有搜索框？”

2. 欄目相關提示

幾乎所有的網(wǎng)頁設計師都明白分欄的重要性，但在這里我想提醒一些關于分欄的小細節(jié)。

反饋是用戶體驗的核心要素之一。 敲桌子，桌子響，躺在床上床塌。 我們在生活中已經(jīng)習慣了反饋，以至于在設計網(wǎng)頁時忘記了反饋的存在。

《DON'T MAKE ME THINK》一書說，tab 是制作導航器的絕佳反饋創(chuàng)意。 用戶點擊的標簽頁位于其他標簽頁之前。 這種模式比簡單的加粗和改變字體顏色更有趣，更像是在模仿我們閱讀和翻頁的狀態(tài)，但后者可以容納更多的信息。

虎嗅網(wǎng)頂部導航欄上的小紅點很有意思。 鼠標點擊后就不會再出現(xiàn)了，類似于微信消息提醒上的小紅點。 引導用戶，及時反饋。

子菜單太長怎么辦？ 澎湃新聞的垂直導航不錯

二是強調導航欄。 下面的新聞網(wǎng)站做得很好。 下圖右側的“NEWS”提示用戶所在的子頁面，幫助用戶識別位置，加強導航欄的印象，彌補右側過多留白的不足。

3.給用戶選擇的空間

如果你做的是信息服務網(wǎng)站，為用戶創(chuàng)造個性化的內容，可以獲得用戶體驗分。

BBS設立的“不喜歡請點擊”小窗口，正試圖提供這樣的服務。

4. 壞的開始比好的開始好嗎？

這無疑是錯誤的，但漂亮的底部導航欄也是必須的。 澎湃網(wǎng)站的“網(wǎng)站底部難以觸及”讓人有些擔憂。

（視頻大小為2.4M，請放心食用~）

只要網(wǎng)速快，就永遠不會點擊“聯(lián)系我們”欄目，因為網(wǎng)站底部會隨著新消息下移。

這并不是說網(wǎng)頁底部導航最好是浮動的，我看到的大部分網(wǎng)站還是嵌入式的。 但是如果像澎湃新聞一樣首頁內容太多，刷了很多次都刷不完，那就得想辦法了，比如放在右邊。 因為畢竟一般網(wǎng)頁的底部都有招聘和商務合作的聯(lián)系方式。

總結

本文主要描述良好用戶體驗的細節(jié)，但只要細心觀察，其實在新聞網(wǎng)站上也能看到分屏、分頁等各種潮流設計。

一般來說，網(wǎng)站設計感的實現(xiàn)需要優(yōu)質炫酷的圖片作為支撐，而新聞網(wǎng)站既沒有炫酷的圖片，也沒有大量的文字。 因此，一個新聞網(wǎng)站要想好看，用戶體驗好，就需要更加用心的頁面布局。 這就是為什么我建議從新聞網(wǎng)站學習設計。

回顧：要獲得良好的網(wǎng)頁設計，您需要：

1.讓用戶安心的搜索框

2. 導航欄提示

3.給用戶選擇的空間

4.注意結尾

封面設計：Paolo

看完本文，小編再送上一篇干貨《馬上上手！新手五分鐘設計指南（干貨超多）》，戳原文即可閱讀~