iOS7设计指南:轻松上手

苹果的新iOS我们已经上手好几周了,准备好为它而设计吗?

如果你已经有一个运行于此平台的APP,你可能打算为新iOS而设计,或者在旧版上做一些必要调整

不论哪种,你都希望为新界面而设计,确保你的APP与用户在苹果设备上的体验相吻合

那么如何做到这点?

扁平,更加扁平

苹果的iOS7秉承着扁平的设计理念,尽管它不是完全的扁平化

那么就秉着“较扁平”来规划设计你APP或移动站点

所有的那些曾经辉煌的拟物化风格图标与效果,一去不复返了。如今的潮流是单色块、多色文字和大量留白

苹果为iOS7制订的设计准则鼓励简洁设计与易用性。但是设计准则并没有着重介绍我们即将讨论的关于扁平化设计的规范。我们能在这些新设计的APP(包括苹果自身样式)中看出一些与扁平设计特征相违背的东西

比如说颜色,iOS7包含了相当一部分柔和色调和半透明效果。扁平设计通常使用明亮、高对比度的颜色

你所见到的按键和按钮也没有设计成扁平样式。例如键盘,每个字母都包含在一个带阴影效果的按钮中。这些微妙的效果是新界面的显著特征

重视字体

字体是iOS7设计的关键

大多操作都是点击文字,而非按钮(有时是图标)

苹果的默认字体是Helvetica Nenu,一种纤细简单的文字。但那不是你的唯一选择

iOS7中的字号稍微加大了,主要由于它的用途。而且文字间的层级至关重要。利用颜色和不同粗细,来保持文字布局和UI元素清晰易懂

可是从哪入手?

选好并获得字体的使用许可后,将苹果的默认字体规格说明作为设计准则着手开始

导航栏标题:Medium, 34像素按钮和表头:Light, 34像素表格标签:Regular, 28像素Tab页图标标签:Regular, 20像素

无边界

关于iOS7中文字作为按钮,我们已经讨论了不少。不过还能再深入。多数界面设计是无边界的

看看日历——日期没有网格线。看看Safari中的可点击区域——没有明确的按钮。再看看时钟和内置天气app——网格线也消失了

取而代之的是留白。但不要误解。网格也仍然存在(并且很明确),只是划分“格子”的分隔线被去除了

像这样去掉线条,创造了更开阔的空间。极简风格和额外的留白能让用户看见并感觉到按钮和网格的存在,却不会让他们拘泥于其中

所以如果用到方块、按钮、边框,并决定何时使用它们——举棋不定时,去掉就好

考虑使用视差效果

iOS7设计中的一项重要的新特征就是动画。这个系统中使用到的动画效果,比苹果以往发布的任何系统都来得复杂

好好利用它

考虑新颖且与众不同的方式来让你APP中的物体移动,并与其他物体互动。视觉差滚动(垂直方向甚至水平方向)是一个你以前从未使用过的方案

记住,苹果这次发布所兜售的理念,大多都关乎用户体验。牢记它并将其贯穿整个项目

分层创造层次感

苹果给设计师们的最后一项工具,是一种在iOS7中创建和操纵层次感的方式。早期版本中,层次感通过拟物化效果来实现。iOS7中,层次感是分层的产物

以主屏幕作为例子。打开一个文件夹。它停留在屏幕中央,并没有占据全部空间

这层也包含了半透明效果。从你设备的底部滑出菜单。你的视线能够穿透它。你屏幕上的颜色和主风格就在那里,只不过带上了半透明的模糊效果(除非你在设置中选择了“增加对比度”选项)。通知中心、Siri、甚至主界面上的通话按钮处都一样

想想如何将这些效果用在你的APP设计中。对你选择的配色方案和基调有影响吗?制作按钮、图标和提示时它能起到作用吗?

如何创造出适当的模糊效果?在Adobe Photoshop中,10像素的高斯模糊大致可行

精心处理你的图标

设计APP图标和APP本身一样重要。它同样需要遵循苹果的iOS7设计准则

外形都很相似,但它有些新的特征,包括一套为图标本身的设计制订的特殊栅格系统

Pixelresort的Michael Flarup制作了一个非常棒的图标模板,迅速创建苹果标准图标变得信手拈来

谨记

为iOS7而设计时(全新设计或重新设计),苹果也有三条准则需要牢记

新APP需要遵循Appstore的这些规则

记得为现有APP更新图标以匹配新界面。规格:iPhone版120×120像素,iPad版152像素启动图要包含状态栏区域所有设计都要支持视网膜屏和iPhone5

结论

现在我们已经看过了为iOS7设计所需要准备的东西,可以着手开始了

如果你需要更多设计准则的说明,苹果为设计师和开发者提供了过渡指南和文档,来解释他们团队的设计理念

来源:http://article.yeeyan.org/view/418335/381994

时间: 2024-10-03 20:56:02

iOS7设计指南:轻松上手的相关文章

iOS7设计指南:打造符合用户体验的苹果APP

苹果的新iOS我们已经上手好几周了,准备好为它而设计吗? 如果你已经有一个运行于此平台的APP,你可能打算为新iOS而设计,或者在旧版上做一些必要调整 不论哪种,你都希望为新界面而设计,确保你的APP与用户在苹果设备上的体验相吻合,那么如何做到这点? 扁平,更加扁平 苹果的iOS7秉承着扁平的设计理念,尽管它不是完全的扁平化 那么就秉着"较扁平"来规划设计你APP或移动站点 所有的那些曾经辉煌的拟物化风格图标与效果,一去不复返了.如今的潮流是单色块.多色文字和大量留白 苹果为iOS7制

数据库设计指南之我见

网上流传着一份关于数据库设计的文档<数据库设计指南>收集了几十个数据库设计大牛在项目中总结出来的Best Practice最佳实践,我最近也花了点时间细读并结合自身实际进行了总结,感觉自己在项目中还是有不少不足的地方,下面逐条分析下.(黑字为原文,红字为我的见解) 数据库设计指南 如果把企业的数据比做生命所必需的血液,那么数据库的设计就是应用中最重要的一部分.有关数据 库设计的材料汗牛充栋,大学学位课程里也有专门的讲述.不过,就如我们反复强调的那样,再好的 老师也比不过经验的教诲.所以我们最近

苹果发布最新设计指南,教你如何更方便地打造一款“优雅”的App

苹果发布了其最新的设计指南(Design Guides and Resources),试图帮助开发者更好地学习 iOS7 风格的应用和游戏设计.打开&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;Apple developer center就能看到,新版指南提供了大量的视频和文档,内容涵盖应用和游戏的 UI 设计.iOS7 更新概览.最佳案例.注意事项等等,关联内容之间的链接也做得比较完善. 在指南首页,我们看到苹

FreeMarker设计指南(2)

设计 FreeMarker设计指南(2) 2.数据模型 (1)基础 l         在快速入门中介绍了在模板中使用的三种基本对象类型:scalars.hashes 和sequences,其实还可以有其它更多的能力: Ø         scalars:存储单值 Ø         hashes:充当其它对象的容器,每个都关联一个唯一的查询名字 Ø         sequences:充当其它对象的容器,按次序访问 Ø         方法:通过传递的参数进行计算,以新对象返回结果 Ø    

FreeMarker设计指南(4) (完)

设计 FreeMarker设计指南(4) (完) 4.杂项 (1)用户定义指令 l         宏和变换器变量是两种不同类型的用户定义指令,它们之间的区别是宏是在模板中使用macro指令定义,而变换器是在模板外由程序定义,这里只介绍宏 l         基本用法 Ø         宏是和某个变量关联的模板片断,以便在模板中通过用户定义指令使用该变量,下面是一个例子: <#macro greet>   <font size="+2">Hello Joe!&

FreeMarker设计指南(3)

设计 FreeMarker设计指南(3) 3.模板 (1)整体结构 l         模板使用FTL(FreeMarker模板语言)编写,是下面各部分的一个组合: Ø         文本:直接输出 Ø         Interpolation:由${和},或#{和}来限定,计算值替代输出 Ø         FTL标记:FreeMarker指令,和HTML标记类似,名字前加#予以区分,不会输出 Ø         注释:由<#--和-->限定,不会输出 l         下面是以一个具

交互设计指南:信息可及

 可及,通俗的说是"可以达到",加上主语和宾语,在"交互设计"这个大的语境下,含义应该是"用户可以达到自己的操作目标",这不是和"有效性-用户的操作是有效的"重复了吗?其实,在交互设计实用指南中,"可及"是一个狭义的概念,是放在有效性下面的,具体解释为"色盲.肢体残疾等特殊人士可以完成基本操作".更扩展一下,这个特殊人群应该还包括老人儿童,文盲等对信息使用不擅长的人.       也就是

全新驱动人生5 让屌丝轻松上手装驱动

错误的操作或病毒.木马程序破坏会导致系统中重要文件受损出现运行错误甚至系统崩溃无法启动.高富帅们通常一套正版windows光盘外加轻松几个按键就能搞定系统重装.而不是电脑高手,却喜欢"鼓捣"电脑的屌丝们却不得不苦逼的面对各种重装系统后的问题:电脑花屏卡屏怎么办?!怎么摆弄电脑也没有声音怎么办?!--其实这些都是简单的驱动问题.全新上阵的驱动人生5,轻轻松松装驱动,让屌丝们轻松上手驱动安装. 新版本驱动人生5在驱动人生原有基础上,在性能和功能上有更大的飞跃.打开驱动人生5,可以很明显的感

PPT高大上设计指南

  PPT高大上设计指南           所以,在这一部分,就跟各位分享一些提升PPT颜值的经验. 1.排版 咱们不如这样来思考,面对很多文字的 PPT 页面,我们应该如何来解决? 比如咱们现在要对这个页面来进行排版: 第一步,拆解. 把一整段的文字内容,按照观点相近性原则,分成小的部分. 就拿上面的文字内容来举例,咱们可以分为 3 个部分: 现在基本上可以看出层次了,但缺少美观性,重点也不突出.那怎么办呢? 第二步,提炼小标题,突出重点. 现在,我们可以一眼看出来,关于如何学好英语的 3