APP界面框架初窥---标签导航
标签导航是十大界面框架设计里最常用的界面框架设计,也是被业界之内公认的一种普遍使用的页面框架设计。那么这种页面框架设计在作业方面对一个用户来说也是最常见的一种页面框架设计,比如说微博、微信、手机百度、支付宝、淘宝,这些我们所谓的超级APP都是运用的标签导航,无一例外。
从这个角度也可以看出来,优秀的产品用标签导航这种页面框架设计是非常普及的。标签导航位于页面底部,标签的分类最好可以控制在5个之内。
使用这种框架的优点在于:
1.标签导航能够让用户清楚当前所在的入口位置。比如对于微信来说,无论用户在“发现”还是“对话框”里面,用户都能通过底部的高亮区域来划分当前所处的这个产品结构的区域。无论是当前位置的判断,还是要找这个入口,都比较方便,比如对于微信来说,很容易都过标签导航找到“朋友圈”。
2.轻松在各入口间频繁跳转且不会迷失方向。比如对于微信来说,微信团队不仅希望我们拿微信来聊天,还希望我们拿微信来逛朋友圈、购物、支付、滴滴打车等等,那么如果能够让用户在不同的入口间实现频繁的跳转,那这时用标签导航是最合适不过的。
3.直接展现最重要入口的内容信息。这有两层意思,第一层就是它能展示出来最重要的入口,比如拿微信来说有那么多的重要入口,显然“微信对话框”最重要,那么他们默认的把微信对话框作为主入口。同样微博最重要的是首页,所以默认把微博首页作为最主要的入口。其次,入口不仅可以展示,入口里面的信息也可以展示。
但是这种模式的缺点也是存在的:
功能入口过多时,该模式显得笨重不实用。怎么理解“功能模块过多”,比如说现在标签导航,一般情况下功能入口控制在5个以内,我们也会遇到6个的情况,但那种产品一般来说比较复杂,最少会是3个,最多5到6个。如果过多的话,标签导航会弹不开,那这种模式就失效了。过多不行,过少也不太方便,如果说就一个Tab、两个Tab,那么标签导航下面就会显得特别的空,也不太好看,所以这个时候我们就会知道标签导航的适用范围最好在3至5 个之间,并且这几个功能希望用户能够频繁的去操作。
好了,理论知识就普及到这边,下一篇我就来说说如何用代码来具体实现”标签导航”,效果如下:
好了。祝大家生活愉快。多多收获友谊和爱情。如果想获取更多的讯息,请扫描下方二维码关注我的微信公众号:
APP界面框架初窥---标签导航的更多相关文章
- iOS开发之旅:实现一个APP界面框架
在上一篇博客中,给大家介绍了一下我们传统的 APP 界面框架-标签导航的一些优缺点,在这篇文章中我会来给大家演示,如何用代码去实现这一框架.本次的实现我会分成俩部分来讲,好了闲话少说,接下来进入到开发 ...
- Android/IOS APP界面设计之尺寸规范
1.尺寸以及分辨率 iPhone的界面尺寸不用多说,640*960是基本OK的,也可以是适应5S的640*1136,马上iPhone 6也快来了(随便吐槽一下网上曝的真机谍照,真是丑到离谱...),只 ...
- iOS视频直播初窥:高仿<喵播APP>
视频直播初窥 视频直播,可以分为 采集,前处理,编码,传输, 服务器处理,解码,渲染 采集: iOS系统因为软硬件种类不多, 硬件适配性比较好, 所以比较简单. 而Android端市面上机型众多, 要 ...
- 看过《大湿教我写.net通用权限框架(1)之菜单导航篇》之后发生的事(续)——主界面
引言 在UML系列学习中的小插曲:看过<大湿教我写.net通用权限框架(1)之菜单导航篇>之后发生的事 在上篇中只拿登录界面练练手,不把主界面抠出来,实在难受,严重的强迫症啊.之前一直在总 ...
- 微信小程序框架分析小练手(一)——猫眼电影底部标签导航制作
旧版猫眼电影底部有4个标签导航:电影.影院.发现.我的,如下图所示: 一.首先,打开微信开发者工具,新建一个项目:movie.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标的素材放到ima ...
- 用 Flutter 搭建标签+导航框架
前言 在 Flutter 这个分类的第一篇文章总结了下最新的 Mac 搭建 Flutter 开发环境和对声明式UI这个理解的东西,前面也有提过,准备像在 SwiftUI 分类中那样花一些功夫来写一个 ...
- 网页3D效果库Three.js初窥
网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...
- WWDC15 Session笔记 - Xcode 7 UI 测试初窥
https://onevcat.com/2015/09/ui-testing/ WWDC15 Session笔记 - Xcode 7 UI 测试初窥 Unit Test 在 iOS 开发中已经有足够多 ...
- APP界面架构设计
作为PM,信息架构和页面流的设计想必烂熟于心,当确定好产品战略层和范围层即为何种目标用户提供何种服务后,就要着手搭建功能架构,将目标功能通过良好的用户体验传递给用户,目的是高效解决用户痛点,从而实现价 ...
随机推荐
- linux创建新用户后shell无法自动补全命令或使用基本的shell命令
新建一用户lqding,切换到该用户下 root@lqding:~# su - lqding$$ echo $USERlqding$ ^[[A 提示符仅仅是一个$,很奇怪.输入命令,用TAB键也无法补 ...
- 制造抽象基类--《C++必知必会》 条款33
抽象类,含有纯虚函数的类,不可以创建对象. 然而,有时我们并不需要某个函数定义为纯虚函数,但是任然希望此类像抽象类一样,不可以创建对象. 方法1:通过确保类中不存在共有构造函数来模拟抽象基类的性质.意 ...
- cocos进阶教程(5)各种动画使用心得
Node类 不解释 ActionTimeline类是一个3.0时代的动画类, 案例一 //建立node方案一Data data = FileUtils::getInstance()->getDa ...
- Yahoo Programming Contest 2019
A - Anti-Adjacency 签. #include <bits/stdc++.h> using namespace std; int main() { int n, k; whi ...
- uva1146 2-SAT问题
题意大白书 二分答案,然后对于每个可能的答案,跑一遍2-SAT就好了. #include <iostream> #include <string.h> #include < ...
- 逆向及BOF基础实践
逆向及BOF基础实践 20145316 许心远 一.缓冲区溢出基础知识 缓冲区溢出是一种非常普遍.非常危险的漏洞,在各种操作系统.应用软件中广泛存在.利用缓冲区溢出攻击,可以导致程序运行失败.系统宕机 ...
- web上的复制
你可能曾经尝试过复制网页上的一些文字,得到的却是令人沮丧的的结果.这篇文章介绍相关的内容. 不是真正的文字 这可能是最常见的问题,很多人尝试对一张带有文字的图片进行像文字那样的选择,复制当然不行了. ...
- kali linux 安装过程
kali linux 安装过程 获取镜像文件 首先需要去官网获取kali linux的镜像文件,本来获取了kali的最新版,由于有些方面还没有得到完善,与VM还没有完全兼容,所以换了视频上的1.0.8 ...
- 搭建docker hadoop环境
目录 搭建Docker-Hadoop基础环境 简介 步骤 搭建Docker image ..待续 注释 搭建Docker-Hadoop基础环境 简介 因为很难真正的有一个集群环境.在一般的条件下想要模 ...
- cygwin安装方法
一.环境 OS:windows 二.安装cygwin以及各类cygwin下的软件 2.1 从官网http://www.cygwin.com/获取最新的版本 2.2 安装过程如下图