美文网首页
谈一谈移动界面的标签式导航

谈一谈移动界面的标签式导航

作者: 羞羞羊 | 来源:发表于2018-10-13 12:57 被阅读22次

    终于要写第一篇文章了还有一些小激动呢~~~今天分享一下移动界面标签式导航有哪些优缺点等等。相关内容我也有发布在个人公众号【设计阅记】,欢迎大家关注。

    废话不多说,上正文!

    标签导航

    首先介绍一下标签导航。标签导航又叫Tab式导航,是移动界面中最常见的导航。

    底部标签式导航

    底部标签导航是iOS页面布局中比较推崇的一种导航方式,它继承了桌面导航的样式,对图标进行了扁平化处理。在IOS系统原生页面中可以看到许多页面都使用了标签导航的设计。常用的微信、支付宝、微博等软件,都使用标签导航做为它们的一级导航。可以说标签导航是最符合IOS用户习惯的一种导航。

    如果此时你观察一下自己手机中常用的APP你就会发现QQ、微信、淘宝、微博、美团、京东等全部都是底部tab式导航,这是符合拇指热区操作的一种导航模式。

    图 底部标签式导航

    那么什么是拇指热区呢?当你单手持握手机时,你最常用的操作就是右手单手持握并操作手机,因此,对于手机来说,为触摸进行交互设计,主要针对的就是拇指。

    在手机操作中,拇指的可控范围有限,缺乏灵活度。尤其是在如今的大屏手机上,拇指的可控范围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另外一边,当用右手持握手机的时候,左撇子毕竟是少数,我们还是要为主流用户设计,拇指的热区如下图所示:

    图 拇指热区(来源于网络)

    顶部标签式导航

    顶部标签式导航是安卓常用的导航模式,安卓的物理按键已经放在底部了,为了避免导航与底部虚拟按钮之间发生冲突,引起误操作,很多安卓应用运用了顶部tab式导航。这是一种妥协下的行为,下图为早起微信安卓和iOS版本对比图:

    早期iOS和安卓微信5.2版对比(来源于网络)

    而如今,在妥协物理按键和拇指操作舒适中,微信安卓版抛弃了顶部导航的方式,和IOS保持了一致。

     最新安卓版微信

    当然顶部导航也不是那么一无是处,QQ音乐和网易云音乐现在用的就是顶部Tab式导航,为了更好的浏览基本信息(歌手、歌曲名)、以及支持快捷操作(播放/暂停)播放器需要固定在底部,那么顶部tab导航不失为一个好选择,如下图:

    图 QQ音乐和网易云音乐

    腾讯新闻和推酷这种新闻资讯类移动应用,由于内容丰富、分类繁多,仅采用集中导航难以有序组织所有内容。因此这类应用通常同时运用顶部和底部双tab导航,并将切换频率最高的tab放在顶部。用户在每个顶部tab下都是沉浸式阅读,最常用的操作是在一个tab中不断地下滑阅读内容,将常用的tab放在顶部,加入手势切换的操作,能给用户带来更好地阅读体验。

    图 腾讯新闻和推酷

    小结

    在两种情况下可以选择顶部tab式导航:

    1、某项功能必须固定在底部,那么其他tab只能固定在顶部,但为了方便操作,顶部tab导航最好支持手势操作,即左右滑动即可切换。

    2、该APP是沉浸式体验,如新闻、资讯等,为了带给用户更好的阅读体验,可以将tab放在顶部。

    就写到这里啦,有不对的地方欢迎批评指正。喜欢我的小伙伴可以关注我的个人公众号:设计阅记

    设计阅记

    相关文章

      网友评论

          本文标题:谈一谈移动界面的标签式导航

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