iOS的隐性导航设计

  移动设备阅读类软件最重要的特性之一就是尽可能的增大阅读面积,为此,就必须尽可能的让屏幕中的导航占到最小,甚至隐藏,手机浏览器也基本属于阅读类软件,最近流行的海豚浏览器甚至将电脑中的“鼠标手势”引入到手机浏览器中。

  什么是隐性导航

  下图是iOS中read it later软件的阅读界面,除了最上方的状态栏,阅读区域占满了整个屏幕,没有任何诸如“返回”、“关闭”的导航按钮,实际这些按钮是隐藏着的,我把这种隐藏看不到的导航称之为“隐性导航”。


  read it later 阅读界面

  常见的隐性导航

  下拉刷新

  最流行的“隐性导航”要数“下拉刷新”了,这个最早出现在twitter客户端的下拉更新timeline功能迅速在此类软件中流行,iOS下网页版的gmail,新浪微博,甚至网易新闻,都使用了这种设计。


  网易新闻客户端的下拉刷新

  左右滑动

  让人印象深刻的还有UC浏览器的前进后退功能,后退只要拇指向右滑动,前进只要向左滑动手指即可,不必寻找前进后退按钮,这种设定下浏览器全屏也不会影响操作的流畅性。

  类似的设计有很多,在yReader下左右滑动是切换前一篇后一篇文章,在iBooks、QQ阅读的电子书阅读软件左右滑动是前后翻页。android下的QQ客户端的当前会话、好友和群组分别是三个标签,左右滑动可以从这三个功能区中迅速切换。


  QQ阅读的左右翻页

  双击、长按、返回顶部等

  在最上面read it later软件中,双击屏幕是弹出底部操作导航菜单;在android中长按一般会出现弹出菜单(像是windows下的右键菜单);在几乎所有iOS的软件中,点击顶部的状态栏是快速返回顶部(这个好像是系统级的,不信你试试),还有基于屏幕不同位置的点击呼出不同功能,其他的隐性导航设计方法还有很多,不再一一赘述。

  设计原则

  友好提示

  隐性导航是看不见的,那么必须有教程或提示用户如何使用这些功能,一般这种提示只出现在软件第一次使用时。这些提示尤为重要,当用户看着全屏的文字找不到返回时,可能就慌乱了,多次尝试仍没成功的话极有可能就按下home键,强行退出,甚至直接将软件卸载。


  QQ阅读的提示

  避免冲突,前后、左右,全局统一

  iOS下我见过的最漂亮的阅读软件是ZAKER,windows phone7的方块式小清新界面,同时集成了新浪微博,GoogleReader的绑定,目录像flipboard精心设计版面的杂志,图片多时可以像图集一样幻灯浏览所有图片。

  它隐性导航设计中双击文字区域是关闭,如果不小心碰到图片,就将这张图片单独打开了,这可不是用户想要的。如果浏览的是微博,到顶部后向上滑动是加载最新,浏览的是订阅的rss,到顶部后再下拉就是返回文章列表,同一软件中相同的手势竟然不同的结果,无疑增加了用户记忆的成本。

  上和下是对应的,左右是对应的,如果手势左划是向左浏览,那么毋庸置疑向右就是向右浏览。在腾讯爱看中,在文章列表,向左滑动是查看订阅频道,向右滑动是无效操作,在文章页,向左滑动还是查看订阅频道,向右是查看评论。这两者毫无关系而且反馈不同。

  在网易阅读中到顶部是“下拉刷新”,到底部却是“点击后显示下面20条”,你就不能做成上拉后加载后面20条?我不得不说,刻意的模仿,不懂的举一反三。说秘密软件中同时采用了“上拉刷新”和“下拉加载更多”。除了统一,这样做最大的好处是保持了手的姿势。一般手握手机是单手,拇指操作屏幕,上拉和下拉保持了原有的手指状态,点击操作需要拇指抬起再按下,点击后又得回到上下滑动的状态。


  心智模型、用户习惯

  滚动条的目的是方便快速定位同时体现当前位置和页面长度,reader it later中,当页面滑动时才会出现细长的滚动条(不会遮住阅读面积,只用来指示当前位置),当拇指指在屏幕右侧滚动条的位置时,滚动条会变成下面这样又黑又粗,方便手指滑动和定位。在PC上,用户习惯是鼠标滚轮(触屏上相对于上下滑动),想快速跳转时,就是直接鼠标拖滚动条,那么在手机上用户想快速拖动的时候首先想到的必然也是拖滚动条,但在大多数手机软件中,滚动条是不可拖动的。


  reader it later的滚动条

  降级策略

  并不是所有的软件都适合隐性导航,软件给用户呈现的第一印象是导航清晰、简洁、易用才能赢得用户的好评,隐性导航因其隐晦、难以记忆的特点,一般适用于高级用户,所以应提供一个可选降级策略:比如在设置加上全屏浏览选项,让用户自己选择是否隐藏导航栏。

  文章来源:ratwu.com/2011/10/ios-daohang/

时间: 2024-09-10 08:58:36

iOS的隐性导航设计的相关文章

iOS中read it later阅读界面隐性导航设计

文章描述:iOS中read it later软件的阅读界面. 移动设备阅读类软件最重要的特性之一就是尽可能的增大阅读面积,为此,就必须尽可能的让屏幕中的导航占到最小,甚至隐藏,手机浏览器也基本属于阅读类软件,最近流行的海豚浏览器甚至将电脑中的"鼠标手势"引入到手机浏览器中. 什么是隐性导航 下图是iOS中read it later软件的阅读界面,除了最上方的状态栏,阅读区域占满了整个屏幕,没有任何诸如"返回"."关闭"的导航按钮,实际这些按钮是隐

IOS开发:Web App导航设计探讨

 开发:Web App导航设计探讨-app导航设计"> 导航系统所遭遇的挑战 iPhone Native App较常见的导航如下图所示: 手机屏幕底端:A.B.C.D四个tab组成该Native App的全局导航,这是我们经常见到的tab导航栏. 手机屏幕顶端:主要有四种形式.第①种形式是在该位置中心显示产品的logo;也可以将logo适当调整位置,将常用操作或快捷入口放在该位置的右侧.第②种形式是在该位置有两或三个tab选项.第③种形式是在该位置中间显示当前任务标题,在左右两侧放置导航控

移动APP设计:优秀的APP导航设计形式

文章描述:导航的设计是 App 设计发展过程中很值得玩味的地方,由于移动设备特别是智能手机的屏幕尺寸有限,设计者们通常会将屏幕空间尽量留给主体内容,优秀的导航设计会让用户轻松到达目的地而又不会干扰和困惑用户. [导读]为了在手机屏幕给定的范围内展示出更多内容,优秀的导航栏设计将起到关键性作用,对于不同的操作也当因地制宜地选则不同的设计方案. 导航的设计是 App 设计发展过程中很值得玩味的地方,由于移动设备特别是智能手机的屏幕尺寸有限,设计者们通常会将屏幕空间尽量留给主体内容,优秀的导航设计会让

iPhone Web App 导航设计探讨

最近在做iphone端Web App的项目.由于产品形式新颖,技术环境不成熟,公司给与了较宽松的研发时间.在一个月的交互设计阶段,每个环节都得到多次讨论推敲,我从中感悟颇多.导航系统的设计是一个比较典型的点,拿出来与大家分享讨论一下. 导航系统所遭遇的挑战 iphone Native App较常见的导航如下图所示: 手机屏幕底端:A.B.C.D四个tab组成该Native App的全局导航,这是我们经常见到的tab导航栏. 手机屏幕顶端:主要有四种形式.第①种形式是在该位置中心显示产品的logo

聊聊移动APP导航设计的改版实战

  关于手机App 的导航设计讨论已经有很多了(特别是针对汉堡菜单的讨论).今天翻译的这篇文章,是原作者在真实的 App 中对导航进行改版,观察数据并进行分析的一则小文,实战意义很强,可供借鉴 >>> 欢迎同学们关注译者的微信公众号呦:shejiyiyan 在移动界面设计中,使用各种菜单控件来简化界面,对设计师来说很有吸引力 -- 特别是在小屏幕的设备上.但是,将 App 的核心部分隐藏在这些菜单里,可能会对实际使用产生负面的影响. 若不在视线里,便不在感知中 为了简化 Polar 的界

五种移动应用导航设计总结

  下图是<移动应用UI设计模式>一书的截图,截图中列出的是一些适合做主导航的导航模式. 其中跳板式导航.列表式导航和选项卡式导航最为常见,仪表式导航和隐喻式导航一般在拟物化设计或者是工具类的app中比较常见,超级菜单式现在会用到的比较少.由于这个行业发展速度很快,还出现了一些书中没有列出,但是在现在也很常见的导航模式,例如,出现于Android的侧边抽屉式设计,现在在ios中也得到了广泛的应用.下拉式菜单也会作为主导航出现. 下图是书中列出的一些只适合做次级导航的模式: 例如:页面轮盘式.图

IOS和安卓ui设计常用尺寸及基本知识

IOS和安卓ui设计常用尺寸及基本知识 iOS app   iOS app 图标的圆角半径是多少? 括弧里面是对应的半径大小 App store(Retina屏) ─────────────1024px(160px) iTunes Artwork icon ─────────────512px (90px) App icon(iPhone4s) ──────────────────114px (20px) App icon(iPhone5s) ──────────────────120px(22

IOS应用的产品设计、交互设计理念断想

(术)IOS应用的产品设计.交互设计理念断想     最近辞职在家,无意之酝酿,多有开发感触,故想做道法术器四文<(道)良性成瘾开发习惯养成策略><(法)平衡出最优的team生产力组合><(术)产品.交互设计理念断想><(器)构建自由通行的IOS开发者地图>,此为其一,术.    个人的专注点在于IOS App开发,还有linux,Gcc等技术思想的摄取.只略有"App设计"癖好,由于大脑未曾接受得系统全面的设计理念集输入,所以本文属个人

掌上指路标 —– APP架构与导航设计

一款小小的手机应用,却包罗万象,融合这复杂的信息内容或功能逻辑.要让用户在使用中获得 最好的体验,迅速掌握应用的框架结构,其导航的设计是一个重要的环节. 手机应用的导航和现实世界中的路标或者地图的作用很类似.它是应用软件的虚拟框架,对用户具有指示标识以及识别的功能. 比如,如同路标,导航能在使用中,定位用户当前在哪儿,为用户突出当前视图重要的功能,告知用户可以去哪儿,在不同的视图和区域迅速地切换信息,记录使用的操作轨迹防止用户迷失等.那么导航应该如何设计呢? APP导航设计的步骤主要为以下三步: