移动端导航模式热门设计.pdfVIP

移动端导航模式的热门设计 小编推荐 ：移动互联网的兴起使得app和h5 设计越来越普及 ，越来越优 ，为了充分利用寸 屏寸金的小屏幕给用户指路 ，各种导航应运而生 ，文章总结了常见导航的样式、应用及注意 事项 ，很是全面 ，堪称导航交互干货 ，干活爱好者快来~ 当下最热门应用之模式设计深层观察 在本文中 ，来自UX Pin – 用户体验设计应用的Chris Bank将与您探讨导航设计模式的重要意义 ，并 以当下最热门的几个移动应用为例详细进行讲解——在UX Pin的免费电子书 《移动UI设计模式2014 》中还提供了更多有关导航模式设计的示例 ，以及多达4 5种其他移动应用设计模式的详解。 用户在使用应用时 ，需要随时清楚了解下一步应当前往哪一页面以及如何前往该页面。如果用户无 法轻松在应用中进行导航 ，则将很快对你的应用失去兴趣。因此 ，能否为移动应用设计出有效的导 航功能至关重要。在投入菜单、操作栏、弹窗、按钮、箭头、链接等内容的设计之前 ，你需要牢记 几个基本的注意事项。 另请见 ：移动应用用户输入热门设计模式 导航设计的4大注意事项 在弄清自己移动应用的架构和组织情况之后 ，就可以开始考虑导航设计了。在此时 ，你需要考虑下 面的几个事项 ： 1. 可达性 – 移动应用的导航功能可以说是所有界面最重要的组成部分 ，因此一定要保证其可达性 ， 并把最关键的要素尽量突出 ，同时不要影响到内容本身。 2. 是否有意义 – 确保菜单、操作栏、弹窗、按钮、箭头、链接等导航要素简单明了 ，让用户一看就 知道是什么意思以及操作结果是什么。不要弄的太过花哨 ，用户没有耐心去“猜”。 3. 易于理解 – 如果你想设计比较高级的导航功能 （例如链接图片、允许滑动或其他手势导航 ，或者 访问隐藏菜单 ），请务必在设计过程中保证前后一致 ，以便用户熟悉你所使用的模式 ，同时还应加 入一些额外的信息 （例如小箭头、文字或改变颜色或高亮等 ）来吸引用户注意力 ，并以微妙的方式 对用户进行引导。不要给用户呈上“看得见摸不着的导航功能”。 4 . 通用性 – 你的导航功能应当以一定的形式显示于移动应用的各个界面。各个导航模式不一定要完 全相同 ，但其基本结构应当在应用内保持一致 ，可以根据背景进行小幅度的调整。 导航模式概述 在记住上述设计目标后 ，下面是本文要详细说明 （对这些设计模式的更深入探讨请见我们的电子 书 《移动UI设计模式2014 》 ）的几个设计模式的概览 ： 1. 说明与引导标记 2. 溢出菜单 3. 滑块 4 . 基于内容的导航 5. 变换式控件 6. “跟随式”固定导航 7. 垂直导航 8. 弹窗 9. 滑出页面、侧边栏和抽屉 10. 无所不至的链接 11. 高级滚动条 12. 滑动视图 1. 说明与引导标 ecret 问题 用户希望了解如何使用应用的各项功能。 解决方案 设计一套说明或教程来演示各项功能如何使用。现在很多应用都使用这种方式在用户首次启动时提 供演示。这种方式可以分为两大基本方法。 ecret 和Yo uT ube等应用采用了覆盖图指南的方法 ，并 使用“引导标记”突出显示UI中的关键部分来说明其作用。 另外 ，Caro usel和Duo lingo等应用则会在用户首次启动时以幻灯片的形式引导用户走完全部体验 过程 ，从而有效地说明应用能够帮助用户实现哪些功能。这一引导过程同时也是收集重要信息 （方 便后期简单注册乃至更深入的需求 ）的绝佳时机 ，类似于设置向导。这一模式对于无法第一时间直 观了解功能的应用来说至关重要 ，因为用户对你的应用了解越深刻 ，就越有可能继续用下去。 2. 溢出菜单 W hat sapp, Gmail 问题 用户希望能够快速使用附加选项或操作。 解决方案 将附加选项和按钮隐藏在溢出菜单中 ，这样它们就不会干扰主界面。溢出菜单在安卓系统中有着广 泛的应用 ，其主要用于将不常用但与当前内容有相关度的选项和菜单项隐藏到操作栏中。 W hat sapp和Gmail等应用对刷新和状态设置等菜单项 （这些都是用户需要能够快速使用 ，但如果放 在显眼位置会比较碍事的附加功能 ）就采用了这种模式。在Relat eIQ 中 ，用户可以按住主菜单项来 查看子菜单 ，从而实现快速导航到不同视图。 3. 滑块 Uber 问题 用户希望能够在不同选项之间无缝切换。 解决方案 使用滑动手指的方式实现选项切换的显眼、轻松过渡。例如 ，Uber可让用户在各侧间拖动滑块无缝 切换四种出行服务方式。在这一UI设计模式中 ，其甚