图标尺寸
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个按钮的上方显示