APP UI设计模式之——导航设计

作者: dd0cdfcb3986 | 来源:发表于2019-07-03 13:38 被阅读4次

作为设计师只懂视觉是远远不够的,想成为高级 UI 设计师,交互和产品思维可以说是基本功。大家可以点文章最后的原文链接关注他和他的知乎专栏。

题外话:前几天有朋友跟我说,你已经一个月没发推送了兄弟,我说好吧我知道,这么久没有推文章的原因是一直没有好的写作灵感。

在几天前我在知乎上收到了一个回答邀请,问我有没有具体的一套标准化的流程和方法来学习交互设计和 UI 设计?我想了很久没有答上来,我觉得是有这样的流程的,但是我答不出来,因为和很多设计师一样,我们的学习历程都是碎片式的。

为了解决这个问题,我去 QUORA 上找答案,买了很多纸质书去读,想再扩充一下知识,争取想出一个科学的学习方法,然后按照这个方法去写教程。

一级导航/主导航

1.标签式导航

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

底部导航

采用文字加图标的方式展现。一般有3~5个标签,适合在相关的几类信息中间频繁的切换使用。这类信息优先级较高、用户使用频繁,彼此之间相互独立,通过标签式导航的引导,用户可以迅速的实现页面之间的切换且不会迷失方向,简单而高效。它的缺点是会占用一定高度的空间,如果用户是小屏幕手机,则视觉体验不太好。

下图应用分别为微信Facebook

顶部导航

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

顶部、底部双Tab导航

看完文章的你,想要一些学习软件或者有不懂的都可以找我咨询,加我建立的UI学习q群:927910296,进群可以找我领取相应的笔刷素材大礼包,还可以跟群里的其他设计大佬和学习者一起交流学习,获取更多其他软件学习资料。 想学UI设计的小白或者零基础都可以领取到学习资料ps笔刷神器+ps和AE软件 

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

2.抽屉式导航

抽屉导航指的是一些功能菜单按钮隐藏在当前页面后,点击入口或侧滑即可像拉抽屉一样拉出菜单。这种导航设计比较适合于那么不需要频繁切换的次要功能,例如对设置、关于、会员、皮肤设置等功能的隐藏。下图分别是Wave AnalyticsGadgets NewsMy RollsPerisfind

抽屉式导航的优点在于节省页面展示空间,使主页面更加简洁美观,让用户将更多的注意力聚焦到当前页面。

缺点在于次功能入口比较隐蔽,用户不容易发现;使用次功能需要二次点击,增加用户使用成本。

3.桌面式导航

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

如图,StridesFinance采用了基于圆形按钮的均衡布局:

360日语五十音图则采用了基于圆角矩形按钮的均衡布局:

注:当圆角矩形弧度越来越小,甚至消失不见成为正方形的时候,往往用方形格子隔开各个按钮,使得视觉效果最好,这种模式见于下一节的“宫格式导航”中。

市面上还存在着一些极少数应用,它们内部生态繁杂,提供(自己的或者来自第三方服务)眼花缭乱、不胜枚举的服务项目,有些服务项目单独拎出来,做成一款应用,都可以匹敌一家小型互联网公司,甚至是中型互联网公司,但是出于业务整合、平台搭建、体系构建、服务扁平化,它们会被塞到一个“壳子”里,形成“超级服务平台类”APP,比如阿里系的支付宝千牛工作台

支付宝首页的服务项目,可以在“全部”页面中进行个性化配置;千牛工作台首页的三方服务,可以在“设置”页面中进行个性化配置。两个APP都支持用户根据自己实际需求和使用频度,优化服务项目的显示顺序,进行入口优化。

这种“超级服务平台类”APP,目前我仅在阿里系的产品中看到过,其特点是:①高频/超高频使用,用户粘性极高,应用处于市场垄断地位,几乎无可替代产品(生态庞大带来的优势);②应用服务种类多且扁平化(使得并列式的桌面布局模式成为必选项);③可以当做企业移动后台来使用(支付宝的服务包括衣食住行,可认为是企业个人),我称之为“行走的ERP”;④商业氛围浓厚。

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

4.宫格式导航

宫格导航是将主要入口全部聚合在主页面中(因其布局比较像传统PC桌面上的图标排列,又被称为“桌面式导航”),每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通。因为这种特质,宫格式导航被广泛应用于各平台系统的中心页面。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,因此现在采用这种导航的APP已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。下图应用分别是钉钉epocrates

作为二级导航的宫格式导航:

5.舵式导航

在有些情况下,简单的底部tab式导航难以满足更多的操作功能,这个时候我们就需要一些扩展形式来满足需求 ,新浪微博、lofter、闲鱼底部采用的就是舵式导航,舵式导航(之前看到别人这么叫所以我也就这么称呼吧)跟标签式导航相比,区别在于舵式导航把类似生产内容的主功能按钮放在中间,标签更加突出醒目,同时该主功能标签做了功能扩展,也因此给设计增加了一些个性化的亮点。如新浪微博育学园

二级导航

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

列表式导航

列表式导航作为信息组织框架,是我们在产品设计中必不可少的一个信息承载模式。列表导航与宫格导航。

相关文章

  • APP UI设计模式之——导航设计

    作为设计师只懂视觉是远远不够的,想成为高级 UI 设计师,交互和产品思维可以说是基本功。大家可以点文章最后的原文链...

  • 移动应用UI设计模式图示

    移动应用UI设计模式: 1.导航设计模式:主要导航和次要导航模式。 1)主菜单导航模式: 跳板式 Springbo...

  • TAB设计一些个人思考

    以前有在《移动应用ui设计——导航设计》中提到底部和顶部tab设计的模式和设计来源,如今市场上很多app都沿用了底...

  • 移动应用设计细节分析——导航

    移动设计模式整理分析——导航篇 产品导航设计优缺点分析 8种移动APP导航设计模式大对比 1.扁平式导航 1.1 ...

  • APP设计模式之——导航设计

    该篇文章首发自我的知乎专栏:cheka的产品笔记 想查看更多产品干货,欢迎关注我的知乎:cheka hou ---...

  • APP导航设计

    良好的APP导航设计模式决策对整个app的核心体验起到关键作用。几种常见的移动APP导航设计模式对比图。 ☆ AP...

  • 移动UI设计模式之导航设计

    导航–我理解为APP中的地图,好的导航能够快捷的指引用户达到目的,也能提高用户体验。 跳板式导航 跳板式导航又称为...

  • 让APP中内容呈现更友好易用的5种常见导航设计模式

    今天的文章会着重介绍移动端APP导航的设计模式。无论你所设计的APP是什么样的类型,或多或少都绕不开导航设计。作为...

  • 10种针对不同类型的移动APP UI设计模式

    10种针对不同类型的移动APP UI设计模式,搞自《移动应用UI设计模式》一书,在书中用户体验设计师Theresa...

  • APP导航设计模式

    导航主要分为两大类,横向和纵向。横向的导航有:标签导航、舵式导航、tab导航、轮播导航;纵向的导航有:宫格导航、下...

网友评论

    本文标题:APP UI设计模式之——导航设计

    本文链接:https://www.haomeiwen.com/subject/kbyqhctx.html