为iPad设计Web应用程序

是什么阻止你为iPad创建一个实用的应用程序/网站?我的答案是Objective-C编程语言，时间限制以及必须处理臭名昭著的苹果App Store。但是如果你是一个网页设计师，像我一样，你认为为iPad设计是不可能的——再想想。

不管你喜不喜欢，iPad都是一种不可思议的媒介。不可否认的是，触屏元素将对设计师处理用户交互的方式产生不可思议的影响。所以，现在就开始尝试iPad网页应用吧。

在这篇文章中，我将指导你通过我的创作过程，我开发了一个简单但有用的iPad网页应用程序：BracketSlash.com．我不认为自己是一个专业的iPad应用程序开发人员，所以如果你觉得有点担心，让我的经验对你有启发。

为什么我要为iPad创建一个网页应用程序?

我创建了一个基于网络的iPad应用程序，主要供我个人使用。我受够了App Store以及所有无法达到目的的付费应用。

我的特别项目是一个新闻聚合应用程序，它使每隔几个小时花5分钟就可以很容易地从各种来源获取最新的新闻故事。这很有帮助，因为我从事商业/金融工作，浏览一份静态报纸或浏览多个网站需要很长时间。结果比我想的要好，所以我想它可能对别人有用。

我做了一个登陆页www.bracketslash.com允许任何有iPad的人100%免费使用。再次强调，我不认为自己是一个专业人士，我真的相信任何网页/平面设计师都可以从我的经验中学习，从而创造出比你目前在App Store中找到的大多数应用更好的网页应用。

从功能性目标开始

不要只说“我要开发一款iPad应用”而不考虑你的应用对终端用户的价值。即使是iPad游戏也瞄准了特定的用户群体。理清iPad应用程序的功能目标时需要考虑的问题包括:

• 你希望你的iPad应用程序完成什么?
• 谁会使用你的iPad应用?
• 你想满足用户的什么需求?

你必须记住的一件事是，创建一个“结束所有应用程序的应用程序”是不可能的。你的应用程序不能一切来每一个人．用简单的语言思考，完美地执行你的想法;这样你会更成功。

画出来!

如果你用手画的话，很好。如果你用的是显卡，那就更好了。

如果你直接使用Photoshop，恭喜你。无论你的工作流程是什么，总是先记下你的想法。就我个人而言，我会直接使用Photoshop这样的设计软件。

我使用几何图形(如自定义形状工具)来记下我的想法，然后逐步添加细节。我的设计进化了很多次——希望你的设计也能这样。总是回头看看你的功能目标，思考最终用户将如何与你的应用进行交互。

iPad是一个高度视觉媒介所以花点时间让它变得漂亮。为iPad设计的好处在于，你不必担心跨浏览器或跨设备兼容性。如果它能在你的iPad上运行，那么它可能也能在其他人的iPad上运行。

以下是一些关于iPad的快速美学提示:

• 创建您的所有设计在768 px x 1024 pxiPad的原生分辨率
• 记住，iPad同时显示在肖像而且景观模式
• 总是注意你想要的地方滚动发生
• 不要害怕使用母语iPad GUI元素(按此查找PSD)

关于iPad分辨率的注意事项

我注意到的一件事是，iPad上的原生屏幕分辨率(768 x 1024)比电脑显示器上的分辨率要小。所以请记住，iPad的分辨率看起来在你的电脑显示器上更大。这就带来了一些尺寸问题，你很快就会发现尝试排版是一个痛苦的后方。

我的建议是保存你的模拟设计图像，并打开它们iPad照片查看器来感受一下布局和版式。这不是最优雅的解决方案，但对我很有效。

知道的限制

不要在头脑风暴的时候设定界限。也就是说，如果你有一个想法，你会在你的努力中更有成效是什么而且什么不是在为iPad开发时是可能的。我多次受挫，没有意识到其中的一些局限性。

为了您的方便，我在下面列出了一些主要的限制。

没有闪光灯

我认为这一点很明显。随着最近所有的骚动，你应该知道现在iPad不能显示Flash对象。我不一定同意这种方法，但简单的解决方法是不使用它。

你可以用它来完成类似的壮举HTML5而且CSS3．

没有鼠标光标

这意味着鼠标事件(如mouseover和hover事件)是不可能的。您可能能够找到一些解决方法，但向用户传达它们的工作方式可能很困难。

滚动条没有按照预期运行

对于内容溢出的可滚动div，不显示滚动条。帧也有高度/宽度的问题。此外，滚动需要两根手指的手势。

(我们将在本文后面更详细地讨论这个问题。)

无CSS固定定位

HTML元素的位置:固定CSS属性将不能正确显示，并令人沮丧的控制。对此有一些快速修复(稍后会详细介绍)。

用你的手指

这是有趣的部分。在你的电脑或笔记本电脑上浏览和在你的iPad上浏览的首要区别是你可以用你的手指。有一些简单但强大的解决方案可以让你的网站在iPad上得到优化。

基于设备/浏览器重定向用户

您可以在页面中添加几行JavaScript< >头标签将用户重定向到你的应用程序，如果他们用iPad访问你的网站。下面的JS代码块检查用户代理是否为iPad。如果是iPad，用户会被重定向到应用程序页面。

<脚本类型="text/javascript"> if ((navigator.userAgent.indexOf('iPad') != -1)) {document.location= " http://www.bracketslash.com/app.php ";} > < /脚本

设置视口的大小

的视窗是一个矩形区域，它决定了内容如何布局，以及在iPad上观看时文本在页面上的换行位置。你的电脑和iPad的视窗稍有不同。iPad上的Safari浏览器没有窗口、滚动条或调整大小按钮。

用户用手指浏览。大多数触摸手势都可以通过一些代码操作来控制。要设置视口的尺寸，请在您的< >头标签:

不同的样式表为不同的方向

要在不同的方向(横屏模式或竖屏模式)使用不同的样式表，只需添加以下内容媒体查询在< >头您的网页标签。

注意:这是不这是必要的组件，如果两个样式表显著不同，可能会分散用户的注意力。

用isroll控制你的触摸滚动

isroll是由Matteo Spinelli创建的一个项目，因为WebKit网页浏览器引擎(用于iPhone、iPod、iPad、Android和Palm Pre)没有提供一种固定宽度/高度元素内滚动内容的本地方式。这种不幸的情况阻止了任何web应用的页眉和/或页脚带有位置:绝对的CSS属性，以及内容的滚动中心区域。

使用isroll代码库非常容易。如果你喜欢isroll，你可能也会喜欢这些jQuery插件:jQuery刷卡而且JQTouch．

使用“添加到主屏幕”按钮

在苹果Safari浏览器中，用户可以选择将应用程序添加到他们的主屏幕上。这只是添加了一个类似于原生应用外观的图标。要自定义此图标，可以将其链接到< >头使用以下代码标记。

为了安全起见，确保你的图标是至少72 pxx72px。

< link rel = "apple-touch-icon" href = " http://www.yoursite.com/your-apple-touch-icon.png " / >

充分利用HTML5和CSS3

许多知名网站已经调整并重新设计了他们的网站，称自己为“iPad Ready”。实际上，这些网站中的大多数只是简单地调整了内容，以适应iPad的分辨率和纵横比。就我个人而言，我不明白这一点。HTML5/CSS3是未来，旨在改善每个人的网络体验。

以下是一些你可以利用这些新兴标准的简单方法:

• 使用CSS3渐变，字体阴影，圆角框和边框-这些特别有用的菜单和简单的网站设计。
• 如果你想播放视频，请使用HTML5视频播放器而不是Flash(这显然行不通)。
• 使用HTML5创建线下app，线下存储数据．
• 教程因为这些功能无处不在，我在开发iPad网页应用时就使用了它们。谷歌他们．有创意。

继续前进

不要被无关的细节所阻碍。如果你的某个设计功能或想法不符合预期，那就寻找替代解决方案。不要试图精确地坚持你的计划，以至于你看不到你的功能性目标。

如果事情没有按计划进行，找到一个有创意的替代方案，然后继续前进。我是一个非常细致的设计师，这可能是好事，也可能是坏事。我发现并不是我计划的每件事都能成功，我学会了放手，找出变通办法，并从错误中吸取教训，为我未来的iPad应用程序做准备。

传播意识

web应用的一个主要障碍是它们不像原生应用那样受欢迎。苹果应用商店没有类似的东西来帮助你获得认可——特别是如果你正在创造一些商业产品。如果你是一个无名的开发者(就像我一样，哈哈)，那么发布你的应用将会更加困难。

让尽可能多的人知道你的web应用的存在。如果它是好的，它应该会做得很好。

iPad原生应用vs iPad Web应用

App Store中的应用程序和专门为iPad创建的网站有什么区别?许多人认为网页应用是未来的趋势，并且会迅速超越原生应用;这是因为网络的开放性比封闭的平台更有吸引力。我在下面列举了一些简单的对比，来说明web应用程序可以有多么强大。

本机iPad应用程序

• 原生应用更快:使用了更多iPad的资源和功能。
• 无需搜索网页:App Store上的一站式购物。
• 用户感觉更舒适:他们知道这款应用是专门为他们的设备设计的，没有使用HTML5/CSS3。
• 更容易打开和关闭:应用程序可以在不中断或丢失数据的情况下打开/关闭。
• 更难开发的:需要了解Objective-C和苹果SDK的使用。
• 封闭的平台:很难适应其他设备，如Android平台。

iPad Web应用程序

• 新兴编码标准:HTML5、CSS3和JavaScript为网页带来了令人难以置信的客户端功能;尤其是本地/离线存储。
• 为任何浏览器定制网站:根据用户操作的设备或浏览器，在样式表之间切换或重定向页面。让你的应用变得通用是可能的。
• 容易开发:使用HTML, CSS和JavaScript来创建iPad网页应用，而不是学习新的语言。这些都是你已经拥有的技能。
• 史蒂夫·乔布斯不能审查你的网页应用:网络是一个开放的平台——这意味着你都在自己的掌控之中。无需等待App Store的批准。
• 市场小，支撑不够:Web应用程序需要数量上的优势，这意味着不仅要吸引用户，还要吸引开发人员。

相关内容

• 如何制作HTML5 iPhone应用程序
• iPhone SDK入门
• 每个网页设计师都应该知道的10个iPhone应用程序