openKylin论坛

 找回密码

转:IOS7设计师笔记 [复制链接]

图标尺寸
IOS7推出后,图标尺寸规范略有调整,为了得到更加精准的显示效果,大家可以参考参考下。
下表列出了图标的标准尺寸,按照此规范zuo作图,可以使图标能在搭载IOS7的多种设备中正确显示显示。
(单位:px)

描述
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

常规


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:didFinishLaunchingWithOptions:里判断版本 6 or 7 来载入相关资源(IOS6可以和IOS7呈现不同的UI效果);

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

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种方式UIImageRenderingModeAlwaysTemplate(默认使用),UIImageRenderingModeAlwaysOriginal(使用它来设定不是用tinting)(这表明导航栏里面的按钮时可以用图片的,只是比较纠结);

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

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

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

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

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

楼主
发表于 2013-10-12 09:17:09
回复

使用道具 举报

openKylin

GMT+8, 2024-5-14 21:05 , Processed in 0.035760 second(s), 17 queries , Gzip On.

Copyright ©2022 openKylin. All Rights Reserved .

ICP No. 15002470-12 Tianjin

快速回复 返回顶部 返回列表