潍坊模板网站建设:导航设计模式的重要性

2019.01.03

0

在本文中,我们使用一些最热门的网站和Web应用程序中的示例讨论导航设计模式的重要性。
  
   一旦人们开始使用你的网站或Web应用程序,他们需要知道在任何时候去哪里以及如何到达那里。如果他们不能浏览你的应用程序,这很容易,你很快就会失去他们。因此,在你的Web应用程序中设计有效的导航是至关重要的。
  
   概述模型
  
   这是本文中详细设计模式的概述:
  
   1。跳到分区
  
   2。单页Web应用程序
  
   三。建议
  
   4。相关内容
  
   5。下一步
  
   6。历史/最近的视图
  
   7。特征内容
  
   8。无限卷轴
  
   9。步行和教练标志
  
   10。溢出菜单
  
   11。变形控制
  
   12。粘性固定导航
  
   13。垂直导航
  
   14。子弹窗
  
   15。滑动盖、边栏和抽屉
  
   16。所有环节
  
   1.跳转到部分
  
   示例:Pinterest。
  
   问题:用户希望跳过整个Web应用程序或内容。
  
   解决方案:创建快捷按钮或热点需要用户直接访问Web应用程序的一部分,通常是在开始或结束时,但更经常是在其他特定点。
  
   例如,用户可以单击标签或按钮滚动到页面顶部,而不管它们在哪里。这也很方便,特别是如果您实现无限滚动模式(见下文),页面实际上可以逐个加载新内容。
  
   如果用户希望访问控制或信息仅在页面顶部可见,则向后滚动几页可能是一场噩梦。Pinterest通过提供一个低键跳转到顶部按钮立即滚动用户来解决该用户的头痛问题。
  
   2.单页Web应用程序
  
   例如:Gmail。
  
   问题:用户希望对大多数或所有内容有一个中心视图或操作,因此他们不需要浪费时间在页面之间导航。
  
   解决方案:使用现代Web开发技术构建单页应用程序,而不将自己重新加载为用户浏览。此模型更多地是关于一个完全重新组织的网络如何工作,而不是关于如何侵入应用程序。在某种程度上,单页应用程序中的一个页面不是真正的传统Web意义,而是更具体的数据视图。单页Web应用程序(使用Ajax)是异步加载的,它们立即在用户之间执行单独的页面加载操作,而无需等待。
  
   Gmail是单页应用程序的一个很好的例子,它将多个操作集成到一个页面中。单页设计的趋势是该用户界面的核心实现更少,所有内容都可以在同一页面上访问。这使得浏览速度更快、响应速度更快,并模糊了桌面和Web应用程序之间的界限。
  
   对于Spotify这样的Web应用程序,单页应用程序模式变得非常重要。当您认为用户在浏览更多音乐时可以在后台播放音乐时,有一个单页应用程序不需要重新加载页面,因此音乐可以继续播放。
  
   需要考虑的是,您需要实现单页应用程序的URL结构。由于内容是使用javascript动态加载的,因此URL可能变得无用,如果不做正确的操作,访问特定视图可能变得不可能。Gmail和Twitter等网络应用程序克服了显式生成的问题。为每个视图提供一个唯一的URL,还可以解决浏览器的后退按钮变得不可用的问题。
  
   3.提案
  
   示例:Spotify。
  
   问题:用户想知道哪些内容视图
  
   建议的解决方案:在不同的点显示内容和建议,以帮助用户浏览内容。使用用户配置文件首选项或过去的交互式应用程序、Facebook、EventBrite、Spotify和Yelp以及许多其他应用程序中的信息,为用户生成自定义建议,以帮助他们发现新的和相关的内容或连接。
  
   这些建议可以采用流行的和最近发布的项目的形式。Facebook提供基于用户交互的文章时间和相关页面上更具体的建议,允许用户发现新的页面和人。用户可以无限地使用内容,特别是在社交网络应用程序中,用户可以在其中生成内容。正如2014年Web用户界面设计模式所讨论的,在用户界面中提供一个强大的推荐引擎是帮助他们发现新内容的一个很好的方法。
  
   4.相关内容
  
   例如:《纽约时报》。
  
   问题:如果当前内容不是他们想要的,或者他们只是想要更多,那么用户希望浏览类似的内容。
  
   解决方案:显示类似或相关的内容以帮助用户找到他们正在观看的更多类似项目。建议(上面),这是一个基本Web应用程序的UI模型,具有用户生成的内容。除了根据用户偏好或以前的活动定制建议之外,相关内容更多的是基于分类和标记显示相关项目。
  
   亚马逊、时代和纽约时报网站是当前正在浏览的项目和类似故事的好例子。媒体需要这一步,以便读者通过添加链接来显示文章的进一步阅读部分。
  
   5、下一步
  
   例子:夸拉。
  
   问题:用户想知道下一步该怎么做。
  
   解决方案:为用户提供丰富体验的清晰步骤列表。例如,Quora为用户创建完成配置文件的待办事项列表。同样的LinkedIn列表显示,一些用户可以添加到他们的个人数据中,匹配的完整性模型为用户提供激励。
  
   最复杂的Web应用程序有多个用户流,因此为用户提供待办事项列表是一个很好的引导他们前进的方法。另一个模型可以与相关内容配对;无论媒体是否好,都可以通过显示另一篇文章的摘要,当用户时。这允许用户参与并沉浸在您的用户界面中。
  
   6.历史/最近的视图
  
   例如:亚马逊。
  
   问题:用户想要记住它们和持久性。
  
   解决方案:让用户连接到他们上次离开的活动。例如,Amazon跟踪用户的浏览记录并显示最近的视图,以便在需要时可以轻松返回。许多Web应用程序还跟踪用户正在做的事情,Facebook的日程安排就是最终的例子。用户的时间表不仅记录了帖子和Photos已上传,它还记录了与其他第三方页面和Web应用程序的交互历史,如spotify用户在需要时可以参考。
  
   google search播放音乐,spotify跟踪最近的歌曲。这个模型可以帮助用户跟踪他们所使用的内容,并可以作为书签方法来做以后的事情。
  
   7.特征内容
  
   示例:Airbnb。
  
   问题:用户希望知道哪些内容可用于创建应用程序。
  
   解决方案:前端具有特定功能的用户不会在通常的时间相关内容组合中丢失。这些内容可以是付费的、流行的、新的或其他一些重要变量。
  
   特色内容为用户提供了理解平台可以做什么以及其他用户正在使用它的可能性。像Airbnb、Etsy和Flickr这样的网站在其主页上随机显示内容,帮助用户在没有事先承诺的情况下浏览网站,并鼓励现有用户帮助他们实现更大的受众。
  
   另一方面,它还可以帮助特定内容获得吸引力,使其特别重要。付款或功能可以标记为明确的预期。
  
   8.无限卷轴
  
   示例:Pinterest。
  
   问题:用户希望浏览所有内容。
  
   解决方案:自动加载下一组或下一页的内容,当用户到达当前页的底部时,创建无限滚动页的效果。以这种方式自动加载新内容后,用户无需等待单击下一页的链接。无限滚动在有大量内容的情况下效果最好。如何,像大多数社交媒体巨头,如Facebook、Twitter、Pinterest、Tumblr等等。
  
   然而,在其伟大的浏览内容中,特别是在多媒体库中,两个基本问题是用户可能会失去方向和位置。如果他们想跳到某个特定的点或书签并返回,无限滚动可能会导致一些问题。Facebook通过创建一个分页/无限滚动组合来浏览此作业中的日程安排。AT可以跳转到特定的月份或年份。Pinterest滚动到高级模式,并与一个小按钮集成,允许用户返回页面的开头。
  
   9.步行和客车标志
  
   例如:放松。
  
   问题:用户希望知道如何使用不同应用程序的功能。
  
   解决方案:设计一个潍坊模板网站建设演示每个函数如何工作的预先安排或教程。许多Web应用程序已经开始使用这项技术向用户展示,当他们第一次启动时,有两种基本的方法。
  
   一些Web应用程序,例如松开覆盖路由指令、强调用户界面的重要部分和Coach徽标,解释它们的作用。轻松的需求被集成到下一个级别的内容中,聊天机器人帮助用户构建个人数据。这是有意义的,因为Slack是一个聊天应用程序,用户与Slobo一起行走。t填写个人信息,如电话号码和显示姓名的对话。
  
   此外,Tumblr还提出了一个预先安排来帮助用户理解。这个介绍也是收集重要信息的好时机,而不是简单的注册,就像一个安装向导。这个模型的重要性不能过分强调。任何应用程序都不是即时直觉,因为更多的用户了解您的产品,他们将有更多的理由回来。
  
   10.溢出菜单
  
   示例:Spotify。
  
   问题:用户希望快速访问他们可以执行的其他选项或操作。
  
   解决方案:隐藏可扩展菜单中的其他选项和按钮,这样它们就不会扰乱主界面。Facebook和Google都使用溢出菜单,通过将最重要的辅助选项隐藏在可扩展菜单中,在Web应用程序中保持非常干净的用户界面。
  
   它还可以用来显示参与最重要的操作。例如,保持facebook上的pinterest共享按钮有助于加快每个pin上常见和理想的用户操作。或者,溢出菜单可以包含额外的菜单项或可逐步添加到用户界面的操作。
  
   11.变形控制
  
   示例:Pinterest。
  
   问题:用户希望执行不同类型的操作,但有限的屏幕显示所有这些控件。
  
   解决方案:替换按钮和替换屏幕上的控件。根据用户当前所做的操作,用户界面可以完全用另一个元素替换一个元素,例如做、撤消、添加和删除。当通信行为以某种方式相关时,这是有意义的。Pinterest和Facebook使用类似/的潍坊模板网站建设按钮来保存SPAC。e并向用户显示当前状态。此用户界面设计模式可节省房地产,快速、清晰地销毁任何操作,是一个整体解决方案。
  
   12.粘性固定导航
  
   例子:Houzz。
  
   问题:用户希望随时访问网页上的菜单。
  
   解决方案:当顶部、侧面或底部导航持续滚动页面时。在某些情况下,子部分的标题是固定的,可以滚动、替换或添加到现有的固定导航中。
  
   主导航栏是google+和interest,它位于页面顶部,允许用户快速访问所需的菜单项和过滤器。使用无限滚动模式,粘性导航菜单可以大大方便用户滚动浏览超过第一页的内容。
  
   13.垂直导航
  
   示例:Spotify。
  
   问题:用户需要一种在应用程序的不同部分之间导航的方法,但是显示这些信息的空间有限。
  
   解决方案:用户界面的一个重要部分给出了用户可以滚动以获取所需内容的列表。这也为更一般的导航、栏和其他操作释放了UI页眉和页脚。传统上,大多数导航模式都有水平的选项卡或按钮。垂直导航模式已成为一种重要的进化导航模式。设计处理用户生成内容的用户调度和无限滚动内容。
  
   14、弹出窗口
  
   例如:Facebook。
  
   问题:用户希望在不丢失当前用户界面的情况下查看相关信息。
  
   解决方案:在项目符号窗口中显示重要的通知和附加信息。此UI模式的优点是它提供了一种轻量级且直接的方式来查看附加信息或执行特定操作,但它们不执行用户的当前活动。
  
   Pinterest Fitocracy使用模式弹出窗口快速移动,Facebook使用弹出窗口显示活动栏的内容段。弹出窗口的用户界面模式对于此类行为很重要,因为它们处理此类数据,用户始终知道这些控件的应用。
  
   内容在后台仍然可见,用户可以调整排序选项或更改字体大小潍坊模板网站建设,而不必在视图之间来回切换--所有这些都发生在这里。项目符号窗口和模式窗口也可以用来显示重要的通知或通知,以引起用户的注意,因为他们认为他们需要一个水龙头或一个C。阿德刷卡。
  
   15.滑动盖、边栏和抽屉
  
   例如:《纽约时报》。
  
   问题:用户需要一种在应用程序的不同部分之间导航而不受干扰的方法。
  
   解决方案:第二个应用程序的一部分,如导航、聊天、设置、用户信息等,隐藏在可折叠的面板中,不需要隐藏在主体中。在访问时,主体部分通常放在一边或幻灯片中。由于滑动是应用程序的一个单独层中的主要内容,所以有许多灵活的内容可以放置。嵌入式抽屉――图标、文本,甚至简单的控件都是快速访问重要操作的可行选项。
  
   通常,抽屉可以隐藏在汉堡包菜单或简单的箭头中,以指示更多的内容。这是一种将所有不重要的东西隐藏在抽屉中的简单方法,因此您只需关注如何提取每个视图中最重要的信息。示例丰富。asana、spotify和facebook。一些更具体的示例包括houzz、navigation抽屉,当你向下滚动并重新出现在顶部时消失,纽约时报,当用户点击按钮页顶部左侧时隐藏抽屉的左侧。Pinterest当你向下滚动时,一个简单的向上箭头按钮会出现,导航回顶部,以及它在页面上的工作方式。
  
   16、所有环节
  
   例如:姿势。
  
   问题:用户需要一种一致的方式来浏览没有其他内容的内容。
  
   解决方案:大多数或所有用户都在应用程序和内容中,允许用户自由地探索和查找他们正在寻找的信息,这些信息不会到达死胡同,或者是一系列超链接文本、附加按钮、调用操作等。您通常会看到网站。如果他们想要与内容交互的应用程序,奇怪的是,他们可以n单击它并转到新视图以获得更详细的体验。
  
   许多具有风格和Spotify内容的Web应用程序允许用户通过单击来浏览各种各样的内潍坊模板网站建设容,例如单击艺术家或用户带您进入他们的个人资料、单击项目、单击表格前面以及许多其他行为。
  
   允许用户浏览
  
   跟踪用户应该导航的位置、是否查看导航元素、他们通常如何导航到应用程序的某些区域、他们来自何处、在应用程序中(如用户流)等等。重新排列、重新排序、调整导航元素的大小,直到获得更多操作。当然,请深入思考用户如何使用您。R移动应用程序,当他们试图获得应用程序的某些部分,以确保您不会错过一些明显的东西。
  
  

关键词

最新案例

联系电话 400-6065-301

微信咨询 寒总监