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

固定底板（Persistent Modal Sheet）

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

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

固定底板示例

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

1. 對(duì)于手機(jī)，不論正?；蛘邫M置的情況，固定底板都占滿100%的寬度。
2. 對(duì)于平板，則要依據(jù)內(nèi)容的多少?zèng)Q定固定底板是否占滿100%寬度，如下圖所示：

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

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

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

PC上的固定底板

工具欄

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

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

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

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

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

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

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

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

切換按鈕示例

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

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

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

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

以上為大家介紹了MD中的固定底板和iOS中的工具欄。兩者都可以為當(dāng)前頁面提供操作選項(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í)更加深刻。歡迎留言。

#專欄作家#

沐風(fēng)，微信公眾號(hào)：“沐風(fēng)與體驗(yàn)設(shè)計(jì)”。人人都是產(chǎn)品經(jīng)理專欄作家，2017年度作家評(píng)選最佳人氣獎(jiǎng)。愛奇藝Phone和PC端交互團(tuán)隊(duì)負(fù)責(zé)人。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計(jì)經(jīng)驗(yàn)，專注設(shè)計(jì)領(lǐng)域，歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。