阅读更多

0顶
0踩

移动开发

转载新闻 浅析移动应用的导航模型

2012-06-18 17:48 by 副主编 MnouW 评论(1) 有3533人浏览
和网站一样,移动应用也具有自己的信息架构,根据应用的性质以及核心功能界面之间的关系,来对其采用合理的信息结构,此时,移动应用的导航模型便起到了穿针引线的效果,一个好的导航将使得应用的信息架构清晰明了,且操作简单高效。

移动应用的导航模型基本包括 平铺页面、标签tab、树形列表、九宫格、以及目前较为流行的左侧列表等,以下针对几种常见的导航模型进行简要分析和比较,以帮助我们选择最合适的导航模型,提升移动体验。

模型一:平铺页面

平铺页面,顾名思义就是一张或者一叠纸片,平铺展示给用户,用户通过左右拂动来切换不同的页面,它适用于没有信息层级,没有组织架构,且每个页面的界面类型一致的应用,一般在短小精炼的功能工具性应用较为常见,比如IOS自带的天气预报。

平铺页面模型的优点在于“页面”元素的数量和顺序可以随意改变,且分页标签高度只有6px,可供内容展示的区域大;缺点在于页面数量不能太大,否则浏览起来麻烦,用户还需记得哪个“点”代表什么内容。



模型二:tab标签栏

这种类型的导航模式最为常见,它将界面最下方的区域作为导航区,通过tab标签的形式划分为3至5个标签,每个标签对应不同功能。

这种模型适合功能精炼层级较少且需要频繁切换功能的应用;它的优点在于可以直接将最核心的tab界面最为默认选中状态,用户打开应用时便直接呈现出用户最关心的信息内容,比如社交应用的信息流,邮件应用的收件列表等;同时,用户可以在大部分页面中直接切换tab标签而轻松跳转页面,并清晰告诉用户该应用的主要功能以及当前所在功能。

缺点在于tab标签数量有限,IOS HIG建议不超过5个标签,如有超过的功能菜单则统一放在“更多”标签中;同时,该标签占据50px高度的区域,且在大部分界面中始终存在,占据着10%的信息展现区域。



模型三:树形列表

树形列表形式的导航模型在邮件系统比较常见,它将每一级别的功能通过list列表形式展现,点击之后展开下一级的lis列表,如此类推直到最终的功能展现界面。

这种导航模型的优势在于可扩展性大,能应对具有大量的类别、功能和项目的应用,比如购物分类等,这种list的组织形式在web中比较常见,用户容易理解,并且可满足用户自定义列表的需要,比如对列表进行新增、删除、排序等,微信的应用插件模式也采用了列表来展现。

树形列表的缺点在于层级深,父级的所有其它列表在子列表中不可见,必须要返回到上一级,来回返回比较麻烦,往往从一个子功能切换到另一个子功能时需要在漫漫路途上“奔波”。



模型四:九宫格

九宫格也是目前普遍使用的一种导航模型,它将应用的所有一级功能纵横排列在首页,多用简洁或精致的图标展示,同时配合功能菜单文字,因此首页效果漂亮,可供设计师发挥的空间大。

九宫格导航适合有多个同等重要频道的应用,特别是大而全的平台级产品,比如facebook、QQ朋友、人人等。不过九宫格的缺点也比较明显,其图标数量要适中控制,过多则可能出现左右分页,过少则可能为了堆砌菜单而在首屏添加不必要功能;同时菜单图标的横竖排列使得眼动轨迹往返移动,如果数量过多,则导致视觉定位频繁,识别率下降,不如列表来得顺畅利落。

在九宫格导航模型中从一个子功能切换到另一个子功能时需要返回到主导航界面,操作效率底,所以越来越多的应用通过添加快捷操作来实现快速返回到首页,比如facebook点击导航栏的中央区域来回到首页。

九宫格最大的缺点在于需要先选功能才能使用,无法去追求那个最刚性最频繁最唯一的东西,并让它直接展现给用户,九宫格容易让产品设计者停止做这样的思考,相比之下,tab标签导航便通过默认选中标签来实现了这一目标。



模型五:左侧导航

随着path出现,左侧导航可以说脱离了传统的ios交互结构,这种新颖的导航模型也越来越受到大家的青睐。可以说左侧导航是集众家之所长,取其精华去其糟粕,具有无限的功能拓展性,可实现用户自定义;界面逻辑清晰,物理层次明了;视觉上搭配精美icon图标,眼动轨迹垂直单一,视觉负担小;且不像九宫格专用首页来展现导航,左侧导航将首页展现的舞台留给了最核心的功能,它仅是一个“附属功能”,随叫随到,不喧宾夺主,却又给人留下深刻印象。

所以我们可以看见越来越多应用采用了这种导航模式,如最新版的facebook、QQ朋友、National Parks等等,可谓时下潮流;当然左侧导航目前在一些应用中也存在不足,比如调用该导航时必须到首页点击左上角的“列表”图标,而不能在任何界面通过某种手势来随叫随到。



  • 大小: 40 KB
  • 大小: 60.3 KB
  • 大小: 37.5 KB
  • 大小: 44.1 KB
  • 大小: 38.5 KB
来自: ZLEEE
0
0
评论 共 1 条 请登录后发表评论
1 楼 yesjava 2012-09-04 17:12
不错

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 无奈的我,无奈的C++ Builder

    最近在学习用C++ Builder进行网络编程,起初使用非阻塞的模式完成了聊天的功能,可是到了文件传输模式就傻眼了,文件传输的时候使用 sendbuf,结果提示需要使用阻塞模式,可是到了阻塞模式下看了好多资料和DEMO才明白阻塞模式下一定要新建TTheard的继承类才可以,可是新建了类,麻烦的事情就出来了,不管我怎么命名,就是提示我重复定义,要不就是连接不通过,看来我的基础还是很差啊,还有好多

  • 尽快掌握C++BUILDER的使用

    要尽快掌握C++BUILDER的使用 C++Builder开发工具是由Borland公司推出的一款高性能可视化集成开发工具,他不但集成大部分开发工具的有点,C++Builder开发工具还提供了可视化窗体设计器、对象观察器、控件板、工程管理器、集成编辑器和调试器等。 这里,你可以先买一本关于C++Builder开发工具入门的书,现在外面大多数都是这种简单的罗列一些c++ builde

  • HBuilderX(uni-app) 新手保姆级教程!看这篇就够了!

    HBuilderX 是一款集成开发环境(IDE),它支持多种编程语言和框架,包括HTML、CSS、JavaScript、PHP等。而 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,它允许开发者编写一次代码,然后发布到iOS、Android、Web(包括PC和移动端)、以及各种小程序(微信/支付宝/百度等)平台。

  • HBuilderX安装入门教程(非常详细),从零基础入门到精通,看完这一篇就够了(附安装包)

    HBuilder X是一款为前端量身订制的多功能代码编辑器,它有飞一样的编码、最完整的语法库和浏览器兼容数据、能够方便制作手机APP,还有保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。

  • 安装HBuilderX(详细教程)

    进入我们的项目建立阶段,点击文件,点击“新建”,创建项目名称,设置项目所在的位置确定即可,完成之后会在左边的项目栏管理器中出现。2.Alpha版是开发者预览版,通常会包含一些新功能和改进,但可能存在一些未知的问题和错误,不适合在生产环境中使用。总之,如果你需要一个稳定可靠的开发工具,建议选择正式版;进入我们的项目建立阶段,点击文件,点击“导入”,选择从哪里导入即可,完成后页面则显示。1.正式版是经过测试和稳定性验证后发布的,相对来说更加稳定可靠,适合生产环境使用.根据自己的需求进行下载。

  • HBuilderX:前端开发利器,专攻MOA端项目

    本文还有配套的精品资源,点击获取 简介:HBuilderX是为MOA端(移动办公应用)设计的高效前端开发软件,提供集成开发环境、智能提示、实时预览、代码格式化、Git集成等特性。它支持项目管理、模板与组件库、性能优化、真机调试、云编译发布,适合响应式布局开发和多平台小程序开发。本文将探讨如何利用HBuilderX的特点和功能,进行MOA端开发,并提供使用教程和最佳实践,以帮...

  • C++实现设计模式——Builder模式

    C++实现设计模式——Builder模式 建造者模式定义 建造者(Builder)模式的定义:指将一个复杂对象的构造与它的表示分离,使同样的构建过程可以创建不同的表示,这样的设计模式被称为建造者模式。它是将一个复杂的对象分解为多个简单的对象,然后一步一步构建而成。它将变与不变相分离,即产品的组成部分是不变的,但每一部分是可以灵活选择的。 举例 举一个通俗的例子: 我们大家都玩游戏吧,每个角色会有很多属性,即构造参数,有一些是构造必需参数,如id,name,有一些是可以用默认的值,比如hp,level等

  • C++ builder基础

    C++ builder 简介 C++ Builder是由Borland公司推出的一款可视化集成开发工具。C++ Builder具有快速的可视化开发环境:只要简单地把控件(Component)拖到窗体(Form)上,定义一下它的属性,设置一下它的外观,就可以快速地建立应用程序界面。 Inprise(原Borland)公司推出的Turbo C、Turbo C++ 、Borland C++ 以及Borland C++ Builder,无不是 C/C++ 编程者所钟爱的编程工具,而且每一个都称得上经典之作,Delp

  • 又见 C++ Builder (Turbo C++ Explorer)

      回想上一次用 C++ Builder,大概已经是 3-4 年以前的事情了。我只记得用 C++ Builder 写的最后一个程序是“通用输入法安装程序”,这东西现在恐怕在茫茫网海里已经找不到踪影了。也曾遇到两次有人 Email 找我要这个东西,可惜机器不知道重装了多少次,这个东西早就失踪了。  以前用 C++ Builder,感觉用来写界面还是挺快的,只是后来有一个程序需要写自定义组件的时候

  • c++Builder模式

    设计模式--Builder模式

  • 【C++设计模式】4.9-构建器模式(Builder )

    C++ 23种设计模式之构建器模式(Builder)。

  • c++ builder 学习(1)

    c++ builder学习 1 界面设计 为对话框添加背景图片 方法 :在对话框中添加Additional中的image控件,然后找到其picture属性添加图片 按钮: 在c++ builder中按钮有三种TButton,TBitBtn,TSpeedbtn,后两者可以改变其背景图片,方法:点击其glyph属性 树形控件: String str[5]={"朋友","同事","家人",

  • C++ Builder 11.3 的新特性

    总的来说,C++ Builder 11.3 引入了许多新的特性和改进,旨在提高开发者的工作效率和代码质量,帮助开发者更好地构建现代化的应用程序。

  • C++程序正向编译逆向反编译(一)

    并不是windows系统自带的保护机制,并不是说一个确实存在溢出漏洞的程序,放到带securitycookie保护的环境中,就不能正常溢出了。其原理是在所有变量入栈前,多压入一个变量(随机数),然后函数执行完之后,再去检查这个数是不是一样的,这也是一个编译器行为,_RTC_CheckStackVars第一个参数是函数要检查的栈顶地址,第二个参数指向结构体_RTC_framedesc。该结构体第一个参数是压栈的局部变量个数,第二个参数保存局部变量相关信息。分别是变量的栈偏移地址,变量大小和变量的名字。

  • C++ BuilderX的问题与展望(3,展望篇,完)

    C++ BuilderX的问题与展望 猛禽[Mental Studio]http://mental.mentsu.com(之三,展望篇,完)说了BCBX这么多的问题,该来谈谈我们的展望了。首先从产品定位说起。大家都知道,每种语言都有其适用的领域,没有什么语言能通吃所有的开发工作,C++也一样,虽然从某种程度上说,C++可算是目前开发领域最广的语言,几乎可以用于绝大多数的

Global site tag (gtag.js) - Google Analytics