iOS Guideline 需知(1)

這是給設計師在設計iOS UI前必先知道的元件相關注意事項和可以怎麼做的方向。

首先是Status bar,高度20pt,無背景顏色,只有前景色且只能有黑或白色可選擇而已。

status bar

Navigation bar 高度44pt,有背景顏色且會往上延伸到Status bar,所以這也是為什麼我們會看到Status bar背景會有顏色的原因,放在Navigation bar的icon通常是用來處理當前頁面上的功能,但要避免放過多的元件擠滿Navigation bar,因為我們還有Toolbar可以使用。

在iPhone切換成landscape(水平)狀態時Navigation bar高度會調整成32.5pt,iPad則不會,另外也不一定需要在Navigation bar放標題來代表當前頁面。

navigation bar
此頁面的navigation bar沒有title
landscape(水平)狀態 高度32.5pt

Toolbar 高度44pt,只能全放icon或文字,按鈕沒有數量限制且通常用來處理當前頁面上的功能,它是Navigation bar的延伸。

同樣在切換iPhone成landscape(水平)狀態時,它的高度也會改變(同Navigation bar高度),在Toolbar放超過3個元件時,需使用帶有icon設計的按鈕。

全icon設計的按鈕
全文字設計的按鈕
landscape(水平)狀態 高度32.5pt
超過3個用icon設計
更多icon的toolbar設計

Tab bar 高度49pt,一定要icon加文字的設計(可由系統內建來處理),若只有看到icon設計的App那就是他們自己做的,Tab bar的作用是用來做功能分類。在iPhone上Tab bar的icon設計不要超過5個,如果一定要超過5個的話,就把第5個icon做成“更多”,將其他功能收納於此,但在iPad設計上就必須避免使用“更多”這一icon。

tab bar的高度不會隨著設備轉成landscape(水平)狀態時改變高度,另外tab bar的icon可以使用“Badge”(紅底白字的橢圓形)這一功能來提醒使用者有新訊息。

icon加文字,Badge有54個訊息
只有icon
第5個使用“更多”來收納其他功能

Search bar 高度43pt,放在Navigation bar的下面,但有時也可以選擇放在Navigation bar裡面。

search bar放在Navigation bar的下面
search bar放在Navigation bar的裡面
search bar放在Navigation bar的裡面