iOS 9人機界面指南(四):UI元素 欄

4.1 欄

4.1.1 狀態欄

狀態欄展示了關于設備及其周圍環境的重要信息。

默認(深色)內容
淺色

狀態欄:

是透明的

始終固定在整個屏幕的上邊緣

API注釋:你可以將全應用的狀態欄風格設計成統一的,或者給不同的視圖控制器定義不同的狀態欄風格。想要了解更多內容,你可以通過UIApplication Class Reference來了解UIStatusBarStyle常數,以及通過UIViewController Class Reference來了解更多關于preferredStatusBarStyle屬性的內容。

不要創建自定義狀態欄。用戶依賴系統默認狀態欄的一致性。就算你可能會在應用中隱藏它,也不宜定制一個新的UI來代替原有系統狀態欄。

避免滾動內容直接透過狀態欄顯示。你不會希望用戶在滾動的時候看到五花八門的內容和狀態欄自身的元素混合在一起。想要讓用戶感受到內容區域夠大的同時,最大限度地保證可讀性,請保證在狀態欄后面添加一塊背景,用以模糊出現在狀態欄后的內容。以下有一些方法可以讓滾動的內容能正常顯示在狀態欄后面:

使用導航控制器(navigation controller)來展示內容。導航控制器自動展示狀態欄背景,同時能確保內容視圖不會出現在狀態欄后面。(了解更多請參考Navigation Controllers)。

在狀態欄后面放一個低調的、不會搶走用戶注意力的自定義圖形——比如一道漸變。想要保證這樣的圖形始終固定在狀態欄后面,你可以用視圖控制器(view controller)來讓它固定在滾動內容上一層,又或者可以用滾動視圖(scrolling view)來保證圖形固定在屏幕的頂部。

讓內容固定在導航欄區域外顯示(這個區域由應用的statusBarFrame屬性來定義)。如果你確定要這樣做的話,請給導航欄區域添加固定的、與屏幕背景色相同的背景色。

千萬千萬,避免在狀態欄后面疊加會分散注意力的內容。尤其是,你不能讓用戶覺得輕擊狀態欄之后可以獲取內容或激活你的應用中的控件。

隱藏狀態欄時請慎重。由于狀態欄是透明的,通常情況下不需要隱藏它。始終隱藏狀態欄意味著用戶必須退出你的應用才能知道現在的時間,或者了解當前環境下是否有Wi-Fi連接。

在用戶全屏觀看媒體時,考慮隱藏狀態欄以及所有頁面UI。當你這么做的時候,請確保用戶在輕擊屏幕時即可重新喚起狀態欄以及相關的UI。而除非你有充分的理由,否則最好不要重新定義一個手勢來讓用戶喚起狀態欄,因為用戶不會發現,就算發現了也難以記住。

為你的應用選擇配色協調的狀態欄顏色。默認的狀態欄內容是黑色的,在淺色應用中效果出色,而相應的淺色狀態欄則更適用于顏色較深的應用。

在適當的時候展示網絡活動指示器(network activity indicator)。這可以提醒用戶顯示長時間的網絡接入狀態。更多詳情請參考本章第三節控件部分的網絡活動指示器部分(Network Activity Indicator)。

4.1.2 導航欄

導航欄能夠實現在應用不同信息層級結構間的導航,有時候也可用于管理當前屏幕內容。

導航欄:

是半透明的

通常位于屏幕的上方,狀態欄正下方。在橫屏視圖中,導航欄也可以包含在某一視圖中,不需要與整個屏幕等寬,比如說它可以出現在對分視圖控制器(split view controller)的其中一側。

當鍵盤被喚起、用戶使用了手勢、或者當前視圖變為豎屏的情況下,導航欄可以隱藏。

可以填充顏色(使用tintColor來定義導航欄中的圖標與文字顏色;使用barTintColor來填充導航欄背景色)

API注釋:導航欄包含于導航控制器(一個管理顯示自定義視圖層級結構的程序對象)中。想要了解更多關于如何在代碼中定義一個導航欄的信息,請參閱Navigation Controllers,UINavigationController Class ReferenceUINavigationBar Class Reference.

你可以用導航欄在不同視圖間提供導航,或在上面放置管理當前視圖內容的相關控件。如果你需要提供導航欄難以承載的大量控件同時又不是非要提供導航不可,你可以考慮使用工具欄(Toolbar)。

當用戶到達一個新的層級,導航欄需要做出這樣的改變:

導航欄標題應該變成當前層級的標題。

當前標題左側放置應有返回按鈕,需要的話,返回按鈕可以以前一層級的標題命名。

使用當前視圖的標題作為導航欄標題。若覺得標題冗余,你也可以將標題留空。舉個例子,備忘錄的導航欄中就沒有當前備忘錄的標題,因為備忘錄的第一行就已經提供了所有用戶需要的內容。

考慮在應用最高層級的導航欄中放置一個分段控件。它能夠幫助你更好地扁平信息層級,也會讓用戶更容易找到所需內容。如果在導航欄中使用了分段控件,請確保返回按鈕標題命名的準確。(更多使用指引請參閱本章第三節中的分段控件。)

如果需要的話,可以考慮在導航欄位置使用提示語(prompt)來告訴用戶在當前屏幕中他們可以做什么。提示語是一句出現在導航欄頂部的短句。舉個例子,股票應用(Storcks)中就給用戶提供了這么一句提示,來確保用戶知道怎么去搜索自己想要的信息。

如果你需要用到提示語,請設計一句簡明扼要的單句,并在句末配以適當的標點符號。

即使空間充足,也應當避免讓過多的控件填滿你的導航欄。一般來說,導航欄上應該不多于以下三個元素:當前視圖的標題、返回按鈕和一個針對當前的操作控件。而當你在導航欄中使用了分段控件,就不要再放標題以及其它多余控件了。

確保文字按鈕之間擁有足夠的空間。如果導航欄左邊或右邊的文字按鈕之間的間距太小,那些文字看起來會像擠在一起一樣,讓用戶難以區分。如果按鈕在導航欄中顯得太過擁擠,你可以使用UIBarButtonSystemItemFixedSpace常數來給他們增加適當的間距。(想要了解更多關于這個常數的內容,請參考UIBarButtonItem Class Reference.)

確保你自定義的導航欄在你的應用的每個視圖中都擁有一致的外觀與體驗。舉個例子,不要在同一個應用中使用不透明導航欄和半透明工具欄。在屏幕處于同一方向時,最好不要改變不同屏上導航欄的背景圖片、顏色和透明度。

確保你自定義的返回按鈕的外觀與操作仍然像一個返回按鈕。用戶知道系統默認的返回按鈕能幫助他們在信息層級中追蹤自己的路徑,如果你想重新設計它,請確保使用一個自定義的蒙版圖層 (custom mask image),它可以在iOS中讓這些按鈕標題在系統各轉場中出現或者消失。

不要創建多段式(multisegment)返回按鈕。返回按鈕通常是用來幫助用戶回到當前層級的父層級中去的。如果你擔心用戶在沒有了這種多節式的、如同面包屑一般的返回按鈕后會迷路,那么你也許該好好考慮如何扁平你的信息層級了。

在用戶需要專注于內容的時候,可以考慮隱藏導航欄。當你這么做的時候,請確保用戶通過一個簡單的手勢(比如一下輕擊)即可重新喚起導航欄。

4.1.3 工具欄

工具欄上放置著用于操作當前屏幕中各對象的控件。

工具欄:

是半透明的

在iPhone上,工具欄始終位于屏幕底部,而在iPad上則有可能出現在頂部

當鍵盤被喚起、用戶使用了手勢、或者當前視圖變為豎屏的情況下,工具欄可以隱藏。

API注釋:工具欄包含在導航控制器(navigation controller)中,該控制器用于管理定制視圖中信息層級的展示形式。 想要了解如何在代碼中定義工具欄,請參考Displaying a Navigation Toolbar以及UIToolbar Class Reference.

你可以在工具欄里提供一系列讓用戶對當前視圖內容進行操作的工具。

在工具欄里放置用戶在當前情景下最常用的指令。盡量避免在工具欄里提供一些僅會偶爾用到的指令。

可以在工具欄里放置分段控件以方便用戶快速切換當前內容的不同視圖或模式。在工具欄中提供應用全局的任務或者模式分段控件是不恰當的,因為工具欄中的所有操作都應當是針對當前屏幕和視圖的。如果你需要讓用戶可以快速喚起應用全局的任務、或改變全局視圖和模式,可以使用標簽欄(Tab Bar)。想要了解更多分段控件的內容,請參考下文的分段控件(Segmented Control)部分;想要了解更多標簽欄的內容,請參考下文中的標簽欄(Tab Bar)部分。

如果需要在工具欄上展示3個以上的項目,可以使用圖標。由于文本按鈕通常會比圖標更占空間,所以用圖標可以避免文字標題們擠在一起。

保證工具欄文字按鈕之間有足夠的間距。如果按鈕之間間距過小,會讓蚊子看起來擠在一起,讓用戶覺得它們難以區分。如果按鈕在導航欄中顯得太過擁擠,可以用UIBarButtonSystemItemFixedSpace常數來增加他們之間的間距。(想要了解更多關于這個常數的內容,請參考UIBarButtonItem Class Reference.)

4.1.4 工具欄與導航標準按鈕

iOS提供了一系列工具欄與導航欄上的內置標準按鈕。想要了解如何設計自定義圖標,請參考本文第五章欄按鈕圖標(Bar Button Icons)部分。工具欄和導航欄圖標的顏色可以通過tintColor屬性來設定。

想要了解每一個按鈕所對應的標志名稱及其含義,請參閱UIBarButtonItem Class Reference中的UIBarButtonSystemItem部分。

跟所有標準按鈕和圖標相同,應當根據文檔中說明的圖標含義,而不是只憑圖標外觀來使用這些工具欄圖標和導航欄圖標。這樣能夠保證在關聯特定意義的按鈕改變了外觀的情況下,你的應用中的UI仍然是可用而有意義的。

表格41-1 工具欄與導航欄標準按鈕(Standard buttons available for toolbars and navigation bars)

除了表格41-1里展示的標準按鈕之外,你還可以使用系統提供的編輯、取消、保存、完成、撤銷、重做等等按鈕來支持編輯或其它操作。這些按鈕的標題即是按鈕的操作內容。想要了解每一個按鈕的名稱及其含義,請參閱UIBarButtonItem Class Reference中的UIBarButtonSystemItem.

另外,你還可以在工具欄中放置系統提供的信息按鈕(info button).

4.1.5 標簽欄

標簽欄讓用戶在不同的子任務、視圖和模式中進行切換。


API注釋:標簽欄包含在標簽欄控制器中,該控制器用于管理自定義視圖的展示形式。想要了解如何在代碼中定義標簽欄,請參考Tab Bar ControllersUITabBar.

標簽欄位于屏幕底部,并應該保證在應用內任何位置都可用。標簽欄是半透明的,展示圖標和文字內容,每一項均保持等寬。當用戶選中某個標簽時,該標簽呈現適當的高亮狀態。

標簽欄:

是半透明的

始終出現在屏幕的底部

一個標簽欄一次最多可承載5個標簽(多于5個標簽的時候,可以展示前4個標簽和一個“更多”,并將其他的標簽以列表形式收納到“更多”里面)

在橫屏與豎屏情況下,高度均保持一致

你可以在標簽上加上紅底白字,顯示數字或者省略號的小氣泡(badge)以展示特定的應用信息

你可以使用標簽欄來切換對同一組數據的不同視圖模式,或者整體功能下不同的子任務。

一般而言,使用標簽欄來組織整個應用層面的信息結構。標簽欄非常適合用于應用的主界面中,因為它可以很好地扁平信息層級,并且同時提供多個觸達同級信息類目與模式的入口。

不要使用標簽來讓用戶執行對于當前應用與屏幕內容的操作。如果你需要給用戶提供操作控件,請使用工具欄。

即使標簽當前不可用,也不要把它從標簽欄中刪除。讓某些標簽時而出現時而隱藏,會讓用戶覺得你的應用UI不穩定而且難以預測。最好的解決方式是確保每個標簽都可用,然后給用戶解釋某個標簽的內容不可用的原因。舉個例子,當用戶沒有在設備中保存任何歌曲,在系統音樂應用的歌曲標簽頁里就可以教育用戶如何去下載一首歌。

考慮在tab上加入紅色的小氣泡(Badge)以低調地傳達信息。你可以通過添加小氣泡來告知用戶該標簽中包含新的內容。

根據控件的標準含義來選擇系統提供的圖標。詳情請查看下文中的標簽欄標準圖標(Tab Bar Icons)。如果想自定義標簽欄圖標,請參考文檔第五章中Bar Buttons Icons里給出的建議。

在橫屏視圖中,你可能會在對分視圖(split view pane)或者浮出層(popover)內使用標簽欄以切換或篩選視圖中的內容。如果這些標簽是用于切換或者過濾當前視圖中的內容的話,你可以這么做。然而通常情況下,在對分視圖和浮出層底部使用分段控件效果會更好,因為視覺上看起來更為協調。更多詳情請參考文檔本章第三節中的分段控件。

避免讓過多的標簽填滿你的標簽欄。放置太多標簽會讓用戶難以選中他想要點擊的那一個。而同時每添加一個標簽,意味著你的應用程序又復雜了一分。

盡可能地在橫屏與豎屏情況下都展示相同數量的標簽。在不同的屏幕方向下提供同樣的標簽可以讓用戶對應用建立很好的視覺穩定感。在橫屏中,你應該將與豎屏時數量相同的標簽居中展示。在橫屏中,避免使用“更多”標簽。如果應用是橫屏的,那么把額外的操作都塞到一個“更多”里面是對空間一種糟糕的浪費。


4.1.6 標簽欄標準圖標

iOS提供了一系列標簽欄標準圖標,在下面的表格35-2中有詳細展示。想要了解如何設計自定義圖標,請參考文檔第五章欄標準按鈕部分。標簽欄圖標的顏色可以通過tintColor屬性來設定。

想要了解每一個圖標的名稱及其含義,請參閱UIBarItem Class Reference中的UITabBarSystemItem部分。

跟所有的標準按鈕與圖表相同,根據文檔說明的圖表含義而不是僅憑圖表外觀來使用這些圖標是很關鍵的。這樣能夠保證在關聯特定含義的按鈕改變了外觀的情況下,你的應用中的UI仍然是可用而有意義的。

表格41-2 標簽欄標準按鈕(Standard icons for use in the tabs of a tab bar)

4.1.7 搜索欄

搜索欄獲取用戶鍵入的文本,用以作為搜索的關鍵字(下圖中顯示的文本為占位符,非用戶輸入文本)。

想要了解如何在代碼中定義搜索欄,請參考UISearchBar.想要了解更多如何顯示搜索欄,請參考UISearchDisplayController.

搜索欄可能包含以下這些可選元素:

占位符文本(Placeholdertext)。占位符文本通常會寫明控件的功能(比如上圖里的 “Search”字樣),或者提示用戶輸入的文本將在哪里搜索(如“Google”)。

書簽按鈕(TheBookmarks button)。書簽按鈕可以讓用戶方便地找到他們需要的內容。例如在地圖中搜索時,用戶可以通過書簽按鈕快速選中書簽地址、最近搜索記錄、或通訊錄。

書簽按鈕只有當搜索欄中沒有占位符或用戶輸入內容時才會出現,當搜索欄中已有文本時,書簽按鈕會被清除按鈕(Clear button)所代替。

清除按鈕(The Clear button)。大多數搜索欄都會提供清除按鈕,方便用戶一鍵清空輸入內容。

一旦用戶在文本框中輸入內容,清除按鈕就會出現,用戶可以用它來一鍵清空輸入內容;而當搜索框中沒有任何文本內容時,清空按鈕將被隱藏。

結果列表圖標(Theresults list icon)。結果圖標說明此次搜索有搜出結果。當用戶點擊它時會出現用戶最近一次搜索的搜索結果。

提示(Prompt)。描述性標題,我們稱之為提示。描述性標題是一個短而完整的句子,為搜索欄提供介紹或指引應用特定信息。

在你的應用中使用搜索欄讓用戶進行搜索。不要使用文本框,因為文本框的外觀不符合用戶對搜索的預期。

在iOS 8以及之后的版本里,你可以通過UISearchDisplayController簡單快捷地把搜索欄放在導航欄中。請注意,當搜索的視圖控制器包含在導航控制器里面的時候——比如在郵件應用(Mail)中那樣,當用戶激活搜索時,搜索欄會自動上浮,平鋪到原來導航欄的位置上。

根據搜索功能在你的應用中的重要程度來選擇搜索欄的樣式。如果搜索在你的應用中是最基礎的功能,請使用突出樣式(the prominent style);如果搜索不是用戶常用的功能,那么可以使用弱化樣式(the minimal style)。

4.1.8 范圍欄

范圍欄只有在與搜索欄一起時才會出現,它讓用戶可以定義搜索結果的范圍。

想要了解如何在代碼中定義搜索欄與范圍欄,請參考UISearchBar.

當搜索欄出現時,范圍欄會出現在它的附近。范圍欄的外觀與你所指定的搜索欄的外觀兼容。

當用戶想在明確的分類范圍內進行搜索時,使用范圍欄是非常有用的。然而,更好的選擇是優化您的搜索結果,讓用戶不需要使用范圍欄對搜索結果進行篩選,便可以找到他們所需要的內容。


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,505評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,556評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,463評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,009評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,778評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,218評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,281評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,436評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,969評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,795評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,993評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,537評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,229評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,659評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,917評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,687評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,990評論 2 374

推薦閱讀更多精彩內容