交互设计案例分析2-app导航交互设计.pptxVIP

数字媒体学院 于成龙;原始导航是一个最最粗糙的导航，通过纯文字的链接入口来导航。如下图：;它定义为原始导航，是因为如今我们的移动APP导航都是在此基础上通过不断的演变来形成我们常见的APP导航模式。;一、标签导航(选项卡导航) 有了原始导航，可能原始导航这种入口的摆放方式太占空间了，五个入口就占据了整个界面。有没有一种更加省空间的导航模式呢?当然有。 首先，我们将五个入口放到界面的下方，就会形成常见的底部标签导航。;一、标签导航(选项卡导航) 首先，我们将五个入口放到界面的下方，就会形成常见的底部标签导航。;一、标签导航(选项卡导航) 首先，我们将五个入口放到界面的下方，就会形成常见的底部标签导航。;一、标签导航(选项卡导航) 目前这样的APP导航是最常见的。通常，底部标签导航有4～5标签，一般不会超过5个，有更多的选项操作时可将最后一项设置为更多，将一些次要功能放置在更多里。 这是一种非常常见的导航模式。如果你的应用需要用户频繁的在不同分页切换，可以采用这种导航。虽然它还是会占用一定的界面空间，但比起原始导航来说好多了。 现在很多APP(包括ios和android)都在用这种模式。也是目前很多移动APP设计大牛和产品经理所推崇的app导航方式。;一、标签导航(选项卡导航) 如果在五个标签中，有一个标签是最重要或最频繁使用的，想要重点突出，可以使用下面变形的底部标签导航。 ;一、标签导航(选项卡导航) 如果在五个标签中，有一个标签是最重要或最频繁使用的，想要重点突出，可以使用下面变形的底部标签导航。 ;一、标签导航(选项卡导航) 将标签放到界面的上方，就会形成常见的顶部标签导航。 ;一、标签导航(选项卡导航) 顶部标签导航在ios app中一般当作二级导航。在android app中，这种导航模式以前被用作一级导航，但自从google推出了“抽屉导航”作为一级导航后，顶部标签导航就被常用为二级导航了。 作为一个二级导航，顶部标签导航应用于多种情境下，可以固定数量，展示有限的几个标签。也可以扩大一定的数量，变成向左滑动展现更多标签。甚至可以像网易新闻那样，衍生出订阅功能??顶部标签导航也是一种非常常见的导航模式。 ;二、抽屉导航 如果有六七个导航，但其中只有一个导航是主要的，别的虽然有用，但用户非常非常少用。这种情况下能不能只显示主要的内容，其它导航隐藏起来呢?这样还可以更近一步地节省页面空间。 ;二、抽屉导航 这种导航的优点是：节省页面展示空间，让用户将更多的注意力聚焦到当前页面。比较适合于不那么需要频繁切换内容的应用，例如对设置、关于等内容的隐藏。 缺点是：对于那些需要经常在不同导航间切换或者核心功能有一堆入口的app不适用。抽屉导航设计需要注意的是一定要提供菜单画出的过渡动画。 ;三：下拉导航 还有另外一种类似的导航模式同样可以节省页面空间，并且隐藏次要入口，这就是下拉导航。 ;三：下拉导航 下拉导航，与抽屉式导航的目的相同，都是为了突出内容。一般位于产品顶部，通过点击呼出导航菜单。 导航菜单以浮窗形式位于界面上层，可通过点击导航菜单以外的区域使其收起。 下拉导航的菜单与界面的连贯性比抽屉式要好，容易让用户感知当前位置。但由于是位于屏幕上方，相对隐蔽而且不能结合手势操作，所以该菜单形式也不适合于频繁的切换功能使用。考虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容。 下拉导航有一种比较常见的变式，就是下来菜单中展示两级甚至多级(一般就是两级，没见过更多的)，很多人称其为超级菜单导航。如下：;三：下拉导航 ;四、宫格导航 如果有7、8个甚至10多个入口呢?而且这些入口也不好说到底哪个对用户是最重要的，重要性差不多?宫格导航可以解决这个问题。 ;四、宫格导航 ;四、宫格导航 宫格导航将主要入口全部聚合在页面，让用户做出选择。这样的组织方式虽然无法让用户第一时间看到内容或执行操作，用户的选择压力也比较大。但却能够让用户整体上了解APP提供的服务，从而选择自己所需要的那个服务。 目前来说，这种导航模式越来越少用在一级导航了。不过，作为二级导航，作为一系列工具入口的聚合，或作为内容列表的一种图形化呈现形式，还是存在在各种APP里。如：zakeer的核心页面就是宫格导航，但其与订阅功能结合，没有让所有宫格斗展示出了。各种手机界面打开后的app展示页面基本上都是宫格模式的。 ;四、宫格导航 由于受到卡片式设计的影响，宫格模式的变形也非常多。接下来简单说一下这些变形。首先，可以将宫格的卡片变大，宫格与宫格时间不留空白，如下图： ;四、宫格导航 ;四、宫格导航 上面这种展现方式所能展现的卡片数量有限。如果我们将其稍做调整，增加纵向滚动功能，就可以增加卡片数量的展现，可以说是无限的。如下图： ;四、宫格导航 如果更进一