美文网首页
APP导航设计样式

APP导航设计样式

作者: 阿韩设计 | 来源:发表于2019-08-28 15:47 被阅读0次

APP导航设计是每个设计师都要经历和学习的,有些时候不总结一下,可能都不熟悉每个导航的布局样式场景是什么,优缺点又是什么。「移动端界面设计模式」是基于大量设计师的智慧和尝试总结下来的可实施的解决方案,可以帮助我们解决绝大多数常见的移动界面设计需求。一个好的操作体验必不可少的要有合理的导航搭配设计,让产品操作舒适、体验友好,这个可能好多人会忽略掉,没关系!今天我们就对导航设计做了以下总结希望能帮助大家!

一:导航模式定义

个人理解为在页面框架中承载信息维度的桥梁。

通俗的理解就是跳转的承接点标志,从这里进去跳转到那个页面。从哪里来到哪里去,是不是有点禅意那,哈哈。其实做设计就是理解到设计本质,设计元素的本质,做起来就舒服多了,产品易用了,用户体验也友好了。

二:导航设计模式的类型

导航设计模式的类型这里通过横向、纵向的方式分为了以下9种常见的导航,底部TAB导航、标签导航、鸵式导航、轮播导航、下拉导航、列表导航、宫格导航、抽屉式导航、隐喻式导航。

1.底部TAB导航

底部的TAB导航是我们最为常见的导航,一般为3-5个,放在页面底部,作为APP主要功能的切换。例如微信、微博、美团、百度网盘等。

2.标签导航

标签导航一般是功能多时用于分类作为二级导航显示。主要是放置于页面顶部,展示样式为可左右滑动或者固定展示。数量太多时会增加分类跳转。

3.鸵式导航

鸵式导航一般放在底部中间位置,较常规TAB比较突出设计,可以加入产品特点进行设计,也可以趣味性设计。点击展开隐藏功能。在此类导航设计中许多趣味设计师为了避免用户操作疲劳,或者有记忆负担。

4.轮播导航

轮播导航属于比较特殊的导航方式,每一个大的卡片,页面都一个导航的入口位置。适合扁平类、个性化的APP。

5.下拉导航

一般位于页面的顶部位置,下拉导航一般用户二三级导航,筛选功能较多时的入口,连贯性较好,满足信息筛选量大的APP功能页面设计,不用跳转其他页面,直接当页面展示。

6.列表导航

最早也是最容易接受的信息展示方式之一,可以无限延伸功能信息框架。列表通常用来展示某个具体模块内容的信息进行分类。

7.宫格导航

有些产品功能较多无法全部展示,因此宫格导航可以满足用户的个性化需求选择自己需要的功能展示,例如支付宝、百度网盘、优酷

8.抽屉式导航

抽屉式导航,一般使用点击滑动效果展示,对于一些不重要的功能信息展示。例如我的、关于我们、具体设置等。

9.隐喻式导航

隐喻式导航就是信息比较复杂时,不适合上下排列,需要结合游戏、线索等排列的方式,适合产品游戏、故事、日记等。

三:总结

大部分的导航设计都是我们设计师设计产品演变而来的,产品设计的过程中,我们要做适合产品的设计,去把控导航设计样式结合,更好的服务用户。

相关文章

  • APP导航设计样式

    APP导航设计是每个设计师都要经历和学习的,有些时候不总结一下,可能都不熟悉每个导航的布局样式场景是什么,优缺点又...

  • 移动互联网-APP导航设计

    导航设计导航设计需要突出产品的核心点,尽量做到任务路径的扁平化,同时还要考虑到导航操作的便捷性。移动app导航样式...

  • 唯美APP设计IOS移动端

    本文是转载文 移动App中的10种创新导航设计 移动应用的导航条设计经过这么多年的发展,有许多种不同的样式。如果所...

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

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

  • APP导航设计

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

  • APP导航设计

    一、导航概述 1、导航定义:采用功能定义法,其核心功能即指引(导航) 2、划分方法:导航的形状和位置 3、重要性:...

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

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

  • 交互微专业笔记3- 移动产品设计模式

    设计模式之导航 标签式导航:放置在底部是ios常见的样式,放置在顶部是安卓常见的样式。标签数在5个以内。 分段式导...

  • APP导航设计模式

    下图是八种导航设计模式对比图: 一、列表式导航 列表式导航是最常见的主导航形式之一,是APP设计中不可少的一个导航...

  • 你真的了解移动端导航设计吗?来看这篇系统性的总结!

    合理的移动导航设计能够尽可能地减少摩擦,引导用户去他们要去的地方。 这篇文章汇总了移动端导航设计最常见的样式、要注...

网友评论

      本文标题:APP导航设计样式

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