IOS7设计师笔记
9月21日，据分析公司Mixpanel调查结果显示，全球苹果移动设备中，iOS7系统使用率已超过iOS6。作为设计师，优先考虑IOS7规范的时代已经到来。
附件提供windows平台可替代字体和图标AI模板源文件
图标尺寸
IOS7推出后，图标尺寸规范略有调整，为了得到更加精准的显示效果，大家可以参考参考下。
下表列出了图标的标准尺寸，按照此规范zuo作图，可以使图标能在搭载IOS7的多种设备中正确显示显示。
描述 |
iPhone 5和iPod touch的尺寸（高清晰度） |
大小为iPhone和iPod touch（高分辨率） |
iPad的尺寸为（高清晰度） |
大小为iPad 2和iPad迷你（标准分辨率） |
|---|---|---|---|---|
应用程序图标（应用程序所需的所有） |
120×120 |
120×120 |
152×152 |
76×76 |
为App Store（应用程序所需的所有应用程序图标） |
1024×1024 |
1024×1024 |
1024×1024 |
1024×1024 |
启动影像（所有的应用程序所需的） |
640×1136 |
640×960 |
1536×2048（纵向） 2048×1536（横向） |
768×1024（纵向） 1024×768（横向） |
Spotlight搜索结果图标（推荐） |
80×80 |
80×80 |
80×80 |
40×40 |
设置图标（推荐） |
58×58 |
58×58 |
58×58 |
29×29 |
工具栏和导航栏图标（可选） |
约44×44 |
约44×44 |
约44×44 |
约22×22 |
标签栏图标（可选） |
约60×60（最大：96×64） |
约60×60（最大：96×64） |
约60×60（最大：96×64） |
约30×30（最大：48×32） |
默认报刊亭盖为App Store图标（书报亭应用程序所需） |
至少为1024像素的最长边 |
至少为1024像素的最长边 |
至少为1024像素的最长边 |
至少为1024像素的最长边 |
网页剪辑图标（推荐的Web应用程序和网站） |
120×120 |
120×120 |
144×144 |
72×72 |
所有图像和图标建议使用png格式，避免使用隔行扫描的PNG图像。
配色方面不需要限制web安全色调色板。
图标设计线条画，而激活图标则增加填充，未激活状态的线条消失或者反白。如下图：
欢迎大家关注我的微博@Gaoyoungor，与你分享更多关于设计。
字体字号
Helvetica Neue仍旧是iOS的默认字体，但普通文本通常是以细体字展示，而不是常规或粗体。需要突出强调的文本通常用的是中粗字体（例如，导航栏标题）。
默认字体大小 |
||
标题类型 |
默认字体大小 |
默认字体类型 |
导航栏标题 |
34 px |
中等 |
普通按钮 |
34 px |
细体 |
表格头部 |
34 px |
细体 |
表格标签 |
28 px |
常规 |
页签栏文字 |
20 px |
常规 |
表格中的字号就是系统系统的标准字号了，所以大家不要出现一些奇葩的字号了，附件提供给windows平台下的朋友一种可替代的字体。
以下是我在一个项目中的实践。
UI布局
·表单
·导航栏
竖屏模式
横屏模式导航栏缩短
IOS7 UI Transition Guide 笔记
1. 桌面启动应用程序图标更新到iphone:120X120px， ipad:152x152px；
2. 启动画面要添加回status bar（顶部zhuang状态栏）；
3. view controller 用full-screen layout；
4. 重新设计bar button 图标（线条化）；
5. 按钮要使用无边化（多为文字直接作为按钮）；
6. 使用相对布局，auto layout，尽量不要写死坐标和大小（是否预示着大屏iphone的到来？）；
7. 用户可自定义字号；
8. 注意底部手势的使用，IOS7将优先响应系统的控制面板（从底部上滑手势，唤出系统控制面板，软件内部谨慎使用）；
9.尽量去特效化去拟物化，保持界面元素平滑和层次感（这就是简约设计的难点了）；
10. 在application:didFinishLaunchingWithOp
11. 状态烂透明，其它bar都是半透明的；UIBarPositionTopAttached代表bar背景延伸到status bar，总高128px（导航栏高度高度加状态栏）,
12. Navigation Bar 默认是半透明，底部有1像素的hairline；tintColor去定义barbutton,用barTintColor去定义bar 背景。如果要用自定义的返回按钮，需要做一个MASK图像作为切换过渡用。 NaviBar的下部阴影要用自定义图像和shadowImage来定义，不要用过长的带阴影部分的图像来做阴影，因为在IOS7上，多出的像素会首先放到statusbar；
13. Toolbar ，tintColor定义item,barTintColor定义背景，在top边有一条1像素hairline，UIToolbarPosition已经弃用了，用UIBarPosition代替；
14. barbuttons，使用图像有2种方式UIImageRenderingModeAlwa
15. activity view controller里的图标要用黑白和透明度表示，抗锯齿处理，不要用dropshadow。图标大小是70x70px，居中；
16. Ios7 的ImageView包含tintColor特性，在UIImageRenderingModeAlwa
17.slider在ios7里面可以用minimumTrackTintColor,maximumTrackTintColor, andthumbTintColor分别设定最小值颜色，最大值颜色，和触摸时颜色。如果设定成nil,就使用默认；
18. 切换按钮在ios7里面动感十足，可以用onTintColor, tintColor, andthumbTintColor设置开关和触摸样式；
19. Alert弹出框在ios7里面强制使用默认样式，如果你需要第三个按钮，将在默认2个按钮的上方显示
