设计 iOS 应用时需要知道的 5 件事

标签: 设计 iOS iPad iPhone | 发表时间:2013-03-22 12:51 | 作者:刘志成
出处:http://blog.jobbole.com

英文原文: 5 Things to Know When Designing for iOS,翻译: oschina

设计 iOS 应用时需要知道的 5 件事

根据我们制作优秀的 iOS 应用的经验,我们认为设计师应该在心里的牢记适用于 iOS 的 5 件事。虽然本文关注的重点只在 iOS 应用,但大部分的意见也适用于其他移动平台。

1. 了解您的媒体

这似乎是显而易见的,设计应用而不是网站实际上需要转变思维方式。应用不是网站,不应该像他们一样设计。让我们来谈谈有关细节。

应用有完全不同与网站的用户交互模型:敲击与点击,视图与页面,按钮与链接等。我们相信,讨论应用设计语言的变化,可以帮助我们保持正确的心态。

除了不同的交互模型,应用应该有不同的方式。不要在一个视图放置太多内容;分隔不同功能到不同的视图。由于屏幕空间更受限制,这在 iPhone 上比 iPad 上更为重要。

用户使用应用与网站有完全不同的考虑。应用程序的导航层次结构往往比在网站上更窄,更深入。用户点击几次为了实现某种目标或访问某些内容,不要把一次性在屏幕上放置太多内容从而阻止这种自然的钻井式行为。

iOS 上导航有很大的不同 – 这里没有 Chrome 浏览器或后退按钮。由于 iOS 的推出,出现了许多导航方式,哪一个是最适合你的应用程序依赖于您的特定需求。去看看  Pttrns,包括很多优秀应用的界面导航方面。

最后,请记住在 iOS 设备上运行的 iOS 的应用程序。啊,是吧?但这一点是很重要。呈现半透明内容与圆角和阴影图像与动画渐变叠加的基础上可能会导致性能问题。与开发人员在界面中执行棘手的设计工作想出一个方法,而不会导致用户明显感觉滞后。

Wikipedia 上有一个  iOS 设备列表, 但是我们还是将所有运行 iOS 6 的设备列出来,希望这将有助于您在设计应用时能够提供优雅的体验与硬件兼容性上做出明智的决定。

设备 屏幕尺寸 像素 常见的问题
iPhone 3GS 3.5″ 320×480
  • 非 Retina 显示屏 iPhone 惯用语
  • 无陀螺仪
  • 没有前置摄像头
iPhone 4 3.5″ 640×960
  • 只有单核心 Retina 屏幕
  • iPhones 中性能最低的
iPhone 4S 3.5″ 640×960
iPhone 5 4″ 640×1136
  • 变长的显示
iPod Touch (4th Generation) 3.5″ 640×960
  • 只有单核心 Retina 屏幕
iPod Touch (5th Generation) 4″ 640×1136
  • 变长的显示
  • 尽管和 iPhone 5 同样的屏幕但只有一半的 RAM
iPad (2nd Generation) 9.7″ 1024×768
  • 像素较低的摄像头
iPad (3rd Generation) 9.7″ 2048×1536
  • Retina 屏幕可能会导致性能问题
iPad (4th Generation) 9.7″ 2048×1536
  • 无 (Retina 屏幕可能会导致性能问题已修正)
iPad Mini 7.9″ 1024×768
  • 因为像素显示比变小,控制点更小,需要审核您的设计

2. 设计的通用性

我们本领最好的应用能通用性的工作。这意味它们能在 Retina 屏幕与非 Retina 屏幕, 加长屏幕与短屏幕,iPad, iPhone 与 iPod touches 等都 很好的工作。

这很困难,但我们有几个简单的技巧让您满足 80%。

避免奇数大小的 Retina 图形

非 Retina 内容 必须准确的为 Retina 内容的 一半大小 。 这意味者如果 Retina 内容尺寸为 101 像素,非 Retina 内容为 50.5 像素,这是不可能的。不要使用奇数大小的 Retina 图形让您和您的开发人员不要为这个问题头疼了。

让点击目标足够大

请记住用户使用你的应用与 Web 浏览器的不同?好了,他们也没有鼠标。相反,所有与您的应用互动都是用一个不太精确的仪器:手指。

为了确保用户可以方便地与您的应用程序的接口进行交互,确定他们可以点击的 操作区域至少有44点宽和高

3. 基于设备设计

iOS 设备的像素密度有一个波动范围,且对颜色的呈现各不相同。在设计 iOS 应用时,你应该考虑到这点。

为了明确你的应用的显示情况,你应该在多个设备上呈现它:视网膜和非视网膜屏、长屏或短屏、iPad或iPhone。你可以使用  LiveView 或 Skala 在你的设备上模拟显示你的 photoshop 文件。最后,不要忘记调整屏幕亮度,以保证在所有情况下,你的应用都能完美展现。

4. 界面动画

iOS 动画很简单 – 苹果已经为应用可以很容易的创建过渡动画做了很多工作。您应该充分应用它。

不幸的是,动画在 PSD 中不是很容易体现和转换到 iOS 中。最好的方式是和开发人员共同在设备上设计动画原型。总之,您可以创建一次性的应用,探索您的动画想法。这将让您得到一个准确的动画实际表现效果的感受。

在设计动画时,利用用户已经熟悉的习惯,当他们点击一个项目时新的视图从右边滑入,他们希望创建新的内容时从下往上滑动视图。在自己的自定义视图中模拟这些运动动画,不要设计一个用户不习惯的新动画。您应该学习用户习惯的操作方式,让您的应用程序对用户更熟悉,更友好。

5. 早期涉及开发人员

我们相信开发人员在设计过程的早期参与,并继续参与后期的开发过程中,设计人员和开发人员之间的协作将制作出更好的应用。

实现任何相当复杂的设计是实现者的挑战 – 更好的解决方案让开发人员可以更早的开始思考解决这些问题。

开发者知道我们的所有设计不一定都能实现,所有让设计人员与开发人员一起工作,我们可以不用重复一些不必要的工作。

所以您知道应用程序而不是网站。设计普遍。在设备上的设计。动画是很棒的。早期让开发人员涉及让您的设计以您的方式实现。

 

 

 

相关文章

设计 iOS 应用时需要知道的 5 件事,首发于 博客 - 伯乐在线

相关 [设计 ios 应用] 推荐:

送给 iOS 应用 UI 设计者:iOS 界面元素 PSD 素材

- 马克叔叔 - 果迷网
早在 8 月份我们曾给大家推荐过 Jonatan Castro 和 Joshua Geiger 的 OS X Lion 下应用程序 UI 素材文件,无论你是专职 UI 设计师,或是开发人员,或只是突发奇想,都可以使用这些制作精美的、专业水准的素材构建自己心目中的软件界面. 今天我们再给你带来 Teehan+Lax 制作的 iOS 系列的界面素材 PSD 文件,前边的是iPhone 4S 以及 iOS 5 的图形界面素材,后边的是旧版本 iOS 以及 iPhone、iPad 的素材.

30个iOS系统的App应用程序Icon设计

- emilo - 创意悠悠花园
今天分享:30个iOS系统的App应用程序Icon设计,希望其中有你喜欢的,或者可以给你带来灵感. Read the rest of 30个iOS系统的App应用程序Icon设计 (47 words). © emilo for 创意悠悠花园, 2011. Post tags: App应用程序, Icon设计, iOS, 系统.

为设计iOS应用寻找灵感的12个去处

- - Kevin Cao's Blog
专注于分享UI界面的细节,按照设计元素进行分类:. 专注iPhone的UI分享:. 这个网站有一个iPad客户端,设计很精美: http://itunes.apple.com/us/app/stylapps/id444930066. 专注于App网站设计的分享:. 最后推荐一个包括了图标、界面、App网站和设计资源的整合型:.

设计 iOS 应用时需要知道的 5 件事

- - 博客 - 伯乐在线
英文原文: 5 Things to Know When Designing for iOS,翻译: oschina. 根据我们制作优秀的 iOS 应用的经验,我们认为设计师应该在心里的牢记适用于 iOS 的 5 件事. 虽然本文关注的重点只在 iOS 应用,但大部分的意见也适用于其他移动平台. 这似乎是显而易见的,设计应用而不是网站实际上需要转变思维方式.

iOS应用架构谈 网络层设计方案

- - Casa Taloyum
iOS应用架构谈 view层的组织和调用方案. iOS应用架构谈 网络层设计方案. iOS应用架构谈 动态部署方案. iOS应用架构谈 本地持久化方案. 网络层在一个App中也是一个不可缺少的部分,工程师们在网络层能够发挥的空间也比较大. 另外,苹果对网络请求部分已经做了很好的封装,业界的AFNetworking也被广泛使用.

iOS应用架构谈(一):架构设计的方法论

- - 博客园_知识库
  之前安居客iOS app的第二版架构大部分内容是我做的,期间有总结了一些经验. 在将近一年之后,前同事zzz在微信朋友圈上发了一个问题:假如问你一个iOS or Android app的架构,你会从哪些方面来说呢.   当时看到这个问题正好在乘公车回家的路上,闲来无聊就答了一把. 在zzz在微信朋友圈上追问了几个问题之后,我觉得有必要以文章形式专门来讲一些个人见解.

知己知彼——iOS应用“爱玩”的产品设计与用户分析

- - 腾讯CDC
  前段时间完成了我个人的一个iPhone应用“爱玩”,这是一款可以提供音乐演出、讲座沙龙等各种同城活动信息的App,2011年9月底在苹果商店上线.   App下载链接: http://itunes.apple.com/zh/app/id464760869.   意料之外的是“爱玩”在10月28日至11月4日的那周登上了苹果商店的首页,排在新品榜的第三位,在随后的11月5日到11月12日那周登上热门产品榜的第十位.

为何许多 iOS 应用图标采用高光(gloss effect)设计?

- - 知乎每日精选
Gloss effect,这是 2007 年随第一代 iPhone 发布而带来的奇异审美(更多的原因其实是这个效果制作太粗糙). 首先几乎所有的 iPhone 预装应用都有这个效果,然后是 web app,即「add to home screen」添加网址链接到主屏幕的方式,所生成图标也带这个高光效果(HTML 中设置 apple-touch-icon-precomposed 可豁免).

十条帮你塑造更好的iOS应用体验的设计贴士

- - 互联网的那点事
本文来于 Computer Arts(数码艺术),全球领先的数码设计杂志,文章译者 @C7210. 文中的图标出自 Jamie Jones之手,突出人机交互、用户界面以及各类设计规范,配合文章给出的十条设计贴士,可以帮你塑造更好的iOS应用整体体验. 苹果的 人机界面设计规范给人的感觉有点像枯燥的技术手册,但它绝不是那种可有可无的产品说明书.

iOS 7第三方应用重设计的解决方案及案例参考

- - 人人都是产品经理
乍看上去,“为iOS7重设计”无非就是新的应用图标、无边框按钮、与导航栏配色相匹配的状态栏等等. 不过如果你再深入挖掘一些,便会发现很多耀眼的地方都体现着iOS7的三大设计主题,即“依从、清晰、纵深”. 对于某些应用来说,这些改变带来了设计上的极大改善,而另外一些则甚至比从前还要糟糕,不仅可用性被破坏,而且品牌识别效应也大打折扣.