iOS和Android規範解析——工具列和固定底板

分類＼科技
時間＼2017-05-26

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

聳肩）。

固定底板（Persistent Modal Sheet）

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

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

固定底板示例

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

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

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

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

PC上的固定底板

對於PC，MD規範建議設計師考慮把固定底板移到螢幕左側：

工具列

工具列出現在在頁面的底部，它包含對當前頁面的相關操作按鈕，

或者對當前頁面中的內容的相關操作按鈕。我們來舉個栗子：

iOS自帶應用——郵件

工具列是半透明的，可以在此基礎上加上背景色。它是懸浮在當前頁面之上的，並且當使用者不需要使用的時候，可以隱藏它。比如在iOS的流覽器Safari中，當使用者向上滾動查看頁面時，

工具列會自動隱藏，因為此時主要的目的是流覽頁面。當使用者點擊下半部分的頁面時，工具列將重新展現。另外，當鍵盤被調出時，工具列也會被隱藏。

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

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

2. 考慮使用圖示（icon）還是文字來表示操作按鈕。如果操作的按鈕多於3個，

則使用圖示；如果等於或小於3個，則文字有時能更清楚地表達操作。比如在iOS自帶應用——日曆中，就使用了文字來表示操作的按鈕，如下圖：

iOS自帶應用——日曆

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

切換按鈕示例

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

底部標籤欄示例

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

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

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

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

彈出類控制項比較表格（工具列不是彈出類控制項）

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

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

#專欄作家#

本文由 @新設計青年原創發佈于人人都是產品經理。未經許可，禁止轉載。

所以不能混用。下圖所示即為切換按鈕：