這兩天在學習iOS的設計規范,主要為大家接受下我們會經常用,欄,控件和視圖。
其中配合了《零基礎學UI》這本書的內容。
今天為先跟大家分享下iOS中的欄。
界面從上到下狀態欄、導航欄、搜索欄、工具欄、標簽欄。
狀態欄(status bar)
1、狀態欄展示了周圍環境的很重要信息。狀態欄背景是透明的,并且一直固定在屏幕上邊緣。
2、狀態欄分為黑白兩色,配合不同背景使用。
3、狀態欄背景色:
a、使用純色。
b、使用導航欄的延伸色。
c、背景圖片模糊。
d、少數特例獨行的會使用同背景反差較大的顏色。
4、狀態欄隱藏:
好處:會為用戶帶來沉浸式體驗。例如閱讀,游戲,視頻。
壞處:會使得用戶無法直觀了解手機的狀態。
解決:手勢輕點,可以隨時呼出狀態欄及其相關控件。不讓狀態欄始終處于隱藏狀態。
導航欄(Navigation bar)
1、實現在應用中信息層級結構的導航,有時也用于管理當前屏幕內容。背景為半透明。一般在狀態欄的正下方。
2、導航欄一般包括:
a、返回按鈕:根據實際情況可添加前一層級的標題。
b、標題:標題隨著層級變化而變化,若標題太長,也可留空。
c、當前界面管理控件:分段控件能更好的扁平信息層級。容易篩選找到需要的內容。
d、當前界面圖標:導航承載圖標有限,如果有大量需要編輯的圖標,可考慮使用工具欄。
3、通常導航欄上的元素不能多余3個。一般情況下,有分段控件就不要放標題及其他控件了。以保證導航上文字與按鈕之間有足夠的點擊距離。以免引起誤操作。多余3個的排版,參考。
4、有需要可以隱藏導航欄,但是要保證用戶可以輕松呼出導航欄。例如safari。
工具欄(Tool Bar)
1、工具欄放置用于操控當前視圖中各種對象的控件,在工具欄里放置的內容一定是當前場景最經常使用的命令。
2、工具欄是半透明的,在iphone上,工具欄始終在底部,而在ipad則可能在頂部。
3、當鍵盤喚起,用戶做了手勢,或者改變當前屏幕方向,工具欄都會出現隱藏。
4、因為工具欄只能針對當前屏幕和視圖進行操作。
所以在工具欄插入的分段控件,只能針對當前內容近期不同視圖和模式的切換。
不能插入帶有全局模式任務的分段控件。插入全局模式任務最好用標簽欄。
5、當分段控件小于等于3個時,建議用文字標簽表達。當控件大于3個時,用圖標表達。 這樣有利于保證按鈕之間的距離時是可操控的。
標簽欄(Tab bar)
1、讓用戶在不同的子任務和視圖中進行切換。在鍵盤呼出時,標簽欄會隱藏。
標簽欄適用在主界面中。因為它可以扁平信息層。并同時提供多個到達同級信息的入口。
2、標簽欄最多放置5個標簽。如多余五個,可以用更多代替。
3、不要在標簽欄執行針對于當前頁面的操作。如有需要可使用導航欄或者工具欄。
4、一般帶有標簽欄的應用在iPhone里不支持橫屏展示。iPad時支持的。因為ipad本身屏幕寬。
5、即便當標簽不可用時,也不要刪除它。保持它的可點擊性。在不可用標簽頁面注明不可用原因。
這樣有利于用戶對信息結構的認知。
6、可以用小氣泡來標注在標簽上,告知用戶該標簽頁面有更新。
7、重點:
標簽欄:實現程序中的界面切換。
工具欄:是對當前頁面進行操作。
兩者不會出現在同一個視圖中。
搜索欄(Search bar)
1、搜索欄包含:占位符文本:寫明控件功能,或提示用戶輸入內容
清除按鈕: 為用戶提供一鍵清除的功能
聯想列表: 用戶在輸入關鍵字時,產生的聯想結果列表,有利于用戶的快速搜索。
結果下拉按鈕:點擊時會出現用戶最近一次的搜索結果。
2、范圍欄(scope bar) 伴隨搜索欄出現。對明確范圍的搜索非常有效。
最佳方案當然是優化你的方案,讓用戶不需要范圍欄篩選結果,就可以找到她們要的結果。