如果你看了这篇文章的标题,你可能会感到惊讶:什么? 关注新闻网站学习网页设计?
在很多设计师眼里,新闻网站简直就是乏味、冗长、乏味的代名词,与炫酷夺目的设计毫无关系。 那么小编提醒你,你的新闻网站概念落后十年了。
与许多设计华而不实的网站相比,新闻网站的优秀之处在于规范,不浮夸,但也不乏令人惊叹的用户体验。 科技永远为人服务。 无论您的网页设计多么复杂和引人注目,如果缺乏实用性甚至妨碍正常功能,仍然无法留住用户。
新闻站点的设计方式使新手设计者更容易理解用户体验的含义(因为新闻站点的优点和缺点都清楚地暴露出来),并且更容易上手。 下面我们一起来看看吧。
1、搜索框带来的安心与专业
导航栏对于每个网站来说都是非常重要的。 我们在做导航栏的时候,常常会纠结到底是水平排列还是垂直排列,是否可伸缩,是否应该浮动,如何塞进更多的栏目和目录,但往往会忘记一个关键——搜索框。
FOX 选择经典的条形搜索框
搜索框承担了网站的搜索功能。 当用户浏览你的网站并被吸引时,他决定进一步搜索自己感兴趣的内容,却失望地发现根本没有搜索框。 用户决定离开。
如果他有幸记住了你的网站,他就会对别人说,“哎呀,那个网站只能给我找到他要的,根本找不到我要的”。
这个时候,我们可以看到新闻网站是多么重视搜索框的放置,甚至有的时候,他们在用户体验上有很大的创新。
BBC的条形搜索框
搜索框的重要特征是醒目、可靠和流畅。 最好与网站的背景色和其他元素的颜色不同,稍微偏离导航栏参考线。 理想的搜索框是一个又大又粗的长块,但致命的缺点是占用了其他信息空间。 一些网站选择搜索框开关。
ABC新闻网搜索框切换
不过Al和36氪开关的价格明显更高,这种下拉弹出的方式或许能带来更好的用户体验。 打开后,整行内容都是一个搜索框,醒目醒目,用户不用担心打字过多搜索框显示不全。 同时,这种排版方式工整流畅,视觉体验极佳。
(视频大小为1.3M,请放心食用~)
36氪下拉弹出搜索框
你也可能会说搜索框没那么重要,网易爸爸的搜索框放在了页尾一个很不显眼的地方。
网易爸爸灰常隐藏的搜索框
BUT,首先,把搜索放在导航栏是用户长期浏览网页的习惯。 如果你的网站知名度不高,如果你的创新不能带来更好的用户体验,你应该使用搜索框开关。
其次,我第一次用网易新闻的时候,真的找了一个搜索框找了半天。 后来发现知乎居然有个问答“为什么网易首页没有搜索框?”
2. 栏目相关提示
几乎所有的网页设计师都明白分栏的重要性,但在这里我想提醒一些关于分栏的小细节。
反馈是用户体验的核心要素之一。 敲桌子,桌子响,躺在床上床塌。 我们在生活中已经习惯了反馈,以至于在设计网页时忘记了反馈的存在。
《DON'T MAKE ME THINK》一书说,tab 是制作导航器的绝佳反馈创意。 用户点击的标签页位于其他标签页之前。 这种模式比简单的加粗和改变字体颜色更有趣,更像是在模仿我们阅读和翻页的状态,但后者可以容纳更多的信息。
虎嗅网顶部导航栏上的小红点很有意思。 鼠标点击后就不会再出现了,类似于微信消息提醒上的小红点。 引导用户,及时反馈。
子菜单太长怎么办? 澎湃新闻的垂直导航不错
二是强调导航栏。 下面的新闻网站做得很好。 下图右侧的“NEWS”提示用户所在的子页面,帮助用户识别位置,加强导航栏的印象,弥补右侧过多留白的不足。
3.给用户选择的空间
如果你做的是信息服务网站,为用户创造个性化的内容,可以获得用户体验分。
BBS设立的“不喜欢请点击”小窗口,正试图提供这样的服务。
4. 坏的开始比好的开始好吗?
这无疑是错误的,但漂亮的底部导航栏也是必须的。 澎湃网站的“网站底部难以触及”让人有些担忧。
(视频大小为2.4M,请放心食用~)
只要网速快,就永远不会点击“联系我们”栏目,因为网站底部会随着新消息下移。
这并不是说网页底部导航最好是浮动的,我看到的大部分网站还是嵌入式的。 但是如果像澎湃新闻一样首页内容太多,刷了很多次都刷不完,那就得想办法了,比如放在右边。 因为毕竟一般网页的底部都有招聘和商务合作的联系方式。
总结
本文主要描述良好用户体验的细节,但只要细心观察,其实在新闻网站上也能看到分屏、分页等各种潮流设计。
一般来说,网站设计感的实现需要优质炫酷的图片作为支撑,而新闻网站既没有炫酷的图片,也没有大量的文字。 因此,一个新闻网站要想好看,用户体验好,就需要更加用心的页面布局。 这就是为什么我建议从新闻网站学习设计。
回顾:要获得良好的网页设计,您需要:
1.让用户安心的搜索框
2. 导航栏提示
3.给用户选择的空间
4.注意结尾
封面设计:Paolo
看完本文,小编再送上一篇干货《马上上手!新手五分钟设计指南(干货超多)》,戳原文即可阅读~