宝安网页设计:移动设备的热门导航设计模式

2019.08.16 mf_web

142

一旦有人开始使用您的应用程序,他们需要知道去哪里以及如何在任何时候到达那里。如果他们无法轻松浏览您的应用程序,您很快就会丢失它们。

因此,在移动应用程序中设计有效的导航至关重要。但在深入了解菜单,操作栏,弹出窗口,按钮,箭头,链接等之前,您需要记住一些基本注意事项。宝安网页设计

4导航设计中的注意事项

一旦了解了移动应用程序的架构和组织,就可以考虑导航设计了。这样做有几点需要考虑:

  1. 可访问性 - 您的移动应用程序的导航可以说是任何视图中最重要的部分,因此可以访问,最重要的元素尽可能突出,而不会影响内容本身。

  2. 有意义 - 使菜单,操作栏,弹出窗口,按钮,箭头,链接和其他导航元素清晰,以便用户知道该做什么,同样重要的是,他们将被带到哪里。不要对此感到满意,因为用户不想猜测。

  3. 可理解性 - 如果您想通过导航获得更高级的功能(例如,链接图像,允许滑动或其他基于手势的导航,或访问隐藏菜单),请确保您的实施中的一致性,以便用户熟悉您的模式设计,但也添加任何其他信息(如光箭头,一些文字,或颜色变化或突出显示),以吸引用户的眼睛,并以微妙的方式教育他们。不要给他们“神秘的肉类导航”。

  4. 普遍性 - 您的导航应以某种形式出现在移动应用程序的每个视图中。虽然您不需要具有相同的导航,但整个应用程序的基本结构应该是相同的,稍有变化与上下文相关。

模式概述

请记住上面的设计目标,这里是我们在本文中详细介绍的设计模式的概述

  1. 演练和教练标记

  2. 溢出菜单

  3. 滑块

  4. 基于内容的导航

  5. 变形控制

  6. “粘性”固定导航

  7. 垂直导航

  8. 约夏克布丁

  9. 滑道,侧边栏和抽屉

  10. 一切的链接

  11. 高级滚动条

  12. 滑动视图

1.演练和教练标记

演练和教练标记

秘密

问题

用户想知道如何使用应用程序的不同功能。

设计一个演练或教程,演示每个函数的工作原理。许多应用程序已经开始使用这种技术向用户展示它们首次启动时,有两种基本方法可以实现。一些应用程序,如秘密或YouTube,采用叠加说明的路线,用“教练标记”突出显示用户界面的重要部分,以解释它们的作用。

或者,像Carousel和Duolingo这样的应用程序使用第一次启动来显示幻灯片,向用户介绍整个体验,有效地解释用户可以使用该应用程序完成的任务。此演练也是收集超出简单注册的重要信息的好时机,就像设置向导一样。对于任何不直观的移动应用程序来说,这种模式的重要性不足以强调,因为用户了解您的产品越多,他们必须返回的原因就越多。

2.溢出菜单

溢出菜单

Whatsapp,Gmail

问题

用户希望快速访问他们可以执行的其他选项或操作。

在溢出菜单中隐藏额外的选项和按钮,以便它们不会使主界面混乱。在Android中广泛使用溢出菜单来存放操作栏中不常用但与当前上下文相关的选项和菜单项。像Whatsapp和Gmail这样的应用程序将其用于菜单项,例如刷新和设置状态 - 用户应该可以快速访问的应用程序的添加功能,但如果放在更显眼的位置,则可能会妨碍。RelateIQ让您按住主菜单项以查看子菜单,以便更快地导航到视图。

3.滑块

滑块

尤伯杯

问题

用户希望在选项之间无缝移动。

通过滑动手指,可以明显轻松地在选区之间进行切换。优步让您可以通过左右拖动滑块无缝切换四种类型的乘坐服务。在这种UI设计模式中,它们甚至可以放大和缩小以提供类似的附近汽车密度,因此您可以自动查看可接受数量的选项。

4.基于内容的导航

基于内容的导航

基于内容的导航

火种

问题

用户希望轻松直观地探索特定内容的详细信息。

无缝地在概览和细节状态之间进行转换。Tinder和9Gag使这种无缝响应。在Tinder中,此UI设计模式允许您通过单击每个视图中的主图片在用户配置文件的两种状态之间切换。但他们更进了一步。如果您在用户个人资料的详细视图中滑动图片,然后单击图片返回基本视图,它将保留在您单击的图片上。这创造了极其流畅和直观的用户体验和流程。

5.变形控制

变形控制

Pinterest的

问题

用户想要执行不同类型的操作,但是显示所有这些控件的屏幕空间有限。

使用其他功能替换按钮和屏幕控制。根据用户当前正在做什么,UI可以完全用另一个替换元素,例如“do”和“undo”或“add”和“delete”。当交替动作以某种方式相关时,这是有意义的。

Pinterest和Spotify通过将“+”转换为“x”按钮,让您知道可以分别取消添加图钉或跟随相册。这种UI设计模式可以节省空间,使任何动作快速清除,并且是一个整体有趣的解决方案。

6.“粘性”固定导航

固定导航

Dropbox的

问题

用户希望在应用程序中随时访问菜单。

滚动页面时,顶部,侧面或底部导航保持不变。在某些情况下,来自子部分的标题也可能在滚动和替换时被固定或被附加到现有的固定导航。地址簿是一个很好的例子,当您滚过该部分标题时,每个字母部分(“a”,“b”,“c”等)都会粘在顶部导航下方。照片库和文件夹倾向于使用相同的设计模式。在其他情况下,菜单在向一个方向滚动时消失,在向另一个方向滚动时固定。Pinterest就是一个很好的例子,当向上滚动时菜单在底部消失,向下滚动时出现。这与存储常用应用功能的操作栏(在Android中大量使用的模式)不同。

7.垂直导航

垂直导航

Facebook,Spotify

问题

用户需要一种在应用程序的不同部分之间导航的方法,但显示此信息的空间有限。

UI的重要部分显示在列表中,用户可以滚动浏览以获得他们想要的内容。以这种方式滚动是一种标准的移动手势,因此应用程序采用这种方式进行导航布局是有意义的。这也使得UI的页眉和页脚可以自由地进行更多“通用”导航,例如操作栏。您将看到各种应用程序的各种垂直导航实现,从Spotify等音乐播放器到Yahoo!等新闻播放器。消化。

8.弹出窗口

约夏克布丁

TED,Dropbox

问题

用户想要查看相关信息而不会丢失他们在UI中的当前位置。

在popovers中显示重要通知和其他信息。这种UI模式的优势在于提供了一种轻量且直接的方式来查看附加信息或采取特定操作,但它们不会将用户从当前活动中拉出来。官方TED应用程序将播放控件置于弹出窗口中,背景逐渐淡出,以便用户始终意识到与播放器的这种快速交互不会干扰他们浏览其他内容。

Dropbox和Kindle也将控件放在popover中。popover UI模式对于这些操作很重要,因为它们是在数据上执行的,这样用户总是知道这些控件适用于什么。由于内容在后台仍然可见,用户可以调整排序选项或更改字体大小,而无需在视图之间来回切换 - 一切都在那里发生。弹出窗口和模态窗口也可用于显示重要的通知或通知,其中必须引起用户的注意,因为解雇它们需要点击或滑动。例如,Secret和Swarm使用弹出框来解释如果用户继续他们的动作会发生什么。

9.滑出,侧边栏和抽屉

滑道,侧边栏和抽屉

LinkedIn,Gogobot

问题

用户需要一种在应用程序的不同部分之间导航的方法,而不会在每个单独的部分中分心。

应用程序的第二部分 - 例如导航,聊天,设置,用户配置文件等 - 在不需要时隐藏在隐藏在主要部分下方的可折叠面板中。访问时,它通常会将主要部分移到一边或滑过它。由于幻灯片与应用程序中的主要内容位于一个单独的层中,因此在如何在抽屉中布置内容方面具有很大的灵活性 - 图标,文本甚至简单的控件都是可行的选项,可以快速访问这里的重要行动。

通常情况下,抽屉可以隐藏在“汉堡菜单”或简单的箭头下,表示那里有更多的内容。这是一种在“侧抽屉”中隐藏所有不那么重要的东西的简单方法,而不用担心移动应用程序应该如何提取最重要的信息。相反,您只需要关注如何从侧抽屉中提取的每个视图中提取最重要的信息。我们在下面使用UXPin包含了这个设计模式的线框示例。

10.万物的链接

一切的链接

喊叫

问题

用户需要一种一致的方式来浏览内容,而不会被其他内容分心。

应用程序中的大多数或所有用户内容都是链接的,让用户可以自由地探索和查找他们正在寻找的确切信息,而不会遇到一连串的超链接文本,附加按钮,号召性用语等等。你通常会在网站上看到的。如果他们想要与应用中的一段内容进行互动,他们可能会点击它并转到新视图以获得更详细的体验。例如,在Yelp中,用户有很多选项 - 他们可以点击底部的按钮,或者通过点击内容本身来浏览,例如地图或评论。这使得导航模式比Flipboard更容易,当您浏览数字杂志时,可以通过无数方式滑动,点按,x-out,撤消和返回。

我们在上面使用UXPin包含了这个设计模式的线框示例。

11.高级滚动条

高级滚动条

旋转木马,Dropbox

问题

用户需要在整个内容集的上下文中查看其当前位置,或者更快地移动到长列表或库的特定部分。

除了使用滑动手势滚动之外,移动列表和图库通常还具有滚动条,该滚动条在滚动时是持久的或临时显示的。通常,滚动条由滚动索引补充 - 日期,字母,类别,位置等。通过索引滚动,滚动指示器通常是持久的,因此即使用户不滚动也会出现。触摸或拖动它会导致当前部分以突出的方式弹出。但是,滚动条和索引可以耦合并且仅在滚动期间出现以节省额外的屏幕空间并减少干扰。在滚动和索引更为关键的情况下,滚动条更可能更突出和持久。

例如,在Carousel中,我们不仅有一个可见的滚动条,而且底部还有一个电源滚动条,因此您可以轻松地浏览100万张托管照片。随着用户生成的内容,订阅源,群组,列表等不断增长,我们将看到更多创新的UI设计模式,允许用户在搜索和滚动条之外找到他们正在寻找的内容。

12.滑动视图

滑动视图

雅虎 摘要,Flipboard

问题

用户想要从一条内容导航到下一条内容而不必返回索引。

允许用户通过浏览内容从一个项目移动到另一个项目。浏览相册时应该熟悉这种模式,但越来越多的应用程序也开始为它们的内容实现这一点,比如Yahoo! 摘要和Flipboard。这有助于在用户轻松浏览内容时为用户提供身临其境的体验。此模式还可用于组织目的,将应用程序的不同部分分隔为用户可通过滑动访问的“选项卡”。在实现这种模式时,考虑界面显示其刷卡能力的能力也是一个好主意。

让用户导航

跟踪用户应该导航的位置,是否他们查看导航元素,他们导航到应用程序的某些区域的频率,他们来自和进入应用程序的位置(即用户流程)等等上。保持重新排列,重新排序,重新调整大小和调整这些导航元素,直到您获得更多所需的操作。当然,深入思考用户在尝试访问应用程序的某些部分时如何实际使用您的移动应用程序 - 确保您不会错过任何明显的内容。

宝安网页设计

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP