為(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è)设计？