http://www.androiduipatterns.com/2012/08/tips-for-android-tabs.html
又是一篇关于tab标签的文章,看不到图的可以用代理.
ui设计模式:
Tips for Android Tabs
tab标签可以算得上是在移动ui中最流行的使用最多的ui控件了,它提供了快速的,轻松地访问到app的各部分.就是导航作用.一个app的标签有各种形式,一些标签是从其它平台复制过来的,有些是过时的.
由于Android在初期没有很好地设计,导致了这些实现的不同.现在这种情况已经发生了改变,Android提供了tab的设计:http://developer.android.com/design/building-blocks/tabs.html
本文主要是展示当前的标签ui的状况并给出一些小技巧以保持平台的兼容性.
标签还是在顶部.
一年前,还讨论了,标签是在顶部还是在询问.个人觉得标签在顶部有几个原因:
1.自然等级顺序,事物从上到下,标签是内容的头,是比内容更重要的信息,也应该有更重要的继承等级
2.复杂的app需要多级导航,询问的标签会让用户有些迷惑.
3.用户扫描屏幕是从上到下的,所以顶部的标签是最吸引眼球的,
最近 一个应用eeurosport:https://play.google.com/store/apps/details?id=com.eurosport 对于这点提供了一个很好的例子.下面是一些截图,http://4.bp.blogspot.com/-MUi3nbPvoGw/UD92fpyX0iI/AAAAAAAAJMw/BftbYNIILKI/s320/download+(19).png
http://4.bp.blogspot.com/-MvPMSYMwc2w/UD92ielqCwI/AAAAAAAAJM4/4drCXmNbnz0/s320/download+(20).png
第一张是旧的,第二张是新的app,旧的app的导航让人混淆不清,新版的就不会了.
标签的风格
Android的标签风格与其它平台是迥异的.在3.0系统中引入这种设计,但还是有些旧的应用没有跟得上.
关于Android的标签风格,有几点想法:
1.Android的标签很少人图标,多数是文本.因为图标有可能混淆不清,你看不懂它的意思,文本就可以很清楚地表达了.
2.Android的标签不是方形的按钮,它们常有文字.有可能会被压缩.
3.风格较平淡,没有光滑的外表,跟反射的效果.
Android的标签有两种风格.
http://4.bp.blogspot.com/-KTXJiLUyGxY/UD96gIght4I/AAAAAAAAJNM/5eiIZtnv6NA/s320/download+(21).png
http://3.bp.blogspot.com/-lrRaV1YjgGA/UD96i5K12cI/AAAAAAAAJNU/Hh3xk5O1FI8/s320/download+(22).png
第一张效果:是4.1上默认的,就是标签是平等的,大小一样.包含图标,其实我觉得还是尽量避免图标,除非图标可以很好 的表达你的意图.
第二张可以看到是foursquare的应用,使用的是文本标签.
标签是用于导航,而不是处理一些行为事件.
在app中标签是用于导航的,不要使用它们触发行为.要使用的话,就用ActionBar,它提供了丰富的操作控件(结合菜单,上下包围).Spiegel Online应用是个糟糕的例子http://2.bp.blogspot.com/-aF7-uBodKEg/UD9-VKoE0lI/AAAAAAAAJNs/o7fv5l4yD9c/s400/tabs.png部分作为行为(如共享),部分作为导航,这会让人在使用过程有混淆的意思.
一个标签需要是选中的状态,上面的app不仅在导航与行为方面不正确,甚至在选中的状态也不正确.看来可以作为反而的典型了.
当一个标签页可见时,一定要让这个标签是选中的状态,显然正常人是不会犯这样的错误的.没有选中的状态,用户不知道当前是在哪里.
标签与后退
后退栈与后退键还是要谨慎地处理,在不同的标签中切换认为是改变页面,多数和应用不会把标签的切换放到栈中,最好你也不要.
这很好理解,左右移动的页面,可以用手势来处理,如果放到后退栈中,操作就显得 混淆了,不解释.
标签是为了让所有的页面看上去在一个页面中,这样更不能放到栈中.
标签的切换不只是在标签上,在内容上一些手势也需要,所以,在标签上需要点击可以切换,在内容上需要手势滑动可以切换,这些在ActionBar中都提供了,所以也算是容易的事了.
标签人伸缩性
配合 ActionBar来使用,可伸,可缩的,在空间足够时就展开,比如平板,就把标签与ActionBar放在一起,普通的手机就放两行,只要用了ActionBar,这些都不是问题.
正确的实现标签是个很好的选择.它简单也容易出错.遵循这些指导,可以让你的app更优秀.
前面一篇文章提到侧边栏导航,这里提到了标签导航,同样是导航,并不是说一定哪一个可以替代另一个,只不过它们有着不同的适应环境.如果导航相当地多,侧边导航可以展开很多的内容项,比较适合,再配合上Fragment,是个不错的选择,不用自己再实现一些控件了.
如果页面不多,用标签,可以有不错的效果,比如左右滑动,这比侧边导航容易,而且配合 Fragment,也不用再用以前的Flipper了,又稳定的控件,多种屏幕的适配,何乐而不为.
分享到:
相关推荐
Chrome CustomTabs for Android demystified. Simplifies development and provides higher level classes including fallback in case Chrome isn't available on device. Usage How to create a new custom tab ...
代码比较简洁,ScrollView+ViewPager实现tabs布局。
Tabby (Cat), is a simple sample application demoing the features of the new Chrome Custom Tabs support library for Android. Using this application you can demo: Coloring the toolbar Displaying the ...
A clone of ActionBarTabs in Android but is compatible with Toolbar You may get this library by adding the following in the dependency section of your build.gradle file: compile '...
Android使用支持库实现选项卡布局。 选项卡的各种组合在此进行了说明。
EasyTabs Easy implementation of custom tabs, when TabLayout do not fit your needs. With Textviews : Or Drawables : Installation Add the jitpack source in your root build.gradle at the end of ...
android 学习demo customized-tabs
jQuery Tabs插件 PWS Tabs 演示地址:http://www.jq22.com/plugin/1752
适用于 Firefox for Android。 仅用于实验,存在严重错误。 描述 此附加组件将打开的选项卡列表保存到 JSON 文件中。 该文件包括每个选项卡的标题和 URL,以及文件保存的日期和时间。 警告 从 Firefox for ...
Chrome Custom Tabs - Kotlin and Lifecycle Aware This is a rewrite of the helpers offered by Google. The ones offered by Google are written in JAVA and require integration with the Activity lifecycle ...
//tabs指示器 IconicTabsView iconicTabsView = (IconicTabsView) findViewById(R.id.iconicTabsView); iconicTabsView.setIconicTabsEffect(new GreyscaleIconicTabsEffect()); observer.addObservableView...
例如:tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4(往后移)则顺序变为tabs1、tabs3、tabs4、tabs2; tabs4改为tabs2(往前移) 则顺序变为tabs1、tabs4、tabs2、tabs3。
EasyTabs让您可以轻松实现自定义选项卡控件
android-swipe-views-tabs.7z
Android Studio 使用BottomNavigationView 实现底部 tabs (一)
使用上也非常简单,在页面中载入 jquery.ui.tabs.paging.css 和 jquery.ui.tabs.paging.js 文件,在创建 tabs 对象后再执行代码激活一下插件 $tabs.tabs('paging'); 就可以了。 压缩包内带有 demo 。
Android tabs at bottom! This repository contains sample of setting android TabLayout at bottom and showing Fragment embedded in ViewPager. The magic happens very simply. You need to arrange them ...
Android Studio 使用BottomNavigationView 实现底部 tabs (二)
js tabs 菜单js tabs 菜单js tabs 菜单js tabs 菜单js tabs 菜单js tabs 菜单
NULL 博文链接:https://forlan.iteye.com/blog/2259239