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

烏拉特后網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,烏拉特后網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為烏拉特后上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的烏拉特后做網(wǎng)站的公司定做！固定底板（Persistent Modal Sheet）

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

在當(dāng)前頁展示新內(nèi)容；展示與主要內(nèi)容同等重要的新內(nèi)容。

固定底板示例

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

對于手機(jī)，不論正常或者橫置的情況，固定底板都占滿100%的寬度。對于平板，則要依據(jù)內(nèi)容的多少決定固定底板是否占滿100%寬度，如下圖所示：

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

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

PC上的固定底板

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

工具欄

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

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

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

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

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

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

iOS自帶應(yīng)用——日歷

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

切換按鈕示例

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

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

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

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

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

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

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

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

本文名稱：iOS和Android規(guī)范解析——工具欄和固定底板
分享網(wǎng)址：http://weahome.cn/article/cpscje.html