IOS7设计师笔记(原创)

王朝学院·作者佚名  2016-05-05
窄屏简体版  字體:   |    |    |  超大  

附件提供windows平台可替代字体和图标AI模板源文件

图标尺寸

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

常规

表格中的字号就是系统系统的标准字号了,所以大家不要出现一些奇葩的字号了,附件提供给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: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个按钮的上方显示

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航