为什么要跟着新闻网站学网页设计？

看到这篇文章标题的你不知道有没有被吓一跳：啥？跟着新闻网站学页面规划？🤔🤔🤔
在很多规划师看来，新闻网站简直即是无趣、冗长、单调的代名词，跟炫酷招眼的规划一点边儿都不沾好吗。那小编可就要提示你喽，你对新闻网站的观念但是落后了十年。

和很多华而不实的规划网站比较，新闻网站的优异的地方就在于规范，没有虚浮的炫技，却不乏适当冷艳的用户体会。技能永远是为人效劳的，不管你的页面规划的多么复杂招眼，假如缺少实用性乃至阻止了正常功用的发挥，照旧无法留住用户。



新闻网站的规划方法更利于新手规划师了解用户体会的含义（由于不管是长处仍是缺陷，新闻网站都露出得很显着），也更简单上手。下面咱们一同看看吧。

1.查找框带来的定心与专业

导航栏对于每个网站都是至关首要的，咱们在制造导航栏时通常被横向摆放仍是竖向摆放、是不是可弹性、是不是要浮动、怎么塞下更多的节目目录搞得焦头烂额，但通常忘记了一个要害——查找框。


FOX挑选经典的条块状查找框

查找框承当了网站的查找功用，当一个用户阅读你的网站并被吸引，他决议进一步寻觅自个感兴趣的内容，却绝望的发现，底子找不到查找框。用户就决议走了。

假如有幸他还记得你的网站的话，他会给别人说一句，“哦，那个网站只能找到他想给我的内容，底子找不到我想要的东西。”

这时分，咱们可以看看新闻网站是怎么注重查找框摆放的，乃至一些时分，他们还呈现了十分棒的用户体会立异。


BBC的条块状查找框

查找框的首要特色即是夺目、牢靠、流通，最佳和网站底色、别的元素色彩有所区别，稍微违背导航栏参阅线。理想化的查找框是那种大大的豪气长条块，丧命缺陷是挤占了别的信息空间。一些网站挑选了查找框开关。



ABC新闻网的查找框开关

但 Al Jazeera English和36氪的开关明显更阔气，这种下拉弹出的方法也许会带来非常好的用户体会。翻开后一整行的内容都是查找框，做到了夺目，用户更无需忧虑打字过多在查找框内显现不完整。一起，这种排版方法整齐流通，视觉体会很棒。

（视频巨细为1.3M 请定心食用～）




36氪下拉弹出式查找框

你也许还会说，查找框没那么首要，网易父亲的查找框就放在了页面最终十分不显着的地方。


网易父亲灰常荫蔽的查找框

BUT，首先，查找放到导航栏是用户长时间形成的页面阅读习气，假如你的网站并不闻名、假如你的立异并不能带来非常好的用户体会，仍是选用查找框开关吧。

其次，我首次用网易新闻时，真的找了很久的查找框，后来发现知乎上竟然真还有“网易首页为啥没有查找框？ ”这个问答。

2.与节目有关的提示

简直一切的页面规划师都了解节目的首要性，但在这儿小编想要提示几个对于节目的小细节。

反应是用户体会的中心要素之一，你敲桌子桌子会响、躺到床上床会塌陷，咱们对日子中的反应是如此习以为常，以至于在规划页面时忘记了反应的存在。

《DON’T MAKE ME THINK》一书中说过标签分割器是一种制造导航器的优异反应思路，用户单击的标签页坐落别的标签页之前。这种模式就比单纯的字体加粗、改动字体色彩更具趣味性，也更像是仿照咱们读书翻页的状况，但后者可以包容更多的信息量。



虎嗅网顶部导航栏上的小红点很有意思，鼠标点往后就不会再呈现，类似于微信音讯提示的小红点。引导用户，又能及时给出反应。



子菜单太长怎么办，汹涌新闻笔直导航就不错



其次是着重导航栏，下面这个新闻网站就做的不错。下图右侧的“NEWS”提示了用户地点的子页面，帮助用户分辩方位、强化了导航栏的形象，又弥补了右侧留白过多的缺憾。



3.给用户挑选的空间

假如你做的是信息效劳类网站，为用户创立个性化内容可以获得用户体会加分。
BBS建立的“不喜欢就点叉”小窗口企图在供给这么的效劳。




4.好头不如烂尾？

这一点无疑是错误，但一个漂亮的页面底部导航栏也是必备的。汹涌网站这种“难以触及的网站底部”可就有点扎心了。




只需网速快，你永远点不到“联络咱们”那一栏，由于网站底部会跟着新刷出的新闻下移。

这并不是说最佳把页面底部导航也该成浮动式，我看到大多数的网站仍是嵌入式。但假如像汹涌新闻这么首页内容过多,滑动很屡次也无法究竟的话，就要想想新的办法了，比如放到右边。由于毕竟通常页面底部都留有招聘和商业协作联络方法。

总结

这篇文章首要叙述了有关杰出用户体会的细节，但只需仔细调查，其实在新闻网站，你也能看到分屏式、标签式等各种潮流规划。





通常来说，网站规划感的完成需求优质酷炫的图像作为支持，但新闻网站既没有酷炫的图像，又多了很多文字。因此新闻网站想要美观、具有杰出的用户体会，就需求更精心的页面布置。这也是我引荐跟着新闻网站学规划的因素。

复习一下：优异的页面规划，你需求：
1.令用户感到定心的查找框
2.导航栏的小窍门
3.给用户挑选的空间
4.注重结束

封面规划：Paolo Beghini