标签导航是十大界面框架设计里最常用的界面框架设计,也是被业界之内公认的一种普遍使用的页面框架设计。那么这种页面框架设计在作业方面对一个用户来说也是最常见的一种页面框架设计,比如说微博、微信、手机百度、支付宝、淘宝,这些我们所谓的超级APP都是运用的标签导航,无一例外。

从这个角度也可以看出来,优秀的产品用标签导航这种页面框架设计是非常普及的。标签导航位于页面底部,标签的分类最好可以控制在5个之内。


使用这种框架的优点在于:

1.标签导航能够让用户清楚当前所在的入口位置。比如对于微信来说,无论用户在“发现”还是“对话框”里面,用户都能通过底部的高亮区域来划分当前所处的这个产品结构的区域。无论是当前位置的判断,还是要找这个入口,都比较方便,比如对于微信来说,很容易都过标签导航找到“朋友圈”。

2.轻松在各入口间频繁跳转且不会迷失方向。比如对于微信来说,微信团队不仅希望我们拿微信来聊天,还希望我们拿微信来逛朋友圈、购物、支付、滴滴打车等等,那么如果能够让用户在不同的入口间实现频繁的跳转,那这时用标签导航是最合适不过的。

3.直接展现最重要入口的内容信息。这有两层意思,第一层就是它能展示出来最重要的入口,比如拿微信来说有那么多的重要入口,显然“微信对话框”最重要,那么他们默认的把微信对话框作为主入口。同样微博最重要的是首页,所以默认把微博首页作为最主要的入口。其次,入口不仅可以展示,入口里面的信息也可以展示。

但是这种模式的缺点也是存在的:

功能入口过多时,该模式显得笨重不实用。怎么理解“功能模块过多”,比如说现在标签导航,一般情况下功能入口控制在5个以内,我们也会遇到6个的情况,但那种产品一般来说比较复杂,最少会是3个,最多5到6个。如果过多的话,标签导航会弹不开,那这种模式就失效了。过多不行,过少也不太方便,如果说就一个Tab、两个Tab,那么标签导航下面就会显得特别的空,也不太好看,所以这个时候我们就会知道标签导航的适用范围最好在3至5 个之间,并且这几个功能希望用户能够频繁的去操作。

好了,理论知识就普及到这边,下一篇我就来说说如何用代码来具体实现”标签导航”,效果如下:


好了。祝大家生活愉快。多多收获友谊和爱情。如果想获取更多的讯息,请扫描下方二维码关注我的微信公众号:

APP界面框架初窥---标签导航的更多相关文章

  1. iOS开发之旅:实现一个APP界面框架

    在上一篇博客中,给大家介绍了一下我们传统的 APP 界面框架-标签导航的一些优缺点,在这篇文章中我会来给大家演示,如何用代码去实现这一框架.本次的实现我会分成俩部分来讲,好了闲话少说,接下来进入到开发 ...

  2. Android/IOS APP界面设计之尺寸规范

    1.尺寸以及分辨率 iPhone的界面尺寸不用多说,640*960是基本OK的,也可以是适应5S的640*1136,马上iPhone 6也快来了(随便吐槽一下网上曝的真机谍照,真是丑到离谱...),只 ...

  3. iOS视频直播初窥:高仿<喵播APP>

    视频直播初窥 视频直播,可以分为 采集,前处理,编码,传输, 服务器处理,解码,渲染 采集: iOS系统因为软硬件种类不多, 硬件适配性比较好, 所以比较简单. 而Android端市面上机型众多, 要 ...

  4. 看过《大湿教我写.net通用权限框架(1)之菜单导航篇》之后发生的事(续)——主界面

    引言 在UML系列学习中的小插曲:看过<大湿教我写.net通用权限框架(1)之菜单导航篇>之后发生的事 在上篇中只拿登录界面练练手,不把主界面抠出来,实在难受,严重的强迫症啊.之前一直在总 ...

  5. 微信小程序框架分析小练手(一)——猫眼电影底部标签导航制作

    旧版猫眼电影底部有4个标签导航:电影.影院.发现.我的,如下图所示: 一.首先,打开微信开发者工具,新建一个项目:movie.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标的素材放到ima ...

  6. 用 Flutter 搭建标签+导航框架

    前言 在 Flutter 这个分类的第一篇文章总结了下最新的 Mac 搭建 Flutter 开发环境和对声明式UI这个理解的东西,前面也有提过,准备像在 SwiftUI 分类中那样花一些功夫来写一个 ...

  7. 网页3D效果库Three.js初窥

    网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...

  8. WWDC15 Session笔记 - Xcode 7 UI 测试初窥

    https://onevcat.com/2015/09/ui-testing/ WWDC15 Session笔记 - Xcode 7 UI 测试初窥 Unit Test 在 iOS 开发中已经有足够多 ...

  9. APP界面架构设计

    作为PM,信息架构和页面流的设计想必烂熟于心,当确定好产品战略层和范围层即为何种目标用户提供何种服务后,就要着手搭建功能架构,将目标功能通过良好的用户体验传递给用户,目的是高效解决用户痛点,从而实现价 ...

随机推荐

  1. spring requestmapping 拦截多个请求

    @RequestMapping(value = {"/picture_content/{id}","/attachment_content/{id}",&quo ...

  2. WebDriver API 实例详解(四)

    三十一.使用页面的文字内容识别和处理新弹出的浏览器窗口 被测试网页的HTML源码: <html> <head> <meta charset="UTF-8&quo ...

  3. CentOS7下的YUM源服务器搭建详解,过程写的很详细(转)

    因为近期公司需要搭建一个YUM源服务器给大量的linux(mini)使用,所以因此在网上找了很多的教程,却没有一个特别详细的,很多都有遗漏,参差不齐.所以,打算自己做完之后方便以后查阅,特出此文档. ...

  4. Django的FBV和CB

    Django的FBV和CBV FBV FBV(function base views) 就是在视图里使用函数处理请求. 在之前django的学习中,我们一直使用的是这种方式,所以不再赘述. CBV C ...

  5. php中0与空 Null false的区别

    <?php $test=0; if($test==''){  echo '<br />在php中,0即为空'; //被输出 } if($test===''){  echo '< ...

  6. windows 系统相关配置

    1. 外接显示器分辨率调节:连接上外接下显示器,在本机空白处,右键,分辨率.然后选择显示器,设置显示相关配置. 详见:http://zhidao.baidu.com/question/13494806 ...

  7. Spring整合Quartz定时发送邮件

    功能描述:刚开始接触Quartz,试着用Quartz整合spring实现每隔一分钟发送一封邮件连续发送10次 核心jar: 邮件发送:commons-email-1.2.jar mail.jar(必须 ...

  8. tomcat_日志打印格式问题

    1.需要在Catalina/conf/server.xml中设置一下:将文件中这一段的注释去掉(如下),然后将pattern的值改为combined ,这个模式下记录的日志比较详细.          ...

  9. Core Java 4

    p272~p273 1.除捕获异常外的另一种异常处理方式:将异常继续传递给方法调用者. 即:在方法首部添加throws说明符号,取代 try catch语句. 对于方法的调用者而言:要么处理异常,要么 ...

  10. 《Java程序设计》第三章-基础语法

    20145221<Java程序设计>第三章-基础语法 总结 教材学习内容总结 类型.变量与运算符 类型 Java可区分为基本类型(Primitive Type)和类类型(Class Typ ...