为iOS 7而设计--入门要点

为iOS 7而设计--入门要点

发布于：2013-10-14 15:31阅读数：2053

在苹果发布iOS 7后，不少app针对iOS 7进行了重新设计以满足移动设备使用经验更为丰富的用户的需求。针对iOS 7进行设计有哪些方面是开发者和设计师需要注意的呢？ 考虑扁平化 针对iOS 7进行设

“ ”

阅读器

iOS 7

在苹果发布iOS 7后，不少app针对iOS 7进行了重新设计以满足移动设备使用经验更为丰富的用户的需求。针对iOS 7进行设计有哪些方面是开发者和设计师需要注意的呢？

 

考虑扁平化

针对iOS 7进行设计首先要考虑扁平化，虽然并不是完全扁平化。iOS 7剔除了拟物化的icon和效果，色彩也更加丰富。苹果针对iOS 7的设计指南推崇简单朴素以及易用的特性，但是设计指南并没有集中关注扁平化设计的规格和技术参数。在iOS 7推出后越来越多app针对iOS 7进行了优化设计，但是这些app中出现了与扁平化特性并非十分一致的一些设计。我们可以看到键和按钮也并不是完全的扁平化设计，比如键盘上每个字母按键都有一个阴影效果。

 

关注字体

字体是iOS 7设计的关键点之一。根据用途，iOS 7中的文字要略微大一些，文本中的层级也是至关重要的。充分利用颜色和粗细不同的字体从而让界面元素清晰明了，易于查看。但是从哪里开始呢？在你选择和获得了字体许可后，从苹果指南默认的字体规格说明开始。

Navigation bar title: Medium, 34 pixels

Buttons and table headers: Light, 34 pixels

Table labels: Regular, 28 pixels

Tab bar icon labels: Regular, 20 pixels

 

无边框设计

表面上看iOS 7导航栏的文本充当了旧版本中的按钮，本质上是对按钮进行了无边框设计。比如日历应用中各个日期间消除了网格线，Safari中可点击的区域已经放弃了对按钮的使用，还有苹果内置的天气应用中的网格线也已经消失了。是什么取代了应用中的网格线？其实网格一直都在，不过是苹果消除了网格上用来区分“blocks”的线。这样一来，屏幕上就有了更多开放空间，这种简约风格和附加的白色区域可以让用户明白和感受到按钮和网格线所在的地方，而不是真实地把它们绘制在设计中。

 

考虑视差效果

iOS 7的主要新功能之一是动画，并且这种动画效果要比苹果此前推出的操作系统中的动画复杂的多。考虑使用各种新的，不同的方法来使app中的对象动起来，并使这些对象之间很好地交互。考虑使用视差滚动（上下滚动或者左右滚动）。在整个设计过程中要记住，苹果此次发布的新操作系统更多关注的是用户体验。

 

使用层级构建深度

在iOS 7中，苹果给设计师的另一工具是用新方式创建和使用界面的纵深设计。此前的操作系统使用了拟物化效果来创建纵深体验，而在iOS 7中，纵深视觉效果是由布局分层产生。以主屏幕为例，打开一个文件夹，文件夹停留在屏幕中间而不是占用所有的空间。这种分层还包括半透明的效果，比如从设备屏幕底部推出的控制中心以及Siri等。如何生成模糊的效果？在Adobe Photoshop中，可以选择10 pixel的高斯模糊。

仔细你的app icon

设计icon和设计app差不多一样重要，也必须遵守苹果的iOS 7设计指南。苹果iOS 7在icon设计中引入了栅格系统。Pixelresort的Michael Flarup创建了一个非常棒的icon设计模板，可以帮你快速创建一个符合苹果要求的icon。

 

不要忘记

针对iOS 7开发的新app需要遵从以下几点：

1.记得更新现有app的icon以符合新的设计风格，iPhone上icon规格是120*120 pixels，iPad上的icon规格是152*152 pixels。

2.启动图片上包含状态栏区域。

3.所有设计应该支持Retina显示屏和iPhone 5。

 

总结

我们已经了明白针对iOS 7设计需要考虑的几件事，如果你还需要更为详细的说明或者指南，可参看苹果的“ transition guide”和“iOS Human Interface Guidelines”（ 中文  英文）。