移动应用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排行榜第一名到前5名到前十名的应用。找学菜谱app有哪些、学菜谱app哪个好用,上偏玩手游盒子https://m.pianwan.com/s/zj-561529
2.家常菜点餐基于小程序的家庭大厨家常菜点餐系统设计与实现(源码+数据二、系统设计 系统功能结构如图 三、系统功能设计 管理员可以管理用户信息,可以对用户信息添加修改删除。具体界面的展示如图5.1所示。 图5.1 用户信息界面 管理员可以对店铺进行查询修改,删除操作。具体界面如图5.2所示。 图5.3 店铺管理界面 系统管理员可以对菜品信息进行删查操作。界面如下图所示: https://blog.csdn.net/m0_66468899/article/details/144337136
3.美食菜谱类APP界面设计今天跟大家分享的是一款美食菜谱类APP的界面设计。现在美食菜谱类的APP有很多,如何才能在众多的竞争对手中脱颖而出。APP界面设计是一个重要的因素。一起来看看这款“妈妈快厨”APP的界面设计,对您设计相关的APP有所帮助。 1、颜色选择 2、图标设计 3、登录注册界面 https://www.adinnet.cn/bloginfo/2018_05/blog_3721.html
4.界面设计小小厨美食菜谱APP韩小莹原创作品UIAPP界面产品界面设计美食 韩小莹 UI界面设计 2 Z04949859 小金鱼HY 01:23:02 等3人发布 08:02:13 林远宏 yuan 1 更努力更努力点 IP 形象国庆LOGO 设计海报设计插画设计壁纸图片作品集VI 设计UI 设计规范AI 绘画表情包PPT模板app界面/app界面。#app界面#app界面‘app 界面app界面~APP界面‘’app界https://www.zcool.com.cn/work/ZMzUwMTg2OTY=.html
5.美食菜谱app手机界面图片免费下载美食菜谱app手机界面素材千图网为您找到163张美食菜谱app手机界面相关素材,千图网还提供美食菜谱app手机界面图片,美食菜谱app手机界面素材, 美食菜谱app手机界面模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://www.58pic.com/tupian/meishicaipuappshoujijiemian.html
6.菜谱APP体验创新选题围绕人们日常生活中做饭的问题,也针对像菜谱大全,豆果美食,下厨房等菜谱app,展开的用户体验分析和交互设计创新。该选题也可以用,“我是掌厨”、“厨师菜单”等名字。该选题的目标用户为以本人为核心的一群人。 一、选题介绍和基本分析 从菜谱大全,豆果美食,下厨房美食模块来看,这些app是教人们如何做自己想吃的美https://www.jianshu.com/p/69b03a6f41db
7.多功能美食菜谱APP方案设计毕业设计论文.pdf摘要 本设计主要针对Android移动平台多功能美食彩票系统进行分 析和设计。设计一款基于Android的一款多功能菜谱软件,客户通过 手机能够获取美食菜谱、食材信息、健康资讯、在线社区以及线上、 线下互动服务。本次APP设计以内容为主,简要介绍了系统的功能, 根据需求对整个系统进行总体设计,然后做出手机界面,最后进行系 统开https://max.book118.com/html/2021/0107/8062106036003035.shtm
8.味知香,美食文化探索与全新下载体验广告制作味知香的界面设计简洁大方,用户体验良好,APP内的搜索功能强大,用户可以快速找到所需的信息,味知香还具有强大的社交功能,让用户可以与志同道合的美食爱好者交流。 味知香作为一款集美食推荐、菜谱学习、食材购买、社交分享等功能于一身的APP,为广大美食爱好者带来了全新的下载体验,通过味知香,用户可以轻松找到心仪的http://www.hnyaoyaoyao.cn/post/952.html
9.设计素材国外优秀的app设计网站是什么?传单上的地图是怎么3、HudsandGuis:科幻UI界面共享博客HudsandGuis:科幻UI界面共享博客是致力于共享电影的科幻类UI界面设计的网站,我们看过钢铁侠系列的电影,其中具有浓厚未来科技理念的UI界面设计具有强烈的视觉冲突科学技术UI界面是从海外科学技术电影中诞生的新设计理念,这样的UI设计具有先进的想象力和极其简单的设计要素,是提醒未来科学https://jz.fkw.com/wzjs/51370.html
10.苹果iOS人机交互界面开发指南我们曾经介绍过《iPhone应用界面设计指南》,我们将介绍iPhone应用界面设计指南的一个章节——《苹果iOS应用人机交互界面开发指南》。 我们曾经介绍过《iPhone应用界面设计指南》,我们将介绍iPhone应用界面设计指南的一个章节——《苹果iOS应用人机交互界面开发指南》。 https://mobile.51cto.com/hot-246659.htm
11.软件界面设计界面素材图片UI/UX图片素材花瓣网,设计师灵感库,素材图库分发。发现你喜欢的软件界面设计图片,软件界面设计灵感图,将你喜欢的界面软件界面设计素材采集到UI/UXhttps://huaban.com/explore/ruanjianjiemiansheji/
12.以闪亮之名vvanna百科答案攻略大全以闪亮之名7、问题:独家设计未上传完成时,不可以进行哪些操作 答案:保存到这套时装 8、问题:独家设计时装一共有几个可绘制的图层 答案:2个 9、问题:代言女王大赛中,如何代言更多商铺 答案:选以上全部 10、问题:家园里卡住不动了怎么办 答案:点击脱离卡死 11、问题:家园里的浴缸可以选择不同的入浴剂泡澡,但不包括什么 https://a.9game.cn/yslzm/7815658.html
13.高端网站建设网络公司网站设计连云港app开发网站建设,网站连云港群诺品牌创意建立于2012年,是一家致力于高端网站建设以及小程序APP开发,软件定制等服务的一体化互联网公司.专业为您提供高端网站建设公司,ui设计公司,网站设计公司,高端网站建设,网站建设公司,用户体验设计,连云港vi设计,界面设计公司,网站界面设计,微信小程序开发,连http://www.qunnuo.vip/
14.连云港网络公司连云港群诺品牌创意建立于2012年,是一家致力于高端网站建设以及小程序APP开发,软件定制等服务的一体化互联网公司.专业为您提供高端网站建设公司,ui设计公司,网站设计公司,高端网站建设,网站建设公司,用户体验设计,连云港vi设计,界面设计公司,网站界面设计,微信小程序开发,http://www.weblyg.com/
15.设计最美的50个APP图标好看的应用图标推荐最好看的APP图标盘点该应用的图标设计十分独到,以中国毛笔书写体为核心元素进行创作,以类似于“反写的逗号”作为展现形式。作为一款国外的应用,The Pattern的图 【展开全部】 纪念碑谷 19481 0 苹果设计奖得主,最美APP图标之一。纪念碑谷不仅有着令人叹服的游戏设置,还有着唯美的界面设计;其图标采用立体样式,结合了游戏界面呈现的https://m.maigoo.com/top/421565.html
16.导航定位功能UI界面APP设计定位导航导航设计地图导航设计类图片素材6我图找相似功能已为您找到60张与导航定位功能UI界面APP设计定位导航导航设计地图导航设计类似的图片,包含各种高清原创导航定位功能UI界面APP设计定位导航导航设计地图导航设计素材图片,找导航定位功能UI界面APP设计定位导航导航设计地图导航设计相似图片就上我图网.https://so.ooopic.com/findsimilarity-24090546.html
17.辣椒App,美食探索必备工具,轻松下载开启美食之旅1、界面设计:辣椒App的界面设计简洁大方,色彩搭配合理,给人一种清新的感觉。 2、搜索功能:辣椒App的搜索功能非常便捷,您可以轻松找到想要的菜谱或餐厅信息。 3、菜谱质量:辣椒App提供的菜谱内容丰富,步骤详实,适合各年龄段的美食爱好者。 4、社交互动:辣椒App的社交平台让用户之间可以互相交流美食心得,分享自己的烹饪http://www.jealy.net/post/4783.html
18.UI设计像素主题图标设计 作者:李倩 清新国风主题图标设计 作者:赵淑君 马里奥主题图标设计 作者:王语嫣 怪兽联盟主题图标设计 作者:聂丽嘉 爱丽丝主题图标设计 作者:王淼 “青愿”自愿者APP服务 作者:王瑞雪、赵淑君、周慧妤、钟 紫薇垣APP界面设计 18级视觉传达设计 饭趣美食菜谱APP界面设 18级视觉https://art.tfswufe.edu.cn/xsfc/kyzs1/sjcd1/UIsj.htm
19.AI设计规范AI设计规范语音界面设计和图形界面设计不同,两者之间有着许多微妙但相距甚远的差异点。 这套AI设计规范可以帮助你理解语音优先的交互体验应该如何设计,学习基础又关键的用户体验原则,如何使用华为提供的指南和说明创造出令用户满意的语音交互体验。 当前V1.0版本主要包含以手机为主的智慧语音对话和视觉的规范,已落地于手机、电视、https://developer.huawei.com/consumer/cn/doc/31435