开班信息
UI设计几种常见移动导航模式详析
来源:北大青鸟科泰校区时间:2019-04-10内容提要: 北大青鸟科泰IT培训学院分享UI设计八种常见移动导航模式详析!
一、标签式
标签式导航是ios平台上公认的最经典的导航模式,看市场上几乎有80%的应用都在使用就能知道。标签式导航关注的是平行空间的展示,它的优点是适用于多个内容体系,且重要程度相似(平级关系),能频繁在不同页面间切换,切换成本底,只需一次点击;缺点是占用一定高度空间,且标签数量有限,最多5个标签。
二、抽屉式
抽屉式导航的目的是带给用户更为沉浸的体验。它的特点是,“阅读”为王,点击切换少,专注于主体信息本身。从表现形态来看,抽屉导航很符合产品的二八法则,即产品中只有20%的功能常用,所以要突显,剩下的80%不常用,因此隐藏。它不像标签导航一样强调平级关系的切换,而是突出重要且核心的功能。抽屉导航的另一些优点是,侧边导航收纳的导航标签可以是5个以上,节省屏幕空间。缺点是无法快速完成导航切换,操作成本高。
三、选项卡式
对于选项卡导航,不同平台有不同的设计规则,关于Android平台我就不多说了,请移步至《关于Android和IOS交互上那些事》有详细说明。今天主要说说ios上选项卡的表现,选项卡的本质即是,实现容器内不同视图或内容的切换。虽然对于选项卡本身,ios没有专门的规范约束,但这并不妨碍广大设计者们自由发挥。目前市场上主要有3种形式的选项卡:分段选项卡、固定选项卡和滑动选项卡。
四、下拉菜单式
现如今,下拉菜单式导航并不常用。下拉菜单和导航抽屉一样,是以突出内容为主的导航模式,一般位于产品顶部,通过点击呼出导航菜单。由于导航菜单位于屏幕顶部,不适合结合手势,操作负荷大,因此不适合需要频繁切换功能,且能在一定程度上节省屏幕空间。一般情况下,下拉菜单很容易被滑动选项卡取代,且滑动选项卡可以结合手势操作,使用效率更高,这也是现在下拉菜单很少被使用的原因,除非你的下拉菜单选项中有很明显的优先级区分。
五、宫格式
宫格式导航,是一种类似于手机桌面各个应用入口的导航方式。每个入口往往是比较独立的信息内容,用户进入一个入口后,只处理与此入口相关的内容,如果要跳转至其他入口,必须要先回到入口总界面。这种导航经常用于工具类app中,它的优点是功能拓展性强,可增加多个入口。缺点是单页承载信息能力弱,层级深,不适合频繁任务切换。如下图的美颜相机就是标准的宫格式结构,每个功能类似于独立的app,且作为一级导航使用,这种表现形式现在越来越少。而剩下的其他三张图示,属于宫格式的一种变形,我称之为数据入口,这种只作为各种大数据入口的导航模式现在更多作为二级导航使用,特别是平台类产品。
六、列表式
列表式导航也是一种十分常见的导航模式,纯粹的列表导航很少见,一般都是搭配着别的导航模式一起使用,大多作为二级导航。列表中可以放置图片、标题或者详情文字等来展示信息,列表本身是一个传达信息效率很高的载体,因此使用列表的时候要注意,每个列表所占的屏幕空间,以及每屏能显示多少条列表等。
七、图示式
图示式是一种更加可视化的导航,它能根据页面内容的变化及时更新图片,适合以图片为主的内容,像新闻、美食、旅行、视频图片等经常使用,常作为二级导航。由于图片可能需要经常更新,因此需要配置固定的栏目或标题,防止不断更新的图片让用户找不到入口。这种形式的导航常常会采用网格布局!
八、幻灯片式
幻灯片的导航方式,适用于图片或整块内容的并列展示,用户通过手指左右滑动来切换当前内容。正常情况下,幻灯片的数量不宜太多,最好控制在7-8个以内,避免用户操作疲劳。
标签式导航是ios平台上公认的最经典的导航模式,看市场上几乎有80%的应用都在使用就能知道。标签式导航关注的是平行空间的展示,它的优点是适用于多个内容体系,且重要程度相似(平级关系),能频繁在不同页面间切换,切换成本底,只需一次点击;缺点是占用一定高度空间,且标签数量有限,最多5个标签。
二、抽屉式
抽屉式导航的目的是带给用户更为沉浸的体验。它的特点是,“阅读”为王,点击切换少,专注于主体信息本身。从表现形态来看,抽屉导航很符合产品的二八法则,即产品中只有20%的功能常用,所以要突显,剩下的80%不常用,因此隐藏。它不像标签导航一样强调平级关系的切换,而是突出重要且核心的功能。抽屉导航的另一些优点是,侧边导航收纳的导航标签可以是5个以上,节省屏幕空间。缺点是无法快速完成导航切换,操作成本高。
三、选项卡式
对于选项卡导航,不同平台有不同的设计规则,关于Android平台我就不多说了,请移步至《关于Android和IOS交互上那些事》有详细说明。今天主要说说ios上选项卡的表现,选项卡的本质即是,实现容器内不同视图或内容的切换。虽然对于选项卡本身,ios没有专门的规范约束,但这并不妨碍广大设计者们自由发挥。目前市场上主要有3种形式的选项卡:分段选项卡、固定选项卡和滑动选项卡。
四、下拉菜单式
现如今,下拉菜单式导航并不常用。下拉菜单和导航抽屉一样,是以突出内容为主的导航模式,一般位于产品顶部,通过点击呼出导航菜单。由于导航菜单位于屏幕顶部,不适合结合手势,操作负荷大,因此不适合需要频繁切换功能,且能在一定程度上节省屏幕空间。一般情况下,下拉菜单很容易被滑动选项卡取代,且滑动选项卡可以结合手势操作,使用效率更高,这也是现在下拉菜单很少被使用的原因,除非你的下拉菜单选项中有很明显的优先级区分。
五、宫格式
宫格式导航,是一种类似于手机桌面各个应用入口的导航方式。每个入口往往是比较独立的信息内容,用户进入一个入口后,只处理与此入口相关的内容,如果要跳转至其他入口,必须要先回到入口总界面。这种导航经常用于工具类app中,它的优点是功能拓展性强,可增加多个入口。缺点是单页承载信息能力弱,层级深,不适合频繁任务切换。如下图的美颜相机就是标准的宫格式结构,每个功能类似于独立的app,且作为一级导航使用,这种表现形式现在越来越少。而剩下的其他三张图示,属于宫格式的一种变形,我称之为数据入口,这种只作为各种大数据入口的导航模式现在更多作为二级导航使用,特别是平台类产品。
六、列表式
列表式导航也是一种十分常见的导航模式,纯粹的列表导航很少见,一般都是搭配着别的导航模式一起使用,大多作为二级导航。列表中可以放置图片、标题或者详情文字等来展示信息,列表本身是一个传达信息效率很高的载体,因此使用列表的时候要注意,每个列表所占的屏幕空间,以及每屏能显示多少条列表等。
七、图示式
图示式是一种更加可视化的导航,它能根据页面内容的变化及时更新图片,适合以图片为主的内容,像新闻、美食、旅行、视频图片等经常使用,常作为二级导航。由于图片可能需要经常更新,因此需要配置固定的栏目或标题,防止不断更新的图片让用户找不到入口。这种形式的导航常常会采用网格布局!
八、幻灯片式
幻灯片的导航方式,适用于图片或整块内容的并列展示,用户通过手指左右滑动来切换当前内容。正常情况下,幻灯片的数量不宜太多,最好控制在7-8个以内,避免用户操作疲劳。
相关推荐