400-844-5354
如果你看了这篇文章的标题，你可能会感到惊讶：什么？ 关注新闻网站学习网页设计？
在很多设计师眼里，新闻网站简直就是乏味、冗长、乏味的代名词，与炫酷夺目的设计毫无关系。 那么小编提醒你，你的新闻网站概念落后十年了。
与许多设计华而不实的网站相比，新闻网站的优秀之处在于规范，不浮夸，但也不乏令人惊叹的用户体验。 科技永远为人服务。 无论您的网页设计多么复杂和引人注目，如果缺乏实用性甚至妨碍正常功能，仍然无法留住用户。
新闻站点的设计方式使新手设计者更容易理解用户体验的含义（因为新闻站点的优点和缺点都清楚地暴露出来），并且更容易上手。 下面我们一起来看看吧。
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
看完本文，小编再送上一篇干货《马上上手！新手五分钟设计指南（干货超多）》，戳原文即可阅读~
2024-02-09
2023-11-27
2023-03-24
2023-06-18
2023-05-27
2024-02-05
2023-05-14
2024-04-01
2023-07-30
2024-07-05
返回列表
返回顶部