學科:UI設計/移動應用

iOS UI 元素尺寸參考

編輯

以下單位均為點(points),高清屏幕下1pts=2px,其他情況1pts=1px。

屏幕尺寸

編輯
  • iPad Air、The New iPad、iPad 3,1024 x 768 pt,9.7 英寸屏,264 ppi
  • iPad 2,1024 x 768 pt,9.7 英寸屏,132 ppi
  • iPad mini,1024 x 768 pt,7.9 英寸屏,163 ppi
  • iPad mini with Retina,326 ppi,其餘跟 mini 一樣
  • iPhone 5 及 iPod touch 5,568 x 320,4 英寸屏,326 ppi
  • 早期 iPhone 及 iPod touch,480 x 320,3.5 英寸屏

狀態欄

編輯
  • 狀態欄正常高 20,來電後40。
  • iOS 7 後,在不顯示導航欄的界面中,視圖中的內容可以顯示在正常狀態欄的區域中(狀態欄下面,相當於狀態欄高度可以是0)。

通常位於頂部的欄

編輯
  • 導航欄、搜索欄、工具欄正常高44,iPhone橫屏後縮小為32。
  • 導航欄標題字號22,iPhone橫屏後縮小為16。
  • UIBarButtonItem,按鈕框視覺高度為29(包括底部高光則為30),字號12,建議設置這些按鈕的背景圖高度為30。iPhone橫屏後縮小為24,字號12。
  • 豎版導航欄左右按鈕的視圖大小默認是 71x33,標題視圖大小默認是 128x33,但這只是默認,寬度都是可以調整的(導航欄自動調整,代碼手動調整,高度也可以調整)。控件的實際高度可能會比 33 大。

導航欄背景

編輯
  • iOS 7 上,導航欄背景區域是包含狀態欄的,背景高度 64pt,不足會左上對齊平鋪,如果高度大於 64pt,多出的部分會被截斷。如果使用 iOS 6 高度的背景圖,頂部會是黑的。具體表現待詳細考證 --BB9z (talk) 10:43, 10 January 2014 (UTC)
  • iOS 6 及以下,背景圖高度為 44pt。高度不足的,會平鋪顯示;若多出的話,多出部分不會被截斷,會一直延伸下去。

Tab bar

編輯
  • UITabBar 高49,字號9,圖標支持到48 x 32(不是32 x 32,但你用正方形的圖標一點問題也沒有)。
  • 標籤在 iPhone 上最多能同時顯示 5 個, iPad 上則是 8 個。
  • 提示:系統控件其實支持無上限的標籤,顯示不下的會創建一個更多的標籤,裡面是個帶導航的列表可以收納顯示不下的標籤,這些都是自動提供的。更贊的是支持用戶自行調整顯示的標籤和標籤順序(保存順序需要一點開發)。

應用圖標

編輯

參見 HIG:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html

其他

編輯
  • iPad上不存在橫屏後元素縮小的情況。
  • 需要特別注意的是,iOS 7 和之前版本的默認控件尺寸並不相同。建議設計時考慮到元素尺寸如何根據內容多少進行調整,可以定義好元素之間的間隙(開發抱怨不能做自適應的讓他們學 Auto Layout 去)。

網頁設計

編輯
  • 這段還是不對,元素寬度可能會變,但還不確定什麼因素決定變與不變。Web頁面橫豎屏字體調節是偽命題,拉伸的是viewport寬度。對於頁面內部元素來說,其尺寸沒有變化,該是16px還是16px,只是投射到屏幕的比列不同。改變的比例與設備屏幕長寬比一致,在iPad上就是4/3的關係,到了iPhone 4寸屏上差別會高達76%。


字體

編輯

iOS 提供的字體列表可見:iOS 6: Font listiOS 7: Font list。其中,Additional Information 提及的字體可以按需從 Apple 網站上加載,SDK demo DownloadFont 演示了如何下載並使用這些字體。

參考:

工作流程

編輯

iOS 資源文件命名

編輯

Xcode 5 發布後,增加了 Asset Catalog,可以不必按下面的方式命名了,但命名方式仍是推薦的。

不必直接調用@2x的資源文件,iOS會在Retina設備上自動完成@2x資源的加載。

關於iPad中使用iPhone應用的2x模式,這種模式只是簡單的將像素拉伸,並不會調用@2x的資源文件。

~iphone & ~ipad

編輯

跟@2x資源文件類似,iOS會根據這兩個後綴自動完成設備適配。iOS 4.0及之後版本支持。

註:~iphone,~ipad 均要小寫,iOS設備上區分文件名大小寫。


參考

編輯

資源:

交互

編輯

資源文件優化

編輯