移动手机APP导航菜单设计方案

手机分辨率比桌面平台小很多,所以设计手机网站或是移动应用的时候,导航菜单都需要考虑周全,尽量保持简约和易用性高,这里我们整理了5种实用的移动手机APP导航菜单设计方案,你可以尝试这些菜单设计模式用在你的新设计项目上,好用而且有新鲜感。

这5种APP菜单设计方案也许有很多设计师已经在使用,但不能否认它是目前实用的,而且能提高用户体验的菜单设计方案。下面摘选移动手机UI设计美观、时尚,希望你看了后会有灵感收获,能把你的菜单设计得更棒,好好学习吧:)

APP导航设计类型:

  1. 列表式菜单
  2. 矩阵、网格式菜单
  3. 底部菜单
  4. 顶部菜单
  5. 扩展菜单

1. 列表式菜单

列表式菜单设计这个从网站到手机APP上都很常用的,遵循由上至下的阅读习惯方式,所以使用起来用户不会觉得困难。另外我们可以通过漂亮的配色、图标组合来设计,使得菜单更多加美观。

GIF Aimation by Sergey Valiukh


查看原图

Elevatr by Fueled


查看原图

HabitClock App by Kutan


查看原图

Instagrab for iOS by Davis Yeung


查看原图

2. 矩阵、网格式菜单设计

网格式菜单就类似于metro UI的堆砌色块,优点简约而不简陋,导航清晰、明显,并能提高效率。但设计时切记不分青红皂白的去使用色彩哦,这可能会让用户不知所措和产生疲倦感。

Vectra  by Michal


查看原图

Arrivo Mobile App by Marco


查看原图

Abracadabra App by Sergey


查看原图

T R A V E R S E by Willis


查看原图

3. 底部菜单

底部菜单主要是列出应用程序重要的功能。

Badoo concept by Jakub Antalík


查看原图

Animated sliding tab bar by Virgil Pana


查看原图

4. 顶部菜单

顶部菜单和底部意义差不多,把菜单放在顶部,可以遵循上至下的阅读习惯,不过我认为有个缺点就是不能单手操作。

Horner by Cüneyt ŞEN


查看原图

Discovery Channel by Enes Danış


查看原图

Air flow calculation app by HAMZAQUE


查看原图

Shario App by MING Labs&Pierrick Calvez


查看原图

5. 扩展菜单

扩展式菜单设计现在连网站也很常用,当我们觉得菜单比较点用位置的时候,可以尝试用这种方式来隐藏菜单,需要注意的是设计展开菜单按钮大部设计在左或右上角这些显示的位置。

MuSeek by Al Power


查看原图

Univit UI by Mohammed Alyousfi & Àlex Casabò


查看原图

SVOY app design by Alexandre Efimov


查看原图

Időkép by Attila Szabó


查看原图

总结

从上面5个菜单设计方案中可以看出都有自己的优缺点,所以我们应该选择对你项目最为有效的方案,并能提高用户体验。

时间: 2024-12-03 18:02:22

移动手机APP导航菜单设计方案的相关文章

html-网页上的底部导航在手机app显示问题

问题描述 网页上的底部导航在手机app显示问题 网页在pc端和手机浏览器显示都没有问题,但是在手机app上底部导航出现问题 解决方案 自己解决了,感谢各位.. 解决方案二: app 手机网页一些小知识WebView网页版的手机app 解决方案三: 可以看一下 jquery mobile

中国手机地图导航APP市场累计账户数已达13.3亿户

根据EnfoDesk易观智库产业数据库最近发布的<2014年第1季度中国手机地图导航APP市场季度监测报告>数据显示:截至2014年第1季度,中国手机地图导航APP市场累计账户数已达13.3亿户,环比增长14.6%.第1季度,高德地图/导航.百度地图/导航.图吧地图/导航分别以32.6%(含iOS苹果地图4.8%).25.9%.7.9%的比例占据中国手机地图导航APP累计用户市场份额前三位,相比上季度,高德地图/导航和百度地图/导航的累计用户规模的环比增长率分别为14.6%.19.3%.Enf

webapp滑动效果-webapp滑动导航栏类似手机app首页上的导航条能够滑动

问题描述 webapp滑动导航栏类似手机app首页上的导航条能够滑动 类似手机app首页上的导航条能够滑动,内容也能够滑动,且滑动时,导航条也跟着滑动,相应标题变色.这个效果怎么实现啊.各位大神求助啊! 解决方案 HBuilder官方API有详细的教程

IOS开发:Web App导航设计探讨

 开发:Web App导航设计探讨-app导航设计"> 导航系统所遭遇的挑战 iPhone Native App较常见的导航如下图所示: 手机屏幕底端:A.B.C.D四个tab组成该Native App的全局导航,这是我们经常见到的tab导航栏. 手机屏幕顶端:主要有四种形式.第①种形式是在该位置中心显示产品的logo;也可以将logo适当调整位置,将常用操作或快捷入口放在该位置的右侧.第②种形式是在该位置有两或三个tab选项.第③种形式是在该位置中间显示当前任务标题,在左右两侧放置导航控

iPhone Web App 导航设计探讨

最近在做iphone端Web App的项目.由于产品形式新颖,技术环境不成熟,公司给与了较宽松的研发时间.在一个月的交互设计阶段,每个环节都得到多次讨论推敲,我从中感悟颇多.导航系统的设计是一个比较典型的点,拿出来与大家分享讨论一下. 导航系统所遭遇的挑战 iphone Native App较常见的导航如下图所示: 手机屏幕底端:A.B.C.D四个tab组成该Native App的全局导航,这是我们经常见到的tab导航栏. 手机屏幕顶端:主要有四种形式.第①种形式是在该位置中心显示产品的logo

APP导航交互设计解析

  首先,我们来看一下一个叫做原始导航的导航. 原始导航是一个最最粗糙的导航,通过纯文字的链接入口来导航.如下图: 把它定义为原始导航,是因为如今我们的移动APP导航都是在此基础上通过不断的演变来形成我们常见的APP导航模式. 一.标签导航(选项卡导航) 有了原始导航,你可能会说,原始导航这种入口的摆放方式太占空间了,就五个入口就占据了整个界面.有没有一种更加省空间的导航模式呢?当然有. 首先,我们将五个入口放到界面的下方,就会形成常见的底部标签导航. 目前这样的APP导航是最常见的. 通常,底

聊聊移动APP导航设计的改版实战

  关于手机App 的导航设计讨论已经有很多了(特别是针对汉堡菜单的讨论).今天翻译的这篇文章,是原作者在真实的 App 中对导航进行改版,观察数据并进行分析的一则小文,实战意义很强,可供借鉴 >>> 欢迎同学们关注译者的微信公众号呦:shejiyiyan 在移动界面设计中,使用各种菜单控件来简化界面,对设计师来说很有吸引力 -- 特别是在小屏幕的设备上.但是,将 App 的核心部分隐藏在这些菜单里,可能会对实际使用产生负面的影响. 若不在视线里,便不在感知中 为了简化 Polar 的界

手机APP模糊背景设计的优雅

  模糊背景(blurred backgrounds)长时间以来都是作为一个基本的照片效果,但在最近模糊背景已做为使设计元素脱颖而出的非凡工具,而受到很多设计师的青睐.这种做法相当容易,悄无声息又自然的给予内容适当突出,图标和图形就能脱颖而出.这样做能够二鸟一石.首先,你可以为你的项目增加些不一样的效果;其次,适当的增加这种设计效果对小尺寸的手机屏幕很有必要,能有效地提高可读性体验. 模糊的背景还提供了其他潜在的好处.例如,你可以轻易减少你的调色板,而只侧重于一个主色,尤其是在使用白色为基调的设

为大屏手机设计导航的四种方法

  为拇指而设计 Steven Hoober对1333名用户的手机使用习惯进行了观察和分析,发现其中75%的用户会依赖于拇指进行操作,而49%的用户习惯于单手持机.在大屏手机上(我们主要指4寸以上的规格),用户必须将拇指伸出舒适区域才可能触摸到界面顶部的交互对象. 举个例子,我个人来说,每天在使用Amazon音乐应用时都会遇到这样的问题.我需要频繁使用到的导航入口恰好位于界面左上角;这个几年来约定俗成的模式,如今在大屏设备上反而成了单手操作的噩梦.和很多人一样,要触摸到这个图标,我首先必须将手掌