`
phenom
  • 浏览: 406065 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

Tips for Android Tabs

 
阅读更多
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了,又稳定的控件,多种屏幕的适配,何乐而不为.




分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics