iOS UI設計基本知識

整理一下網路搜集的一些基本 UI 的基本知識，官方的詳細文件 iOS UI elements and guildline


螢幕像素與解析度 

iPhone: 3.5 inch display

• iPhone 3GS before: 480x320px, 163ppi 
• iPhone 4 after: 960x640px, 326ppi 

iPad:9.7 inch display

• iPad 2 before: 1024x768px, 132ppi  The new iPad: 2048x1536px, 264ppi 

字型

• iOS 5.1中內建字型有58種。
• iOS Preview 版本中少了 DB LCE TEMP字型，並增加了 Avenir, Avenir Next, Avenir Next Condensed, 以及Symbol等四種字型

 從 Xcode 中取得字型列表

// List all fonts on iPhone
NSArray *familyNames = [[NSArray alloc] initWithArray:[UIFont familyNames]]; NSArray *fontNames;

NSInteger indFamily, indFont;
for (indFamily=0; indFamily<[familyNames count]; ++indFamily) 
{
     NSLog(@"Family name: %@", [familyNames objectAtIndex:indFamily]); 
fontNames = [[NSArray alloc] initWithArray: [UIFont fontNamesForFamilyName: [familyNames objectAtIndex:indFamily]]];
for (indFont=0; indFont<[fontNames count]; ++indFont) 
{
NSLog(@" Font name: %@", [fontNames objectAtIndex:indFont]);
}
}

Layout

• 雖然具有Retina螢幕的iPhone 4以及the new iPad有 960x640 與 2048x1536 像素的畫面尺寸,但尺寸的標示依舊是以 480x320 與 1024x768 來進行。

• 每個元件都會縮小一半

系統預設的高度

（1點意指Retina螢幕中的2像素,非Retina螢 幕中的1像素）

• 系統列高度：20點

• 導覽（Navigation Bar）/工具列 (Tool Bar)高度： 44 點

• 頁籤列（Tab Bar）預設高度:49點，每個頁籤的圖示 (使用灰階透明背景圖片,官方的建議大小為30x30pts, 實作上可接受的最大圖示為48x32pts)

Magic Number on iOS:44


44x44這個大小同時也是蘋果的介面規範中所建議的最小點選區域。 實際上44 points在iPhone上是6.85mm,在iPad上是8.46mm. 需將這個數值謹記在心。



出圖需知

出圖時須針對Retina與非Retina設備提供對應大小的圖片

對於針對Retina螢幕所提供的圖片,請在主檔名加上後綴@2x,開發工具會完成 接下來的事。 

舉例來說:
image filename for non-Retina device: star.png
image filename for Retina device: star@2x.png 

其它像是 Icon 及 進場圖的規範官網都有文件詳細說明，擷圖如下：

這些已經精簡到不行了，下次再整理一下像素篇。