入门：移动APP中的各种导航.pdf

入门：移动 APP 中的各种导航 即使是移动应用界面的原型设计，导航的形式也可以多种多样。尽管尺寸小，又必须紧凑排列大量 数据，它们似乎受到了紧密的约束，但依然有着形形色色的选择。 人们曾经一度只会考虑一种形式 —— 流行且广泛使用的垂直导航，即侧边栏。尽管如此，还有其他 可以提升用户体验的形式，会让用户浏览你的 APP 变成小菜一碟。 列表型菜单 让我们从一种基于列表的标准型导航开始论述，它在移动 APP 作者中得到广泛使用。这种解决方式 建议逐一展示链接，让用户遵循从上到下的常规流程。 Sergey Valiukh 的GIF 动画设计只是一件概念设计，却完美地反映出列表型导航的实用性。结合了多 种色彩和精细的线形图标，还有稍显粗重的字体，让用户轻松浏览 APP ，并且不会感到屏幕局限导 致的不适。 Fueled 的Elevatr 是一个时尚的 APP ，帮助企业家管理和跟进商业会议。主屏的特点是彩虹色的菜单 ，清晰地逐行展现出控制面板的各个项目。背景图受到坐标纸的启发，与这种菜单完美搭配。 Kutan URAL 的HabitClock App 是个简洁且有视觉感染力的 APP ，帮助你管理早晨的闹钟。尽管屏 幕上的重点是顶部和底部的控制面板，但列表型导航（同时也是非常棒的通知工具）才是吸引注意 力的核心。 横条状的布局方式，用来展现简易侧滑菜单上的一系列链接，这是多数设计师的人气选择，也 是 Davis Yeung 设计的 iOS 版 Instagrab 主要组成。通常每一项都配有一枚易懂的小图标，很好地区分 每个链接。 矩阵或网格型菜单 占据全屏的网格型导航有助于强调导航，使它清晰易懂、显而易见。当你需要展示很多链接时，这 种方式也很管用，一系列同样的网格，有效地将每一项与其他区分开来。 Michal Galubinskiand thoke design 的Vectra ，有着不容忽视的导航。设计师不仅把菜单的 6个项目 伸展至全屏，还利用了巨大的扁平风格图标，很明显是为了大部分在线用户考虑。 Marco La Mantia Simone Lippolis 的移动 APP 设计， Arrivo ，巧妙地在严格的方形网格中组织大 量数据。每个格子都扮演着功能性的作用；因为它不仅仅是显示数据，也让你通过底部滑出的一个 小型控制面板调整它。颜色选择也非常明智，因为热烈的背景色调有助于有效地分配内容和区分 网格。 Abracadabra ，这个 APP 肯定是依照 Sergey Valiukh 心中的复古风格来设计的，让这个 APP 有种明 显的年代感。在此，设计师干练地将屏幕划分成 6个相等的网格，非常易于浏览。扁平风格图标结 合粗重的非正式字体，有助于提升易用性。 手绘风贯穿了 Willis 设计的 T R A V E R S E 的每一个界面。这个 APP 基于明亮的单色背景和线形 图标，因此主菜单看不到任何分隔线，却做到了井然有序，使得用户相当轻松顺手地浏览这款 APP 。 底部菜单 底部菜单主要是作为导航的辅助，用来区分内部的功能区块或独立组件。 Jakub Antal ík的Badoo 概念设计有着位于屏幕底部的导航。它也包含了一组扩展菜单，每一项都有 它自己的控制面板。 Virgil Pana 设计的动态滑动标签，为重度信息展示型应用提出了一个完美的解决方法，能够包含大 量统计数据，或者通过图表展现数据，并仍然保持简洁。常规大小的菜单从屏幕底部滑出，显示出 一个小型控制中心。 顶部菜单 既然我们习惯于从上到下浏览手机屏幕，放在屏幕顶部自然有一定优势。标签页和每个控制中心独 有的图标，是这种布局最重要的代表。 Cü neyt ?EN 的 Horner 包含了可隐藏菜单，不过它能很妙地从顶部出现。由于明亮的颜色和有关联 性的巨大图标，它与整个界面内容形成了鲜明对比。 Enes Dan?? 设计的 Discovery Channel 将所有的基本导航和二级导航放在顶部，通过固定的位置来 打消用户的困惑。 HAMZ AQUE Designs 为 Bettertec 设计的气流计算 APP ，巧妙地运用了占据顶部的标签页。此外， 它们被设计成黑白对比的色调，和屏幕中其余部分相同。 MIN