导航 on Victor42

移动端用户体验：底部导航

hi@victor42.work (Victor42) — Sun, 30 Oct 2016 16:12:56 +0000

[国外设计第151期]

图片来源：Behance

设计师都知道，设计不只是为了好看。设计也决定用户如何融入一个产品，无论是网站还是app。这是一种交谈。*导航就是一种交谈。*因为如果用户不明白使用方式，你的网站或app再漂亮都没用。

为什么底部导航如此重要？

Steven Hoober在他的关于移动设备使用状况的研究中发现，49%的人依靠一根手指完成手机上的操作。在下图中，手机屏幕上的画面表示大致的触摸范围，不同颜色表示用户能用拇指在屏幕上触及的区域。绿色表示轻易触及；黄色表示需要伸长手指；红色表示需要用户改变持握方式。

图片表示单手操作智能手机的舒适程度。图片来源：uxmatters

**把最重要最常用的操作放在屏幕底部非常重要，**因为它们能用一只手指轻松触及。

标签栏

许多应用遵循这一规律，将底部导航（又称作标签栏）作为最重要的app功能。Facebook的核心功能一触即达，能够在不同功能中迅速切换。

Facebook的iOS底部标签栏。

底部导航设计的3个关键

导航通常是搭载用户的交通工具。底部导航应该承载重要性等同的顶级目的地。这些目的地需要在app的任何地方留有直接的入口。

优秀的底部导航设计遵循以下3条定律：

1. 只显示最重要的目的地

在底部导航中使用3到5个顶级目的地。如果少于3个，请考虑使用标签代替。

底部导航避免使用5个以上，因为点击目标相互会过于接近。在标签栏放置过多的项目，让人们难以点中他们的目标。每多展示一个标签，app的复杂性就增加一分。

如果顶级目的地确实有5个以上，不要用底部导航来承载这些入口，请考虑放在其他位置。

避免内容滚动

小屏幕上显而易见的解决方式，就是部分隐藏式的导航——不必担心屏幕空间的局限，把标签项放入滚动的标签栏即可。但是滚动的内容效率低下，因为你得滑动一下才能看到想要的选项。

iOS版Rookie Cam app中就存在“看不见就想不到”的问题。

2. 表达出当前位置

没有表达当前位置，可能是app菜单中最普遍的错误。“我在哪里？”是用户需要回答的基本问题之一，这是顺利操作的前提。

用户应该在没有任何外部引导的情况下，一眼就看出如何从A前往B。应该提供适当的视觉线索（图标、标签和颜色），操作就不需要任何说明了。

图标

正因为底部导航操作以图标方式展现，它们所表达的内容应该要适合通过图标来表达。有些用户熟知的通用图标，通常这些都表示搜索、邮件、打印等功能。不幸的是，“通用”图标很少。app的设计师常常用图标来代表一些非常难以分辨的功能。

老版本的Bloom.fm应用Android版。真是相当难理解用户当前所处位置。

我在这篇文章《图标是优秀用户体验的一部分》中强调了这个问题。

颜色

避免在底部标签栏使用不同颜色的图标和文字标签。应当使用app的主色来表示视觉焦点。

左图：不同颜色的图标让app看起来像是圣诞树。右图：应该只用主色。

遵循一条简单的法则——用app的主色来提亮当前的底部导航项（包括图标和文字标签）。

iOS版Twitter的底部菜单栏。Messages是当前选中项。

如果底部导航栏有背景色，就要用黑白的图标和文字标签。

左图：避免使用彩色图标和彩色背景的组合。右图：使用黑白图形。

文字标签

文字标签要为导航图标提供简短有意义的描述。不要用太长的标签，因为它们不能截断或换行。

避免换行、截断和缩小文字标签。

菜单元素要易于浏览。用户要能理解他点击某个元素时会发生什么。

点击尺寸

目标区域足够大，才易于点击。将界面宽度按操作项的数量等分，计算每个底部导航操作项的宽度。或者，把所有底部导航项的宽度设为最宽。

Android规范建议按照下图的尺寸设计移动端的底部导航栏。

移动端的固定导航栏。单位是逻辑像素（dp）。来源：Material Design。

标签栏的小红点

可以在标签栏显示小红点，表示有相关的新信息。

可以用低调的方式给标签栏图标加上小红点。

3. 让导航不言自明

优秀的导航应该感觉像一只隐形的手，在操作途中指引用户。毕竟，如果用户都无法找到，那最酷的功能和最有吸引人的内容都没用。

表现

每个底部导航图标都要通向某个目的地。而不能是打开菜单或其他弹出窗口。点按底部导航图标应该直接通向相应界面，或者刷新当前激活的界面。

不要用标签栏提供控制项，用来操作当前界面或app模式中的元素。如果需要提供操作项，请改用工具栏。

iOS的工具栏

保持统一

尽可能在每种情况下都显示标签栏。这样能给用户一种视觉上可靠的感觉。

不要因为功能不可用就移除某个标签。如果你在某些情况下移除一个标签，其他情况确保留，就会让你的app界面感觉不可靠、难以预料。最佳解决方案是保证所有标签都是可用的，然后解释为什么某个标签没有内容。例如，如果用户没有离线文件，Dropbox里的Offline标签会显示一个界面，教你如何添加。这个功能就是空状态。

Dropbox应用的空状态界面。

隐藏标签栏

如果界面里是滚动的信息流，标签栏可以在滚动查看更多内容时隐藏，向下滑动尝试回顶部时再显示。

底部导航栏可以根据滚动，动态显示和隐藏。

视觉愉悦

避免使用横向滑动的动效来切换界面。激活和未激活的界面，切换过渡效果应该使用叠加渐隐效果。

叠加渐隐动画。来源：Material Design

总结

底部导航应该：

可见且结构合理（使用3到5个顶级目的地，并且避免可滚动内容）
清晰（导航栏元素要易于浏览，点击区域要足够大，方便操作）
简单（保证每个导航图标都通向合适的目的地，而且通过底部导航要能够触达所有元素）

原文链接：https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f#.3z87f9p1s

作者信息：Nick Babich I’m a software developer, tech enthusiast and UI/UX lover. http://babich.biz

用户体验设计中的分步导航

hi@victor42.work (Victor42) — Sun, 08 May 2016 13:21:45 +0000

[国外设计第132期]

设计大型电商网站或者复杂的在线服务时，你很可能需要设计一套系统，来梳理顺序与结构。把它设计得简单直观，让用户顺利通过，是提升转化率的关键。沿途所有的挫败都可能导致他们离开，去选择其他的产品。

易用的分步流程有助于用户避免挫败，成功地完成主要任务。本文中，我们来了解分步导航的各种形式，看如何使用它们。

分步导航是什么？

分步导航（或者说分步指示器）将一系列的过程分解成多个合理的步骤。它引导用户通过一些步骤最终完成一项复杂的任务。好的分步导航应当告知用户以下信息：

他们已经完成了哪些步骤（或任务），最好要有适当的视觉反馈
现在处在哪一步（用户当前在整个流程中的位置）
还有哪些步骤，多少步（最好都要有清晰的名称）

分步导航通过步骤编号表达出整个过程

有3大理由应该使用分步流程：

合理地将数据输入分组
为用户建立明确的期望
在复杂的过程中追踪整个流程

为什么有效？

分步导航清晰地指明了完成任务的路径。研究表明，它给用户以明确的概念，完成最终目标需要多少步，能够显著降低放弃的概率。从心理学角度来看，这颇具意义。如果你知道完成这个过程需要多少步，你就更容易完成它。

分步注册账号

分块展现内容，便于用户浏览，有助于他们理解。实际上，分块其实就是在有意创造视觉分隔的内容单元，在整体环境中有它的意义。

分步导航的使用

分步导航可以用在许多种情景中。下面3个领域最常见。

在线下单

目前为止，分步导航最广泛的使用案例，就是与在线购买相结合，因为这个任务可以很自然地分割成多个步骤。

多步表单

如果表单需要用户填写许多信息，最好将它分成多步。

引导页

分步导航也可以用来引导用户了解一个应用或服务的功能。如果步骤不多，也可以使用小圆点来表示（就像下图Dropbox的例子）。

Dropbox的引导页

分步导航设计最佳实践

创建优秀的分步导航，并没有通用的方案。但有一点是肯定的——你时刻要考虑用户如何与该系统交互。简单说，就是要把流程步骤设计得尽可能简单清晰，不要让用户困惑。

设定用户的期望

当用户要进行一项复杂的任务时，重要的是事先营造他们的期望，告诉他们需要多少时间和精力。如果用户认为这个任务只要2分钟，但实际上花了10分钟，这个体验就很糟糕。

提供简单的描述，能够帮助用户为复杂的任务做好准备。这也很有助于估计完成任务所需的时间，尤其当这些步骤并不均等时（例如有些步骤比其他的更长）。

建立合理的流程

显示流动的方向。最好使用箭头来强调方向，因为线条本身并没有提供“流程”的含义。
结合图形与文字描述其中步骤。要让用户清楚步骤的顺序。
过程不要太长。3-5步就足够了。
使用数字序号描述步骤，指示用户当前所处的步骤（例如第3步、第5步）。

让用户清楚自己当前位置

“我进行到哪儿了？”这是导航需要用户回答的基本问题之一。所以优秀的分步导航设计，最关键的就是保持用户了解当前所处位置。这能够提升连续性，因为用户知道当前位置与之前步骤和后续步骤之间的关系。

要为流程设计一套良好的视觉展现。用户依赖导航元素中的这些视觉线索来回答这个至关重要的问题。

图片来源：Dribbble

状态的变化要清晰，告诉用户当前的步骤不只是改个颜色。适合的图形和文字标签，能帮助用户理解菜单项。

异常标签的错误状态

避免多层分步导航

避免在一个页面上多次使用，或者嵌套使用分步导航。这会导致界面的混乱。

显示出流程反馈

分步导航可以在每步保存后，短暂显示反馈信息。只应该在步骤间有较长延迟时使用这种反馈。

这个分步指示器在步骤保存后，短暂显示了反馈信息。

移动应用中的分步导航

因为横向空间有限，在移动应用和网页上，纵向分步导航也许是不错的方案。不过要确保每步内容是响应式的。

小屏幕上使用纵向分步设计。

结论

把分步导航设计得简单易懂、低调含蓄，也别忽视它们的视觉表现，应当在视觉上吸引和引导用户。“用户至上”。记住我们不是在为设计师而设计，我们为普通用户设计。最终，优秀的分步导航能让用户停留，完成任务，并且让你的网站和应用留下正面的印象。

感谢阅读！

原文链接：http://babich.biz/progress-trackers-in-ux-design/

作者信息： Nick Babich I’m a software developer, tech enthusiast and UI/UX lover. nick@babich.biz

全新的导航形式：全屏菜单

hi@victor42.work (Victor42) — Sun, 28 Jun 2015 12:51:00 +0000

[国外设计第92期]

与其他用户界面细节一样，菜单的设计也在随着当今的潮流改变。一些变化能带来积极的效果，改善用户体验，还有一些却会破坏有利的形象。追随潮流是件棘手的事，尤其是在菜单上。

比如，隐藏式菜单和极简式导航栏最近正处于风口浪尖。但是，它们并不适用于所有网站。相比之下，全屏菜单多数时候几乎都适用于所有项目。后者正在汇聚人气，因为它灵活易变，能够提升而非破坏用户体验。它在不经意间呈现了很多数据，整洁地排布文字与多媒体内容。当然，这使得主页又多了一层点击，但有时为了更好的用户体验，应该做这样的牺牲。

今天我们进行一场头脑风暴，来看20个新颖绝妙的全屏导航网页设计案例。

全屏菜单案例

Maecia

Maecia采用了讨人喜爱的蒸汽朋克外观，增添了一分独特的精细和机械感。基于图片的导航占据整个屏幕，与动态主页和主题高度吻合。

Olcese

Olcese有好几个菜单，便于用户更彻底地探索这个网站，同时也强化了品牌识别。基于图片的网格式全屏导航中，充满了有趣的照片、漂亮的图表和令人愉快的效果。这些元素的结合扮演着至关重要的角色。

Moeko ABE

摄影师的在线作品集还能是什么样？以照片为核心的主页明亮耀眼，导航运用了多媒体，为这位艺术家高调代言。菜单在整个页面投下柔和的阴影，呈现出美丽的照片链接。

Conference Awwwards

颇具开创性的主页，一流的HTML/CSS/JS动画立刻引人注目，让人印象深刻。简单的导航占据了整个屏幕，视觉聚焦于导航链接。这是非常合理的方案。

Drygital

Drygital的主菜单流露出欢乐积极的情感。华丽鲜艳的渐变背景，非常有利于展现亮白色的导航。一如往常，菜单覆盖了整个主页。不过得益于半透明的背景，用户可以在着陆页欣赏一段视频。

Aleman’s Design

Aleman’s Design有着无缝式的导航，与整个场景搭配良好，对美感有重大贡献。这个团队采用了非同寻常的方案，利用动画背景来强调菜单项。

Mas Industries

Mas Industries的特点是基于图片的全屏导航菜单，它从“汉堡”菜单中优美地展开。对金属部件的完美渲染散逸着冰冷严肃的氛围。虽然前景与背景的反差很弱，但另一方面，这种方案对系列设计有强调作用。

Danne Olsson

壮观的照片背景，映入Danne Olsson的用户的眼帘，充满自然意象。为了弱化如此吸引眼球的核心元素，将视线引向更简单朴实的导航，他采用了很直接的解决方法，将全屏菜单与纯色背景相结合。

Impossible Bureau

在这里，主导航将首页划分为4列，让网站的主要部分充满全屏。为了使外观鲜活明亮，不至于让主页看起来黑暗阴沉，每个链接都带有美丽的渐变背景，还有绝佳的字体和配图。

Voisins

Voisins的主页是个庞大的导航体系，有两个菜单组成。其中之一如我们所料，迎合了当今网页设计趋势，通过“汉堡”菜单触发。另一个则占据全屏，可以更高效地处理视频链接。

Fornace Studio

Fornace Studio采用了一种非常规方案，主菜单由小小的导航图标触发显示。它从一个特别的角度滑入，模糊并覆盖整个主页，立刻吸引了用户的注意力。

Webgriffe

Webgriffe的设计很精细，文案、极细的雅致字体、幽灵按钮、强烈而现代的图形和趣的背景，共同构成了视觉焦点。菜单与主题的配合非常好。

Moma

全屏导航让用户很自然地点击首页的图片，进入主菜单中的其他功能。这个方案相当整洁优雅，完全适用。

Giaco Morelli

和上一例类似，这个全屏菜单带有轻微的半透明背景。厚实圆润的字体转移了访客的注意力，从迷人的交互式主页，转向网站更重要的部分。

Gianluca Bocchi

虽然极简式设计缺乏丰富的装饰，但这家画廊的官网散发着典雅、精美的艺术气息。在这里，第一印象尤为重要，庄严的菜单巧妙含蓄地将着陆页分成3部分。

Elliot Lepers

Elliot Lepers有着全屏式轮播，一列列呈现信息。尽管这并非菜单的传统形式，但它是纯正的导航，使其得以充分运用。

Fahrenheit

Fahrenheit的菜单由4个基本的链接构成，这适用于多数小型在线作品集。尽管如此，这个团队仍然在其中倾注心血，将整个页面让给导航列表，证明了它的重要性。

N3RD

首页就是个导航页面。最棒的一点是，这个团队应该不会担心平板和移动端的变化，因为这个方案全平台适用。简单而优雅，尽管相当原始。

ivxvixviii

ivxvixviii有着相当精致的几何体，壮丽的图片和微妙的效果丰富了造型。精巧独特的导航足以激发兴趣，迫使用户深入其中。

The Colors of Motion

这个网站的特色是奇异的无字导航，一眼看去使人迷惑。设计师采用了打破常规的方案。在这种方式中，菜单与名称相结合，支撑着整个主题。

结论

受趋势影响，导航可以采用不同形式。全屏菜单是种双赢的做法，可以解决很多网页设计的问题。

原文链接

作者信息： Nataly Birch I’m an internet entrepreneur and an amateur web designer and developer from Sevastopol. In my spare time I read books, play board games and volleyball.

解决汉堡图标问题

hi@victor42.work (Victor42) — Sun, 29 Jun 2014 10:12:41 +0000

[国外设计第46期]

汉堡图标，也就是三条小横线，一直以来被用于表示指向菜单的链接，是当今网页中最具争议的技巧之一。据说设计师们都讨厌它；客户们也恨之入骨。那为什么它却无所不在？

汉堡图标可以轻易缩放，它可以精确吻合像素网格。它原本是表达列表的图标，被强行冠上了如今的角色，但既然菜单就是一列选项，这样使用它从含义上来说是正确的。

在这个课题上，有数不尽的争论、A/B型测试、博客宣泄、用户研究，但这些研究几乎都在关注app设计。当汉堡图标用于网页设计时，它表现出了更大的问题。

##汉堡图标的问题

有很多设计师质疑汉堡图标本身的价值。它频繁作为iOS风格图标出现，虽然在Apple采用它之前，就已经被这么用了。

事实上，关于它是不是可用的菜单图标，有大量相互矛盾的证据。有些设计师主张，年轻人能轻松认出这个图标，其他人则表示年纪大的若有上网经历，也可以辨认出来。这项证据中，我们只能得出唯一一个结论，可用性测试结果是不确定的，相似的测试常常得出相互矛盾的结果。

大家普遍接受一点，用户不会把汉堡图标当作单一链接，很可能是因为它被设计成一组链接，而非单个链接的样子。支撑它的是环绕周围的边框，或是一块背景色，使它看起来更像一个按钮，我敢说，再拟物一些可以增加点击量。

##汉堡图标还有更多问题

除却图标本身不说，使用它的方式也充斥着问题。

首先，可能也是最明显的，汉堡图标给导航增加了额外的操作；原本一次点击就可以到达具体页面，现在需要两次。根据网页设计师的经验，3次点击要能抵达（任何地方），目前为止，导航问题并没有解决，汉堡图标这种技巧，只是把一个问题变成了另一个问题。当然，这不仅仅是汉堡图标的问题，它也是所有这种风格导航的问题。你可以用“菜单”两字代替汉堡图标，阻碍仍然存在，区别只是汉堡图标没法用在其他地方。

汉堡图标同时也隐藏了它的内容。从用户体验的观点来看，用户不应该为了解自己能做什么，而做出任何动作。“分享到Twitter”或“付款”这些操作若不是近在眼前，太容易被用户忽略。用户根本不会去找他们不知道的链接。

最后，汉堡图标隐藏了网站的当前状态，还有用户所在的位置。菜单中的按下状态为用户提供了前后关联信息，而汉堡图标则使它变得隐晦。

##汉堡图标能做好什么？

鉴于汉堡图标被普遍厌恶，还导致一连串问题，为何它还随处可见呢？

以我的经验，原因当然在特定的年龄层里，汉堡图标近年来已经深得辨识度的精髓。驳斥它的研究往往是一年前或更早的，而一年对于互联网来说可是很长时间。

事实上，链接图标远比“链接”或“分享”更易辨识，但决定性的形式尚未显现出来。而汉堡图标却在各种不同设计中都保持了统一。

最重要的是，汉堡图标保持了它的初衷：它为我们节省了大量宝贵的屏幕空间资源。假如客户给你多如牛毛的东西，都要加到菜单中，那么把它们移除屏幕并给出链接，就是简单粗暴却非常有效的办法，可以为客户同样想要的内容腾出空间。

我得说汉堡图标在这个问题上，比其他解决方案都好，但也不尽然。还是应该说，汉堡图标没有其他解决方案那么糟糕。

##问题的根源

汉堡图标得到采用，还是因为设计师（更多时候是客户）没有完全遵循移动优先的设计方法。他们想要一个“常规”站点，却把它硬塞进外孙女的手机中。

汉堡图标的反对者往往用“菜单”二字代替它，他们这么做完全不得要领。不论是否形似，汉堡图标如今已经达到了它的含义，但用户理解这个按钮是干什么的，并没有解决最大的问题，它隐藏了导航，隐藏了用户的选择，这是相当严重的自残。

简单说，汉堡图标是一种象征，象征着我们在一心一意全方位拥抱移动优先的道路上，集体失败了。

##更好的解决办法

为了解决汉堡图标的问题，我们得接受一个现实，我们以往所知的网页已经不再管用了。移动网页的崛起，远非减少几栏、去掉一些沉重的图片文件这么简单。

不同于旧时代的网页，移动网页采用了一种不同的方式。移动网页生在专注于app的环境中，用户希望传统网页也有类似的时尚体验。

很著名的例子，Facebook的app将他们的汉堡图标改成了标签栏，结果显示转化率得到了提升。然而Facebook除了更换菜单设计，还做了意义重大得多的事情。近来他们发布了Messenger，了不起的地方在于，他们已经有了功能完善受人欢迎的app，他们本可以将信息功能整合进去。Facebook却拆分了这些功能，使每个app专注于自己的角色，便得到了两个简单的app，而非一个复杂的app。缩减功能导致了菜单项的减少，就不那么需要汉堡菜单了。

优秀的app都极为专注，他们通过远比网页严苛的用户测试进化。要打造app一样的体验，我们得简化网站，再简化，然后再多简化一点点。如果有必要，将建筑结构打散成可管理的小片，近似于迷你站点。当我们为用户展现一组简单的选择，复杂菜单的问题再也不会出现了。

使用汉堡图标就像在伤口上扎绷带：虽然把它包起来了，下面的伤口仍在。

我们只有完全拥抱移动优先的方式，不仅将它用于设计，也用于我们的内容和信息结构，汉堡菜单才会成为历史。

焦点图/缩略图用了Mononc’ Paul的汉堡图片

原文链接

入门:移动APP中的各种导航

hi@victor42.work (Victor42) — Sun, 11 May 2014 13:25:16 +0000

[国外设计第39期]

即使是移动应用界面的原型设计，导航的形式也可以多种多样。尽管尺寸小，又必须紧凑排列大量数据，它们似乎受到了紧密的约束，但依然有着形形色色的选择。

人们曾经一度只会考虑一种形式——流行且广泛使用的垂直导航，即侧边栏。尽管如此，还有其他可以提升用户体验的形式，会让用户浏览你的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将所有的基本导航和二级导航放在顶部，通过固定的位置来打消用户的困惑。

HAMZAQUE Designs为Bettertec设计的气流计算APP，巧妙地运用了占据顶部的标签页。此外，它们被设计成黑白对比的色调，和屏幕中其余部分相同。

MING Labs&Pierrick Calvez的Shario APP，透露着简洁的矢量风格概念。整个导航通过顶部的几个按钮运转起来。

展开式菜单

对于处理大信息量APP和喜欢创作简洁紧凑界面的设计师而言，展开式菜单确实是一项至宝。这种方案允许你把菜单图标放在任何地方，不过它通常是在左上角。

Al Powerd的MuSeek是个音乐APP，需要为用户提供大量可视化信息：专辑封面、描述、歌曲名称、曲目列表等等，所以没有空间来放置全屏菜单。在这个例子中，左上角的小图标就是一根救命稻草，平滑地展现出一列相当巨大的菜单。

Mohammed Alyousfi & Àlex Casabò的Univit UI设计，这是一款优雅的扁平风格APP，使用了一个标准的滑出菜单，通过简单的滑动操作触发。菜单采用了易懂且时尚的轮廓型图标，比各自的标题都大许多。这种方式使得菜单可以很自然地在设计中发挥作用，同时也提供更好的用户体验。

Alexandre Efimov设计的SVOY APP基于一套艳丽的配色方案，与深色的背景有效搭配。设计师让菜单从左侧展开。吸引眼球且逼真的折叠动画，也给设计增添了一些趣味。

Attila Szabó的Időkép又是展开式菜单的一个变种设计，利用几乎占据满屏的梦幻般“拉窗帘”效果来显示菜单本身。

结论

每种方案都有自己的优势与劣势，这就是为什么每个项目都提倡它独有的导航类型，可以有效地应对任务，并对用户体验有帮助。

原文链接