在本文中, 我们讨论的重要性, 导航设计模式使用的例子从一些最热门的网站和 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 结构。因为内容是使用 script 动态载入,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 应用程序最重要的辅助选项通过隐藏在一个可扩充套件的选单。
这也可以用来显示最重要的行动的参与。例如 Pinterest 保持在 Facebook 上分享按钮可见帮助加快一个共同的和可取的多用户操作在每个 “销” 。或者, 一个溢位选单可以包含额外的选单项或行动, 逐步新增到多用户界面中。
11 。变形控制
例子:Pinterest 。
问题: 多用户想要执行不同类型的操作, 但有限的屏幕显示所有这些控制元件。
解决方案: 更换按钮, 屏幕上的控制元件替代功能。根据多用户目前正在做什么,UI 可以完全替代一个元素与另一个, 例如 “做” 和 “撤销” 或 “新增” 和 “删除” 。 “这是有意义的, 当交流行为以某种方式相关。 Pinterest 和 Facebook 使用相同的按 钮 “喜欢”/“不像” 来节省空间并向多用户显示当前状态。这个 UI 设计模式节省了房地产、毁灭任何行动快速、清洁, 是一个整体的解决方案。
12 。 “粘性” 固定导航
例子:Houzz 。
问题: 多用户想要访问选单随时在 web 页面。
解决方案: 顶部, 一面, 或底部导航保持滚动页面时。在某些情况下, 从小节标题也会固定在滚动和替换或新增到现有的固定导航.
主要的导航栏为 Google +和 Pinterest 坚持页面的顶部, 允许多用户快速访问这些选单项和过滤器时需要。搭配无限滚动模式时, 粘性的导航选单可以极大的方便多用户滚动过去超过第一页的内容。
13 。垂直导航
例子:Spotify 。
问题: 多用户需要一种方法在应用程序的不同部分之间进行导航, 但有限的空间来显示这些信息。
解决方案: 多用户界面的重要部分可以给出一个列表, 多用户可以滚动得到他们想要的东西。这也让 UI 的页首和页尾自由更多的 “通用” 导航、酒吧等行动。传统上, 大多数导航模式水平制表符的形式或按钮。垂直导航模式已经成为一个重要的进化导航设计来处理多用户生成内容多用户时间表和无限滚动内容。
14 。弹窗
例如:Facebook 。
问题: 多用户想要检视相关信息不丢失他们当前的 UI 。
解决方案: 在弹窗显示重要通知和附加信息。这个 UI 模式的优势提供一个轻量级的和直接的方法检视附加信息或采取特定的行动, 但他们没有把多用户的当前活动。
Pinterest Fitocracy 使用模态弹窗快速行动, 迅速和 Facebook 使用弹窗显示活动栏的内容片段。弹出视窗的 UI 模式对于这样的行为是很重要的, 因为他们正在进行这样的资料和多用户总是知道这些控制元件的应用。
内容在后台仍然可见, 多用户可以调整排序选项或更改字型大小, 而不必去之间来回的观点——这一切都发生在这里。弹窗和模态视窗还可以用来显示重要通知或通知, 要得到多用户的关注, 因为认为他们需要一个水龙头或刷卡。
15 。滑盖式、侧栏和抽屉
例如: 纽约时报。
问题: 多用户需要一种方法来导航应用程序不同部分之间的每个部分中而不被打扰。
解决方案: 第二个应用程序的部分, 如导航、聊天、设置、多用户资料等。藏在一个可折叠的面板是隐藏在主要部分不需要。当访问时, 通常将主要部分放在一边或幻灯片。由于滑盖式是在一个单独的层从应用程序中的主要内容, 有很多的灵活性的内容可以放在抽屉里——图示、文字, 甚至简单的控制是可行的选择提供快速访问重要的行动。
通常, 抽屉可以隐藏在 “汉堡选单” 或一个简单的箭头, 表示有更多的内容。这是一个简单的方法来隐藏所有不重要的事情在一个 “抽屉”, 这样您只需要关注如何提取最重要的信息在每个检视。例子比比皆是。 Asana,Spotify(搜索框) 和 Facebook(聊天框) 。一些更具体的例子包括 Houzz, 导航抽屉, 消失当您向下滚动并重新出现在顶部, 和《纽约时报》, 它隐藏了一边的抽屉里出现左边当多用户点选顶部的 “部分” 按钮页面的左侧。 Pinterest 当您向下滚动, 简单的向上箭头按钮出 现导航回到顶部, 和它是如何工作的页面。
16 。所有的链接
例子: 体式。
问题: 多用户需要一个一致的方式浏览内容而不受其他内容。
解决方案: 大多数或所有多用户在应用程序与内容, 让多用户自由地探索并找到他们正在寻找的信息没有达到死角或被一连串的超链接文字, 额外的按钮, 呼叫行动等等, 您通常会看到网站上。如果他们想与内容互动的应用, 奇怪的是, 他们可以点选它, 去一个新的检视更详细的经验。
与体式和 Spotify 内容很多 web 应用程序允许多用户探索各种各样的内容通过点选它, 例如点选一个艺术家或多用户带您去他们的配置档案, 可以点选物品, 可以点选表正面和许多其他的行为。
让多用户浏览
跟踪您的多用户所在的地方应该导航, 是否检视导航元素, 他们通常如何导航到应用程序的某些地区, 他们从哪里来, 要在应用程序 (比如多用户流) 等等。重新安排, 重排序、大小、和调整的导航元素, 直到您得到更多所需的行动。当然, 深入思考多用户如何使用您的移动应用程序, 当他们试图让应用程序的某些部分, 确保您没有遗漏一些显而易见的。