iOS 10 人機交互指南 第六章 UI Bars

五種Bar, Navigation Bars, Search Bars, Status Bars, Tab Bars, ToolBars

1. Navigation Bars

展現(xiàn)在手機狀態(tài)欄的下方,App的頂部。通常包括返回按鈕,頁面主題和進項下一步操作的按鈕。

導航欄可以在用戶進行鍵盤輸入、特殊手勢操作或者View放大時消失。

導航欄的一大作用是讓用戶知道當前所處的位置??紤]在導航欄上增加頁面標題,注意部分情況下可能不適合加標題,比如便簽應用,因為用戶掃一眼第一行的內(nèi)容就知道他在哪了。

如果有并列關系的頁面,可以考慮增加 Segmented control. https://developer.apple.com/ios/human-interface-guidelines/ui-controls/segmented-controls/


不要讓導航欄顯得太擁擠了,一般是一個返回按鈕+標題+Done的組合。如果用了Segmented Control,就不要加title,返回和Done只保留一個。

用戶focus在內(nèi)容上是,考慮暫時隱藏掉導航欄(應用場景,閱讀類應用、地圖、圖片)。隱藏掉的導航欄可以通過簡單的操作快速恢復。

盡量使用標準的返回按鈕。如果非要自己搞,請記得符合iOS的設計準則。

2. Search Bars

兩種風格:prominent(由輸入框和X構成,和環(huán)境區(qū)分的比較明顯,聯(lián)系人中的搜索欄風格)t, minimal(有輸入框、X和取消搜索按鈕構成。和環(huán)境高度融合,照片搜索欄的風格)


根據(jù)搜索功能和使用頻次,來選擇是用prominent還是Minimal。盡量提供圓X和取消搜索按鈕。如果可能的話,提供有用的占位符文本(Placeholder text),提示用戶如何使用搜索。

搜索輸入到一半時,提供快速匹配功能。

3. Status Bars

人們習慣用默認樣式的status bar,不要自己瞎幾把改狀態(tài)欄的樣式。

狀態(tài)欄有明、暗兩種風格??梢葬槍pp中固定某一屏來進行單獨設置。遵循清晰、對比的原則。

狀態(tài)欄的背景默認是透明的。注意導航欄和狀態(tài)欄的關系、狀態(tài)欄下面的內(nèi)容使用模糊處理。

跟導航欄一樣,全屏瀏覽時隱藏掉狀態(tài)欄,增加浸入感。并且可以通過tap gesture讓用戶輕松恢復status bar。

iOS獨有的特性,在狀態(tài)欄中,如果網(wǎng)絡通信超過特定時長,則展示Network Activity Indicators(菊花)。(給用戶信心,同時另外一部分用戶可能會覺得卡機嘛了)。

4. Tab Bars


Tab Bars

展示在App底部,用來在App的不同功能區(qū)間之間進行切換。keyboard彈出時,標簽欄隱藏。不同方向手持手機時,標簽欄的高度相同。如果現(xiàn)有寬度標簽無法展示完全,則最后一個標簽變成more。

tab bar是用來處理App內(nèi)第一級內(nèi)容的切換,不要亂用。tab bar上不能出現(xiàn)控制元素,只能用來導航。如果是屏幕下方的控制操作,請使用toolbar。

tab欄的內(nèi)容不要隨意更改,要保持一致。tab欄只能用來導航。

tab的數(shù)量不要過多,3-5個之間(iPhone)。iPad可以多一些。

tab標簽可以通過紅點的方式提示有新內(nèi)容。

5. Tool Bars


Tool Bars

Tool Bar用來放在當前頁面下需要進行的操作按鈕。需要增強浸入感時也可以被隱藏(感覺這樣做會讓用戶喪失安全感,因為對屏幕底部的操作很容易觸發(fā)iOS控制中心)

如果tool bar上按鈕太少,可以直接用文字來替代按鈕。這樣可能會更清晰(與Smartisan OS上的哲學不同,錘子是以按鈕是否能夠造成隱喻來判斷是否使用文字。)

如果是使用文字toolbar,在文字之間請保留足夠的空間。

請注意tool bar和tab bar之間的區(qū)別。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容