这5种成熟的导航设计模式,可以为用户体验加分

这5种成熟的导航设计模式,可以为用户体验加分,第1张

这5种成熟的导航设计模式,可以为用户体验加分

导航的愿景不变,但没有那么多导航形式能同时兼顾可用性和易用性,带来足够温暖的体验。可靠的导航创意需要帮助用户实现目标,找到内容,提升页面转化率。没有推理的导航对于用户体验来说是灾难性的。最间接的影响就是用户无法快速便捷的找到页面中的重要内容,直接影响网站的转化率和用户的留存率。

另一方面,在可用性优秀的UI世界里,它是从导航优秀的假设开始的。导航是用户从A端走到B端的主要向导。设计师不仅要确保路标足够清晰,还要让导航过程顺畅流畅。在整个想象过程中,导航想象应该占据一个不可避免的劣势层次,因为它不仅在所有网页的信息结构中起着深远的作用,而且在所有的体验想象中也起着重要的作用。在这种类型的想象阶段,导航的想象应该已经打磨的很清晰了,所需的想象素材已经收集完毕,保证在开发之初就能确定导航。

地平线上有很多导航创意,一些优秀的创意被反复验证。明天的文章就选出其中最突出的五个,供大家参考。

1。具有流畅动态效果的下推式导航菜单

子菜单是UI假设中最常见的假设元素。作为一个扩展性非常好的控件,在被触碰后正在扩展显示更多的选项和更多的内容。有很多不同风格的下拉菜单,在导航中也很常见。在很多传统的导航方式中,导航元素的下拉菜单需要用脸来触摸,但现在更多的设计师会选择光标悬停在导航元素上的时间,这样会让用户更加费力。

为了保证导航的整洁和清晰,目前网页上通常不会有太多的二级导航类别,只有4~6个选项,而下拉菜单则用于激活两级导航元素,从而减少空空间,使疑问级别更加清晰。

那种想象的形式,用户并不陌生,阅读起来也很方便。需要提供多层次、大范围选项的导航,它刚好可以应付。值得注意的是,当光标悬停触摸下拉菜单时,显示器的动态效果要足够精彩,降低用户打开的高耸感,这样体验会越来越好。

2、汉堡菜单+侧边栏

带有d出式侧边栏的汉堡菜单是iOS和Android平台上非常常见的导航思路。虽然没有数据来表达,但是汉堡菜单大战心照不宣隐藏的侧边栏导航,其实在出现率上还不如常见的隐藏导航,但是在体验上却有一个共同的劣势,让整个世界更复杂,更整洁,更少打扰。用户点击汉堡菜单,侧边栏导航从侧面滑出,用户可以选择他们想要面对面点击的选项。

汉堡的菜单和侧边栏的拆解特别适合呼应网页的思路,比如Android平台的Gmail,YouTube和脸书,都是遵循那个思路。

隐藏侧边栏导航让用户越来越关注世界上的次要内容,让世界变得更加整洁。虽然开启率没有导航那么含蓄,但是在很多情况下,隐藏的思路更符合实践的需要。

3。带有牢固悬挂的网络导航菜单

悬浮导航菜单正在越来越多的网页创意中呈现。当用户翻页并从后面阅读时,悬浮导航悬浮在页面顶部不动。当用户阅读时,它们可以被连续看到,用户可以面对导航跳转而不用翻到顶部。

如今,浮动而稳固的导航菜单已经成为一种普遍的导航思想。电商和产品网站往往选择那个导航思路,方便用户快速跳转。那种导航思路的缺点是快捷方便,用户对网站不同页面之间跳转的需求要大得多,所以那种思路可以省去很多麻烦。根据Akamaivs.Gomez.com的研究,79%的在线购物者正遭受糟糕的阅读和导航体验,但他们永远不会回来。由此可见,便捷导航是多么重要。

4。深度定制的超级导航菜单

这里的深度定制导航菜单更接近于选项卡的概念。它们主要分为两个级别,不同的选项位于不同的选项卡旁边。与下拉菜单相比,选项卡中加载的导航选项更直观,更容易点击和选择。有些选项非常接近,包括文字和解释,方便用户停止选择。

超级导航菜单边上的子选项尺寸较大,视觉思路足够凸,可见,容易让用户出错。

超级导航菜单中包含的导航项相对来说越来越可视化,下拉菜单的导航和第一个差不多。当光标悬停在选项卡上时,上述选项会主动出现。根据NNGroup的研究,导航菜单越大越受欢迎。

那种导航菜单适合辅助功能要求下的网页,视觉停滞的高级用户更友好。在另一个圈子里,那种导航为设计师提供了更多空的空间。

5。回送卡网格导航

echo的思路就不用赘述了,但是卡格图案导航无疑是从移动端开始流行的导航形式。在那里,导航选项被设计成小卡片,放在导航栏的网格旁边。当屏幕尺寸改变时,导航中的小卡片会随着自适应网格从头开始排列,以匹配所有计划。那种想法不仅仅是视觉上的,还可以根据主题停止深度设置。

那种导航端,每个选项既方便光标打在面上,也方便移动端,越来越适合脚导。能够导航是跨平台呼应假设的最终选择。如今,许多网站都采用了这种导航理念,比如Pinterest和著名音乐服务Spotify。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/779020.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-04
下一篇 2022-05-04

发表评论

登录后才能评论

评论列表(0条)

保存