• 沒有找到結果。

案例分析:移植到 iOS

在文檔中 iOS Human Interface Guidelines (頁 24-38)

为了将 Mail 的体验迁移到移动环境中,iPhone 版 Mail 在界面上做了些创新:

直白的、高度聚焦的屏幕。每一屏展示一类邮件体验:账户列表、邮件列表、消息列 表、消息视图、书写视图。在一屏内,用户通过滚动浏览全部内容。

简单、可预测的导航。通过在屏幕上轻击,用户可以从宏观进入微观。每一屏上都会 展示标题,告知用户所在的位置,以及一个返回按钮,方便用户找回浏览足迹。

简单、可触摸的控件,一有需要时就出现。因为书写新信息以及检查新邮件可能是用 户在任何环境中都想进行的主要操作,iPhone 版 Mail 通过多点触摸屏幕来实现它。当 人们浏览信息时,回复、移动、删除等可对信息进行的操作就会出现。

从电脑版 Keynote 到 iPad 版

Keynote 是用于创建世界顶级展示的应用,它非常强大、灵活。用户非常热爱能将易用 与细节极其精致的木纹控件融为一体的 keynote。

iPad 版 Keynote 抓住了电脑版 Keynote 的核心功能,通过以下体验让 Keynote 在 ipad 上如鱼得水:

关注用户的内容

不阉割功能却降低了复杂度 提供了简便易用的快捷方式 优化了桌面上一些熟悉的特性 通过动画提供反馈和沟通

由于 Keynote 使用 iPad 规范提供了用户期待的功能,用户立刻理解如何在 iPad 上使用 它。因为可以直接很简单自然地操控内容,新的用户也能很容易学会如何在 iPad 上使 用 Keynote。

从电脑版向 iPad 版的移植基于无数事无巨细的修改和重新设计。最明显的改动有这些:

简洁的工具栏。 工具栏数的项目屈指可数。但是这给了用户获得所有创建内容所需工 具的一致通道。

听从用户召唤的简洁检视窗口。Keynote 的检视窗口自动包含与用户所选内容相关的工 具和属性调节控件。通常,用户可以在检视窗口的第一屏内完成所有对选中对象的调整。

如果要调整那些很少被改动的属性,用户可以进入检视窗口更深的层。

很多预置的样式模板。用户可以利用预置样式很方便地修改图示、表格等的外观和感 觉。除了颜色主题外,每一套预置样式还包括表格标题、勾号标记等,用以协调整套主 题的风格。

直接控制内容,添加有意义的动画。在 iPad 版 Keynote 上,用户可以拖动一张幻灯片 到新位置,扭动物体以旋转它,轻触一张图片以选中它。动画反馈加强了直接控制的印 象。例如,幻灯片在移动时会轻轻搏动,当把它放在新位置时周围的幻灯片四散开来为 它腾出位置。

从 iPhone 版 Mail 到 iPad 版

Mail 是 iPhone 的首要内置程序之一。用户喜欢它在一屏屏上简洁地组织大量信息的方 式。

iPad 版 Mail 实现类相同的核心功能。它有更多的屏幕空间为用户展示消息,有意义的 触摸动作,以及时刻可见但又不过分招摇的管理编辑工具。简洁屏幕的视觉稳定性在一 屏上呈现了用户需要的信息,尽可能地减少了环境改变。

iPhone 版 Mail 和 iPad 版 mail 的差异反映出用户使用两种设备时的用户体验差异:

iPhone 版 Mail 是为了帮助那些在排队或正走去开会的移动用户处理邮件

iPad 版 Mail 足以让用户在运动中使用,但它所能提供的丰富体验也鼓励更深层次 的使用

虽然 iPad 版 Mail 的用户体验是为该设备量身定做的,但它没有改变用户使用的核心功 能,也没有改变某个功能的位置或是效果。iPhone 版 Mail 用户很容易发现 iPad 版工 具栏上的项目以及收件箱结构,也因两者不变的本质而立刻懂得如何使用它。

为了增强移动邮件的体验,iPad 版 Mail 在这些方面优化了界面设计:

为设备的各种方向优化了支持。用户可以在四种方向中使用 iPad 应用。虽然横屏视图

(译者按:老外习惯叫风景模式)与竖屏视图(译者按:老外习惯叫肖像模式)的布局 略有差异,界面的焦点总维持在用户关注的功能和内容上。

增加对消息内容的关注。iPad 版 Mail 在各个方向上都预留了主要空间用于呈现消息。

这包括将工具栏移动到消息的顶部,以增加展示消息的垂直空间。有了这些额外的空间,

用户不必翻页就能阅读更多信息。当用户想用竖屏模式浏览信息时,他们仍然能看到当 前消息的绝大部分。

扁平化的层级。iPad 版 Mail 通过将所有高于邮件的层级划分到独立的界面元素有效地 将邮件层级扁平化了(账户>邮件箱>邮件列表>邮件)。在横屏模式下,这块区域就是分 栏的左半侧。在竖屏模式下,这个元素是一个弹出层。

极大地减少了全屏转场。因为大多数层级可以通过独立的那部分元素来浏览,用户可 以在一屏上获得大多数他想要的的信息。当用户沿层级下行时,只是独立的这部分页面 在转场, 而非整个屏幕。

具有真实感的邮件。当用户为删除一封邮件而标记它时,这封邮件会在右侧展示,就 像一张真的纸。当勾选了更多邮件后,这些邮件会堆叠成一摞纸,摆放的略有参差。

从电脑版 Safari 到 iPad 版

iOS 版 Safari 为在 iOS 设备上浏览网页提供了卓越的体验。用户钟爱平滑的文字和细 腻的图片,以及通过旋转设备、轻敲平铺以及分开手指去改变观看方式。

标准的网站在 iOS 设备上可以很好显示。能检测浏览设备、没有 flash 等插件的网站无 论在 iPhone 还是 iPad 上都看起来很棒,但也可能会稍被调整。

另外,最成功的网站应该这样:

为 iOS 设备专门设计合适的显示范围,页宽与设备宽度相匹配。

避免 CSS 绝对定位,以便当用户缩放页面时内容不会错位。

使用基于触摸的界面,而非依赖基于指针的交互。

有时,其他的修正也是恰当的。例如:web 程序总是将显示范围设置的比较合适,并隐 藏 Safari 的界面。欲知更多,且看“控制显示区域(Configuring the Viewport)”和

“调整网络程序(Configuring Web Applications)”

iOS 版 Safari 做了如下优化:

使用定制 CSS 来提供可适应的界面。不同的界面元素适合不同的环境。例如,苹果的 网站包括一个页面,展示用户可以观看的视频。当在电脑上用 Safari 浏览时,用户可 以点击上一页、下一页或者页码来查看其他片段。

而在 iPhone 上浏览时,这些控件被更易用的按钮替代,按钮上的符号与内置控件的样 式相呼应。

将 Safari 与 iOS 键盘相匹配。当键盘以及表单辅助按钮可见时,Safari 在 URL 地址栏 下、键盘和表单辅助按钮以上的空间里展示网页。

当没有键盘和表单辅助按钮时,会多出 216 像素的垂直空间来展示网页。在横屏模式下,

值有两处不同,键盘高 162 像素,表单辅助按钮高 32 像素。

设计了新的下拉菜单控件。在电脑版 Safari 上,下拉菜单的表现方式与 Mac 系统中的 应用程序一致,菜单打开,展示所有的项目,甚至在必要的时候超过窗口边缘。iOS 版 Safari,下拉菜单采用新的样式,提供更好的用户体验。例如,在 iPhone 上,下拉菜 单显示在一个拾取器里。

在 Ipad 上,下拉菜单显示在一个浮出层里。

使用列表展示 iPhone 网络应用中的数据。iOS 用户习惯了内置程序的列表,所以当在 web 程序中看到列表时,他们更有可能将 web 内容视作程序。在 iPhone 上,表单展示 在圆角矩形里,或者边贴边。每种样式都有不同的韵律。

在文檔中 iOS Human Interface Guidelines (頁 24-38)

相關文件