转:IOS7设计师笔记

图标尺寸

IOS7推出后,图标尺寸规范略有调整,为了得到更加精准的显示效果,大家可以参考参考下。

下表列出了图标的标准尺寸,按照此规范zuo作图,可以使图标能在搭载IOS7的多种设备中正确显示显示。
(单位:px)

[table]
[td][tr][td]
描述
[/td][td]
iPhone 5和iPod touch的尺寸(高清晰度)
[/td][td]
大小为iPhone和iPod touch(高分辨率)
[/td][td]
iPad的尺寸为(高清晰度)
[/td][td]
大小为iPad 2和iPad迷你(标准分辨率)
[/td][/tr]
[tr][td]
应用程序图标(应用程序所需的所有)
[/td][td]
120×120
[/td][td]
120×120
[/td][td]
152×152
[/td][td]
76×76
[/td][/tr]
[tr][td]
为App Store(应用程序所需的所有应用程序图标)
[/td][td]
1024×1024
[/td][td]
1024×1024
[/td][td]
1024×1024
[/td][td]
1024×1024
[/td][/tr]
[tr][td]
启动影像(所有的应用程序所需的)
[/td][td]
640×1136
[/td][td]
640×960
[/td][td]
1536×2048(纵向)

2048×1536(横向)
[/td][td]
768×1024(纵向)

1024×768(横向)
[/td][/tr]
[tr][td]
Spotlight搜索结果图标(推荐)
[/td][td]
80×80
[/td][td]
80×80
[/td][td]
80×80
[/td][td]
40×40
[/td][/tr]
[tr][td]
设置图标(推荐)
[/td][td]
58×58
[/td][td]
58×58
[/td][td]
58×58
[/td][td]
29×29
[/td][/tr]
[tr][td]
工具栏和导航栏图标(可选)
[/td][td]
约44×44
[/td][td]
约44×44
[/td][td]
约44×44
[/td][td]
约22×22
[/td][/tr]
[tr][td]
标签栏图标(可选)
[/td][td]
约60×60(最大:96×64)
[/td][td]
约60×60(最大:96×64)
[/td][td]
约60×60(最大:96×64)
[/td][td]
约30×30(最大:48×32)
[/td][/tr]
[tr][td]
默认报刊亭盖为App Store图标(书报亭应用程序所需)
[/td][td]
至少为1024像素的最长边
[/td][td]
至少为1024像素的最长边
[/td][td]
至少为1024像素的最长边
[/td][td]
至少为1024像素的最长边
[/td][/tr]
[tr][td]
网页剪辑图标(推荐的Web应用程序和网站)
[/td][td]
120×120
[/td][td]
120×120
[/td][td]
144×144
[/td][td]
72×72
[/td][/tr]
[/table]

所有图像和图标建议使用png格式,避免使用隔行扫描的PNG图像。

配色方面不需要限制web安全色调色板。

图标设计线条画,而激活图标则增加填充,未激活状态的线条消失或者反白。如下图:

欢迎大家关注我的微博@Gaoyoungor,与你分享更多关于设计。

字体字号Helvetica Neue仍旧是iOS的默认字体,但普通文本通常是以细体字展示,而不是常规或粗体。需要突出强调的文本通常用的是中粗字体(例如,导航栏标题)。[table=98%,white]
[td][tr][td]默认字体大小[/td][td]
[/td][td]
[/td][/tr]
[tr][td]标题类型[/td][td]默认字体大小[/td][td]默认字体类型[/td][/tr]
[tr][td]
导航栏标题
[/td][td]
34 px
[/td][td]
中等
[/td][/tr]
[tr][td]
普通按钮
[/td][td]
34 px
[/td][td]
细体
[/td][/tr]
[tr][td]
表格头部
[/td][td]
34 px
[/td][td]
细体
[/td][/tr]
[tr][td]
表格标签
[/td][td]
28 px
[/td][td]
常规
[/td][/tr]
[tr][td]
页签栏文字
[/td][td]
20 px
[/td][td]
常规
[/td][/tr]
[/table]
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.尽量去特效化去拟物化,保持界面元素平滑和层次感(这就是简约设计的难点了);

  1. 在application:didFinishLaunchingWithOptions:里判断版本 6 or 7 来载入相关资源(IOS6可以和IOS7呈现不同的UI效果);

  2. 状态烂透明,其它bar都是半透明的;UIBarPositionTopAttached代表bar背景延伸到status bar,总高128px(导航栏高度高度加状态栏), UIBarPositionTop代表不延伸;

  3. Navigation Bar 默认是半透明,底部有1像素的hairline;tintColor去定义barbutton,用barTintColor去定义bar 背景。如果要用自定义的返回按钮,需要做一个MASK图像作为切换过渡用。 NaviBar的下部阴影要用自定义图像和shadowImage来定义,不要用过长的带阴影部分的图像来做阴影,因为在IOS7上,多出的像素会首先放到statusbar;

  4. Toolbar ,tintColor定义item,barTintColor定义背景,在top边有一条1像素hairline,UIToolbarPosition已经弃用了,用UIBarPosition代替;

  5. barbuttons,使用图像有2种方式UIImageRenderingModeAlwaysTemplate(默认使用),UIImageRenderingModeAlwaysOriginal(使用它来设定不是用tinting)(这表明导航栏里面的按钮时可以用图片的,只是比较纠结);

  6. activity view controller里的图标要用黑白和透明度表示,抗锯齿处理,不要用dropshadow。图标大小是70x70px,居中;

  7. Ios7 的ImageView包含tintColor特性,在UIImageRenderingModeAlwaysTemplate模式下,tintColor会应用到该图片上;

17.slider在ios7里面可以用minimumTrackTintColor,maximumTrackTintColor, andthumbTintColor分别设定最小值颜色,最大值颜色,和触摸时颜色。如果设定成nil,就使用默认;

  1. 切换按钮在ios7里面动感十足,可以用onTintColor, tintColor, andthumbTintColor设置开关和触摸样式;

  2. Alert弹出框在ios7里面强制使用默认样式,如果你需要第三个按钮,将在默认2个按钮的上方显示