1. 程式人生 > >IOS介面元素四欄(狀態列、導航欄、工具欄、TAB欄)設計規範

IOS介面元素四欄(狀態列、導航欄、工具欄、TAB欄)設計規範

1.1 狀態列

狀態列展示於裝置和當前環境相關的重要資訊。
外觀和行為:狀態列總是出現在螢幕頂部,包含網路連線、時間、電量等使用者需要的資訊
在iPhone上,狀態列的顏色會變。而在iPad上,狀態列總是黑色的
如果你的程式不是遊戲或者媒體播放器的話,隱藏狀態列前要考慮清楚
當用戶全屏觀看媒體時,要把狀態列藏起來
合適的話,展示網路連線情況
在iPone上,定義狀態列的顏色。你可以選擇灰色(預設色),透明黑或者半透明黑(alpha=0.5)
在iPhone上,設定好狀態列的顏色改變是否用動畫來展

1.2 導航欄

導航欄用於在層級結構的資訊中導航,也可以用來管理螢幕資訊
外觀和行為:導航欄位於螢幕的頂部,上面緊鄰狀態列。導航欄通常居中顯示當前這一屏的標題。當在層級資訊間穿梭時,使用者可以觸控導航欄左邊的返回按鈕回到上一層。使用者還可以使用導航欄上與當前內容相匹配的控制元件來管理螢幕內容
在iPhone裡,把螢幕從豎屏轉成橫屏模式會自動改變導航欄的高度(估計是想在橫屏模式留出更多的空間給內容)。在iPad上,導航欄的透明度和高度不會隨旋轉改變。
在iPhone上,導航欄的是整屏通欄顯示的。在iPad上,導航欄可能會嵌在分欄中的某一欄裡,不會橫貫整屏。
使用當前檢視的標題作為導航欄的標題:導航欄標題變成新層級的標題;標題左側出現返回按鈕,寫著前一級的標題
確保導航欄上的文字容易懂
使用工具欄取代導航欄
考慮在程式的最頂一級的工具欄放置分段控制元件
避免用過多的控制元件填滿導航欄,即使看起來好像有足夠的空間
根據控制元件的意義選擇系統提供的按鈕
有必要的時候,定義導航欄的顏色和透明度。
避免改變返回按鈕的外觀和行為
不要建立分段的返回按鈕(類似於麵包屑)
在iPhone上,要考慮到由於裝置方向變化導致的導航欄自動改變

1.3 工具欄

工具欄上放著用於操作當前螢幕上物體的控制元件
外觀和行為:在iPhone上,工具欄總在螢幕的底部。但是在iPad上它也可能出現在頂部。工具欄上的控制元件等寬放置,在iPhone上,橫屏切換到豎屏時工具欄高度會自動變小。在iPad上,工具欄的高度和透明度是恆定的。
在工具欄上要放那些使用者能對當前內容所做的操作,不要用它來切換程式模式
在工具欄上放那些當前情景下使用者最常用的功能
每個工具欄上的控制元件至少要保持44×44畫素的面積
呼叫系統提供的控制元件要遵循使用規範
儘量避免在同一個工具欄上混合使用有邊框和無邊框的控制元件
適當的時候,可以定製工具欄的顏色和透明度
在iPhone上,要考慮到由裝置方向改變引起的工具欄高度變化

1.4 Tab欄

Tab欄用於切換子任務、檢視和模式。
外觀和行為:Tab欄位於螢幕的底部,並且始終可見。Tab欄上展示圖示和文字,同寬,黑底。當用戶選中某個tab時,這個tab的背景色亮起,圖片處於高光態。
在iPhone上,tab欄一次只能顯示5個以內的頁籤
Tab的透明度和高度不隨裝置方向改變
Tab上可以打上小創可貼(紅底白字),用以展示與程式相關的資訊
不要使用tab來執行對當前螢幕上元素的操作
一般而言,tab欄是用來管理程式層面資訊的
在iPad上,你可能會在分欄或浮出層裡下使用tab欄,用於切換或過濾內容
考慮在tab上打紅色小創可貼,柔和地溝通訊息
呼叫系統提供的tab圖示要遵循使用規範
這裡寫圖片描述

Tab bar 標籤欄

Segmented control 分段控制

Toolbar bottons 工具欄按鈕

Map view 地圖檢視

Alert 警報

 在 IOS 中如果我們想操縱一些東西,基於目前的檢視,我們可以使用工具欄(toolbar)。
  例如將電子郵件應用程式的收件箱項選擇刪除,做標誌,回覆等。如下圖這些。基本都是屬於工具欄範疇。