标签导航是十大界面框架设计里最常用的界面框架设计,也是被业界之内公认的一种普遍使用的页面框架设计。那么这种页面框架设计在作业方面对一个用户来说也是最常见的一种页面框架设计,比如说微博、微信、手机百度、支付宝、淘宝,这些我们所谓的超级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. windoes下一台电脑是无线/USB上网,如何将另一台电脑通过一拖一上网

    https://wenku.baidu.com/view/0c95830bbb68a98271fefa6e.html 一台电脑是无线上网,如何将另一台电脑通过一拖一上网有时候,在没有路由器的情况下,只 ...

  2. redhat 5 samba配置

    1.检查安装包 #rpm –qa | grep samba 必须有以下安装结果 samba-3.0.25:samba-common-3.0.25:samba-client-3.0.25:samba-s ...

  3. Python: 矩阵与线性代数运算

    需要执行矩阵和线性代数运算,比如矩阵乘法.寻找行列式.求解线性方程组等等. 矩阵类似于3.9 小节中数组对象,但是遵循线性代数的计算规则.下面的一个例子展示了矩阵的一些基本特性: >>&g ...

  4. 20172305 2018-2019-1 《Java软件结构与数据结构》第二周学习总结

    20172305 2018-2019-1 <Java软件结构与数据结构>第二周学习总结 教材学习内容总结 本周内容主要为书第三章和第四章的内容: 第三章(以数组来替代栈的作用) 集合(聚集 ...

  5. Python3基础 判断变量大于一个数并且小于另外一个数

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  6. MVC 返回对象换成json

    错误界面: 这个就是返回对象没有转换成json 就是要再返回的头部添加application/json 代码: using System; using System.Collections.Gener ...

  7. nginx限制蜘蛛的频繁抓取

    蜘蛛抓取量骤增,导致服务器负载很高.最终用nginx的ngx_http_limit_req_module模块限制了百度蜘蛛的抓取频率.每分钟允许百度蜘蛛抓取200次,多余的抓取请求返回503. ngi ...

  8. fiddler抓包https

    http://blog.csdn.net/idlear/article/details/50999490 charles也能抓取https请求 http://blog.csdn.net/jiadoud ...

  9. JavaScript里Math对象的ceil()、floor()、round()方法的区别

    ceil(x) 官方含义:对一个数进行上舍入.理解:ceiling为天花板的意思,意译为向上取整.即取得大于于等于x的最大整数. floor(x) 官方含义:对一个数进行下舍入.理解:floor为地板 ...

  10. Windows__书

    1.<<Windows 网络与通信程序设计>> (第2版) 2. 3.