五種Bar, Navigation Bars, Search Bars, Status Bars, Tab Bars, ToolBars
1. Navigation Bars
展現在手機狀態欄的下方,App的頂部。通常包括返回按鈕,頁面主題和進項下一步操作的按鈕。
導航欄可以在用戶進行鍵盤輸入、特殊手勢操作或者View放大時消失。
導航欄的一大作用是讓用戶知道當前所處的位置。考慮在導航欄上增加頁面標題,注意部分情況下可能不適合加標題,比如便簽應用,因為用戶掃一眼第一行的內容就知道他在哪了。
如果有并列關系的頁面,可以考慮增加 Segmented control. https://developer.apple.com/ios/human-interface-guidelines/ui-controls/segmented-controls/
不要讓導航欄顯得太擁擠了,一般是一個返回按鈕+標題+Done的組合。如果用了Segmented Control,就不要加title,返回和Done只保留一個。
用戶focus在內容上是,考慮暫時隱藏掉導航欄(應用場景,閱讀類應用、地圖、圖片)。隱藏掉的導航欄可以通過簡單的操作快速恢復。
盡量使用標準的返回按鈕。如果非要自己搞,請記得符合iOS的設計準則。
2. Search Bars
兩種風格:prominent(由輸入框和X構成,和環境區分的比較明顯,聯系人中的搜索欄風格)t, minimal(有輸入框、X和取消搜索按鈕構成。和環境高度融合,照片搜索欄的風格)
根據搜索功能和使用頻次,來選擇是用prominent還是Minimal。盡量提供圓X和取消搜索按鈕。如果可能的話,提供有用的占位符文本(Placeholder text),提示用戶如何使用搜索。
搜索輸入到一半時,提供快速匹配功能。
3. Status Bars
人們習慣用默認樣式的status bar,不要自己瞎幾把改狀態欄的樣式。
狀態欄有明、暗兩種風格。可以針對App中固定某一屏來進行單獨設置。遵循清晰、對比的原則。
狀態欄的背景默認是透明的。注意導航欄和狀態欄的關系、狀態欄下面的內容使用模糊處理。
跟導航欄一樣,全屏瀏覽時隱藏掉狀態欄,增加浸入感。并且可以通過tap gesture讓用戶輕松恢復status bar。
iOS獨有的特性,在狀態欄中,如果網絡通信超過特定時長,則展示Network Activity Indicators(菊花)。(給用戶信心,同時另外一部分用戶可能會覺得卡機嘛了)。
4. Tab Bars
展示在App底部,用來在App的不同功能區間之間進行切換。keyboard彈出時,標簽欄隱藏。不同方向手持手機時,標簽欄的高度相同。如果現有寬度標簽無法展示完全,則最后一個標簽變成more。
tab bar是用來處理App內第一級內容的切換,不要亂用。tab bar上不能出現控制元素,只能用來導航。如果是屏幕下方的控制操作,請使用toolbar。
tab欄的內容不要隨意更改,要保持一致。tab欄只能用來導航。
tab的數量不要過多,3-5個之間(iPhone)。iPad可以多一些。
tab標簽可以通過紅點的方式提示有新內容。
5. Tool Bars
Tool Bar用來放在當前頁面下需要進行的操作按鈕。需要增強浸入感時也可以被隱藏(感覺這樣做會讓用戶喪失安全感,因為對屏幕底部的操作很容易觸發iOS控制中心)
如果tool bar上按鈕太少,可以直接用文字來替代按鈕。這樣可能會更清晰(與Smartisan OS上的哲學不同,錘子是以按鈕是否能夠造成隱喻來判斷是否使用文字。)
如果是使用文字toolbar,在文字之間請保留足夠的空間。
請注意tool bar和tab bar之間的區別。