GOGO体育appAPP 设计模式之——导航设计

2021-09-14| 发布者: admin| 查看: |

  GOGO体育标签式导航又叫 Tab 式导航,是目前移动端市场上最为广泛的导航设计。标签导航通常分为底部,顶部,顶、底混合使用这三种模式。

  采用文字加图标的方式展现。一般有 3~5 个标签,适合在相关的几类信息中间频繁地切换使用。这类信息优先级较高、用户使用频繁,彼此之间相互独立,通过标签式导航的引导,用户可以迅速地实现页面之间的切换且不会迷失方向,简单而高效。

  当内容分类比较多,用户对不同内容的打开率相差不是很大,需要快速切换 / 调出的时候,经常会采用顶部导航设计模式,常见于工具类 APP 中,如Wave Analytics、滴滴打车:

  标签式导航除了设在顶部和底部,另外有些内容比较多的产品会采用顶部、底部混合使用标签式导航,如简书、网易云阅读:

  这种导航设计比较适合于那么不需要频繁切换的次要功能,例如对设置、关于、会员、皮肤设置等功能的隐藏。下图分别是Wave Analytics、Gadgets News、My Rolls和Perisfind:

  桌面式导航类似于操作系统或启动控制面板,其特色是主页由多个按钮组成。均衡布局时,按钮通常大小一致,以 3*3、2*3、2*2 和 1*2 等形式排布于桌面。点击按钮时,跳转至其他内部子系统 / 子模块。

  市面上还存在着一些极少数应用,它们内部生态繁杂,提供(自己的或者来自第三方服务)眼花缭乱、不胜枚举的服务项目,有些服务项目单独拎出来,做成一款应用,都可以匹敌一家小型互联网公司,甚至是中型互联网公司。

  但是出于业务整合、平台搭建、体系构建、服务扁平化,它们会被塞到一个 壳子 里,形成 超级服务平台类 APP,比如阿里系的支付宝和千牛工作台:

  高频 / 超高频使用,用户粘性极高,应用处于市场垄断地位,几乎无可替代产品(生态庞大带来的优势);

  可以当做企业移动后台来使用(支付宝的服务包括衣食住行,可认为是企业个人),我称之为 行走的 ERP;

  最佳实践:菜单无主次之分,每个菜单所占空间大小一致。菜单有主次之分,主要的占空间较大,其余的占空间较小。在使用桌面式导航布局时,要充分考虑到给客户提供个性化和定制化功能。

  宫格导航是将主要入口全部聚合在主页面中(因其布局比较像传统 PC 桌面上的图标排列,又被称为 桌面式导航 ),每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通。

  因为这种特质,宫格式导航被广泛应用于各平台系统的中心页面。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,因此现在采用这种导航的 APP 已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。下图应用分别是钉钉和epocrates:

  在有些情况下,简单的底部 tab 式导航难以满足更多的操作功能,这个时候我们就需要一些扩展形式来满足需求 ,新浪微博、lofter、闲鱼底部采用的就是舵式导航,舵式导航(之前看到别人这么叫所以我也就这么称呼吧)。

  跟标签式导航相比,区别在于舵式导航把类似生产内容的主功能按钮放在中间,标签更加突出醒目,同时该主功能标签做了功能扩展,也因此给设计增加了一些个性化的亮点。如新浪微博和育学园:

  二级导航用于在页面及模块中进行导航,因此这种应用通常来讲至少有 3 层信息结构,最常见的就是国内绝大多数 APP 都有的 我的 功能菜单。

  列表导航与宫格导航类似,常用于二级页面,不会默认展示任何实质内容,所以通常 app 不会在首页使用它。这种导航结构清晰,易于用户理解,能够帮助用户快速的定位去到对应的页面。下图应用分别是微信和Strides:

  底部选项卡现在几乎成了 IOS 和 Android 两大系统(黑莓和 webOS 也比较广泛,但因为已经不是主流系统,因此暂不讨论)阵营中,绝大多数应用的标配。如Facebook、Twitter、微信和新浪微博:

  图库式界面被分割成用于导航的各个内容区块。内容区通常载有单独的文章、标题、照片、产品和其他能够放置在内容区、网格或幻灯片里展示的内容。如 TED、BBC NEWS、Bilibili、搜狐视频等。

  页面旋转常见模式是使用左右滑动手势在页面间快速切换,用户滑动时将显示下一个页面。页面指示器(IOS 系统下面的小点)显示一共有多少页可供切换。下图应用分别是tapas和ConnectID:

  图片旋转式的常见形态,是类似于 2D 旋转木马形式,图片可以左右滑动,且沿任意方向一直滑动可重新回到初始图片处。下图分别来自应用TED、BBC NEWS、IMOB:

  仪表盘汇总展示了一些关键指标。进入每一种度量方式后,都可以了解更多额外信息。这种主导航模式常用于金融应用程序、分析工具、销售和营销应用程序,如友盟统计:

 
QQ在线咨询
售前咨询热线
售后服务热线
返回顶部