移动应用的导航设计 - UCD大社区

浅议手机客户端设计:客户端导航设计

penddy — 2009-05-23 23:51:26

一、前言

之前关于手机客户端导航曾经罗列一些常见的到导航设计，见下面两篇，当时本来想写第三篇的，由于手头事情耽搁下来了，现在继续此话题继续扯一下。

1. 浅议手机客户端软件导航设计(1) 2. 浅议手机客户端软件导航设计(2)

二、导航如何选择

就盆地个人的看法，可以从如下几个方面去考虑导航的选择：

1.遵从用户习惯

遵从用户习惯是指导航的操作、排列、切换等形式尽量和用户的常用软件、操作形式保持一致。比如上下键在界面上体现的就应该是控制上下焦点的移动，在播放器中一般中键就是暂停和播放的等等。

之前文章中给出的UCWEB(6.3beta)的频道切换时采用右软键来切换(后来的版本已经改为迎合用户习惯的标签形式)，这一点是和用户的习惯相违背的。

Nokia的维信，虽然说理念非常不错，但在操作上更多是让人感觉新奇，用户友好性和在手机的操作便利性上不敢恭维，还好可以在电脑上配合进行一部分操作。

2.提示明显，操作响应及时

提示明显指用户可以根据固有习惯或提示知道如何操作；操作响应及时指两个方面，一方面指操作要有响应，另外一方面响应需要及时和明显。

比如魔橙的左右软键提示被隐藏，用户不试验就不知道可以操作左右软键，下方的方块其实是代表一个个频道，这个甚至会让用户猜测不出来。为了界面的"美观"牺牲了用户的体验，盆地个人认为是得不偿失的。

3.参考平台常见界面

在Symbian平台中最常见的是三类：列表、九宫格、标签三种导航方式，采用这几种方式或类似的方式设计的导航用户的学习成本会比较低。

在windows mobile平台常见的有九宫格、频道在下方的标签等形式。

这几种单独采用或者组合采用是最常见的导航形式，而有些产品的标新立异大幅增加了用户的学习成本，导致使用难度增加。

比如手机msn采用的两级导航，其中第二级导航是需要"#"激活二级导航，然后左右键选择后中键确认才能进入相应到相应频道，使用非常不便。

盆地在项目中也曾经参考过手机msn进行过导航设计，虽然对二级导航做了一点优化设计，调整为"#"直接切换二级导航的形式，但即使这样，使用起来还是非常不便。

而维信的导航如果脱离了PC端的排版和整理，在用户使用上则可用性就更差，盆地个人也认为是一个不成功的导航设计。

类似之前文章中提到的飞信3.0、MIMO等更多参考了windows Mobile平台的一些界面。

4.同产品和营销配套

导航的选择也应该和产品的类型、功能以及采用的营销策略等相配合，比如产品是一个非常纯粹的功能类似搜狗输入法、来电通、列车时刻表等，则没有必要设定九宫格、标签等比较复杂的导航方式，列表是一个很合适的选择，用户也非常熟悉和容易接受。

如果产品功能很清晰分为几块，且这几块用户都比较清楚，则可以采用九宫格方式。不过九宫格方式由于一开始进去就看到一个个块，适合功能性产品。

标签的方式更适合内容类的，可以一进去就可以看到具体的内容，不像九宫格进去只能看到一个个的宫格，从而只能对功能而非内容有直接的了解。

如果是一个需要引导使用的产品，则初次使用可以采用引导式，引导用户一步步完成。

如果是有营销需要，界面中还需要配套营销信息，包括在导航中如何排版和哪一步出现等。

5.别太急进

在手机设计和手机客户端设计发展这么多年的时间，除了这里提到的一些导航方式外，还是有很多没有提到的导航方式。

不少做设计的朋友们可能更希望在设计时达到惊艳、颠覆传统等目标，不过要知道，虽然我们可能是天才，但是别人也不是蠢材，这么多年的沉淀还是有道理的。

初期最好别太急进，也别太贪新奇，先参考现有的东西踏实做一个第一版出来，后续在小众范围内去进行新的版本的测试，根据反馈来做调整，这种方法是一种比较稳妥的选择，毕竟实践是检验真理的最佳方法。

三、小结

这里提到的一些方法、经验相信不少人早就知道；作为设计者和规划者，追求更好、更有效、更优秀的导航设计是属于产品完善和才智发挥的，不过别忘了，我们的目标是为了使用，而不是为了让别人惊叹。

尽量从好用、方便、简单的角度出发，实用的是最好的，好看的、新奇的不一定是好的。

(完)

移动设备-GPS导航产品交互原则

Nancy — 2010-10-31 23:31:07

作为移动设备的GPS导航设备在设计时需要注意一下几点交互原则：

1、 屏幕尺寸；

除PC以外的所有移动设备都要注意这个问题，由于移动设备的屏幕尺寸与PC比起来的话要小很多，用户的视线也会相应缩小，在交互上就要考虑更多的问题，例如GPS导航产品在设计时就要考虑到屏幕的实际尺寸和用户与屏幕之间的距离，在相对较小的屏幕上内容安排要紧凑、清晰，合理。

2常规功能按键的位置

任何产品都有一些常规的功能按键供用户操作，GPS导航产品也具备一些常规的功能，例如“回主菜单”、返回等，这些常规的功能按键的位置放置要符合用户的使用习惯，而且各个页面上要统一，这样不但产品风格整体统一，人机交互上也会形成统一，还有利于培养用户的使用和操作习惯。

2、 页面信息量

由于第一点中提到的移动设备产品受到自身屏幕尺寸大小的影响，页面中的信息量不宜太大，过多就会在本就不大的屏幕上造成信息的堆积，用户在观看的时候会造成视线的混乱，还会给用户造成反感的情绪，不利于人机交互。

页面的信息量应该依据实际尺寸保持适中，保持一定距离，不同的内容独立而清晰，让用户很容易查看并且做出不同的反应和判断。

3、 信息统一

这里提到的信息是指页面中的按钮和弹出框这一类信息，功能相同的按钮文字表述上要统一，这样用户在使用的时候不会每次都花时间考虑，弹出框也如此，相同的意义表述上统一，节省了用户的时间的同时避免了很多的反感和对产品的误解与抱怨。

4点击方式

与PC的外部设备（鼠标）不同的是，GPS导航设备与屏幕进行交互操作是手直接触碰屏幕，以单击的方式触发操作，目前的移动设备设置是手持的移动设备的操作方式都是以单击的方式，用户已经形成了这种使用习惯。在交互上不要犯违背用户使用习惯的错误，否则用户不但不买账，还会对产品产生抱怨甚至厌恶。

5 下拉框问题

页面中一些带有选项性质并且选项内容比较多的时候，我们会想到用下拉框这种方式，这样的好处是节省很多的空间和操作时的步骤，但是基于GPS导航这样的设备，屏幕往往是横向展示的，下拉的时候屏幕给予的空间有限，点选起来很不方便，如果下拉框之下还有其他信息的话操作起来远不如手机这类产品来的轻松。

所以GPS导航这类产品使用下拉框的时候下拉内容最好不要超过3个，超过3个就跳转到新页面。

6、良好反馈

有操作类的产品在交互上不能缺少良好的反馈，要让用户明确自己操作情况，否则用户就会摸不着头脑。想象一下，在与人交谈的时候，有良好反馈才能进行良好的沟通，人与机器也是一样的。

当然设备也要具备良好的触感，这样才能有好的反馈。

7、按钮状态

按钮两种状态，一种是操作后的状态，一种就是操作前的状态，也可以说是点击前跟点击后，用户在操作时需要很很容易区分这两种状态，这样才可以明确自己所处的状态和下一步要进行的操作。

颜色是区分这两种状态的最好方式！

8、手势问题

基本的手势操作，如：上下滑动、左右滑动，点击，确定某个操作要参考实际情况设计不同的手势操作。

9帮助信息

无论哪种产品都不能忽视新手用户，帮助信息有利于新手用户更好的了解产品，更快速的成为中间用户甚至是专家用户。

10、视觉

在使用产品前最直接的交换就是视觉，这里的视觉包括界面的颜色，按钮的颜色和整体的风格，视觉是产品良好人机交互的开始。

以上的交换原则可供参考，如有不足或更好的意见欢迎提出来!

相关话题：移动应用的导航设计源地址：http://ucdchina.com/post/8290

手机界面常用导航设计分析

雪鸮-朱晨 — 2011-04-08 23:44:16

所谓的交互设计，其实设计的就是人如何向机器发送指令，机器如何向人传达信息，一来一往是为交互。当要传达的信息量很少时，好办，就想Google的搜索框那样，往白底上一放就行了。但当等到信息是海量的、在一屏上难以全部呈现时，就需要有效地组织信息，将部分信息先隐藏起来，待到用户需要时再将用户引导到那里。在界面设计中，广义地来讲，从一组信息向另一组信息转移的的过程，就称之为导航。

明确了定义，我们就该知道，一个好的导航设计应该让用户明白：

现在在哪儿
以前去过哪儿
将来应该/能够去哪儿
怎么去
怎么回

判断一个导航方式设计的是否合理，也可以利用这几条一条条比对一下。下面，让我们来看一下手机界面中常用的导航方式。

一、拖动

定义：手指在屏幕上按下，向某方向平移。

适用情景：若要呈现的信息超出一屏所能容纳的范围，则在符合用户心理模型的前提下，可以将内容在一维或者两维德方向上排布，用拖动屏幕内容的方式来浏览所有信息。

例如，很长的文章、电子书、列表（纵向的一维），一年内的详细股价折线图（横向的一维），地图、1:1显示的网页和图片（二维）

讨论：没错，你没有看错，这是触摸屏手机上最简单、最土鳖也最基础手势。按照对导航的定义，这确实是一种导航方式，用户可以向某个方向拖动屏幕，去浏览当前屏幕以外的信息。用户很容易学会使用这种导航方式，就是把挡在边框外的内容拖进来看嘛。最简单的方式，往往也最有效的。

完美无止境：

虽然这是最土鳖的导航方式，但是为了设计一个符合刚才所列5项基本原则的导航，还是有很多创意可玩的。

KnotGuide在同一页上显示了绳结的示意图和解说。过长的解说文字需要先隐藏一部分，拖动浏览全部。为了让用户知道将来能够去哪里(3)，它给文字的底部蒙了一层半透效果，以暗示还有一部分没展示，可以继续往下看。同时，在刚进入该页面时，文字区右侧的scrollbar会短暂显示2~3秒，再消失，这也能起到同样的暗示效果（这可能是Android平台内置的默认效果）。

aCurrency将暂时无法展示的多种汇率横向排布在屏幕外。为了展示将来能够去哪里(3)，它将藏起来的部分漏了一点出来，折在当前页的后面。没记错的话，这种设计应该是从Mac的文件和唱片浏览上得到的灵感。

最经典的拖动导航还是应属iPhone的homescreen。在homescreen上，Apple设计了一个位置指示器。这可以帮助用户很容易地理解当前在哪里(1)，可以去哪里(3)。同时，在拖动屏幕的时候，Apple也设计了平移的转场动画，这很好的帮助用户理解怎么去(4)，怎么回(5)。

当网页内容大于屏幕展示范围时，Android内置的浏览器会在用户拖动网页的时候在屏幕的下侧和右侧展示两个灰色的scrollbar，暗示用户当前所处的位置(1)，以及可以往哪里移动(2)。

二、一维条目

定义：将每一项信息列作一条，展示在纵向的条目里。

适用情景：

信息可以梳理为很多项目，项目与项目之间没有概念上的交集，总体数量在15个以内，再多就得考虑多分一级了。

它非常适合展示层次分明的分级结构，一层层地drilldown下去，条理很清晰。

讨论：一维条目是手机界面设计中较为朴素和常见的一种导航方式。每一项都可以在点击之后进入下一级。但是展示的项目不宜过多，在信息的海洋里晃来晃去找不到想要的东西是很让人懊恼的。如果一级上面的项目太多，就可以考虑做一下归类，再分一级下去。

完美无止境：

为了让用户知道应该选择哪一项(3)，条目都会用最大的尺寸去展示标题。同时，还会有一些辅助内容帮助用户判断，比如该项包含的内容、该项当前的状态、该项下未读过的子项目、图标。

如果项目过多，又不想再分一级，可以将项目分组，加上名字并在视觉上加以处理。

由于iPhone上没有“back”，它设计了统一的导航规则。表“返回”的按键始终在屏幕上角(5)，表“完成”的按键始终在右上角。同时，按键上还会写上“返回至哪里”。

将进过的项目和未进的项目区别开来，用户可以知道去过哪儿(2)，还可以去哪儿(3)。

这个钢琴模拟器其实也可以视作纵向一维条目。右侧的这个位置指示器可以视作一个做了个性优化的Scrollbar，可以拖动以改变当前位置(4,5)，也可以展示当前的位置 (1)。

将列表项目按某个规则排序，并且将排序标题展示出来可以增加用户对长列表的容忍度，同时也能暗示用户当前的位置(1)，以及为找到相应的项目接下来该怎么走(3)。

小Tips：在条目上可以加上一些常用的动作按键，方便用户一次点击即满足目标。

为长条目适时地提供一些加速滚动的工具会很有帮助。在用户拖动时，可以硕大的尺寸告知当前的位置(1)。

移动应用的导航设计源地址：http://xuexiao.me/2011/04/%e6%89%8b%e6%9c%ba%e7%95%8c%e9%9d%a2%e8%ae%be%e8%ae%a1%e5%b8%b8%e7%94%a8%e5%af%bc%e8%88%aa%e6%96%b9%e5%bc%8f%e5%88%86%e6%9e%90/

iOS的隐性导航设计

耗子吴 — 2011-10-03 12:26:43

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

什么是隐性导航

下图是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的滚动条

降级策略

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

iphone Web App 导航设计探讨

一叶苦雨 — 2011-10-21 10:53:24

最近在做iphone端Web App的项目。由于产品形式新颖，技术环境不成熟，公司给与了较宽松的研发时间。在一个月的交互设计阶段，每个环节都得到多次讨论推敲，我从中感悟颇多。导航系统的设计是一个比较典型的点，拿出来与大家分享讨论一下。

导航系统所遭遇的挑战

iphone Native App较常见的导航如下图所示：

手机屏幕底端：A、B、C、D四个tab组成该Native App的全局导航，这是我们经常见到的tab导航栏。

手机屏幕顶端：主要有四种形式。第①种形式是在该位置中心显示产品的logo；也可以将logo适当调整位置，将常用操作或快捷入口放在该位置的右侧。第②种形式是在该位置有两或三个tab选项。第③种形式是在该位置中间显示当前任务标题，在左右两侧放置导航控件或功能控件。第④种形式是在该位置放置搜索框。

与以上的Native App导航方式相比，Web App导航方式有着巨大的不同，如下图所示：

Safari浏览器的工具栏将一直占据着屏幕的底端位置，全局导航只能被动移动到屏幕的顶端位置。这是影响Web App导航设计的最重要因素。

如果产品的功能比较少，且没有特别要突出的功能的时候，可以设计成上图中第①种导航方式。此时存在的问题是如何表现出产品的品牌，毕竟在Safari浏览器登录某网站比运行一个Native App给人的品牌认同感弱很多。

如果将产品logo表现出来，且产品需要将用户常用功能突出（比如刷新功能或者发布入口），就需要设计成上图中的第②种导航方式。

如果在A功能板块下，还需要设置子类别选项，则导航栏中又多一组tab。此时的导航方式就如同上图中的第③种了。

当然，在执行某一项任务的时候，全局导航可以暂时“归隐”，只保留一行标题栏和左右两侧的导航控件或功能控件。如上图中第④种导航方式所示。

在该产品设计中，为方便用户在各功能板块之间快速省力地切换，设计师希望全局导航栏可以保持长久悬停，不要像一般wap网页似的让导航随网页滚动消失。这样的话，基于浏览器的Web App 导航系统便捷性就和Native App相媲美了。

然而，浏览器工具栏将全局导航逼到了屏幕的顶端，却又造成了导航头部过于沉重的问题。如下图所示：

如果将logo栏中的常用功能（例如刷新或发布入口）和全局导航都设计为悬浮停留的形式，内容区的信息展示空间就比Native App减少了一行的高度，如上图中的①。而且，某些页面需要在全局导航的下方出现二级导航；悬停不动的3行导航大大吞噬了屏幕本来就很宝贵的内容显示空间，如上图中的②。

让用户在如此狭小的空间不得不频繁滑动屏幕浏览信息，这样的体验太糟糕了。这个严重的问题很让设计师困扰，因此需要重新设计一下导航系统。设计过程主要包括：优秀竞品分析、方案遴选。

优秀竞品分析

首先，分析对比了三款优秀的Web App：Google+、FT Web App、Twitter的导航方式。浏览环境均为iphone Safari浏览器。

1.Google+

导航系统特点：

￭全局导航单独形成一个页面，其他页面不出现全局导航；

￭导航栏沿用了ios系统原生控件的形式：标题+导航或功能控件；

￭标题栏在页面中悬停不动

优点分析：

保证了每个信息浏览页面的导航栏简洁轻薄，尽量少的占用信息详情的显示空间；保证了其核心功能（此处是微博浏览功能）的良好使用体验。

缺点分析：

全局导航隐藏较深，降低了用户在不同功能板块快速切换的便利性；全局导航隐藏较深，用户看不到其它板块功能，大大降低了用户点击使用其他功能的可能性。

2. FT Web App

导航系统特点：

￭Safari浏览器URL一栏一直悬停存在，并将品牌文字FT Web App显示在顶端;

￭全局导航被隐藏起来，点击功能键后在页面顶端出现；

￭二级导航出现在页面顶端；

￭全局导航和二级导航由于新闻板块数量较多，都采取了单行空间不完全呈现的方式，可滑动选择其中某一项；

￭所有导航随页面滚动，不在屏幕中保持悬停；

优点分析：

FT Web App导航设计最大的优点就是繁重导航的轻量化处理。全局导航和二级导航中的新闻板块都非常多，若将这些板块都展示出来，恐怕要占用屏幕的一半显示空间。FT Web App于是将全局导航隐藏在一个功能键之后，二级导航也只给了一行的显示空间。

缺点分析：

展示给用户的导航只是其全部新闻板块的冰山一角，无法给予用户全部概况浏览的机会，也就无法很好的激励用户去尝试被隐藏的新闻版块；同时，用户寻找某一个新闻版块或者在页面底端回到页面顶端的操作成本略高。

3.Twitter

导航设计特点：

￭全局导航只有一行，品牌展示浓缩在主页图标中（Twitter小鸟图标）；

￭全局导航一直保持在屏幕顶端悬停不动，不随页面滚动而滚动；

￭二级导航在点击全局导航某tab后，以菜单列表形式出现。

优点分析：

在屏幕顶端悬停不动的全局导航，可以方便用户在不同的功能板块之间快捷切换，降低了用户的信息寻找成本；Twitter Web App的导航只有一行，为用户保证了尽量大的正文内容显示空间。

缺点分析：

一些常用的功能键被隐藏在二级导航中（比如新信息发布入口），一方面增大了用户的寻找成本，另一方面降低了这些常用功能对用户的激励使用效用。

基于对以上三款Web App产品导航系统的分析，设计师对目标项目的导航系统设计形成了以下框定：

￭全局导航方便用户快速寻找以及功能板块间的切换；

￭导航尽量轻薄化处理，尽量保证足够的正文内容区显示空间；

￭将用户经常使用的功能键呈现在前面。

方案遴选阶段

基于项目的实际需要以及对竞品分析的思考总结，设计师尝试了3款导航设计方案，并对每一款方案的优劣之处进行了详细分析。

导航设计方案一

设计说明：

￭ ABCD是产品的四个功能板块，组成全局导航。

￭全局导航在屏幕顶端保持悬停不动。

￭ E是新消息发布入口，属于用户常用功能。

￭ E采用半透明显示方式。

￭ E停留在屏幕的右下角

该方案的优点：

屏幕顶端只有全局导航一栏，导航的轻量化为正文内容区节省了尽量大的显示空间；全局导航悬停不动，可以便于用户快速切换到不同的功能板块。

该方案的缺点：

右下角的新信息发布入口致使浏览页面不够清爽，会对用户造成一定的视觉干扰；新信息发布入口没有必要在任何页面都显示，于是可寻性出现了危机；品牌logo无法显示，品牌感较弱。

导航设计方案二

设计说明：

￭ E是新消息发布入口，属于用户常用功能。

￭ ABCD是产品的四个功能板块，组成全局导航。

￭屏幕顶端的两行导航栏在用户刚进入页面的时候出现，在用户滑动屏幕浏览信息的时候消失。

￭屏幕右下角半透明功能键在导航栏消失后出现，点击该键导航栏出现。

该方案的优点：

浏览信息的时候导航栏消失，为用户提供提供了最大的正文内容显示空间；可以显示logo，品牌感较强；新信息发布入口的可寻性较好。

该方案的缺点：

屏幕右下角半透明功能键致使浏览页面不够清爽，会对用户造成一定的视觉干扰。

导航设计方案三

设计说明：

￭ E是新消息发布入口，属于用户常用功能。

￭ ABCD是产品的四个功能板块，组成全局导航。

￭屏幕顶端的两行导航栏在用户刚进入页面的时候出现，在用户滑动屏幕浏览信息的时候第一栏向上消失，第二栏上移至顶部保持悬停不动。

￭手动下拉全局导航栏，可以下拉出第一栏导航。

该方案的优点：

浏览正文信息的时候，仅显示全局导航一栏，做到了导航的轻薄化；全局导航悬停不动，可以便于用户快速切换到不同的功能板块。

该方案的缺点：

下拉全局导航时，可能会有误操作的危险，虽然可能性很小。

综合以上的分析，考虑到正文内容区显示空间的大小、对产品的操作便利性以及产品品牌感三方面因素，最终决定将方案三作为导航设计的基本形式，并继续进行进一步丰富细化。

总结：

浏览器的工具栏一直占据着屏幕的底端位置，全局导航只能被动移动到屏幕的顶端位置。如何平衡操作的便捷性与正文信息显示空间最大化的关系，是Web App导航设计的关键所在。

最佳方案总是权衡的结果。每一款设计方案解决某些问题的同时也会产生新的问题。此时设计师需要知道哪些功能是最重要、优先级最高的，保证核心功能的良好用户体验是评判设计方案的重要准绳。

移动产品设计之ios导航模式

kent.zhu — 2011-10-27 22:15:25

写在前面：刚开始接触移动产品设计的时候对着设计指南懵懵懂懂的感知了一下，但是还是不甚寥寥。最近读《触动人心》，发现作者对ios的导航模式的总结实在太棒了，于是写下这篇读书笔记。

导航始终是产品设计的重头戏，往往产品设计中90%的事情就是在做导航。在iphone中预置了3种可以直接使用的导航模式，平铺列表、标签页、树状结构，每种模式都配有不同的工具栏和控件。三种导航模式可以独立使用也可以混搭，让你的用户可以优雅的穿行与你的应用之中。

（图片来源：Tapworthy）

平铺列表

这种方式主要用于只有一个主屏的简单应用。这种方式很适合浏览并发现类的应用，因为他的信息架构简单到极致，没有信息层级也没有组织结构，就像一叠卡片一样。主要信息在卡片的“正面”展示，“反面”就是简单的设置，向左右滑动即可翻页，典型应用比如内置的天气应用。

当然，平铺列表式导航也可以根据你的需要随意的添加、删除卡片。从某种意义上讲，他的扩展性优于标签页式导航，因为标签页模式中类目与顺序都是固定的。

在平铺列表模式的页面底部都添加了页面分页控件，其表现为一排小圆点。小圆点的数量代表了平铺的页面的数量，而高亮的小点则是另外一种形式的导航，他显示了当前所在页面的位置。同时，页面分页控件也是可以操作的，点击控件的左半部分或者右半部分或者直接左右滑动可以切换上一个/下一个页面，不过，页面分页控件每次只能翻一页，而不是直接跳转到某一页去。一般而言，页面分页以不超过10个为最优，超过了20个就会溢出屏幕了….

另外，为了更好的表达”卡片堆“的隐喻，最好不要在平铺模式下设计多个不同的滑动手势。在触摸屏上大家都能在单一方向上进行滚屏，但是2个方向的滚屏需要更好的精度，这种做法有些挑战人机工程学了。

标签页

在ios上标签页一般依附在屏幕的底部，标签栏将应用功能一一归类，点击一个标签就会跳转到相应的页面上，然后该标签以高亮的形式表明你当前的位置。在标签页模式下，每个标签对应的页面都可以有自己的界面风格和特定的内容与功能，看起来就像是在运行一个独立的应用。

标签栏的高度是49像素，每个按钮都会包含一个文本标签和图标，按钮的宽度取决于放置按钮的数量，标签栏限制最多可以放5个图标，超过之后会在第5个按钮的位置出现”更多“的标签。

当然，标签栏以49像素的高度存在其实占用了不少的屏幕空间，所以在某些情况下可以适当的去掉标签栏，典型的就是图书类应用的全屏阅读模式。

树状结构

这种模式简单来说就是将层级信息分类到一棵倒置的树枝上。这种导航模式很适合列表，点击列表中的一项可以看到新的列表，列表可以再进行分拆，直到进入项目的详情。树状结构的一个变形就是表格视图，也就是我们常说的”9宫格”，这种变形更加的图形化。

当然，根据信息的不同，树状模式中的标签也可以进行分组。一个树状模式可以分为若干的组，每个组可以包含任意数量的行数。

3类导航模式的比较

导航模式	优点	缺点	代表应用
平铺列表	适于信息架构及简的浏览性页面；内容可自定义且数量可变；隐喻明显，手势单一；占用页面空间少；	无法快速进行跳转翻页；最多只能容纳20个页面；难以包容滚屏，对长文本不利；页面指示器不够明显，其他页面容易被忽略；	天气
标签页	点击一次即可访问应用所有的主要功能；清楚告知用户主要功能和当前所在；	只能显示5个；应用的大多数页面都会始终占据一定的屏幕空间；	Instagram
树状结构	处理大量的类别、功能和类目；组织方式的隐喻容易理解；可直接对内容进行交互，占用屏幕空间小；适合用户自定义分类；	主功能只有在最顶层才会被显示，不能在每个页面都展现；主功能和分类直接切换比较麻烦，必须先回到顶层；	Mail Facebook

导航模式的组合应用

平铺列表、标签页、树状结构3种导航模式并不是互斥的，完全可以在一个应用里对他们进行混搭。这种混搭可以帮助我们克服单个导航模式的短处。

模态视图

我们经常会遇到在某个路径中滑出一个单屏、进行编辑、查看信息、操作界面的上的内容的情况发生。这是一种应用行为的特定形态，一般带有流程的界面变更的情况发生，比如一张页面临时取代了整个应用程序的显示屏，我们称这种处理方式为“模态视图”。默认情况下，模式视图从屏幕底部边缘滑上来切一半覆盖了当前整个屏幕,模态视图完成和程序主功能有关系的独立任务，尤其适合于主功能界面中欠缺的多级子任务。这种操作会暂时绕开应用的正常操作。

模态视图常常被用来编辑或添加内容，当你需要的时候模态视图一般从屏幕底部滑出而后遮盖先前的页面，当你完成任务后滑出的页面也会相应的缩回去，然后可以继续之前的流程。有些控件和界面元素只在次要任务中被偶尔用到，模态视图很好的把他们暂时隐藏了，并且当需要的时候出现，有效的节约了屏幕空间。

模态视图有点像是导航中的死胡同，为了能够让用户也可以同样方便的回到正常的流程中去，模态视图除了正常的操作之外一般还有加上一个“完成”按钮，或者“取消”按钮。

最后，一个移动产品设计的礼仪问题

当用户从你应用的一个地方跳转到另外一个地方再原路返回来的时候，应用应该主动恢复到他上次离开的样子（千万不要重新加载，你懂的！）。这玩意学名叫状态恢复，这种保持不变的礼仪对移动产品的体验来说相当重要！

浅析移动应用的导航模型

zleee — 2012-06-10 18:45:09

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

说说抽屉式导航

kent.zhu — 2012-07-20 15:21:45

导航始终是产品设计的重头戏，不管在Web端设计还是在mobile的设计中。之前曾经在读《触动人心》的时候写过一篇“移动产品设计之ios导航模式”，其中的导航模式基本都是基于ios系统自身的一些模式，随着ios新产品的不断出现，新的导航方式也随之更新，这里说一下“抽屉式”的导航方式。

当然，抽屉式导航是我自己给这种导航方式取的名字，至于学名叫什么，我也不知道。这种导航模式一般采用将导航主体隐藏在app侧边的方式，以一个按钮来呼出导航，在使用完成之后在使用相同的按钮隐藏起来。一拉一缩，从形象上与抽屉类似，于是我这样称呼他。

根据我不完全的考证，这种导航方式始于Facebook。在最早的Facebook App中，一直采用了比较保守的九宫格导航方式，随着FB的发展，这种很重的导航方式会导致用户Timeline的展示被很大程度上弱化，虽然FB也曾尝试在用户进入App的时候直接进入Timeline而不是这个九宫格导航，但是，显然这种优化还不是足够好。于是，在2011年11月左右，FB发布了新的ios和android客户端，其中一个重要的变化就是导航模式的变化，推出了新的抽屉式的导航，同时强化了对Timeline的展示。

FB推出这种新的导航模式不久，Gmail的ios版本同样采用了这种导航模式，再之后path 2.0版本也采用了这种抽屉式导航并将其演变到极致。至此，这种抽屉式的导航模式迅速窜红与ios产品设计中。

简单的定义

一般控制抽屉的把手出现在App的左上角，以按钮的形式出现，点击按钮之后抽屉被拉开，按钮被拉到App的右上角，左侧区域被拉开（抽屉）后显示出导航内容。导航的内容可以是以列表形式展示的常规2级导航，也可以将一些非常用的快捷操作入口直接放进来，如FB的搜索。具体形式如下图

当然，这种抽屉也存在一些变种，目前以path和sparrow较为突出。path不仅将主导航作为一种抽屉，同时底部的操作按钮也是一种变种的抽屉；而sparrow则增加了抽屉的层级，在一级抽屉被打开之后还可以再继续拉开一层抽屉。另外，米途订酒店则将全部的酒店预订过程化作一种抽屉，也是一种很不错的形式。

另外，对于一些需要用到消息提醒的应用，抽屉的出现会给消息的展示带来新的麻烦，因此，很多的抽屉导航会将消息展示在Title区域里，以一个入口的形式来展示。典型的如Facebook、快捷酒店管家。

抽屉导航的核心思路

抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去。个人认为，隐藏的思维是移动产品设计中最核心的一个思想。上周在极客公园分享了关于如何应用缩小、隐藏、赋加的思路来做移动产品设计的话题，而这个思路中最最核心的恰恰是隐藏。

Facebook中，用户核心的操作是阅读Timline，所以抽屉里隐藏了所有其他的操作；Path中，用户的核心操作还是看好友的Timeline，所以抽屉里隐藏了其他的操作，同时UGC的操作又必不可少，因此path在左下角也用了一个抽屉；在Sparrow里，用户看新邮件的频率大于查看归档邮件的频率，因此抽屉里隐藏了邮件类型等操作，同时为了平衡发邮件的需求，在右下角单独留了一个入口；在快捷酒店管家里，用户的核心操作是通过地图寻找附近的快捷酒店，所以抽屉里隐藏了切换城市等其他操作…..

3月份的时候我曾在微博上说，这种导航方式会逐渐流行，推测的依据就是随着移动产品设计的演进，越来越多的产品设计师开始认识到只有让核心更突出才能提高整体产品的体验，只有不断降低用户的干扰才能不断提高用户的使用效率。

不适合抽屉式导航的App

需要用户不断在导航间进行切换的App、没必要有太多导航的App、或者核心功能就是一堆入口的App。

相关话题：移动应用的导航设计源地址：http://www.ikent.me/blog/4138