IOS7设计师笔记【ios7设计的尺寸】

关注

转载最新推荐文章于 2026-03-03 03:13:45 发布 479 阅读 AI 写同款· GEO 优化 ›

交互设计：iOS原型尺寸规范最近公司安排我带一下新来的交互设计师，我想给他制定一份交互设计规范。这样一来，即使新来的交互设计师没什么基础，也可以根据这一份规范，做出大致标准的原型图。因为Ui设计稿是先做iPhone6的，方便向上适配iPhone6Plus，也方便向下适配iPhone5和iPhone4的尺寸。所以，交互设计稿的尺寸，就按照iPhone6的尺寸来做。在这里我还是要推荐下我自己建的iOS开发学习群：6805652... 阅读详情

图标尺寸

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安全色调色板。

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

TabBar

欢迎大家关注我的微博@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个按钮的上方显示

原文地址：http://www.zcool.com.cn/article/ZNTMwOTI=.html

收录于