苦逼设计师
会ps丨会AI
Sketch+Flinto也会点
在学AE
学过3D和Rhino
手绘还凑合
工作了几年至今单身
撸啊撸电一黄金段位
向往说走就走的旅行

 

APP导航设计

当我们确定了APP的设计需求和APP产品设计流程之后,开始着手设计APP界面UI或者APP原型,此时,最主要的就是根据不同的内容,选择不同的导航方式。按照使用频率,大体分为以下几种:

1、Tab导航,

2、抽屉导航(汉堡导航)Navigation Drawer

3、九宫格导航,

4、List导航,

5、复合导航。

下面就导航条目、优劣势、使用场景等分析几种导航。


一、Tab导航:

Tab导航分上下两种,是最常见的导航形式。在很多的iOS应用中,都采用的了这种导航模式,比如:微博、微信等,iOS很多原声的应用也使用了这种导航,如:拨号、Music、APP Store等。

在iOS中,Tabbar可以点击切换,而不能做滑动切换,页面滑动一般情况下都是留给Item操作,如新闻客户端、视频客户端等。

在Andrioid中,由于操作手势和iOS不同,部分Tab可以点击切换,也有部分可以滑动切换。

页面底部的Tab bar一般是位置固定的,也有部分会隐藏在页面外,滑动后出现(如:花瓣等),大部分情况下最多为5个条目,再多的话不方便操作;当Tab本身可以滑动的时候,数量可能会多一些。

Tab导航的所有入口都可见,很容易寻找,但是总会在屏幕上占据一条栏目,浏览信息的时候会阻挡内容,而且屏幕宽度限制了条目最多为5个,当条目不多且使用频率(目标使用频率)相差不大事可以使用此导航模式,但当条目较多时,不适用此导航模式。


二、抽屉导航(汉堡导航)

前几年这种导航模式在社交应用中最常见的,如前几年的Facebook,Path等,但近几年由于导航式菜单部分条目不可见,需要用户寻找,增加认知成本;条目之间切换成本较高等原因,单独的抽屉导航应用近乎绝迹。但是当分类条目较多时,配合其他方式的导航,仍然是一个很好的选择。


三、九宫格导航(宫格类导航)

最典型的就是美图秀秀等,九宫格导航可以容纳很多的条目,清晰明了,但是在首页没有实际内容,只有导航,和以内容为主的趋势不符,以至这类导航模式越来越少了。


四、List导航

一条一条的Item,通常都是和其他导航同时使用,内容较多时多使用这种导航模式,主要优点是内容突出,但是不适合较深层级应用。



五:复合导航模式

现在大部分较大型的APP,平台型APP多使用复合导航模式,即多种类导航复合使用。

典型的就是QQ的导航,底部Tab导航和抽屉导航共用,主体应用放在底部Tab导航,不常用的个人信息、设置等放在抽屉导航。

支付宝APP也是采用了底部Tab导航,内容由于功能较多,使用宫格导航模式,入口清晰。


最后,每一种导航都有自己使用的范围,看了很多应用的设计,没必要只局限于一种导航模式。根据每一种应用要呈现和表达的内容选择。在每一个模块选用合适的呈现方式。


评论
热度(6)
Top

© Amy·W | Powered by LOFTER