學科: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 個。
- 提示：系統控制項其實支持無上限的標籤，顯示不下的會創建一個更多的標籤，裡面是個帶導航的列表可以收納顯示不下的標籤，這些都是自動提供的。更贊的是支持用戶自行調整顯示的標籤和標籤順序（保存順序需要一點開發）。
應用圖標[編輯 | 編輯原始碼]
其他[編輯 | 編輯原始碼]
- iPad上不存在橫屏後元素縮小的情況。
- 需要特別注意的是，iOS 7 和之前版本的默認控制項尺寸並不相同。建議設計時考慮到元素尺寸如何根據內容多少進行調整，可以定義好元素之間的間隙（開發抱怨不能做自適應的讓他們學 Auto Layout 去）。
網頁設計[編輯 | 編輯原始碼]
- 這段還是不對，元素寬度可能會變，但還不確定什麼因素決定變與不變。Web頁面橫豎屏字體調節是偽命題，拉伸的是viewport寬度。對於頁面內部元素來說，其尺寸沒有變化，該是16px還是16px，只是投射到屏幕的比列不同。改變的比例與設備屏幕長寬比一致，在iPad上就是4/3的關係，到了iPhone 4寸屏上差別會高達76%。
字體[編輯 | 編輯原始碼]
iOS 提供的字體列表可見：iOS 6: Font list，iOS 7: Font list。其中，Additional Information 提及的字體可以按需從 Apple 網站上加載，SDK demo DownloadFont 演示了如何下載並使用這些字體。
參考：
- http://iosfonts.com —— 這個網站列出了iOS設備自帶的字體
- http://apple4us.com/2014/01/how-to-use-additional-fonts-on-ios.html
工作流程[編輯 | 編輯原始碼]
iOS 資源文件命名[編輯 | 編輯原始碼]
Xcode 5 發布後，增加了 Asset Catalog，可以不必按下面的方式命名了，但命名方式仍是推薦的。
@2x[編輯 | 編輯原始碼]
不必直接調用@2x的資源文件，iOS會在Retina設備上自動完成@2x資源的加載。
關於iPad中使用iPhone應用的2x模式，這種模式只是簡單的將像素拉伸，並不會調用@2x的資源文件。
~iphone & ~ipad[編輯 | 編輯原始碼]
跟@2x資源文件類似，iOS會根據這兩個後綴自動完成設備適配。iOS 4.0及之後版本支持。
註：~iphone，~ipad 均要小寫，iOS設備上區分文件名大小寫。
參考[編輯 | 編輯原始碼]
- 官方文檔：iOS Human Interface Guidelines —— iOS 設計必讀
- https://developer.apple.com/app-store/marketing/guidelines/#images —— iOS 設備的官方圖片可以在 App Store Marketing Guidelines 獲得，如何使用也有相應指導
- http://hicksdesign.co.uk/journal/ios-icon-corner-radii —— 圖標圓角半徑參考
- http://ui4app.com/ —— iOS App收集站
- 30+ tips to improve your iOS design workflow (in Photoshop) | radesign，好文
- iOS APP體驗設計 http://blog.mycolorway.com/2011/06/16/ued-for-ios/
- The iOS Design Cheat Sheet http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/
- iOS 7 colors http://ios7colors.com/
- Furnace iOS 程式設計中文學習網站
資源：