设计 iOS 应用时需要知道的 5 件事
英文原文: 5 Things to Know When Designing for iOS,翻译: oschina
根据我们制作优秀的 iOS 应用的经验,我们认为设计师应该在心里的牢记适用于 iOS 的 5 件事。虽然本文关注的重点只在 iOS 应用,但大部分的意见也适用于其他移动平台。
1. 了解您的媒体
这似乎是显而易见的,设计应用而不是网站实际上需要转变思维方式。应用不是网站,不应该像他们一样设计。让我们来谈谈有关细节。
应用有完全不同与网站的用户交互模型:敲击与点击,视图与页面,按钮与链接等。我们相信,讨论应用设计语言的变化,可以帮助我们保持正确的心态。
除了不同的交互模型,应用应该有不同的方式。不要在一个视图放置太多内容;分隔不同功能到不同的视图。由于屏幕空间更受限制,这在 iPhone 上比 iPad 上更为重要。
用户使用应用与网站有完全不同的考虑。应用程序的导航层次结构往往比在网站上更窄,更深入。用户点击几次为了实现某种目标或访问某些内容,不要把一次性在屏幕上放置太多内容从而阻止这种自然的钻井式行为。
iOS 上导航有很大的不同 – 这里没有 Chrome 浏览器或后退按钮。由于 iOS 的推出,出现了许多导航方式,哪一个是最适合你的应用程序依赖于您的特定需求。去看看 Pttrns,包括很多优秀应用的界面导航方面。
最后,请记住在 iOS 设备上运行的 iOS 的应用程序。啊,是吧?但这一点是很重要。呈现半透明内容与圆角和阴影图像与动画渐变叠加的基础上可能会导致性能问题。与开发人员在界面中执行棘手的设计工作想出一个方法,而不会导致用户明显感觉滞后。
Wikipedia 上有一个 iOS 设备列表, 但是我们还是将所有运行 iOS 6 的设备列出来,希望这将有助于您在设计应用时能够提供优雅的体验与硬件兼容性上做出明智的决定。
设备 | 屏幕尺寸 | 像素 | 常见的问题 |
---|---|---|---|
iPhone 3GS | 3.5″ | 320×480 |
|
iPhone 4 | 3.5″ | 640×960 |
|
iPhone 4S | 3.5″ | 640×960 |
|
iPhone 5 | 4″ | 640×1136 |
|
iPod Touch (4th Generation) | 3.5″ | 640×960 |
|
iPod Touch (5th Generation) | 4″ | 640×1136 |
|
iPad (2nd Generation) | 9.7″ | 1024×768 |
|
iPad (3rd Generation) | 9.7″ | 2048×1536 |
|
iPad (4th Generation) | 9.7″ | 2048×1536 |
|
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. 早期涉及开发人员
我们相信开发人员在设计过程的早期参与,并继续参与后期的开发过程中,设计人员和开发人员之间的协作将制作出更好的应用。
实现任何相当复杂的设计是实现者的挑战 – 更好的解决方案让开发人员可以更早的开始思考解决这些问题。
开发者知道我们的所有设计不一定都能实现,所有让设计人员与开发人员一起工作,我们可以不用重复一些不必要的工作。
所以您知道应用程序而不是网站。设计普遍。在设备上的设计。动画是很棒的。早期让开发人员涉及让您的设计以您的方式实现。