网站导航趋势:16种UI模式完全解构

发布时间:2019-08-30 09:36:09 阅读:55

每个网站都需要提供快速定位(我在哪里?)和清晰的导航(我应该去哪里?)。

在这篇文章中,我们将研究经得起时间考验的16种Web导航UI模式:

  • 搜索
  • 通知
  • 跳到部分
  • “粘性”固定导航
  • 垂直导航
  • 滑道(抽屉)
  • 约夏克布丁
  • 情态动词
  • 号召行动
  • 特色内容
  • 建议
  • 相关内容
  • 历史/最近浏览
  • 下一步
  • 演练和教练标记
  • 一切的链接

我们将探索大量示例,最佳实践和适当的方案。

让我们开始!

1.搜索

Facebook的

image00

YouTube的

image50

纽约时报

image32

UXPin

image36

问题

用户正在寻找特定的东西,不知道它在哪里或想要在那里直接路线。

最基本和最流行的模式之一,包括搜索选项是导航必需品。通常是右上角的搜索栏,此功能可查找站点内的相关内容,从而节省用户到达目的地的时间。

提示

  • 如果您的空间紧张,请使用可扩展的输入栏和放大镜图标。纽约时报,当用户点击顶部的图标,甚至有一个下拉搜索栏。
  • 您拥有的内容越多,您希望显示搜索功能的次数就越突出。例如,内容丰富的FacebookYouTube突破了右上角的标准,并在左上角和上左中心进行搜索。
  • 自动完成模式进一步节省了用户时间,甚至可以建议内容或正确的措辞。
  • 如果用户可以搜索多个条件,请使用输入提示模式进行解释(即Facebook)。

2.通知

推特

image15

LinkedIn

image19

Google Apps

image03

Quora的

image14

问题

用户不知道其他人何时与他们交互,或者何时有新内容可用。

社交媒体网站已将通知推广为用户了解其他人何时与其进行交互的方式。但是,它已经传播到网站和网络应用程序,并提供新内容,产品,评论或销售的通知。当然,用户选择他们想要通知的项目。

Google实际上会在多个产品中集成通知。这意味着当用户登录Gmail时,他们可以快速收到检查是否有人回复了他们在YouTube上的评论。

提示

  • 最普遍接受的通知图标是铃声。
  • 通知几乎总是用适当图标旁边的彩色圆圈数字标记。选择一种突出的颜色,因为通知的目的是吸引人们对新材料的关注。
  • 偶尔的产品更新很好,但不要滥用带有太多自我推销新闻的通知。这削弱了对有价值新闻的影响。
  • 如果用户尚未登录很长时间(例如,一周或更长时间),请考虑添加快速通知摘要模式以突出显示重要事件。

3.跳转到Section

维基百科

image58

tumblr

image47

易趣

图像21

雨果

image35

问题

浏览或返回页面上的某些部分涉及太多滚动。

无论是文本链接还是图标,跳转选项都可以节省用户时间。作为一个可选功能,这不应该引起主要文本的过多关注,但它肯定有助于为长滚动网站提供锚点

对于基于文本的长内容,添加指向目录的链接是一种快速解决方案。这是一个简单实用的解决方案,已经有一段时间以维基百科作为最着名的例子。

但随着无限滚动网站的日益普及,尤其是用户生成的内容,跳转到页面顶部的选项已成为一种模式。这使用户可以回到熟悉的地方,以防他们迷路或想要访问另一页。

提示

  • 返回顶部按钮通常不会使用,因为人们可以快速滚动,但它可能对无限滚动网站有帮助。出于这个原因,该选项应该是小而不引人注目的,如TumblreBay的标签,“卡在”侧滚动条上。

我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"网站导航趋势:16种UI模式完全解构",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560