移动应用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.步骤图板烧鸡腿堡的做法板烧鸡腿堡的做法步骤菜谱前两天我发了板烧鸡腿堡的研究视频,视频比较长,不过研究的过程我觉得还挺有意思的,感兴趣的小伙伴可以点击这里查看https://mp.weixin.qq.com/s/9sZa9BYBTTe13o7d2FuADg 这两天我琢磨还是得弄一个完整的制作视频和图文,这样方便大家查找食谱和制作。 打开App收藏 醪糟汤圆 评分8.0 344 人做过 流心芝士塔https://mpartner.xiachufang.com/recipe/105936098/?recipe_type=1
2.高档宴会菜谱图片高档宴会菜谱素材高档宴会菜谱模板免费下载宴会菜谱 宴会酒水单图片 高档菜谱 酒店菜谱 宴会单图片 高档菜谱 高档菜谱 高档菜谱 高档菜谱 高档菜谱 饭店高档菜单菜谱 宴会菜单图片 高档菜谱 宴会psd 宴会厅 高档菜谱 高档菜谱 高档菜谱 高档菜谱 宴会菜谱图片 高档宴会菜单封面图片 宴会菜单图片 高档菜谱图片 https://www.16pic.com/sucai/5180943.html
3.读书摘记移动应用UI设计模式陈列馆式的设计通过在平面上显示各个内容项来实现导航,主要用来显示一些文章、菜谱、照片、产品等,可以布局成轮盘、网格或用幻灯片演示。 陈列馆式导航能很好地应用于用户需要经常浏览,频繁更新的内容。 1.1.5仪表式 仪表式导航提供了一种度量关键绩效指标(Key Performance Indicators,KPI)是否达到要求的方法。经过设计https://www.jianshu.com/p/e703966bfea2
4.印象笔记的入门书Evernote超效率数字笔记术48对于设计师来说,你的电脑端可能已经具备了一块手写板,这时候Evernote提供你手写、手绘输入笔记的功能。 48那些无法用言语来形容的事情。 49手写笔记的编辑功能。新建手写笔记 2-6 善用记录地点自动分类51 51在Evernote笔记中可以设置记事位置,如果你使用手机等移动终端记笔记时会默认自动记录位置,而这是以后查询笔https://m.douban.com/book/review/7748198/
5.图片素材分类正版图片素材大全摄影图 创意合成静物写真照片最近更新 字体 黑体宋体楷体圆体书法字体创意字体拼音体手写体其他字体更多> 插画 静物插画生活场景插画商务|科技插画人物插画自然|建筑插画节日|节气插画卡通形象设计其他最近更新 电商/UI/新媒体 电商设计 618年中大促直通车详情页双11双12促销标签限时折扣最近更新 https://weili.ooopic.com/
6.VUEvue程序设计模仿菜谱做菜网站vue.js菜谱画面设计菜谱做菜网站系统采用html,css,vue技术来实现,符合所学知识体系,适用于常见的作业以及课程设计,需要获取更多的作品,请关注微信公众号:coding加油站,获取,如需更多资料,可在微信后台留言。欢迎大家来提问,交流学习。 2.1、作品简介方面 菜谱做菜网站系统采用常规方式来实现,符合绝大部分的要求。代码配置有相关文档讲解,如https://blog.csdn.net/pandas23/article/details/126612010
7.石膏板图库石膏板图片【石膏板背景墙】石膏板背景墙装修效果图 石膏板背景墙图片大全 背景墙 石膏板 2669 加载更多 文章推荐 小编精选 关注TOP 石膏板多少钱一块 石膏板选购施工方法 石膏板是用建筑石膏为主要原料制成的一种装修材料,具有重量轻、强度高、加工方便、隔音绝热、防火性能好等优点,被广泛应用于住宅、办公楼、商店https://www.maigoo.com/tuku/list_1227.html
8.馍馍的做法馍馍怎么做nymnong的菜谱答应某人好久的菜谱,终于弄好了。嘿嘿,给某人减肥增加难度。啥都不加,只用水和面的话就是普通白吉馍了,要想馍软一些就适量加水即可。22.烤箱烤的馍皮会更厚更硬一些,这种图上是我烤了15分钟的时间,我后来又加烤了5分钟,烤完表面是金黄的(没来得及拍照就被消灭了……) 分类: 主食 家常https://home.meishichina.com/wap.php?ac=recipe&id=221907
9.菜谱图片模板下载菜谱图片设计素材菜谱图片大全主题:菜谱/菜单设计 标签: 高档菜谱模板下载高档菜谱菜谱菜单名片宣传单酒水单画册菜图展架咖啡店菜谱高级菜谱菜谱模板dm单婚纱背景红色背景菜单菜谱广告设计模板源文件300dpipsd白色商务名片菜谱菜单设计 4、 菜单菜谱图片 标签: 菜单菜谱模板下载菜单菜谱菜单菜谱酒楼菜单宴席菜谱红色背景牡丹广告设计矢量cdr https://www.58pic.com/zt/113974.html
10.玉米白面馒头的做法菜谱5.6万点赞 · 3503收藏 14.7万浏览 · 1.4万做过 · 站内排名5.4万 做为北方人,还是喜欢面食,主食总是避免不了馒头包子之类的,纯面粉的吃腻了,加点玉米面味道更好! 将做法保存到手机 点击查看大图 1.玉米面和面粉混合倒入容器中,中间挖一小坑放入发酵粉 https://mip.xiangha.com/caipu/92855901.html
11.以“盒马”为例,带你做产品分析报告基础功能:搜索、分类、商品详情、支付、订单管理、大数据推荐、个人信息设置等; 特色功能:商品视频介绍、菜谱、盒区生活、盒马小镇、金币换餐盒等; 4. 盒马购物流程 核心购物流程已经比较成熟,5个购物入口供用户进行商品的选择,符合用户已熟知的购物习惯; https://www.niaogebiji.com/article-71220-1.html
12.菜单设计图片菜单设计模板下载首页 设计分类 充值图币 当前位置: 正图网> 专题> 菜单设计 菜单设计菜单设计专题包含76中式菜谱设计图片 立即下载 咖啡西餐菜单设计 立即下载 凉菜菜单设计 立即下载 面馆价目表菜单https://www.zhengpic.com/tags-40522-0.html
13.卷王都在用!100款宝藏级AIGC工具分享,强烈建议收藏!!(2)生活类,包括“会放飞的菜谱”、“小学生作文”、“然后呢”三种应用;(3)娱乐类,包括“彩虹屁专家”、“写情书”和“为你写诗”三种应用。目前,通义千问主要功能包括文案创作、对话聊天、知识问答、逻辑推理、代码编写、文本摘要以及图像视频理解服务。https://www.changbiyuan.cn/news/2023/news_0711/69335.html
14.饭店菜谱背景背景素材图片饭店菜谱背景背景图片下载中式美食菜谱菜单饭店高档酒楼简约海报背景 PSDJPG 饭店菜谱背景素材 PSDJPG 餐厅菜单背景素材 JPG 饭店单 菜谱 送餐卡 餐卡 菜单菜谱 PSDJPG 餐厅菜单背景素材 PSDJPG 餐厅菜单背景素材 PSDJPG 面馆价目表背景素材 PSDJPG 菜单素材背景图片 CDRJPG 饭店菜单海报背景素材 https://www.51yuansu.com/soback/fandiancaipubeijing.html
15.菜谱贴图图片菜谱贴图图片素材免费下载全部 素材库 图片库 3D素材库 元素 艺术字 背景 模板 UI界面 插画 GIF动图 摄影图 办公 视频配乐 企业全站VIP 立减800 登录/注册千库网 / 免抠元素 / 菜谱贴图 分类: 全部 装饰图案 卡通手绘 免抠摄影 特色边框 3D立体 图标LOGO 效果元素 促销标签 漂浮素材 表情包 节日节气 底纹纹理 几何图形 PPT元素 https://588ku.com/image/caiputietu.html
16.卷王都在用!100款宝藏级AIGC工具分享,强烈建议收藏(2)生活类,包括“会放飞的菜谱”、“小学生作文”、“然后呢”三种应用; (3)娱乐类,包括“彩虹屁专家”、“写情书”和“为你写诗”三种应用。 目前,通义千问主要功能包括文案创作、对话聊天、知识问答、逻辑推理、代码编写、文本摘要以及图像视频理解服务。 https://www.cyzone.cn/article/731603.html