加入收藏 | 设为首页 | 会员中心 | 我要投稿 应用网_镇江站长网 (https://www.0511zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 交互 > 正文

壹佰大咖说|精准定位三大类移动应用导航设计,案例实战全解析

发布时间:2016-11-20 03:50:50 所属栏目:交互 来源:产品壹佰
导读:副标题#e# 本文整理自壹佰讲堂第68期,由1905电影网成都产品总监张崟倾情分享。 想要查看视频回顾? 想要获取分享课件? 戳这里快速获得哦~ 前言 手机不仅是信息的工具,甚至成为了人们的一部分,其打破了时间和空间的限制,这也是移动趋势渗入我们工作和生

目前1905手机端的应用,选用的是选项卡时导航,但是改版前一直用的是抽屉式导航,将推荐频道作为应用启动的第一个界面。然而除了推荐频道的点击量很高之外,其他频道的点击量很低,所以当时考虑很重要的一个因素,是因为导航将其他频道隐藏太深导致,因此经过团队的讨论后,决定将导航改为选项卡导航。改版后各项数据都有所上升,体验非常直观。

2. 下拉菜单式

壹佰大咖说|精准定位三大类移动应用导航设计,案例实战全解析

国外的某APP界面

在上面这张图中的应用,就是采用瞬时导航来删选不同频道的分类。

下拉式导航几年前也颇受偏爱。曾经我所在的PPTV团队,PPTV手机端1.0版本,我们所有的电影、电视剧、动漫等内容选择,都采用下拉式菜单展现。产品的交互设计也如时尚界,有一个流行趋势,这个交互设计流行了一段时间后,现在又开始了另外一种交互设计的流行。所以你会发现菜单式流行完后,视频类的产品又开始流行选项卡式的导航设计,并且沿用至今。其实用户的习惯养成,并不是我们想象中这么难。好用与可用,是不同的。但是,只要是好的设计,总是会受到用户的喜爱。

3. 转盘菜单式

壹佰大咖说|精准定位三大类移动应用导航设计,案例实战全解析

在我们所有模式中,转盘菜单式是最少见的,无论是国内还是国外,使用率都非常低。究其原因,主要是由于其交互设计较为复杂,对于用户来说,使用成本太高。因此我们要谨记,能简单的,绝不复杂化。

同时,由于其操作手势很不简单和自然,因此设计任何有多个层级的菜单时应该避免采用转盘式的菜单。

次级导航模式案例分析

为什么叫次级导航呢?因为其是在一级导航主导航下的二级分类和导航。

1. 翻页式导航

壹佰大咖说|精准定位三大类移动应用导航设计,案例实战全解析

翻页式导航视觉呈现效果很强

翻页式导航通常应用在次级导航中,通常利用移动手势控制,如左右滑动,而手势的利用,在移动的交互中,往往可以达到事半功倍的效果。

因此我们在进行产品设计时,如果我们可以用手势来进行操作的功能,不要在界面上增加更多的按钮或者指示,增加流畅的交互体验所带给人的舒适感。

运用翻页式时要利用移动的手势控制,不要依赖像下一步按钮或标签页这类桌面端模式。但要注意提供视觉指示,让用户知道可以使用滑动手势。

2. 滚动选项卡式

壹佰大咖说|精准定位三大类移动应用导航设计,案例实战全解析

滚动选项卡式的导航和手势的使用、动态交互密切不分。其适用于在某一个模块中显示多种类别或视图时。

滚动选项卡一般比标准的标签栏要窄,没必要作为触摸对象,进行滑动就可以进行切换,因此一定要注意动态交互设计。所以,希望大家在进行导航设计时,不仅要考虑导航本身的设计,还要考虑到功能分类和手势交互达到完美结合,这样的产品体验才能达到极致效果。

3. 折叠菜单式

壹佰大咖说|精准定位三大类移动应用导航设计,案例实战全解析

壹佰大咖说|精准定位三大类移动应用导航设计,案例实战全解析

折叠菜单式的导航,就是运用动态的效果,将二级的信息展开,无需跳转到新的页面,使用户在同一个页面上查看到更多的信息,不需要任何跳转。因此用户可以在一级页面就获取大量信息。这种模式比跳转到另一个页面再跳转回来更高效。

但是,一定要使用常见的图标来进行指示折叠式菜单的打开或关闭状态,避免用户产生疑问。

然而,熟悉了这么多的移动导航之后,在我们以上讲的内容中,并不是所有的设计都站在了用户的角度,有一些设计我们称之为反模式设计。

反模式——绕过那些陷阱

反模式也称之为陷阱,指一类通常是重复发生的糟糕的问题解决方案。通俗来讲就是一些违背现有设计规范规则,违背常用的视觉交互的方式方法,设计者出于某种目的,进行的一些没有必要或者不按常理出牌的设计。 因此,我们要特别注意,避开这些陷阱。

壹佰大咖说|精准定位三大类移动应用导航设计,案例实战全解析

很多时候产品经理更像是团队中的润滑剂,面对开发人员、设计师等各种要求,务必要站在用户的角度,多方面进行慎重的思考。在面对反模式的需求时,要坚决的拒绝。但是,在拒绝的时候,要用专业知识进行支撑,这就是say no的底气。

反面教材——反模式

以下内容都是反面教材,切记勿踩坑!

1. 标新立异

反面案例一:中国建设银行手机客户端

壹佰大咖说|精准定位三大类移动应用导航设计,案例实战全解析

建行的转盘导航 ,交互操作非常复杂,没有办法让用户一眼看到所有的菜单分类 ,切换主菜单时,菜单会旋转,影响用户视觉 。正是这些原因,让我将这个产品从我的手机中彻底删除了。

案例二:NBC NEWS

壹佰大咖说|精准定位三大类移动应用导航设计,案例实战全解析

(编辑:应用网_镇江站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读