今天我們來(lái)介紹上篇文章中的表格中余下的一個(gè)控件：工具欄（toolbars）。工具欄是iOS中的控件，Android當(dāng)中相對(duì)應(yīng)的是固態(tài)底板。老規(guī)矩，先說(shuō)Android的控件（雖然這個(gè)控件之前已經(jīng)介紹過(guò)了，聳肩）。

固定底板（Persistent Modal Sheet）

固定底板主要用于以下兩種情況：

?1. 在當(dāng)前頁(yè)展示新內(nèi)容；

?2. 展示與主要內(nèi)容同等重要的新內(nèi)容。

固定底板示例

對(duì)于不同尺寸的設(shè)備，MD規(guī)范也給出了詳細(xì)的說(shuō)明：

對(duì)于手機(jī)，不論正常或者橫置的情況，固定底板都占滿100%的寬度。

對(duì)于平板，則要依據(jù)內(nèi)容的多少?zèng)Q定固定底板是否占滿100%寬度，如下圖所示。

平板上固定底板占滿100%的寬度

平板上固定底板未占滿100%的寬度

對(duì)于PC，MD規(guī)范建議設(shè)計(jì)師考慮把固定底板移到屏幕左側(cè)：

PC上的固定底板

工具欄

工具欄出現(xiàn)在在頁(yè)面的底部，它包含對(duì)當(dāng)前頁(yè)面的相關(guān)操作按鈕，或者對(duì)當(dāng)前頁(yè)面中的內(nèi)容的相關(guān)操作按鈕。我們來(lái)舉個(gè)栗子 ：

iOS自帶應(yīng)用——郵件

工具欄是半透明的，可以在此基礎(chǔ)上加上背景色。它是懸浮在當(dāng)前頁(yè)面之上的，并且當(dāng)用戶不需要使用的時(shí)候，可以隱藏它。比如在iOS的瀏覽器Safari中，當(dāng)用戶向上滾動(dòng)查看頁(yè)面時(shí)，工具欄會(huì)自動(dòng)隱藏，因?yàn)榇藭r(shí)主要的目的是瀏覽頁(yè)面。當(dāng)用戶點(diǎn)擊下半部分的頁(yè)面時(shí)，工具欄將重新展現(xiàn)。另外，當(dāng)鍵盤被調(diào)出時(shí)，工具欄也會(huì)被隱藏。

關(guān)于工具欄，蘋果給出了以下幾個(gè)需要注意的點(diǎn)：

1. 提供（和當(dāng)前頁(yè)面）相關(guān)的操作選項(xiàng)。工具欄應(yīng)該提供當(dāng)前的頁(yè)面下，常用的操作。

2. 考慮使用圖標(biāo)（icon）還是文字來(lái)表示操作按鈕。如果操作的按鈕多于3個(gè)，則使用圖標(biāo)；如果等于或小于3個(gè)，則文字有時(shí)能更清楚地表達(dá)操作。比如在iOS自帶應(yīng)用——日歷中，就使用了文字來(lái)表示操作的按鈕，如下圖

iOS自帶應(yīng)用——日歷（今天是母親節(jié)，祝福天下所有的母親）

3. 避免使用切換按鈕。切換按鈕讓用戶可以切換不同的頁(yè)面，但是工具欄是只針對(duì)當(dāng)前頁(yè)面提供了一些操作選項(xiàng)，所以不能混用。下圖所示即為切換按鈕：

切換按鈕示例

另外，如果你想在頁(yè)面底部讓用戶可以切換不同頁(yè)面，請(qǐng)使用底部標(biāo)簽欄（Tab Bar），而不要適用工具欄。

底部標(biāo)簽欄示例

4. 為文字操作按鈕提供足夠的空間。這一條主要是為了保證按鈕不會(huì)混到一塊，如下圖：

文字操作按鈕之間應(yīng)留有足夠的空間

以上為大家介紹了MD中的固定底板和iOS中的工具欄。兩者都可以為當(dāng)前頁(yè)面提供操作選項(xiàng)。不同的是，MD的固定底板還可以提供內(nèi)容，并且在尺寸上可以更大（因?yàn)榭梢蕴峁﹥?nèi)容嘛）。

之前的文章為大家介紹了iOS和Android兩個(gè)系統(tǒng)中的所有彈出類控件，其中介紹了“模態(tài)”的概念，請(qǐng)參看下面的表格：

彈出類控件比較表格（工具欄不是彈出類控件）

關(guān)于表格中控件的介紹，詳細(xì)可參看這篇文章 ? 3分鐘帶你掌握11個(gè)最常用的交互控件

討論使人認(rèn)識(shí)更加深刻。歡迎留言。

德國(guó)海龜一枚 ，曾任職于騰訊微生活、網(wǎng)易、宜信等公司。現(xiàn)為愛奇藝UDC高級(jí)交互設(shè)計(jì)師。歡迎關(guān)注。