看到這篇文章題目的你不知道有沒有被嚇一跳：什么？跟著新聞網(wǎng)站學(xué)網(wǎng)頁設(shè)計(jì)？

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

BBC的條塊狀搜索框

 

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

 

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

 

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

 

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

 

36氪下拉彈出式搜索框

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

子菜單太長怎么辦，澎湃新聞垂直導(dǎo)航就不錯(cuò)

 

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

 

3.給用戶選擇的空間

 

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

 

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

 

4.好頭不如爛尾？

 

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

 

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

 

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

 

總結(jié)

 

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

 

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