写给新手的控件设计指南（1）：UI栏

03 状态栏status bars

1. 在ios设计规范里的描述

状态栏出现在屏幕的最上方，显示设备当前状态的相关信息，比如时间，运营商，网络状态和电量，状态栏中显示的实际信息取决于设备和系统的配置。

需要注意的点：

1）全屏情况下，可以暂时隐藏状态栏，为用户提供更身临其境的体验。

2）不要永久隐藏状态栏，如果没有状态栏，用户必须离开当前应用来查看时间或电量，体验很不好。比如百度云盘在视频播放界面，永久性的隐藏了状态栏，每次看视频时想看一下电量还剩多少或者几点了都必须退出当前播放页面才能查看，让人很崩溃。

3）使状态栏样式与应用程序相协调，状态栏有深色和浅色两种样式，根据不同页面实际情况进行个性化配置给用户更好的体验。

04 标签栏tab bars

1. 在ios里的描述

标签栏在页面底部，为用户提供在应用程序内不同部分快速切换的功能。标签栏为半透明状态，可能会有背景色，在显示键盘时被隐藏。

标签栏可以包含任意数量标签，但可见的标签数量需根据设备的大小而变化，如果由于水平空间有限而无法显示全部选项，则最后的可见标签变为“更多”，点击更多后在单独的页面显示其他标签。

需要注意的点：

1）标签的数量，避免过多或过少。标签过多会使可点击区域变小，且会增加应用程序的复杂度，使查找更加困难。标签过少在视觉上会增加页面的割裂感，使页面整体感降低，标签的数量最好控制在三到五个。

但这也不是绝对的，需要根据系统实际内容来定，比如ios自带的「文件」app，底部标签有「最近项目」「浏览」两个。

页面的割裂感可以通过视觉设计的手段去调和，比如将标签的排版变为左图标，右文字的左右排版。

2）当标签处于不可用状态时，不要删除或者禁用，如果标签时有时没有，时可用时不可用，会让系统变得不稳定不可预测，让用户感觉不可控。

当某些标签对应的内容不可用时，可通过其他方式告知用户当前内容不可用原因，而不是对该标签禁用或删除。比如ios设备没有歌曲时，点击「音乐」应用中的「我的音乐」，会告知用户如何下载歌曲。

3）使标签栏的图标在视觉上保持一致和平衡，如ios自带的apple store 和 app store，底部标签在体量与颜色上都保持统一和平衡。

4）表达明确：如果标签可以用系统图标来表示就尽量用系统图标，如果非要自己设计，要注意传达意思的准确度，也可以用辅助文字来说明，但文字不宜过长，避免出现换行。

5）当有新消息时，可以在标签栏上使用数字气泡或小红点进行提示。

以上是ios设计规范中对标签栏的描述，我们在遵循基础规则的同时，要根据实际的业务场景勇于创新。如，为了突出某个标签，出现了如下的形式：

中间的「发布」标签体量上明显高于其他标签，通过这种方式提高了该标签的点击率，引导用户发布内容，提高内容存量。

2. 标签栏的位置形式：底部标签栏；顶部标签栏

在讲每种标签栏位置的优劣势前，先来看下图，这是史蒂文·霍伯通过研究发现的拇指热区图，研究发现49%的人依靠一个拇指在手机上完成任务。

其中绿色为用户可轻松触及的区域，黄色表示需要伸展的区域，红色表示需要用户改变设备握住方式的区域。

（1）底部标签栏

底部标签栏是最常见的一种导航形式，它已在用户心中形成固定认知，用户打开一个系统，会本能的去底部查看标签，希望通过底部标签快速了解系统能提供的功能。

除此之外，随着手机屏幕的增大，用户通常是单手握住手机下半部使用手机，通过上图可以看出，标签放在底部在使用时更快捷舒适。

（2）顶部标签栏

顶部标签栏通常会与底部标签栏结合使用，其优点是符合用户从上至下的阅读习惯，且标签数比底部标签栏承载的更多，当存在多个标签时可以通过左右滑动的形式承载，一般用在新闻资讯类产品中，如下图的新浪新闻和今日头条都采用了这种方式。

缺点是它放置在用户最难触达的红色区域内，不易单手操作，很多产品允许用户左右滑动来实现标签间的切换，这种方式虽方便用户快速切换，但与系统自带的右滑返回操作有冲突，所以这种方式更多出现在一级页面。

05 工具栏toolbars

工具栏通常在页面底部出现，包含了对当前页面的相关操作。工具栏为半透明状态，有时有背景色，当用户不需要时通常会隐藏。

例如，在safari中，向上滑动开始阅读页面时，工具栏自动隐藏，向下滑动或点击屏幕底部时自动显示。同时当键盘出现时，工具栏也会被隐藏。

需要注意的几个点：

1）工具栏的按钮是使用图标还是文字：当工具栏中出现三个以上的按钮时，使用图标会更合适，因为图标所占空间比文字更小，更容易承载多个按钮。

其次，当按钮出现三个以上时，字符太多会使页面变得凌乱。当按钮为三个或三个以下时使用文字更加直观，更易让用户理解，比如日历app中，使用文字是因为图标会使三个按钮的含义造成混淆。

2）避免在工具栏中使用分段控件。分段控件允许用户切换页面，而工具栏只作用于当前页面。

如果需要切换页面，可以使用标签栏进行切换。

3）给文本按钮留有充足空间。文本按钮之间留有充足间距，更利于用户理解与点击。

好了，今天就说到这，文章较长，希望大家能耐心消化，希望此文对你有一点帮助。

本文素材来自互联网

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!