|
The iOS Design Cheat Sheet 7 iOS7设计“小抄” http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/ 随着iOS7的发布，app设计师和开发者将需要调整他们的设计“语言”，使之更符合新的iOS“平面”设计风格。除了网格系统，图标（icon）和通用元素的外形尺寸、排版（typography）和图标设计（icongraphy）也已经被苹果在很多方面进行了更新。所以我现在需要更新一下去年随着iPad mini发布而撰写的老版《iOS设计小抄》。对于设计元素大小（的说明），我打算舍弃那种纯粹基于数值的表格，而采用一种简单的指南的形式，来帮助你开始iOS7设计之旅。同时我也会随时更新这个指南。 由于iOS7不再支持iPhone和iPod（仅4以上）的老版模型，本指南也仅涵盖目前iOS7所支持的设备。如果你在寻找关于老版本设备的设计指南，你应该参考《iOS设计小抄v2》。 分辨率和显示规范 分辨率
设备纵向横向
iPhone 5 640×1136 px 1136×640 px
iPhone 4/4S 640×960 px 960×640 px
iPhone & iPod Touch（1、2、3代） 320×480 px 480×320 px
Retina iPad（iPad 3, iPad 4） 1536×2048 px 2048×1536 px
iPad Mini 768×1024 px 1024×768 px
iPad（1代和2代） 768×1024 px 1024×768 px 显示
设备PPI色彩模式色温
iPhone 5 326 8bit RGB 暖色
iPhone 4/4S 326 8bit RGB 冷色
iPhone & iPod Touch（1、2、3代） 163 8bit RGB 暖色
Retina iPad（iPad 3, iPad 4） 264 8bit RGB 暖色
iPad Mini 163 8bit RGB 未知
iPad（1代和2代） 132 8bit RGB 暖色 应用图标 iOS7的一个最大改变就是以新的尺寸和视觉语言定义了应用图标。苹果引进了一种网格系统，其增加了主屏幕上图标的通用尺寸，并以不同的形状修饰了图标。 尺寸
设备App 图标AppStore 图标Spotlight 图标Settings 图标
iPhone 5 120×120 px 1024×1024 px 80×80 px 58×58 px
iPhone 4/4S 120×120 px 1024×1024 px 80×80 px 58×58 px
Retina iPad（iPad 3, iPad 4） 152×152 px 1024×1024 px 80×80 px 58×58 px
iPad Mini 76×76 px 512×512 px 40×40 px 29×29 px
iPad（1、2代） 76×76 px 512×512 px 40×40 px 29×29 px 圆角![]() 老式的基于半径值的圆角已经不存在了，苹果引入了一种新形状，被Michael Flarup命名为“超椭圆（superellipse）”（我觉得那么描述这个形状还差得远呢）。由于苹果没有发布这种形状的官方模板，你不得不从众多非官方的模板中选择一款，那些非官方模板则以或多或少的精确手法去复制这种形状。我迄今为止见过的最好的是App Icon Template，如果你打算设计iOS7的应用图标，它绝对会是一个非常好的起点。和往常一样，图标圆角不应该被包含在最终的输出资源中，但如果你想为图标添加需要和圆角对齐的效果（比如描边和阴影），那么你在设计过程中还是需要把圆角考虑进去。 网格系统![]() 苹果开发了一种黄金半径比例的网格系统，可以用来正确调整和对齐icon上的元素。但是，这种网格模板收到不少设计界的批评，并且似乎就连设计师（甚至苹果的设计师）都不是严格遵循这种网格系统（的规范）。（所以）如果你的图标在不遵循新网格系统的情况下能看起来更好，就不要介意打破规则这种事了。 用户界面 iOS7最大的改变就是彻底的将整个操作系统上的所有用户界面都更新成了平面设计风格。除了在UI元素上移除了几乎所有的渐变和阴影，常用设计元素的尺寸也在某些情况下有所改变。 常用设计元素尺寸
设备状态栏高度导航栏高度Tab栏高度表格宽度
iPhone 5 40 px 88 / 64 px 98 px 640 / 1136 px
iPhone 4/4S 40 px 88 / 64 px 98 px 640 / 960 px
Retina iPad（iPad 3, iPad 4） 40 px 88 px 98 px 动态
iPad Mini 20 px 44 px 49 px 动态
iPad（1、2代） 20 px 44 px 49 px 动态 状态栏 ![]() ![]()
尽管iOS 7状态栏大小和iOS 6一样，它的内容呈现方式还是发生了一些变化。你可以控制背景色来适应你app的外观设计，或者使用默认的颜色主题（白色和黑色）。在许多默认的iOS7应用中，状态栏从视觉上是和导航栏融为一体的，没有任何分隔。 导航栏 ![]() ![]()
导航栏通常包括一个标题以及基本的导航和行动执行按钮（就像是返回上一页，创建，编辑等等）。在横屏模式下，导航栏的高度常常会收缩至32pt，以允许在它下面展现更多内容。 表格视图 ![]() 现在，表格（或列表）使用了全屏宽度展示，并且不再用外框将它们隔离起来。唯一能在视觉上区分开表格视图的只有出现在表格顶部的标题（就和之前的iOS版本一样）。表格中的各个条目被一条简单的1像素高度的线分隔，其左边距离屏幕15pt，但直接靠到右边的屏幕上。每个条目都在其两边留有15pt的内边距。 图标设计（icongraphy） ![]() ![]()
苹果大量使用了没有全部填充颜色的图标，只是用1pt厚度的线条勾勒出了icon轮廓，但是“经典”的图标仍用颜色进行了填充，并广泛用于iOS7中。对于那种在标签栏（tab bar）经常使用的模式——反转激活图标的颜色，未激活图标仅显示轮廓线，则用纯色对激活图标进行填充，此时某些线条会消失，某些则会反转颜色。 排版（Typography） Helvetica Neue仍旧是iOS的默认字体，但普通文本通常是以细体字展示，而不是常规或粗体。需要突出强调的文本通常用的是中粗字体（例如，导航栏标题）。当然，仍有很多能够用来替代Helvetica Neue的字体可以用，你可以在这里找到所有字体列表。一般来说（可能是因为大量使用了细体字），大部分设计元素上的字体被增强了。按钮通常是有简单颜色的文本链接。现在，按钮通常不再被外框包围，而是通过隐喻支持其功能的表述。 默认字体大小
标题类型默认字体大小默认字体粗细
导航栏标题 34 px 中等
普通按钮 34 px 细体
表格头部 34 px 细体
表格标签 28 px 常规
页签栏(Tab Bar)图标标签文字 20 px 常规 进一步阅读&资源 本文仅为你开始进行iOS7设计提供一些基本信息。一旦你钻的更深，你可能会对更多细节感兴趣。这些文章和资源应该能帮到你。 综合
图标 UI 锦囊 其他免费资源
| 
