移动应用UI设计——导航设计

正如精良的设计一样,优秀的导航也大象无形。不管是浏览好友信息,还是租赁汽车,完美的导航设计能让用户根据直觉使用应用程序,也能让用户非常容易地完成所有任务。

导航的设计是App设计发展过程中很值得玩味的地方,由于移动设备特别是智能手机的屏幕尺寸有限,设计者们通常会将屏幕空间尽量留给主体内容,为了在手机屏幕给定的范围内展示出更多内容,优秀的导航栏设计将起到关键性作用,对于不同的操作也当因地制宜地选则不同的设计方案。

如网站设计中,我们会把导航分为一级导航、二级导航等等,其实移动应用和网站设计一样,也具有自己的信息架构。这里我们主要依据市场上面已有的产品对移动应用导航大体分为以下两类:主要导航模式与次级导航模式。

主要导航模式

主要导航模式——第一种:跳板式

跳板式导航对操作系统并没有特殊要求,在各种设备上都有良好表现。它有时也被称为“快速启动板”(Launchpad)。

在国内市场上跳板式设计应用很用,如下图的第一个“百度手机卫士”它主要通过功能来展示菜单选项,这种网格布局清晰的把各个功能区域进行划分,能让用户快速找到入口并点击操作。

云图TV,它是一个免流量的手机电视,他的模块相对百度手机卫士来说较简单,主要通过电视台来区分模块名称。比如:中央电视台CCTV、卫士、体育甚至海外频道等等。

而美图秀秀,更是我们比较熟知的一种,它的主界面用2X3的网格布局把常用的功能入口都直观的表现在上面。

什么是2X3的网格布局

2X3网格布局是一种布局形式,常见的布局形式有:3X3、2X3、2X2、1X2。

但不一定非拘泥于网格布局,根据需求的功能来定义,可以成比例放大某些选项,以彰显其重要性。

XiiaLive,一款功能无比强大的网络电台,兼具简洁而清新的UI设计。这款应用具有不容忽视的导航,设计师用3X3的网格布局把菜单的6个菜单项目布局在屏幕中间,使每个格子都扮演着功能性的作用。

Tripper是一款日本的本地导游应用,他用扁平的设计图标把应用的功能用2X3的网格布局罗列在整个界面中,使得用户能够相当轻松顺手地浏览这款APP。

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

ASM采用的是不规则网格的跳板式导航,以突出内容的优先级。

最近经典的游戏:“别踩白块儿”(图1-10)也是跳板式模块的经典体现。

它把各种游戏模式用网格区分开,仅用黑白两色就能清晰的让用户理解并操作。正如前面所说,在网格布局的设计中,不一定必须遵循几乘几的网格形式,甚至可以成比例的放大或者缩小某些选项,用以彰显他的功能特色,举一反三,设计师还可以合并他的多种网格形式,使得功能之间的逻辑流程更准确。比如别踩白块儿中的每个游戏选项,点击的二级菜单也用跳板式或者列表式展现了更多的功能选择。

个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能,允许用户改变跳板导航的布局,如优酷界面。

通过以上的案列分析,我们可以整理如下几点:

主要导航模式——第二种:列表菜单式

列表菜单式导航与跳板式导航其实是有共同点的,他们的共同点在于,每个菜单项都是进入应用各项功能的入口点。

但是不同点在于列表菜单式导航有很多种变化形式,包括个性化列表菜单,体现分组列表和增强列表等。

案例分析:

个性化列表的方式:在photosticker中首页就采用了个性化列表菜单的方式。而IOS系统设计则采用了分组列表菜单式。

印象笔记的IOS版本它把列表式导航与跳板式导航设计相结合。

下厨房即是增强列表导航,何为增强列表导航呢?即就是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的。

其实列表菜单式导航,这个从网站到手机APP上都很常用的,遵循由上至下的阅读习惯方式,所以使用起来用户不会觉得困难。

通过例举的四个案列,以及列表菜单式导航与跳板式导航的对比,列表菜单,更适合用来显示较长或拥有次级文字内容的标题。

主要导航模式——第三种:选项卡式

选项卡式导航,在不同的操作系统有不同的表现和规则。所以在设计时需要为不同的操作系统专门定义选项卡的位置。

iOS、webOS和Blackberry(黑莓)系列都把选项卡放在了屏幕底端,这样用户就可以用拇指进行操作。

选项卡的导航设计方式,一般为四个导航按钮最为普遍,最方便操作的是第二和第三个按。受制于屏幕宽度的限制,其栏目的个数是有限的,不能超过5个。过多的话明显不利于用户的切换。从界面布局来看,也降低体验友好度。

目前也有部分APP在选项卡的基础上,衍生出了一种交互比较好的弹出导航菜单。突出选项卡上展示的那些核心功能的按钮,方便用户快捷操作。

选项卡至于低端的应用市场上面有很多,这里列举几个比较常见的APP:

屏幕底部水平滚动的选项卡是个非常不错的设计,如的Waterlogue应用,它是一款水彩风格照片处理工具,下面的水平翻动选项卡可以让用户选择多种水彩风格

Android(安卓)、Symbian(塞班)和Windows系统都把选项卡定位在屏幕顶端,它模仿了网址导航模式。

Horner包含了可隐藏菜单,不过它能很妙地从顶部出现,由于明亮的颜色和有关联性的巨大图标,它与整个界面内容形成了鲜明对比。Bettertec设计的气流计算APP,巧妙地运用了占据顶部的标签页。

顶部菜单和底部意义差不多,把菜单放在顶部,可以遵循从上至下的阅读习惯,但也有缺点,即不适用与单手操作。

单手操作用户是所示的这两种姿势(左手用户相反)。绿色代表容易点击区域,黄色为拇指伸展可到点击区域,红色区域超出单手可点击范围。

所以不管是在导航设计中,还是在移动应用的其它设计中,我们应该尽可能的考虑用户的手势操作习惯,给用户更好更便捷的体验。

单手操作手指滑动区域图片

网易新闻则采用了顶部可滑动的导航形式,屏幕顶端可滚动的选项卡:用户移动选项卡后能看到更多的菜单选项。

爱奇艺应用同样也采用了顶部滑动导航的模式。但是这里更值得一提的是,为已选择的菜单项设置使用易于识别或带有标签的图标等不同的视觉效果,用户就能清晰的知道自己选择了哪一项。

主要导航模式——第四种:陈列馆式

陈列馆式导航能够很好地应用与用户需要经常浏览,频繁更新的内容,如下图的超级相册和便签本。

相册是我们在日常生活中时常运用到的一个功能,使用频率高,图片数量多,所以采用陈列馆的形式是再合适不过了。

而便签本也不陌生,下图中的便签本可以上下左右拉伸不断创建新的收纳空间,一个个方方正正的分类视图,颜色各异却能达到一种养眼的和谐美。没有花哨的功能,主界面上只简洁地显示收纳盒名称与其中的项目数量。

最美应用:是一款通过互联网平台,每天为用户发送一款赏心悦目的移动互联网应用。它通过类似幻灯片的形式来导航,用户通过查看每个应用来划屏切换屏幕内容,而它下面的进度条也会互动性的跟随着用户的切换而进行图标的动态变化。

主要导航模式——第5种仪表式

仪表式导航提供了一种度量关键绩效指标是否达到要求的方法。

经过设计以后,每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用。

乐动力:通过数据来查看自己每天活动状态。下滑还有很多功能,都可以点击查看。

主要导航模式——第6种隐喻式

隐喻式导航的特点是用页面模仿应用的隐喻对象。

这种导航主要用于游戏,但在帮助人们组织事物(如日记、书籍、红酒等),并对其进行分类的应用中也能看到。

途书笔记,用牌照记录数据的笔记。它把导航界面菜单做成了一本一本的书,有一本书的形式,隐喻的表达了书的概念。自定义标题,分类进行查阅。

找你妹的游戏中,导航就用闯关的进度来显示,直观且具有趣味性。

主要导航模式——第7种:超级菜单式

移动设备上的超级菜单式导航与网站所用的超级菜单导航类似,它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。

这种导航模式在现在的app设计中使用的比较少,而且一般会用做分类检索de次级导航使用。在手机网站的导航设计中比较常见。

美团中就采用了超级菜单式导航做为次级导航使用。

以上均是主要导航模式:那么接下来针对次级导航模式进行案列赏析。

次要导航模式

这里我们值得注意的是在导航的设计中,所有的主要导航模式都可以用作次级导航。我们经常能够看到选项卡下再用选项卡导航、导航卡下用列表导航、选项卡下采用仪表式导航、跳板式导航下采用陈列馆式导航灯情况。

而次级导航模式是否可以用作主导航,答案不是确定的,因为事物都是贯穿融合的,主要你运用得当,一切均有可能。现在我把这三种归纳为次级导航是针对现有市场产品进行分析得出,并不一定是绝对。

第8种:页面轮盘式

通过这种导航模式,操作者可利用“滑动”操作快速浏览一系列离散的页面。

疯狂来找钱就采用页面轮盘式,页面指示器(iOS中的术语,指用来表示页面数量的小点)可以显示出导航中的页面数量;执行“滑动”操作可以显示下一页。

第9种:图片轮盘式

图片轮盘式导航类似于一个二维轮盘,图片轮盘式导航更多的应用于播放器和需要多图片展示应用中。

香蕉相机,作为一个相机应用,该有的功能相对还是挺齐全的。拍照、添加相册图片、添加文字等等,都木有问题,还有很文艺的滤镜和相框~

图片轮盘式导航可以查看更多的香蕉图标,相加几个来几个~~~~

第10种:扩展列表式

扩展列表式导航通过左/右/上/下拉屏幕或者点击按键显示更多的信息。

在网易新闻,TIMI记账和畅读等应用设计当中,通过点击屏幕左上角的按钮唤出切换项,有些也可以通过向右或者向左,滑动手指来完成。所以当我们觉得菜单比较占用位置的时候,可以尝试用这种方式来隐藏菜单,需要注意的是设计展开菜单按钮大部设计在左或右上角这些显眼的位置。

此处就个人意见,如果能将主要功能项组织在4到5项,选项卡导航的设计方式可能会更好,否则,就应该优先考虑抽屉式导航了。抽屉式导航通过纵向排列切换项解决了具有过多的切换项这一问题。不过这也意味着导航不能和主体内容同时出现在屏幕上。

THE END
1.中国八大菜系菜谱大全app八大菜系经典菜谱app下载八大菜系app可以让你在这里学习粤菜、川菜、鲁菜、淮扬菜、浙菜、闽菜、湘菜、徽菜,海量的菜谱让你从新人小白开始学起,你可以选择喜欢的菜系学习,还可以学习多个菜系,让你感受每个菜系不同的风味。在这些软件中一般都会分类特别详细,你可以根据需求来筛选或者搜索,还为你提供详细的图文菜谱也有的提供视频菜谱,让你分http://www.downcc.com/k/badacaixiapp/
2.家常菜app哪个比较好?家常菜app下载家常菜菜谱大全app美食杰手机移动版(家常菜谱大全)是一款专门为喜爱做美食人群设计的手机应用,海量菜谱、三餐推荐,还可以关注好友一起研究好吃的菜品哦!还等什么?快来下载体验吧!美食杰移动版 美食家常菜谱大全做法 22.82M / 2022-06-01 / v1.3.3 安卓版 评分: 下载 http://www.downyi.com/key/jiachangcaiapp/
3.家常菜点餐基于小程序的家庭大厨家常菜点餐系统设计与实现(源码+数据四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍:大厂码农|毕设布道师,阿里云开发社区乘风者计划专家博主,CSDN平台Java领域优质创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。 主要项目:小程序、SpringBoot、SSM、Vue、Html、Jsp、Nodejs等设计与https://blog.csdn.net/m0_66468899/article/details/144337136
4.学菜谱app排行榜前十名偏玩手游盒子分享十大学菜谱app排行榜前十名手机应用,编辑为您推荐手机学菜谱app排行榜第一名到前5名到前十名的应用。找学菜谱app有哪些、学菜谱app哪个好用,上偏玩手游盒子https://m.pianwan.com/s/zj-561529
5.十大好用的美食菜谱app厨房小白新手下厨必备的学做菜视频app想学做菜的你,面对食材无从下手?其实很简单,手机上下载个菜谱app就能搜索你想做的菜详细做法。那么菜谱app哪个好用?MAIGOO小编特地给大家整理了十大好用的美食菜谱app排行榜,包含下厨房APP、豆果美食APP、香哈菜谱app、好豆菜谱app、美食杰App、美食天下app等国内好用https://m.maigoo.com/goomai/207069.html
6.基于android的菜谱app的设计与实现菜谱应用基于android的菜谱app的设计与实现 菜谱应用 想要开发出一款靠谱好用的美食菜谱APP小程序系统,需要具备哪些基本功能呢? 1、视频教学。对于美食的教学教学方法最直接受用的就是视频教学,用户浏览起来更加方便而且可以直接跟着视频操作,效果更佳。用户也可以自己拍摄制作美食的视频上传到平台,分享给其他用户浏览查看,既提高https://blog.51cto.com/u_12205/9416648
7.食堂一周菜谱明细表制作软件食堂一周莱谱为了方便食堂工作人员制作一周菜谱,并为就餐者提供丰富多样的菜品选择,我们开发了一款名为“食堂一周菜谱明细表制作软件”的软件,该软件能够根据预设条件和要求,快速生成一周菜谱明细表,方便食堂工作人员进行参考和修改。 功能特点 1、自动生成一周菜谱:软件可以根据预设条件和要求,自动生成一周菜谱明细表,包括每天的菜https://www.coffee.cn/xican/post/378174.html
8.界面设计小小厨美食菜谱APP韩小莹北京| UI设计师 创作30粉丝4582 plady 广州| UI设计师 创作34粉丝5048 韩冰云 杭州| UI设计师 创作45粉丝17859 创作28粉丝13594 创作10粉丝2673 创作18粉丝10946 创作15粉丝1123 创作45粉丝55402 sunkim 广州| UI设计师 创作42粉丝8521 智能语音菜谱类APP,以菜谱作为核心功能主打图文播放和视频播放,实时推送精选菜https://www.zcool.com.cn/work/ZMzUwMTg2OTY=.html
9.美食菜谱app手机界面图片免费下载美食菜谱app手机界面素材千图网为您找到163张美食菜谱app手机界面相关素材,千图网还提供美食菜谱app手机界面图片,美食菜谱app手机界面素材, 美食菜谱app手机界面模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://www.58pic.com/tupian/meishicaipuappshoujijiemian.html
10.多功能美食菜谱APP方案设计毕业设计论文.pdf多功能美食菜谱APP方案设计毕业设计论文.pdf,摘要 本设计主要针对Android移动平台多功能美食彩票系统进行分 析和设计。设计一款基于Android的一款多功能菜谱软件,客户通过 手机能够获取美食菜谱、食材信息、健康资讯、在线社区以及线上、 线下互动服务。本次APP设计以内容https://max.book118.com/html/2021/0107/8062106036003035.shtm
11.美食菜谱类APP界面设计今天跟大家分享的是一款美食菜谱类APP的界面设计。现在美食菜谱类的APP有很多,如何才能在众多的竞争对手中脱颖而出。APP界面设计是一个重要的因素。一起来看看这款“妈妈快厨”APP的界面设计,对您设计相关的APP有所帮助。 1、颜色选择 2、图标设计 3、登录注册界面 https://www.adinnet.cn/bloginfo/2018_05/blog_3721.html
12.自己制作菜单的APP推荐自己制作菜单的下载优先用豌豆荚APP下载 No.4 家常美食菜谱 生活休闲|22.02MB 家常美食菜谱提供家常菜、菜、下饭菜、素菜、创意菜几大分类菜谱,收集很多甜品、烘焙、减肥、塑形等食谱,以及来自全国各地的数十万道中华美食,汇集各种中国美食、健康食谱、家常菜、健身食谱、美食制作等食谱美食轻松制作。也有对您的健康状态,体质,慢性疾病和https://www.wandoujia.com/bangdan/555652/
13.做菜不用再问妈:这7个App换着用,让你从厨房小白变大厨一款设计精美的菜谱 app,推荐大都为异域美食,可以拓展自己美食边界。内置主题菜谱不仅能让人学会怎么做饭,还能教会你为什么要这么做。每个菜谱明确标记了烹饪时间和每份所含营养值,若为烘焙菜谱还会给出静置时间作为参考。在食材方面可以选择为几个人做饭,并根据人数来确定食材的多少。所有菜谱食材均可一键加入购物单,买菜https://36kr.com/p/1390010704837635
14.菜”的图片)要求:1新建大小为A4,模式为CMYK的设计制作菜谱单页(突出“菜”的图片) 要求:1、新建大小为A4,模式为CMYK的文件。 2、通过【矩形工具】【椭圆工具】及路径查找器绘制相应图形。 3、通过置入命令置入图片。的答案是什么.用刷刷题APP,拍照搜索答疑.刷刷题(shuashuati.com)是专业的大学职业搜题找答案,刷题练习https://www.shuashuati.com/ti/8d3682ee6e824bb284b547f3eb827578.html?fm=bd117819e97e30b4799a5f83c3d240e1cd
15.外卖新人免单由谁付费,外卖新人免单app有哪些?一、外卖店菜谱设计 1、首先是设计好菜单及价格,这两点非常关键。快餐的定价需要多动动脑筋,价格高了客单量少,低了没利润甚*亏本,外卖平台一般收取18~20个点,所以也要参考下其他客单量高的店铺的价格以借鉴,然后结合成本定出合理的快餐和套餐价格。 https://www.keloop.cn/information/art11727.html
16.app软件设计制作手机app商城开发app封装定制公司海拔网络研发家具商城APP一般具备什么功能? 2021-11-30 当下商城APP研发模式十分成熟,但是功能来来回回都是哪些,那么问题来了,研发家具商城APP一般具备什么功能?下面看看小编是如何回答你的! 菜谱APP开发软件兼具哪些功能? 2021-11-29 当下的年轻人都喜欢点外卖,不喜欢做饭。由于外卖十分便捷,可是做饭也是生活中不能缺少的技http://www.haibagroup.cn/
17.开餐厅如何设计菜单十个技巧教你做有颜值的菜单功能和作用不一样 ,设计也要不一样 一个菜单设计可能不够。你需要为到餐厅用餐的顾客提供一个菜单,包括纸质菜单,角落的广告牌或者用来点餐的数字屏。很多餐厅同样会在他们的网站上提供菜单,另一些则还提供app菜单。 跨平台的菜单设计最需要考虑的是图片。你不仅需要十分谨慎地挑选印刷使用的图片,图片同样对于网站和http://www.bjcpdy.com/nd.jsp?id=72
18.三年级科学上册教案《5设计一日食谱》鄂教版教学目标: 1、 能根据一天所需的食物营养设计一日食谱。 2、 能利用图书、网络等方式获取制定“一日食谱”的相关资料。 3、 通过收集资料、与他人交流等形式,制定一份较为科学的“一日食谱” 4、 乐于用所学的知识改善自己的生活,形成良好的生活习惯。教学准备: PPT课件、设计菜谱卡片、设计食谱相关视频。教学https://m.zxxk.com/Soft/22539815.html
19.如何设计精美绝伦的婚宴菜单接亲网一般要怎么样设计婚宴的菜谱呢?一起来随小编了解一下吧! 一、如何设计精美绝伦的婚宴菜单 1、婚宴菜单因人而配 上等婚宴的标准便是根据宾客喜好而特别定制菜品,作为普通百姓婚礼,不可能做到如此精细地步,但也要尽量根据宾客的口味、风俗、习惯等配置菜品,例如,在主桌中就坐宾客大多为老人,需要避免高糖(糖尿病)、https://www.jieqinwang.com/baike/90894
20.做饭前先计算,程序员设计“方程式”菜谱走红做饭前先计算,程序员设计“方程式”菜谱走红 【看苏州专稿 文、视频/张钟予 李郁昊 曹前】 家里来了客人聚餐时,准备多少道菜合适? 苏州软件工程师薛锋将自创的一套《程序员做饭指南》上传网络后,其“方程式”菜谱在全球最大的代码托管平台GitHub走红,受到各地程序员们的点赞。https://news.2500sz.com/doc/2022/11/02/918369.shtml
21.餐厅菜单设计免费餐厅菜单设计模板在线餐厅菜单制作设计软件MAKA APP 手机扫一扫即可下载 iPhone Android 开通会员 设计学院 成为设计师 设计师作品管理 设计师帮助中心 我的作品 5分钟轻松创作,一键生成餐厅菜单设计模版 20w+海量精美模版,轻松营销不求人。 马上体验 在线作图神器,一站式设计服务 品类介绍 菜单是餐厅为便于顾客点菜订餐而准备的介绍该企业产品、服务与价格等内https://www.maka.im/zhinan/cantingcaidna