网站建设中如何设计响应式网站菜单,响应式网站菜单如何设计

汉堡式下来菜单,它在网页设计中最常见的模式之一.

我们已经到了一个地步,大部分(如果不是全部)网站应响应。这是整个设计界认同的一个标准,它显示了。

任何企业谁是认真对待他们的在线状态将已经推出了响应的网站。如果您的网站还没有响应,这是公平地说,你有一些追赶工作要做。

在这个新的世界作出响应,许多设计模式和“最佳做法”已经出现。

设计模式可真棒。他们不停的接口是一致的。他们还可以防止用户不必每次使用新的东西的时间重新学习一切。

这就是说,它不是所有的很棒。

有一个特别的图案一直缠着我了一会儿……的“汉堡包菜单’。机会是,如果你正在读这篇文章,你确切地知道我在说什么。

下面是它如何工作的。

当用户的屏幕不够宽,无法显示导航栏,它是从视图中隐藏。说明什么,而不是一个不那么好吃看的图标,通常是在右上角。这是臭名昭著的汉堡包。

的图标的外观可以改变,但最常见的表现是三个水平条。

点击图标展开的导航项目,一般在弹出或下拉的形式。

响应式网站建设

响应式网站建设

我的问题是不是与该图标,甚至交互本身。我的问题是它如何懒洋洋地使用。

设计师似乎回落至汉堡作为一个“最佳实践”,没有首先考虑更有效的解决方案。

与汉堡菜单中的问题

这是一个障碍内容发现

这是我用的方法主要问题。谁在您的网站首次到达用户应该能够立即扫描你的导航的内容。其展出的资产净值的项目马上可以帮助用户了解它的全部。这给他们的网站是否适合他们较早的想法。

如果您的导航的全部内容被隐藏的,它需要用户有意识的努力,看看里面有什么。人们有注意力不集中,所以这可能是一个很大的风险。

在“5秒规则”是用户体验设计师的重要指导方针。这个想法是,到达您的网站后,用户将决定是否他们已经取得五秒钟内的正确选择。隐藏导航的全部内容可以冒失去的人。第一印象很重要,你的导航构成的一部分。

它鼓励不良信息架构

移动力我们的限制作出艰难的电话。有足够的空间,只显示在资产净值的几件事情,我们需要思考什么是真正重要的。

一个汉堡包菜单中删除此约束,打开闸门坏IA。

它变得太诱人加上“还有一件事”,因为从技术上没有什么阻止我们。随着一个汉堡包菜单下隐藏的导航,它可以制成只要你想长。有没有动力去整合或优先级。

这通常会导致导航失控 – 无论是在移动和桌面。

它需要一个符号不是每个人都能理解的知识

尽管它是如何得到普遍,许多互联网用户仍然不知道什么汉堡包符号实际上意味着。

在我们的UX设计气泡我们常常把我们的知识是理所当然的。如果用户不知道这是什么意思的符号,你可以有你的手可用性问题。

它减慢导航处理

使用汉堡包导航意味着额外的自来水是需要解决您的网站。

它可能只有几秒钟,但如果你创建一个服务,人们有可能使用导航几次它可能是一个问题。社交媒体网站,例如,将涉及人做同样的动作多次。通过具有反复使用一个汉堡包的菜单,你可能是造成不必要的不便。

我们什么时候发胖汉堡包?

早在旧天,为小屏幕广大设计是本机应用程序和单独的移动网站。

这些定制的移动体验设计师被迫设计者优先考虑。我们将剥离出非必要的功能,并突出显示重要特征。我们希望让更容易获得常用的功能和内容。

这改变有求必应网页设计的出现。

响应网站(才怪)要求设计师给移动和桌面游客提供一致的体验。这意味着移动体验不再是“缩减”。任何游客可以在桌面上做的,他们也需要在手机上做的。

这给了我们一个如何适应所有这些桌面的选择如此小的屏幕上的挑战。

而不是从移动第一视角重新考虑IA和导航,许多网站所有者,而不只是压扁同一桌面导航到一个汉堡包菜单。

这发生常常就是这样的一些不只是作为一般的做法可见,但“最佳实践”。

解决办法:首先计划您的导航手机。

当接近您的信息架构,想想它是如何去看看在小屏幕上。

  • 可能部分得到巩固?
  • 难道章节标题缩短?
  • 难道这些部分真正需要作为主要的导航项目?
网站制作

网站制作

在一个理想的世界中,你的主要导航应该是立即可见和移动即时访问。

让您的导航到移动屏幕上显示整齐涉及保持你的IA非常精简。在某些情况下,这并不总是切合实际。有些网站实在是太复杂,用户需要太苛刻。

为此,这是正常的隐藏某些次要的选择,如果他们真的不适合。

上面的很好的例子,说明选择优先级有多高,很容易看到,但更多的次要行为都隐藏在一个额外的菜单。该Gaurdian和英国广播公司尤其是做这方面的一个很好的工作。

一种折衷:该“贪婪”的导航技术。

一个伟大的妥协是“贪婪的”导航。这涉及的是’溢出’的项目部分使用一个汉堡包菜单。

这意味着,在任何特定的屏幕尺寸,我们显示的导航项目有针对的空间。其余被隐藏,可以通过点击一个“更多”图标显示出来。

该技术引入一定程度的优先级,因为更重要的导航项目仍然是立即可见。在移动。

网站制作

网站制作

我选择了使用上只需UX设计一个贪婪的导航。这是这样,“关于”和“工作”联系是很容易接触到大多数移动游客。更次要“博客”和“接触”链接隐藏在一个单独的菜单。

综上所述…

我不相信一个传统的汉堡包菜单“最佳实践”。我认为这只是广为接受的懒惰。

没有什么不对的交互本身的,但这么多的更好的解决方案通常是可用。挑战自我,创造一个移动第一导航,你会很快看到在所有设备上的好处。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/259033.html

(0)
上一篇 2022年5月21日
下一篇 2022年5月21日

相关推荐

发表回复

登录后才能评论