在本文中,我们讨论的重要性,导航设计模式使用的例子从一些最热门的网站和web应用程序。
一旦人们开始使用你的网站或web应用程序,他们需要知道去哪里以及如何在任何时候到达那里。如果他们不能浏览您的应用程序是很容易的,你很快就会失去他们。因此,在您的web应用程序设计有效的导航是至关重要的。
概述的模式
这是我们详细的设计模式的概述在这篇文章:
1.跳转到节
2.单页面的web应用程序
3.建议
4.相关内容
5.下一个步骤
6.历史/最近查看的
7.特色内容
8.无限卷动
9.走查和教练标志
10.溢出菜单
11.变形控制
12.“粘性”固定导航
13.垂直导航
14.弹窗
15.滑盖式、侧栏和抽屉
16.所有的链接
1。跳转到节
例子:pinterest。
问题:用户想要跳过整个部分的web应用程序或内容。
解决方案:创建一个快捷方式按钮或热点,需要用户直接向某个web应用程序的一部分,通常在开始或者结束,但更常见的其他特定点。
例如,用户可以点击一个标签或按钮滚动到页面的顶部无论他们在哪里。这也方便特别是如果你实现无限滚动模式(见下文),页面可以真的只要新内容加载一个接一个。
如果用户想要访问控制或信息仅在页面的顶部可见,返回后几页的滚动可以是一场噩梦。pinterest解决这个用户头痛通过展示一种低调的“jump-to-top”按钮,立即卷轴用户。
2。单页面的web应用程序
例如:gmail。
问题:用户想要一个中心位置视图或采取行动在大多数或所有内容,所以他们不需要浪费时间页面之间导航。
解决方案:使用现代web开发技术来构建一个单页面应用程序,不需要重新加载本身作为用户浏览。这种模式更多的是一个完整的重组网络如何工作,而不是你可以侵入你的应用。在某种程度上,“页面在一个单页面应用程序并不是一个真正的传统web意义上,而是更多的一个特定的数据视图。单页面的web应用程序(使用ajax),异步加载,他们立即执行用户无需等待之间的单独页面加载操作。
gmail是一个很好的例子,一个单页面应用程序集成了多个操作到一个“页面”。单页设计的趋势是这个ui的less-hardcore实现模式,所有内容可以在同一页面访问。这使得浏览更快,反应敏捷,桌面和web应用程序之间的界限变得模糊。
为web应用程序像spotify,单页面应用程序模式就变得非常重要了,当你考虑到用户可能在后台播放音乐,还同时浏览更多的音乐,有一个单页面应用程序不需要重新加载页面,所以音乐可以继续玩。
一个考虑你需要在实现一个单页面应用程序的url结构。因为内容是使用javascript动态加载,url可以成为无用的和访问一个特定的视图可以成为不可能如果没有做对。gmail和twitter等网络应用克服了显式地为每个视图生成惟一的url,也解决了浏览器的后退按钮的问题变得不可用。
3。建议
例子:spotify。
问题:用户想知道哪些内容视图。
建议解决方案:展示内容和建议在不同的点来帮助用户浏览内容。使用信息从用户的概要文件的偏好或过去的交互应用,facebook、eventbrite,spotify和yelp和其他很多为他们的用户生成定制的建议来帮助他们发现新的和相关内容或连接。
这些建议的形式可以是“受欢迎的”和“最近发布”项目。facebook提供了“相关”页面中的基于用户交互的文章时间以及更专门的建议部分,用户可以发现新的页面和人。的内容提供给用户可以无休止的特别是在社交网络应用程序功能用户生成内容。正如2014年web ui设计模式所讨论的,提供一个健壮的推荐引擎在ui中可以是一个伟大的方式来帮助他们发现新的内容。
4。相关内容
例如:纽约时报。
问题:用户想要浏览类似内容如果当前内容不正是他们寻找或他们只是想要更多的。
解决方案:显示类似或相关的内容,以帮助用户找到更多类似的项目他们正在观看。建议(上图),这是为一个基本的web应用程序的ui模式,功能用户生成内容,除了而不是裁剪建议基于用户的偏好或以前的活动,相关内容更多的是展示相关项目基于分类和标记。
亚马逊,时间和纽约时报网站的好例子显示项目和当前正在查看类似的故事。媒介需要这一步,让读者通过添加链接显示相关内容的进一步阅读的文章部分。
5。下一个步骤
例子:quora。
问题:用户想知道下一步要完成一个任务后。
解决方案:给用户一个明确的步骤列表,他们可以丰富他们的经验。quora例如创建一个待办事项列表为用户来完成他们的配置文件。linkedin相同的列表展示了部分用户可以添加到他们的个人资料,配对的完整性计模式为用户提供一个激励。
最复杂的web应用程序有多个用户流,所以为用户提供一个待办事项清单可以成为一个伟大的方式引导他们前进。另一个模式可以配对与相关内容;媒介这是否好,通过展示的另一篇文章的摘要,当用户的。这让用户参与并沉浸在你的ui。
6。历史/最近查看的
例如:亚马逊。
问题:用户想要回忆起他们与持久。
解决方案:让用户接在他们最后离开的活动。例如,亚马逊跟踪用户的浏览记录和显示最近查看的内容,这样他们就可以回到他们容易如果需要。许多web应用程序也跟踪用户一直在做什么,facebook的时间表是最终的例子。不仅用户的时间表记录帖子和照片上传,它也记录与其他第三方页面和web应用程序之间的互动交互式历史上像spotify用户可在需要时参考。
谷歌搜索放音乐和spotify跟踪最近播放的歌曲。这种模式帮助用户跟踪的内容他们共事过,也能作为一个书签的方法以后的事情要做。
7。特色内容
例子:airbnb。
问题:用户想知道什么样的内容可以创建应用程序。
解决方案:功能具体内容放在前台的用户没有它迷失在通常的混合与时间相关的内容。这些内容可以支付,流行,新的,或其他一些重要的变量。
特色内容提供给用户的可能性,帮助他们了解这个平台可以完成的事情以及其他用户正在使用它。等网站airbnb,etsy和flickr在首页显示随机内容,帮助用户探索网站,而无需事先作出的承诺,以及鼓励现有用户,帮助他们实现更大的观众。
另一方面,它也可以帮助特定的内容获得牵引力,使它特别重要。支付或“特色”等内容可以标记为澄清的期望。
8。无限卷动
例子:pinterest。
问题:用户想要浏览所有内容。
解决方案:自动加载下一组或页面的内容,当用户到达当前页面的底部,创造无限滚动页面的效果。这种方式自动加载新内容后,用户不需要等待点击“下一页”的链接。无限滚动效果最好,当有很多内容显示,与大多数像facebook这样的社交媒体巨头一样,twitter,pinterest和tumblr等等。
然而在其伟大的浏览内容,尤其是多媒体画廊,两个基本的问题是,用户可能会迷失方向,失去的地方。如果他们想跳到一个特定的点或书签回来后,无限卷动会导致一些问题。facebook在这个工作在浏览一个时间表通过创建一个分页/无限卷动混合,可以跳转到一个特定的月或一年。pinterest滚动到高级模式,集成与一个小按钮,允许用户返回页面的开始。
9。走查和教练标志
例子:松弛。
问题:用户想要知道如何使用不同的应用程序的功能。
解决方案:设计一个预排或教程演示了每个函数是如何工作的。很多web应用程序已经开始使用这种技术来显示用户在刚推出时,有两种基本方法。
一些web应用程序,比如松去覆盖的路线指示,强调用户界面的重要部分,“教练标志”来解释他们所做的事情。松弛的需要被集成到下一个层次的事情聊天机器人,帮助用户建立个人资料。这很有道理,因为松弛是一个聊天应用程序,和“slackbot”走的用户通过填写个人资料信息,如电话号码和显示名称的谈话。
另外,tumblr提出了一种预排,帮助用户了解。这个介绍也是一个伟大的时间来收集重要信息超越简单的注册,很像一个安装向导。这种模式的重要性再强调也不为过,任何应用程序并不是立即直觉,因为更多的用户了解你的产品,他们将会有更多的理由来回来。
10。溢出菜单
例子:spotify。
问题:用户想要快速访问附加选项或他们可以执行的行动。
解决方案:隐藏额外的选项和按钮在一个可扩展的菜单,这样他们不杂乱的主要接口。facebook和谷歌都使用“溢出菜单”保持非常干净的用户界面在他们的web应用程序最重要的辅助选项通过隐藏在一个可扩展的菜单。
这也可以用来显示最重要的