交互设计实例分析:移动应用的5种导航模型设计

文章描述:浅析移动应用的导航模型。

和网站一样,移动应用也具有自己的信息架构,根据应用的性质以及核心功能界面之间的关系,来对其采用合理的信息结构,此时,移动应用的导航模型便起到了穿针引线的效果,一个好的导航将使得应用的信息架构清晰明了,且操作简单高效。 移动应用的导航模型基本包括 平铺页面、标签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等等,可谓时下潮流;当然左侧导航目前在一些应用中也存在不足,比如调用该导航时必须到首页点击左上角的“列表”图标,而不能在任何界面通过某种手势来随叫随到。

时间: 2024-10-27 18:47:50

交互设计实例分析:移动应用的5种导航模型设计的相关文章

交互设计实例分析:自然用户界面大胆设计

今天ifanr上有一篇<手势操作(自然用户界面)再探讨>,观点保守,论据不足. Android的菜单确实难用,难以记住界面是否有菜单.Plam将菜单放置在状态栏的左边,保证了触摸屏也能使用菜单,但也有弊端.菜单放在界面左上角,宽28像素,难以点击.请拿出你的手机,右手去点击大屏幕的左上角.要么大拇指伸过去,要么其余四指抬起才能点到左上角,甚为别扭. 弹出的菜单通常要么是无关紧要的功能,要么重要.如果功能无关紧要,那不如将菜单放置在启动程序的第一个界面(主界面),如帮助,当用户需要的时候,完全可

交互设计实例分析:如何学习开心网的设计

开心网最开始的特点是转贴与投票,以及其本身朴素的界面设计.后来许多模仿都仿造其开发相同的功能与设计,不过依然无法超越开心网本身,那么后来者该如何学习开心网? 1.开心模型 齐白石有句话,叫"学我者生,似我者死".放在开心上也是成立的. 我一直在想这个问题,既然学开心者生,那从何学起?如何学来?想了很长时间,大概有如下的5点总结. 首先保持产品本身的封闭性,只允许用户通过"邀请机制"加入,保障新用户的质量与存活率. 其次,在创始初期推出分量十足的社交游戏,一大数小,制

产品交互设计实例:首都机场的点烟器

文章描述:产品交互设计实例:首都机场的点烟器. 首都机场的吸烟室里并不像其他机场那样放几个固定的打火机,而是点烟器,和车载点烟器基本是一样的:先按下加热,加热好后,它会自动弹起,拔出来,里面的电阻丝已经是红红的了,就可以点烟了.上图为车载点烟器,与首都机场的点烟器一样,加热过程中只是被按下去了,未显示进度,也未能形象的表现出"正在加热"的含义. 我走到点烟器的近前,按下,让它加热,然后等待,等了一会儿还不见动静,不知是仍在加热还是出了故障.吸烟室里很多人,感觉自己被别人看着,不会用这玩

网站交互设计实例:正确的引导赢得用户的忠诚

文章描述:网站交互设计实例:正确的引导赢得用户的忠诚. 网站上,用和主色调对比很强的颜色或质感很强的按钮吸引用户进行操作,从而促成交易,或浏览相关重要信息. 正确的引导,符合了人机工程原理,优化了用户体验,给用户以易用.互动性.从而使网站给用户留下了美好印象,用户倍感温暖,加大了第二次访问的可能性. 那么反之,不正确的引导--误导,会是一种什么情况.笔者上周曾去南京一趟,便在沪宁城际高铁常州站站台遇到了误导. 笔者是高铁5号车厢,可是在其旁边不远却有一个有明显的动车13号车厢,该标志很明显很清晰

交互设计实例:赠送QQ秀商城流程优化

赠送QQ秀流程是QQ秀商城关键流程之一,占了收入最直接的一部分.它的优化是后续商城流程优化的重要参考.OK,现在就用TA做例子,分享一下流程优化中,交互设计的分析过程. 先大概了解一下优化前的流程. 第一步:触发用户赠送 第二步:填写赠送物品信息.需要手动输入好友QQ号码等信息后,点击"立即赠送"进入购物车页面. 第三步:页面跳转到购物车页面,进行支付金额.点击"确认支付". 第四步:对方收到获赠的物品.可以直接保存此形象.

交互设计细节分析:注册流程与登录按钮设计

注册&登录是一个网站的门户,它的设计姿态就是对待客人的态度.虽然用户可能每次都只花极少的时间在注册&登录互动,但是这个"瞬间"却举足轻重,用户与注册&登录之间的交互关系承上启下的一个节点.注册&登录所有的细节影响了能否完成产品战略定位所设定的最基本任务去吸纳其所希望的用户的使命.基于很多交互设计前辈的研究,作了一些细节中的细节分析.感谢身边帮助我的朋友们. 1.注册流程剖析对比: 1.1.注册和登陆用户体验偏重: :确保注册信息安全(长远) :用户注册过

移动交互设计实例:触摸屏手机输入交互设计

文章描述:触摸屏输入的交互设计. 触摸屏手机输入时会在界面绘制虚拟键盘,用于输入字符,可以使用在所有应用程序中.特别是在短信和邮箱等需要频繁输入文字时,其输入速度直接影响用户操作效率. 缺点 但是同样全键盘输入,触摸屏没有物理按键效率高,原因在于: 1.输入法需要定位手指的位置,比如双手操作电脑键盘时,左手食指中指定位在F键,右手中指定位在J键,而触摸屏无法像按键的凸点或者输入感觉定位,难以形成高效的盲打. 2.触摸屏本身点击没有物理按键精准,触摸屏点击目标区域没有真正点击到目标区域,偏向目标正

UED交互设计:通过分析方式对UED验证

文章描述:通过分析设计的方法验证UED价值. 首先说明一点,本文中提到的UED基本都指交互设计 一.为什么需要数据验证? "天天看到你们也挺忙的,但是怎么衡量游戏用户体验提升了多少." 是的,高层对战略方向关注的更多,不可能了解每个员工所有的工作细节,尤其是我们是做用户体验的.在最终的游戏体验里,能看到漂亮的视觉.有趣的玩法,却唯独感觉不到交互多美妙.其实交互设计的追求恰恰是"让用户感觉不到界面的存在",只有感觉不到界面的存在,才能沉浸在游戏里,感受身临其境的愉悦,

交互设计实例:触摸屏手机信息连接和翻页的设计

文章描述:触屏手机网站-炫版交互设计. 触屏手机网站和非触屏手机网站区别在于,前者使用手指点击注重点击体验, 而后者是使用手机物理按键注重选取规则,触屏手机屏幕增大,可以显示更多的内容,但内容密度不宜过大否则不便点击,一般人的食指点击的区域约为7*7 mm 拇指点击区域约为8*8 mm,各大门户也分别推出适应触屏手机的高端版本,下面将会从手机网站最常使用的二个交互功能来分析3G门户炫版和其他门户的区别. 手机网站常用交互功能之一"信息连接": 竖屏状态:(图1) (图1)可见 3G门户