您的位置:华清远见教育科技集团 >> 新闻动态 >> iOS资料 >> iOS_UI开发案例分析:移植到iOS  
 
iOS_UI开发案例分析:移植到iOS
分享到:

你很可能准备把一个现有的软件移植到iOS平台,而非创建全新的程序。从某些方面来说,从网页或其他平台移植应用要比从草图搭建全新应用更具挑战性。

如果由你负责这些项目,想一下人们会怎样使用iOS设备:

用户使用iOS设备的方式与使用桌上或膝上电脑非常不同,对用户体验的期待也完全不同。将软件从电脑移植到iOS设备的征途绝非一马平川。

用户经常在走动中或是在嘈杂的环境中使用iOS设备。你的工作就是创建爽快的使用体验,把用户拉进来,尽可能又快又简单地把他们想要的内容提供出来。

记住二八原则:通常,大多数用户(至少80%)只使用程序中很少一部分功能。只有很少用户会使用全部功能(少于20%)。iOS程序很少需要提供只有资深用户才用得到的功能。

从电脑上的Mail到iPhone上的Mail

Mail是Mac上的一个曝光度很高,很好用,也很受好评的程序。也是一个容许用户方便地创建、接收、排序和存储邮件,跟踪事件,创建便签和邀请的强大程序。电脑上的Mail通过大量窗口来实现如此强大的功能。

iPhone版Mail只关注电脑版Mail的核心功能,帮助用户接收、创建、发送和管理邮件。iPhone版Mail需要把功能浓缩到为如下情景量身定做的界面:

简练的外观,把用户关心的内容凸显到前面、中央。

为不同任务设计不同的视图。

信息结构符合直觉、缩放自如。

在需要时,提供强大的标记和管理工具。

为用户的动作提供微妙且富有表现力的动画作为反馈。

需要留意的是,iPhone版Mail不比电脑版的Mail好用。想反,这是专为移动设备用户重新设计的Mail。通过只关注一部分功能点,并把它们用简洁却诱人的界面展现出来,iPhone版Mail满足了移动用户核心的需求。

为了将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_UI开发之程序设计策略
·iOS_UI开发之程序设计策略
·iOS_UI开发之平台特点
·iOS_UI开发之要旨概览
·iOS开发用户界面设计原则