[译]《iOS Human Interface Guidelines》——Tab Bar

标签栏

标签栏让人们可以在一个app不同的子任务、视图或模式之间切换。

image

API NOTE
标签栏包含在标签栏控制器(管理一系列自定义视图的显示)内。查看Tab Bar ControllersUITabBar来学习更多关于在你的代码中定义标签栏的内容。

一个标签栏:

  • 是半透明的
  • 总是出现在屏幕的底部边缘
  • 在垂直紧凑环境下一次最多显示五个标签(如果有更多的标签,标签栏会显示其中四个,并添加一个“更多”标签,来在一个列表中显示其余的标签)
  • 在所有方向保持同样的高度
  • 可以在标签上显示一个标记来传达app特有的信息(标记是一个红色的椭圆包含白色的文本或数字或感叹号)

使用标签栏给用户到同一个数据的不同构面或与app总功能有关的不同子任务的链接。

一般来说,使用标签栏来管理app层面的信息。标签栏很适合用在app的主视图中,因为这是一个很好方式来减少你的信息层级以及提供同时到不同的对等层次的信息类别或模式的链接。

不要使用标签栏给用户操作当前屏幕的元素或app模式的控件。如果你需要提供控件,包括显示模态视图的控件,请使用工具栏(查看Toolbar获取使用指南)。

不要在标签功能不可用的时候移除标签。如果你在某些情况下移除标签而其他情况不移除,回导致你的appUI不稳定和不可预知。最好的解决方案是确保所有的标签是可选的,但要解释为什么一个标签的内容不可获取。比如说,如果用户在iOS设备内没有任何歌曲,音乐app的歌曲标签会显示一个界面解释如何下载歌曲。

在垂直常规环境下,你可能会在弹出视图或分隔视图的第二界面使用一个标签栏。如果标签会切换或过滤那个视图的内容则这样做。然而,在弹出界面和分隔界面使用分栏控件往往会更好,因为分栏控件的外观与这些UI元素的外观整合的更好。(查看Segmented Control来获取更多使用分栏控件的信息。)

避免太多标签栏导致拥挤。在标签栏放置太多标签会人们很难点击到他们想要的那个。而且随着你每多显示一个标签,你都增加了你app的复杂度。

在垂直常规环境下,避免创建一个“更多”标签。在垂直常规环境下运行的app,屏幕专门显示一个额外的标签列表是一种可怜的空间使用。

尽可能的,在每个方向都显示同样的标签。最好能通过在各个方向提供同样的标签来给用户一种视觉统一的感觉。在垂直常规环境下,你可能需要居中显示在垂直紧凑环境下同样的标签。

标签栏图标

iOS提供了如表41-2描述的在标签栏中使用的标准的图标。查看Bar Button Icons学习如何设计自定义的标签栏图标。标签栏图标可以通过tintColor属性上色。

UIBarButtonItem Class Reference中查看UIBarButtonSystemItem的文档找到符号名称对应的按钮描述。

IMPORTANT
对于所有标准按钮和图标,基于其意义而不是外观来使用按钮是必要的。这会帮助你的app的UI即使在某个意义的按钮改变了其外观时依然有意义。

表41-2 标签栏可使用的标准按钮

本文翻译自苹果官方开发文档

查看完整合集


查看作者首页

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,809评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,189评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,290评论 0 359
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,399评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,425评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,116评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,710评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,629评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,155评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,261评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,399评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,068评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,758评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,252评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,381评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,747评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,402评论 2 358

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,245评论 25 707
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,781评论 22 665
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,117评论 4 61
  • 有阵子特别爱听《得到APP》专栏订阅,一会儿听薛兆丰教授用科斯定律讲解如何追求心仪的女生;有时又想着用刘润老师介绍...
    Ares1981阅读 301评论 0 1
  • 书生没有了那一纸素笺 他闭上眼 心里却住着远方 屋檐下,他(她)乡候鸟衔来柳絮 他忘记吟诵 那一句,共剪西窗...
    秦伐阅读 332评论 0 0