`
phenom
  • 浏览: 408923 次
  • 性别: 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了,又稳定的控件,多种屏幕的适配,何乐而不为.




分享到:
评论

相关推荐

    Android代码-android-customtabs

    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 ...

    TabsDemo(android选项卡的自定义实现)

    在Android应用开发中,选项卡(Tabs)是一种常见的界面元素,用于展示多个相互关联的内容区域。本项目"TabsDemo"提供了一个自定义实现选项卡的示例,它使用了ScrollView和ViewPager来创建一个灵活且可滚动的选项卡布局...

    Android代码-一个Android Custom Tabs的demo

    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 ...

    Android代码-tf-tabs-android

    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 '...

    AndroidMaterialTabs:使用支持库实现android Tabs

    `AndroidMaterialTabs`项目旨在教授开发者如何利用Android支持库来实现Material Design风格的选项卡(Tabs)布局。这个教程将详细介绍如何在你的应用程序中引入`ViewPager`和`TabLayout`,以及如何通过`...

    Android-EasyTabs让您可以轻松实现自定义选项卡控件

    本文将深入探讨`EasyTabs`的使用方法、特点以及如何将其集成到您的Android项目中。 `EasyTabs`的主要优点在于其灵活性和易用性。通过使用此库,您可以轻松定制选项卡的外观,包括文字、图标、颜色、布局等,以满足...

    Android Studio 使用BottomNavigationView 实现底部 tabs (一)

    本教程将详细介绍如何在Android Studio中利用BottomNavigationView实现底部tabs功能。 首先,我们需要理解BottomNavigationView的基本概念。它是一个自Android Design Support Library引入的组件,遵循Material ...

    jQuery Tabs插件 PWS Tabs

    **jQuery Tabs插件 PWS Tabs** 是一个用于创建交互式、动态内容切换的JavaScript库,专为增强网页的用户体验而设计。它允许开发者轻松地将多个面板组织成一个可滚动的选项卡结构,使得用户可以方便地在不同内容之间...

    Android代码-EasyTabs

    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-swipe-views-tabs.7z

    在Android应用开发中,滑动视图(Swipe Views)和标签(Tabs)是常见的用户界面组件,它们为用户提供了一种便捷的方式来浏览和切换不同的内容区域。Android-swipe-views-tabs项目提供了一个实现这种功能的示例,下面...

    jQuery Tabs插件EasyTabs.js

    **jQuery EasyTabs.js 插件详解** jQuery EasyTabs.js 是一款功能强大且易于使用的轻量级插件,专为创建响应式的Tab式布局而设计。它允许开发者通过简单的配置选项和自定义事件来实现各种Tab切换效果,为网页内容...

    save-tabs-firefox-for-android:用于在 Firefox for Android 上保存标签的 Webextension 插件

    适用于 Firefox for Android。 仅用于实验,存在严重错误。 描述 此附加组件将打开的选项卡列表保存到 JSON 文件中。 该文件包括每个选项卡的标题和 URL,以及文件保存的日期和时间。 警告 从 Firefox for ...

    Android代码-CustomTabs-Kotlin

    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 ...

    Jquery-tabs最炫tabs实现源码

    标题中的 "Jquery-tabs 最炫 tabs 实现源码" 指的是使用 jQuery UI 的 tabs 组件来创建一种具有视觉吸引力的选项卡式布局。jQuery UI 的 tabs 组件允许开发者轻松地将一组相关的页面内容组织成整洁的选项卡结构,每...

    android Tab和ViewPager结合的例子

    在Android应用开发中,Tab和ViewPager的结合是创建多页导航界面的一种常见方式。这个例子主要探讨如何将这两个组件有效地整合在一起,为用户提供流畅的页面切换体验。在本篇文章中,我们将深入理解如何实现这一功能...

    jquery ui tabs paging 扩展

    使用上也非常简单,在页面中载入 jquery.ui.tabs.paging.css 和 jquery.ui.tabs.paging.js 文件,在创建 tabs 对象后再执行代码激活一下插件 $tabs.tabs('paging'); 就可以了。 压缩包内带有 demo 。

    手动动态改变el-tabs标签页顺序

    例如:tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4(往后移)则顺序变为tabs1、tabs3、tabs4、tabs2; tabs4改为tabs2(往前移) 则顺序变为tabs1、tabs4、tabs2、tabs3。

    Jquery的tabs使用方法。

    jQuery UI中的Tabs组件是一种强大的工具,用于将网页内容组织成可切换的选项卡。这个组件不仅易于使用,而且高度可定制,可以根据项目需求进行样式调整。以下是对`jQuery的tabs使用方法`的详细讲解。 首先,为了...

    AndroidIndicators-实现了标题指示器和tab的ViewPager指示器.zip

    //tabs指示器 IconicTabsView iconicTabsView = (IconicTabsView) findViewById(R.id.iconicTabsView); iconicTabsView.setIconicTabsEffect(new GreyscaleIconicTabsEffect()); observer.addObservableView...

    Android Studio 使用BottomNavigationView 实现底部 tabs (二)

    本教程将深入探讨如何在Android Studio中使用BottomNavigationView来创建底部tabs,这是系列教程的第二部分。 首先,我们需要在项目的布局XML文件中添加BottomNavigationView。在res/layout目录下打开或创建主活动...

Global site tag (gtag.js) - Google Analytics