您现在的位置: 万盛学电脑网 >> 程序编程 >> 网络编程 >> 安卓开发 >> 正文

设计师应该了解的iOS应用开发基础知识

作者:佚名    责任编辑:admin    更新时间:    2015-10-21 14:41:17

本文的目的就是帮助各位设计师在最短的时间内,以实战的方式探索iOS应用开发基础知识。希望文章内容对大家有所帮助。

作为一名交互或视觉设计师,你希望顺应当前大环境的发展趋势,向移动领域拓展自己的视野和能力,于是决定挽起袖子学习iOS应用开发。兴奋之余,你开始做一些初步的研究,但是很快发现,除非自己有足够丰富的编程经验,否则要实现目标还真不是件易事。

确实是这样。苹果提供的开发文档主要是面向技术人员的,市面上多数iOS开发书籍都会一上来就问你是否掌握了足够的Objective-C知识,而网上各种教程的质量又参差不齐,其中有不少还是面向着很旧版本的iOS系统及开发工具的。

本文的目的就是帮助各位设计师在最短的时间内,以实战的方式探索iOS应用开发工具及相关的基础知识。我们将一同了解应用开发流程中的一些重要环节,包括理论讲解及方法演示,即使你没什么编程经验也没问题。

我们的实战案例是一款非常简单的、用来展示设计作品的应用,如下图所示:

iOS应用开发基础知识

本地(原生)开发方式

所谓“本地”,即是指通过苹果原生的开发工具(SDK)及Objective-C语言开发iPhone和iPad应用的方式。在我们对这套方法进行探索之前,最好稍微花点时间了解一下还有哪些替代方案,以及我们之所以选择原生开发方式的原因。

也许很多人已经听说过Web App及“混合型应用”这样的说法,这些就是所谓的“替代方案”。我们确实可以使用基于HTML5、CSS、JavaScript的Web前端开发技术打造应用,这其中最为常见的解决方案包括Titanium Mobile、PhoneGap、jQuery Mobile以及Sencha Touch等框架。通过这种方式开发的应用通常具有很好的跨平台特性。

不过,通过这种非原生方式开发的应用有着明显的弊端。基于浏览器(Web App)或“原生应用壳”(混合型应用)的运作方式使它们的效率无法与本地应用媲美,而且对硬件功能的访问及利用能力也是非常有限的。此外,代码框架本身 也是需要学习的,它们有着各自不同的使用方式,在框架之外还有各种扩展库需要摸索。另外,框架本身的质量和成熟程度也是必须考虑的因素。

还有其他一些第三方开发方案可以考虑,例如Cocos 2D for iPhone和PugPig。这类方案允许你将框架文件与Objective-C对象建立关联,以达到特定的目标,例如创建游戏或杂志类应用等。要使用这类技术,你最好也要对苹果本地开发工具包具有基本程度的了解。

准备工作

正式起步前的准备工作包括两方面:

硬件:一台运行着最新或新近版本OS X系统的Mac机,包括MacBook(Pro/Air)、Mac mini、iMac或是Mac Pro均可。

软件:苹果的Xcode应用。

Xcode可以从Mac应用商店(Mac App Store)或是苹果的开发者站点中免费下载到,大约1.5GB的样子。

iOS应用开发基础知识

图片资源

在等待Xcode下载完成的过程中,我们可以同步开始图片方面的工作。

由于要为普通屏幕(320×480)和Retina屏幕(640×960)各自准备一套图像资源(最新的iPhone5规格为640×1136), 我们应该在Photoshop中尽量多的使用矢量图形(vector shape)、图层样式(layer style)以及智能对象(smart object)等技术,以确保图像的无损缩放。比较合理的流程是从Retina版本入手进行构建,然后等比缩放到普通版本的规格。在缩放过程中,一些元素 的细节有可能发生变形,记得做好手动调整。

另外,我们还可以在网上找到很多原生风格的iPhone界面PSD模板,其中比较著名的一款是来自Teehan和Lax的iPhone 4 GUI PSD。如果要打造的应用在界面方面以iOS原生风格为主,那么这类模板可以帮助我们节省掉很多时间。即使你更倾向于定制化的用户界面,这些模板同样可以在控件规格、布局规则等方面提供精确的参考。(相关阅读:先了解规则,再寻求创新 - 关于iOS应用界面自定义)

在Photoshop或是你更习惯的图像编辑工具中创建一个新文档,规格如下:

尺寸:640×960(pixels)

DPI:72

色彩模式:RGB

由于本文的焦点主要将集中在开发的基础知识上,所以在视觉设计方面不做深入探讨。更多关于iOS界面设计技术及流程方面的信息,可以参考Marc Edwards的Designing for iPhone 4 Retina Display一文。

关于图片导出的小贴士

虽然你可以在应用中使用多种格式的图片,不过鉴于alpha通道及无损压缩等方面的考虑,我们最为推荐的仍是PNG格式。

多数情况下,要将按钮导出为不包含文案的背景图片,以便更加灵活的在开发环境中调整文字属性,或是对多语种进行支持。

对于按钮的背景图片,要确保实际按钮的部分(不包括阴影或外发光等效果的区域)处于背景图片的正中,因为我们在Xcode的Interface Builder当中很难对背景图片及前景文字之间的位置关系进行精密的调整。很多时候,我们需要在制作背景图片的过程中,在按钮的另外一侧添加一块空白的 区域,以弥补阴影效果所占据的空间,确保按钮自身处于正中央。

在设计方案允许的情况下,尽可能将那些在视觉上叠加在一起的元素直接保存在一张背景图片当中,而不要留到开发环节里再进行层叠处理,否则成本将会变 的很高。另外,这样做也有助于减少资源文件的数量,提高应用运行的效率,减少内存占用。只有那些需要对用户行为进行交互响应的界面元素需要独立的背景图片 或是动画效果。

在所有适用于Retina屏的图片文件名中增加特殊的后缀“@2x”作为标示,使系统能够进行识别:

image.png:适用于普通屏幕。

image@2x.png:适用于Retina屏幕。

可以尝试使用SuperSlicr这样的自动化批处理脚本对PSD中的UI元素进行格式化及导出。

所有的资源文件都会保存在app包(app bundle)的同一个路径当中,所以文件名不能有重复的情况。

Photoshop不大擅长对PNG图片进行压缩。可以试着使用imageOptim这样的工具减小图片尺寸,然后再导入到Xcode当中。另外,Xcode本身也会对导入过来的图片进行一定程度的压缩,不过有时反而会增加图片的尺寸。

Xcode概览

Xcode已经安装好了?

接下来我们去下载一套用于本次案例学习的模板文件,其中包括一些PSD、PNG资源,还有一些用来起步的代码文件。进入里面的Begin Here文件夹,找到Portfolio.xcodeproj文件,双击打开。

文件加载成功之后,点击左侧导航栏(Navigator)中的项目(Portfolio,1 target,iOS SDK),这时我们就可以在编辑区中看到这个项目的概况信息了,如下图所示。关于这些概况信息的用处,我们稍后解释。

iOS应用开发基础知识

点击左侧导航栏当中项目名称旁边的箭头,我们可以看到一个资源列表,里面包含了当前项目所涉及到的所有资源文件,例如代码和图片等。我们把注意力放在Portfolio路径当中,其中有三个类型的文件:

.h文件:头文件(header,也可称为interface文件)。

.m文件:消息文件(message,也可称为implementation文件)。

.xib文件:在Interface Builder中进行界面可视化编辑的XML文件,出于历史原因,通常也被称为NIB文件。

中间编辑区(Editor)所呈现的内容会根据当前正在执行的任务而发生变化。当我们像之前那样点击了导航栏中的项目名称时,这里展示的就是目标概 况(Target Summary),其中包括当前应用的一些基本信息,例如设备类型、iOS版本、屏幕定向方案等等。此外,应用的图标及加载图片也是在这里进行设置的;我 们将会在后文中进行演示。

在导航栏中单击Portfolio路径中的AppDelegate.m文件,编辑区就会相应的进入代码编辑状态。

接下来单击Portfolio路径中的MainWindow.xib文件,这时编辑区所呈现的就是用于编辑用户界面的Interface Builder,如下图所示。我们通常会在这里对应用界面做最基本的构建。

右侧的检查器(Inspector)当中共有6组工具,其中后面4组是开发工作当中最常用 的,从右到左依次为连接检查器(Connection Inspector)、规格检查器(Size Inspector)、属性检查器(Attributes Inspector)、识别检查器(Identity Inspector)。

iOS应用开发基础知识

另外一个最常用的操作莫过于Xcode左上角的“运行(Run)”按钮了。这个操作会将项目代码编译成为应用,并在iOS设备模拟器中运行,以便我们直接查看程序的工作情况,而不必每次都部署到实际设备中。

不妨现在就点击“运行”按钮或使用快捷键Command+R,来看看我们的模板项目打包成应用之后的