案例分析:应用移植
人们会怎样使用iOS 设备
用户期待完全不同的体验
用户使用 iOS 设备的方式与使用 PC 或笔记本非常不同
尽快将用户想要的内容一目了然地呈现出来
用户经常在走动中或者嘈杂的环境中使用 iOS 设备
iOS 应用很少需要提供只有资深用户才用得到的功能
记住二八原则:通常,大多数用户(至少80%)只使用程序中很少一部分功能。只有很少用户会使用全部功能(少于20%)
Mail:MAC → iPhone
MAC 上的 Mail 通过大量窗口来实现强大的功能
容许用户方便地创建、接收、排序和存储邮件
跟踪事件
创建便签和邀请
iPhone 版 Mail 只关注核心功能
帮助用户接收、创建、发送和管理邮件
简练的外观,把用户关心的内容凸显到最前面、最中央
为不同任务设计不同的视图
介面结构符合直觉、缩放自如
可呼出的强大的编辑和管理工具
为用户的操作提供微妙且富有表现力的动画作为反馈
把核心功能用简洁诱人的介面展现出来
直观而专注的介面
每一屏只展示一类邮件体验,同一屏内用户通过上下滚屏浏览全部内容
简单可预测的导航
通过在屏幕上点击,用户可以从邮件列表视图进入邮件内容视图
每一屏上都会展示标题,告知用户所在的位置,以及一个返回按钮,方便用户回溯
简单可点击的控件
当用户浏览邮件时,回复、移动、删除等可对邮件进行的操作可通过点击屏幕底端的按钮呼出相应视图
不同操作对应不同反馈
删除邮件时出现放入垃圾桶的动画
发送邮件是出现进度提示动画
发送完毕响起独特提示音
地步状态栏上显示最后更新时间
Mail:iPhone → iPad
应用情境不同决定用户体验
iPhone 版 Mail 是为了帮助那些在排队或正走去开会的移动用户处理邮件
iPad 版 Mail 在运动战的同时能提供更丰富的体验,也鼓励更深层次的使用
有更多的屏幕空间为用户显示邮件内容
更多触摸手势操作
时刻可见但又不过分招摇的管理编辑工具
iPad 版 Mail 的用户体验是为该设备量身定做的,但它没有改变用户使用的核心功能,也没有改变某个功能的位置或是效果,iPhone 用户能够很快上手
介面优化
为 iPad 的不同手持方向优化了介面体验
Topic
Topic
增加对邮件内容的关注
iPad 版 Mail 在不同方向上都预留了主要空间用于显示邮件内容
将工具栏移动到屏幕的顶部
竖屏时邮件列表隐藏,变为通过按钮呼出
扁平化的层级结构
将所有高于邮件的层级划分到独立的介面元素
在横屏模式下表现为分栏的左半侧
在竖屏模式下表现为一个弹出框
不用进行分屏跳转:账户>邮件箱>邮件列表>邮件
极大减少了全屏切换
屏幕只有一部分在进行滚屏或跳转操作,主要的邮件内容视图不会变化
具有真实感的介面效果
当用户为删除一封邮件而标记它时,这封邮件会在右侧展示,就像一张真的纸
当勾选了更多邮件后,这些邮件会堆叠成一摞纸,摆放的略有参差
Keynote:MAC → iPad
体验变化
关注用户的内容
不阉割功能却降低了复杂度
提供简便易用的快捷方式
优化了桌面上一些熟悉的特性
通过动画提供反馈和沟通
主要改动
简明的工具栏
简洁可呼出的检视窗口,方便用户调整整体效果
很多预置的样式模板
直接控制内容,添加有意义的动画
用户可以点击选中并拖动、旋转图片
幻灯片在移动时会轻轻搏动,当把它放在新位置时周围的幻灯片会四散开来为它腾出位置
Safari:MAC → iOS
iOS 版 Safari 为 iOS 设备浏览网页提供了卓越的体验
平滑的文字
细腻的图片
通过旋转设备、轻敲以及分开手指去改变观看方式
标准的网站在 iOS 设备上可以很好显示
能检测浏览设备、没有flash 等插件的网站无论在 iPhone 还是 iPad 上看起来都很棒,但也可能会有微调
针对移动设备优化过的网站体验更好
为 iOS 设备专门设计合适的显示范围,页宽与设备宽度相匹配
避免 CSS 绝对定位,这样当用户缩放页面时内容不会错位
使用基于触摸的介面,而非基于鼠标的介面
web 程序总是将显示范围设置的比较合适,并隐藏 Safari 的介面
iPad 版 Safari 的主要优化
定制 CSS 来提供更适合移动设备的介面
MAC 版
iOS 版
与 iOS 的键盘相适应
当键盘以及表单辅助按钮可见时,Safari 在URL 地址栏下、 键盘和表单辅助按钮以上的空间里展示网页
当没有键盘和表单辅助按钮时,会多出 216 像素的垂直空间来展示网页。在横屏模式下, 只有两处不同,键盘高 162 像素,表单辅助按钮高 32 像素
新的下拉菜单控件
iPhone 版
iPad 版
使用列表展示 iPhone 网络应用中的数据
Topic
案例分析:应用移植
Added: 2011-11-25 11:07:20
From: (Joined 2011-11-21 03:47:09)
3 views |3 downloads
案例分析:应用移植