移动应用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.菜谱设计模板下载菜谱设计模板高清图片大全熊猫办公精心为用户挑选86张高清精美菜谱图片、支持专业级菜谱设计素材下载,更多风格的菜谱,免抠元素,卡通手绘素材图片、图标图案、免抠矢量图,尽在熊猫办公。https://www.tukuppt.com/speciall/caipu7741.html
2.中国风菜谱图片中国风菜谱设计素材红动中国素材网提供714个中国风菜谱图片、中国风菜谱素材、中国风菜谱背景、中国风菜谱模板、中国风菜谱海报等PS素材下载,包含PSD、AI、PNG、JPG、CDR等格式源文件素材,更多精品中国风菜谱设计素材下载,就来红动中国,最后更新于2024-12-05 15:23:48。https://so.redocn.com/zhongguo/d6d0b9fab7e7b2cbc6d720.htm
3.菜谱设计菜谱设计图片菜谱设计模板觅知网为您找到526个原创菜谱设计图片,包括菜谱设计图片,菜谱设计素材,菜谱设计海报,菜谱设计背景,菜谱设计模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于菜谱设计素材、图片、海报、背景、插画、配图、矢量、UI、PS、免抠,模板、艺术字、PPT、https://www.51miz.com/so-sucai/149988.html
4.菜谱设计图片菜谱设计素材菜谱设计模板免费下载六图网为您提供2247035张菜谱设计设计作品免费下载服务,您还可以找到菜谱设计图片、菜谱设计素材、菜谱设计模板等设计素材,我们为您提供菜谱设计图片下载,菜谱设计模板下载、菜谱设计素材下载等服务!https://m.16pic.com/sucai/11081.html?from=singlemessage
5.菜谱设计素材网站图片免费下载菜谱设计制作 设计菜谱 菜谱设计公司 菜谱设计制作公司 捷达菜谱设计公司 捷达菜谱设计制作 菜单菜谱设计 美食摄影菜谱设计 美食摄影菜谱设计 美食摄影菜谱设计 中餐菜谱设计 餐厅菜谱设计 酒店菜谱设计 酒店菜谱设计 菜谱设计美食摄影 菜谱设计美食摄影 设计制作菜谱 菜谱菜单设计 酒楼菜谱设计 专业菜谱设计制作 成都菜谱设计https://www.zcool.com.cn/tag/ZNzI0ODA=.html
6.菜谱菜单设计图片免费下载菜谱菜单设计素材菜谱菜单设计模板千图网为您找到3623张菜谱菜单设计相关素材,千图网还提供菜谱菜单设计图片,菜谱菜单设计素材, 菜谱菜单设计模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://www.58pic.com/tupian/caipucaidansheji.html
7.毕业设计(论文)Springboot智能菜谱推荐系统设计与实现.docx近些年来,随着科技的飞速发展,互联网的普及逐渐延伸到各行各业中,给人们生活带来了十分的便利,智能菜谱推荐系统利用计算机网络实现信息化管理,使整个智能菜谱推荐管理的发展和服务水平有显著提升。 本文拟采用java技术和Springboot搭建系统框架,后台使用MySQL数据库进行信息管理,设计开发的智能菜谱推荐系统。通过调研和分析,https://m.book118.com/html/2024/0407/7024035162006062.shtm
8.中文版InDesignCS6技术大全第17章 菜谱设计——图片的编辑 17.1 酒楼的菜谱设计 822 17.1.1 移动并缩放对象 823 17.1.2 对齐并分布对象 828 17.2 休闲酒吧的菜谱设计 830 17.2.1 剪切路径的处理 831 17.2.2 图像效果的设置 834 17.2.3 知识拓展 836 模版欣赏 837 第18章 图书版面设计——版式的构成 https://www.epubit.com/bookDetails?id=N26644
9.美食菜谱类APP界面设计4、首页页面设计 5、分类页面 6、详情页设计 7、购物页面 8、产品详情页 这款美食菜谱类不仅有各种菜谱的制作方法,而且内部还增加了购物商城功能。整个APP界面设计非常干净简洁。 上海艾艺是一家专业的APP开发设计公司,提供APP开发、UI设计、微信开发等服务,如果您需要对APP进行UI设计,欢迎咨询。https://www.adinnet.cn/bloginfo/2018_05/blog_3721.html
10.仿香哈菜谱界面设计微信小程序源码在该小程序的公共设置app.json文件配置页面路径以及配置窗口表现 5.在该小程序的公共设置app.json文件的导航标签tabBar下分别设置5个导航,并设置导航栏属性 6.“学做菜”界面中海报轮播的图片,在微信小程序里有专门的swiper滑块视图组件来实现这个效果,并且在swiper滑块视图组件里有一个搜索框 7.宫格导航有菜谱分类https://download.csdn.net/download/qq_36004487/11594864
11.横沥菜牌印刷,桥头菜谱设计,平惠,东坑酒水单印刷,常平点菜单我们销售:横沥点菜牌印刷,桥头菜表设计,平惠,东坑餐馆资料印刷,常平点菜单,,优质质量,超低价格·送货上门,在线QQ:1059102333,手机1355 333 2521于小姐,本公司主要承揽:各类纸质印刷、丝网印刷、防伪印刷、无碳复写、数码印刷、彩色复印、不干胶印刷、无伪布印刷、包装印刷、纸杯、纸抽、广告设计、LED显示屏、闪动灯https://m.makepolo.com/product/100230486837.html
12.北京华夏菜谱有限公司:北京做菜谱,菜谱设计,菜谱制作北京华夏彩印公司经工商局正式注册,是一家专业致力于酒店印刷品加工,配送,服务于一体的企业,北京华夏菜谱有限公司自开业十年以来,致力于餐饮行业设计菜谱制作、产品摄影、宣传页、优惠券、酒水牌等各类印刷品的设计制作。 菜谱制作既是艺术品又是宣传品;能让客人得到视觉、味觉、嗅觉、胃觉上的满足,菜谱制作无疑是https://beijing0761292.11467.com/
13.菜谱册菜谱设计菜谱制作菜谱印刷数百种精美餐厅酒店菜谱模板,马上让您看到实时效果! 选菜图 两百万张高清菜图,可按菜名搜索,总有适合你的菜! 选装订 高中低档,各个价位的都有,皮的封面可以印餐馆标志和名字 高效快捷 明码标价,送货上门 不用出门,轻松搞定 精选菜谱设计模板 高清菜图 https://www.caipuce.com/
14.菜谱印刷制作菜谱设计制作菜谱策划专业菜品摄影西安普智广告文化传播有限公司(https://xalycp.gys.cn)主营产品包括菜谱印刷制作、菜谱设计制作、菜谱策划、专业菜品摄影等,西安普智广告文化传播有限公司负责人崔先生,西安普智广告文化传播有限公司希望能与您成为合作伙伴http://xalycp.cn.china.cn/
15.蚂蚁族菜谱设计/菜单设计/美食摄影公司/深圳高档菜牌设计深圳蚂蚁族创立于2011年,是专业服务餐饮行业的设计策划公司。为餐饮品牌提供品牌全案,VI设计,视频拍摄,美食摄影,菜单设计,物料设计,年度战略服务。http://www.mayiant.com/
16.伙食给养管理系统(物资出入库库存财务报表管理智能电子秤一体菜肴是菜谱计划的基础,所有菜谱计划都是围绕合理营养进行展开的。当菜肴的种类 和营养结构确定以后,给养员就可以根据营养需求总量进行食谱计划的制作和调配 食谱发布流程的设计与开发 操作信息留痕 1.3 食谱计划审核 待审核的食谱计划:食谱制作者提交的待后勤管理人员进行审批的食谱计划。 审核通过的食谱计划:后勤管http://www.bjvvv.com/P0001/product.asp
17.vuespringboot+nodejs厨房达人美食菜谱分享系统与安卓,iOS相比较起来,厨房达人美食分享平台在流畅性,续航能力,等方方面面都有着很大的优势。这就意味着厨房达人美食分享平台的设计可以比其他系统更为出色的能力,可以更高效的完成最新的菜谱信息、菜谱笔记、美食资讯等功能。 此系统设计主要采用的是nodejs语言来进行开发,采用vue框架技术,框架分为三层,分别是控制层https://www.jianshu.com/p/6f3004babb3f
18.淄博快印,淄博菜谱,淄博台历,淄博标书淄博和乐图文设计有限公司,淄博在线自助设计系统,淄博快印,淄博菜谱,淄博台历,淄博印刷,淄博相册,和乐快印,淄博数码印刷,淄博个性DIY设计http://www.zbhola.com/
19.做菜不用再问妈:这7个App换着用,让你从厨房小白变大厨一款设计精美的菜谱 app,推荐大都为异域美食,可以拓展自己美食边界。内置主题菜谱不仅能让人学会怎么做饭,还能教会你为什么要这么做。每个菜谱明确标记了烹饪时间和每份所含营养值,若为烘焙菜谱还会给出静置时间作为参考。在食材方面可以选择为几个人做饭,并根据人数来确定食材的多少。所有菜谱食材均可一键加入购物单,买菜https://36kr.com/p/1390010704837635