零基礎學習UI設計五

欄

iOS 應用的欄包含了上下文資訊來指引使用者他們所在的位置，以及控制元件來 幫助使用者導航或執行操作，在介面檢視中通常從上至下有狀態列、導航欄、搜 索欄、工具欄和標籤欄。

狀態列( Status bar)

狀態列展示了關於裝置及其周圍環境的重要資訊，如移動運營商、網路信 號、時間、鎖屏、電量等。狀態列是透明的，並始終固定在整個螢幕的上邊緣。

例項

預設的狀態列內容是黑色的，在淺色應用中效果出色，而相應的淺色狀態 欄則更適用於顏色較深的應用。大部分應用的狀態列與介面風格設計融為一體， 將導航欄的顏色延伸至狀態列。也有一些應用根據自身特點特立獨行地使用了 與介面風格設計有著強大反差的背景色，例如閱讀類應用通常使用白色背景的 介面設計風格，為了帶給使用者更加沉浸式的閱讀體驗，將狀態列設計成黑色， 甚至將狀態列隱藏起來。

例項

慎重隱藏狀態列，始終隱藏狀態列意味著使用者必須退出應用才能知道現在 的時間、電量，或者瞭解當前環境下是否有 Wi-Fi 連線。在使用者全屏觀看媒體 時，可以考慮隱藏狀態列以及所有的控制元件 ， 但要確保使用者在輕擊螢幕時即可重 新喚起狀態列以及相關的控制元件。如果沒有特殊的理由，最好不要重新定義一個 手勢來讓使用者喚起狀態列，因為使用者不會發現，就算髮現了也很難記住。

導航欄(Navigation bar)

導航欄能夠實現在應用不同資訊層級結構間的導航，有時候也可用於管理 當前螢幕內容。導航欄是半透明的，通常位於螢幕上方，在狀態列的正下方。 在橫屏檢視中，導航欄也可以包含在某一檢視中，不需要與整個螢幕等寬。例 如，它可以出現在 iPad 中對分檢視控制器的其中一側。

例項

可以用導航欄在不同檢視間提供導航，或在上面放置管理當前檢視內容的相關控制元件。如果導航欄需要承載大量控制元件，同時又不是非要提供導航不可，則可以考慮在檢視底部使用工具欄。例如，系統照片導航欄無法展示太多操作控制元件，則使用工具欄，執行對當前照片的分享、喜歡、編輯和刪除。

例項

當用戶到達一個新的層級，導航欄標題應該變成當前層級的標題。當前標題左側應放置有返回按鈕，根據實際需要，返回按鈕可以以前一層級的標題內容為命名。

例項

若覺得標題冗餘，也可以將標題留空。例如，系統備忘錄的導航欄中就沒 有當前備忘錄的標題，因為備忘錄的第一行就已經提供了所有使用者需要的內容。 還可以考慮在導航欄位置使用一句簡短的提示語，來告訴使用者在當前螢幕中他 們可以做什麼。例如，系統股票應用的導航欄上有這麼一句提示，來確保使用者 知道怎麼去搜索自己想要的資訊。

例項

在應用最高層級的導航欄中放置一個分段控制元件，能夠幫助介面更好地扁平資訊層級，也會讓使用者更容易透過分類篩選找到需要的內容。如果在導航欄中使用了分段控制元件，請確保返回按鈕標題命名的準確。

例項

避免讓過多的控制元件放置在導航欄上，通常導航欄上不多於 3 個元素：當 前檢視的標題、返回按鈕和一個針對當前檢視的操作控制元件。如果在導航欄中使 用了分段控制元件，就不要再放標題以及其他多餘控制元件了。確保文字按鈕之間擁有 足夠的空間，如果導航欄左邊或右邊的文字按鈕之間的間距太小，或是和導航 欄標題連在一起，就會讓使用者難以區分並容易引起誤操作。

在使用者需要專注於內容的時候，可以考慮隱藏導航欄。在實際設計時，請確保使用者透過一個簡單的手勢即可重新喚起導航欄。例如，系統 Safari 開啟 網頁時顯示導航欄方便使用者輸入網址，當用戶向下瀏覽網頁時導航欄隱藏收起， 讓使用者集中專注在頁面內容的瀏覽上。

例項

工具欄(Tool bar)

工具欄上放置著用於操作當前檢視中各物件的控制元件，如編輯、刪除、分享 等。工具欄是半透明的，在 iPhone 上，工具欄始終位於螢幕底部，而在 iPad 上則有可能出現在頂部。當鍵盤被喚起、使用者使用了手勢、或者當前檢視變為 豎屏的情況下，工具欄可以隱藏。

例項

可以在工具欄裡提供一系列讓使用者對當前檢視內容進行操作的工具，在工具欄裡放置使用者在當前情景下最常用的指令，儘量避免在工具欄裡提供一些僅會偶爾用到的指令。可以在工具欄裡放置分段控制元件以方便使用者快速切換當前內容的不同檢視或模式，在工具欄中提供應用全域性的任務或者模式分段控制元件是不恰當的，因為工具欄中的所有操作都應當是針對當前螢幕和檢視的。如果需要讓使用者可以快速喚起應用全域性的任務、或改變全域性檢視和模式，則可以使用標籤欄。

如果需要在工具欄上展示 3 個以上的專案，可以使用圖示按鈕。由於文 字按鈕通常會比圖示按鈕更佔空間，所以使用圖示按鈕可以避免文字按鈕擠在 一起。保證工具欄按鈕之間有足夠的間距，如果按鈕之間間距過小，就會讓用 戶覺得它們難以區分並容易引起誤操作。

決定使用圖示按鈕還是文字按鈕除了考慮數量上的排版之外，還要考慮圖示按鈕是否能夠表意準確。例如，系統日曆工具欄上的“今天”是很難用圖形表達出來，因此使用文字按鈕更適合。同時，為了保持統一，“日曆”和“收件箱”也使用了文字按鈕。

例項

工具欄與導航標準按鈕(Bar button icons)

iOS 提供了一系列工具欄與導航欄上的內建標準按鈕圖示和設計規範，可 以直接使用系統提供的按鈕圖示，也可以重新設計，以符合自己的介面設計風 格，但務必要遵守 iOS 圖示設計規範。

例項

標籤欄(Tab bar)

標籤欄讓使用者在不同的子任務、檢視中進行切換。標籤欄是半透明的，通 常位於螢幕的下邊緣，展示圖示和文字內容，每一項均保持等寬。當用戶選中 某個標籤時，該標籤呈現適當的高亮狀態。在 iOS 中，選中態的標籤圖示填 充背景色，其他未選中態填充描邊色。

例項

標籤欄非常適合用於應用的主介面中，因為它可以很好地扁平資訊層級， 並且同時提供多個觸達同級資訊類目的入口。一個標籤欄一次最多可承載 5 個標籤，多於 5 個標籤的時候，可以展示前 4 個標籤和一個“更多”，並將 其他的標籤以列表形式摺疊到“更多”裡面。

不要使用標籤來讓使用者執行對於當前應用與螢幕內容的操作，如果需要給使用者提供對當前檢視的操作控制元件，請放置在導航欄上。例如，系統通訊錄導航欄右邊的“新增聯絡人”按鈕。

例項

在橫屏與豎屏情況下，高度均保持一致。儘可能地在橫屏與豎屏情況下都 展示相同數量的標籤，在不同的螢幕方向下提供同樣的標籤可以讓使用者對應用 建立很好的視覺穩定感。在橫屏中，應該將與豎屏時數量相同的標籤居中展示。 不過，大部分使用到標籤欄的 iPhone 應用通常都不支援橫屏展示，因為橫屏 不如豎屏可以展示更多的內容並不易於瀏覽；而 iPad 應用因為螢幕大，所以 通常支援橫屏與豎屏。

即使標籤當前不可用，也不要刪除它。讓某些標籤時而出現時而隱藏，會 讓使用者覺得應用出現 Bug。最好的解決方式是確保每個標籤都可用，然後給用 戶解釋某個標籤的內容不可用的原因。例如，當用戶沒有在裝置中儲存任何歌 曲，在系統音樂的歌曲標籤頁裡就可以教育使用者如何去下載一首歌。

考慮在標籤上加入紅色的小氣泡以輕量地傳達資訊，透過新增小氣泡或小紅點來告訴使用者該標籤中包含新的內容。

例項

標籤欄標準按鈕(Bar button icons)

iOS 提供了一系列標籤欄上的內建標準按鈕圖示和設計規範，可以直接使 用系統提供的按鈕圖示，也可以重新設計，以符合自己應用的設計風格，但務 必要遵守 iOS 圖示設計規範。

搜尋欄(Search bar)

搜尋欄獲取使用者輸入的文字，用以作為搜尋的關鍵字，可以全域性或在當前頁搜尋包含關鍵字的所有內容。搜尋欄是透明的，通常位於狀態列正下方，在導航欄上或正下方。

搜尋欄可能包含以下這些元素。

佔位符文字

佔位符文字通常會寫明控制元件的功能，例如，輸入框裡的“搜尋或輸入網站 名稱”字樣，或者提示使用者輸入的文字將在哪裡搜尋，例如“Google”。

清除按鈕

大多數搜尋欄都會提供清除按鈕，方便使用者一鍵清空輸入內容。一旦使用者 在文字框中輸入內容，清除按鈕就會出現，使用者可以用它來一鍵清空輸入內容； 而當搜尋框中沒有任何文字內容時，清除按鈕將被隱藏。

結果列表

結果圖示說明此次搜尋有搜出結果，當用戶點選它時會出現使用者最近一次搜尋的搜尋結果。

聯想

使用者在輸入內容時會出現包含搜尋關鍵詞的聯想結果列表，方便使用者快速查詢所需的內容。

提示

描述性標題，我們稱之為提示。描述性標題是一個短而完整的句子，為搜尋欄提供介紹或指引應用特定資訊。

範圍欄(Scope bar)

範圍欄是 iOS 特有的一種欄，一般是指在一定的範圍內搜尋，方便使用者 選擇搜尋範圍，快速找到想要的資訊。它伴隨著搜尋欄一起時才出現，當用戶 想在明確的分類範圍內進行搜尋時，使用範圍欄是非常有效的。然而，最佳的 解決方案是最佳化你的搜尋結果，讓使用者不需要使用範圍欄對搜尋結果進行篩選， 就可以找到他們所需要的內容。