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

固定底板（Persistent Modal Sheet）

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

1. 在當前頁展示新內容；
2. 展示與主要內容同等重要的新內容。

固定底板示例

對于不同尺寸的設備，MD規范也給出了詳細的說明：

1. 對于手機，不論正?；蛘邫M置的情況，固定底板都占滿100%的寬度。
2. 對于平板，則要依據內容的多少決定固定底板是否占滿100%寬度，如下圖所示：

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

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

對于PC，MD規范建議設計師考慮把固定底板移到屏幕左側：

PC上的固定底板

工具欄

工具欄出現在在頁面的底部，它包含對當前頁面的相關操作按鈕，或者對當前頁面中的內容的相關操作按鈕。我們來舉個栗子 ：

iOS自帶應用——郵件

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

關于工具欄，蘋果給出了以下幾個需要注意的點：

1. 提供（和當前頁面）相關的操作選項。工具欄應該提供當前的頁面下，常用的操作。

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

iOS自帶應用——日歷

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

切換按鈕示例

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

底部標簽欄示例

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

文字操作按鈕之間應留有足夠的空間

以上為大家介紹了MD中的固定底板和iOS中的工具欄。兩者都可以為當前頁面提供操作選項。不同的是，MD的固定底板還可以提供內容，并且在尺寸上可以更大（因為可以提供內容嘛）。

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

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

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

討論使人認識更加深刻。歡迎留言。

#專欄作家#

沐風，微信公眾號：“沐風與體驗設計”。人人都是產品經理專欄作家，2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜，曾任職騰訊微生活、網易、宜信。6年交互設計經驗，專注設計領域，歡迎關注。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。