“设计之变”--从iPhone应用到iPad应用
在做APP的iPad版本设计时,我们常常需要考虑:如何在延续iPhone版本设计特色和优点同时,充分利用iPad的特性更好地进行设计。本文从iPad和iPhone的差异性入手,试图总结这一设计过程中需要注意的问题。
一、视图之变
屏幕尺寸的差异直接影响到用户可见的视图范围和应用的信息布局。iPhone5: 屏幕4.0英寸 分辨率1136×640; New iPad:屏幕9.7英寸, 分辨率 2048×1536
1.1全屏切换与视觉稳定性
由于屏幕空间限制,iPhone上不同内容之间的切换通常通过全屏切换(full-screen transitions)来实现,但全屏切换会带来视觉稳定性的降低和位置感的丢失。而iPad的屏幕尺寸和独有的UI框架则可以很方便地解决这一问题。
在iPad应用设计时要善用浮动窗口(popover)、页面分割(split view)等UI元素。他们能能减少全屏切换,方便用户在主要界面中快捷地完成任务。
在苹果设计指南中也特别提到:“When you perform fewer full-screen transitions, your application has greater visual stability, which helps people keep track of where they are in their task.”(摘自iOS人机交互指南)
最经典的案例莫过于系统日历、备忘录、Evernote和Mobile RSSS的例子。通过页面分割和浮动窗口,用户可以在一个页面内完成多封邮件或文章的操作。
-浮动窗口(popover)

-页面分割(split view):常见的处理方式为从左向右依次层级加深。在同一屏之内可以显示2-3个层级的内容,方便用户在不同层级之间切换和查阅。例如Kayak iPad版通过视图分割一个界面内呈现了iPhone上3个层级的内容。

1.2卡片和卷轴
卡片和卷轴是移动设备上两种主要的信息展现形式,在iPhone上由于页面空间的限制,多个信息的展现一般采用卷轴的形式,上下滑动并点击更多展现全部信息内容。在iPad上则可以将卷轴转换会卡片式展现,一屏之内左右滑动展现更多内容,提升交互效率。例如Ted iPad客户端:

二、操控之变
物理尺寸的差异还引起操控方式的显著变化。Phone5 : 外观尺寸123.8×58.6×7.6mm,112g; iPad :外观尺寸241.2×185.7×9.4mm, 652g
2.1单人操作
-把持方式
iPhone: UX matters 报告称,人们基本上以三种方式持握手机:1)49%的人会单手持握,15%的人会双手持握,还有36%的人会“抱握”,即双手握住手机,但仅用一只手去触摸屏幕或键盘;2)在单手持握手机的人当中,67%的会用右手大拇指触摸屏幕,33%的会用左手大拇指触摸屏幕。
iPad:双手操作或静置为主。根据尼尔森的调研,半数以上用户并非在动态环境中使用iPad,常用操作姿势主要有以下四种:

百度iPad输入法在延续用户iPhone使用习惯基础上结合iPad特性进行了创新:充分利用左右双手协助进行操作。

iPhone:桌面只有竖屏模式,用户默认会以竖屏为主。实际产品中,除了视频、游戏和一些特殊的应用外,竖屏基本能满足需求。
iPad:桌面有横竖屏两种模式,横竖屏切换频繁。在iPad应用中,设计师通常需要考虑两种屏幕定向方式以及对应的界面设计方案。例如Path的竖屏采用了timeline形式,而横屏则采用了以天为单位的图片流形式。两种设计互为补充,相得益彰。

-手势
用户使用特定的手指运动,称之为手势。iPhone:点选(Tap)\ Drag(拖曳)\Flick(轻拂)\ swipe (快速滑动)\double Tap(双击)\ pinch open (双指放大)\pinch close(双指收缩)\touch and hold(长按)\ 摇动(shake)
iPad:由于尺寸和重量的关系,需要考虑适用最适合的手势,例如shake的手势避免使用。
2.2考虑多手或多人操作
iPad的屏幕特性更适合多手或多人操作,许多在iPhone 上施展不开的游戏界面在iPad上都可以实现。在设计iPad应用时可以适当多手或多人的操作模式,提升操作体验。

三、氛围之变
3.1 更广大渲染空间
我们在设计应用时如果利用iPad的优势而对界面元素进行适度的优化,注意氛围的渲染,往往能取得更好的效果。
例如 NBA应用court side,在iPad版中增加了渲染气氛的球员、球场等元素。

3.2 拟物化界面的调整
iOS界面最大的一个特点是界面的拟物化,在由iPhone向iPad设计时需要拟物化元素的调整。例如备忘录在iPhone中我们可能看到的是一个小小的记事页面,而在iPad中我们可以完整展现一个笔记本全貌。日历、时间显示、播放器、手写板、阅读器、名片夹的设计也是同理。

除了GPS、陀螺仪等iPhone也具有的特性,iPad还有一些独特的特性,例如 Evernote Peek巧妙地利用了iPad smart cover 功能,通过cover的开合来进行问题及答案的显示,从而提升操作体验。

结语:
为了获得更好的使用体验,在iPhone向iPad进行设计移植时需要多从视图、操控、氛围、独有特性等角度进行思考,抛砖引玉,期待看到越来越多的精致又统一的iPad应用。
“设计之变”--从iPhone应用到iPad应用的更多相关文章
- [转]在cocos2d-x中让一个项目适配iphone、iphone retina、ipad、ipad retina四种分辨率
http://cankeyyin.blog.163.com/blog/static/12336178320124149391202/ 原理:将iphone的hd图片给ipad用,即: 使用原iphon ...
- iOS 8 界面设计 PSD 模板(iPhone 6),免费下载
在 iOS 8 发布不久,Teehan & Lax 就发布了 iOS 8(iPhone6)用户界面的 PSD 模板.该网站分享众多 PSD 模板素材,这些精美的 PSD 界面模板在制作界面原型 ...
- RadioStream应用源码完整版(iphone版和ipad版)
RadioStream应用源码完整版(iphone版和ipad版),这个项目是从那个ios教程网分析过了的,也是一个不错的国外音乐应用的,支持iphone版和ipad版. <ignore_js_ ...
- iPhone 移植到 iPad:
来源:http://www.wapera.cn/ipadkaifa/71354.html iPhone移植到iPad: 方法一修改设备目标设置(普通模式:一套代码及XIB界面文件,代码分if和else ...
- [转]Apple iPod, iPhone (2g, 3g), iPad Dock connector pinout
Pin Signal Description Apple pin numbering* 1 GND Ground (-), internally connected with Pin 2 on iPo ...
- iphone程序适配ipad可以用下面的宏进行尺寸改写
//判断是否为iPad #define ISIPAD [[[UIDevice currentDevice].model substringToIndex:4] isEqualToString:@&qu ...
- iPhone / iPad UI界面设计与图标设计的尺寸设计规范+安卓+网页
①iPhone的设计尺寸 iPhone界面尺寸: 设备 分辨率 状态栏高度 导航栏高度 标签栏(工具栏)高度 iPhone6 plus设计版 1242 × 2208 60px 132px 146px ...
- 精美的 ( Android, iPhone, iPad ) 手机界面设计素材和线框图设计工具
在制作界面原型的时候,如果有现成的界面基础元素可以使用的话,设计师就可以非常快速的完成原型的制作,能够节省大量的时间和精力.在这篇文章, 我向大家分享45套非常有用的 UI 和 Wireframe 套 ...
- 为iPhone 6设计自适应布局
Apple从iOS 6加入了Auto Layout后开始就比较委婉的开始鼓励.建议开发者使用自适应布局,但是到目前为止,我感觉大多数开发者一直在回避这个问题,不管是不是由于历史原因造成的,至少他们在心 ...
随机推荐
- 010editor 破解 扩展
1. 注册机注册,注册机搜一下吧 (破解算法各版本通用) 2. 绕过网络验证,每次关闭010editor时都会网络验证,并将验证结果写道本地,所以: HKEY_CURRENT_USER\Softwar ...
- setValue和setObject的区别
在NSMutableDictionary的方法中有setValue forKey与setObject forKey,它们都可以用来设置某一个key值对应的value 1,setValue: forKe ...
- EasyUI中Treegrid节点的删除
// 删除function removes() { var rows = ruletreegrid.treegrid('getSelections'); if (rows &&am ...
- TCP协议学习记录 (二) Ping程序
简单的实现了一个ping程序,没有做icmp差错报文的检查. 支持自定义字节数,支持发包个数 #pragma pack(4) #define ECHO_REQUEST 8 #define DATASI ...
- yarn container启动失败
在yarn资源管理的集群上运行spark程序,无法读取的数据多与少,都会报这个错误,但是其他程序在集群上能够正常运行. 16/11/14 00:13:44 WARN cluster.YarnSched ...
- keepalived高可用
keepalived介绍 Keepalived是一个基于vrrp协议的高可用方案,vrrp协议的软件实现,原生设计的目的为了高可用ipvs服务. 1. vrrp协议 VRRP是一种容错协议,它通过把几 ...
- jQuery事件笔记
bind(eventType[,data],hanlder):eventType表示要创建的处理器指定事件类型的名称.可以使用空格分隔的列表指定多个事件类型.data(对象)调用者提供的数据,用来附加 ...
- PHP正则表达式 /i, /is, /s, /isU等
PHP正则表达式 /i, /is, /s, /isU等 都是些什么东西呢? i 匹配大小写 s 模式中的圆点元字符(.)匹配所有的字符,包括换行符 x 模式中的空白字符除了被转义的或在字符类中的以外完 ...
- Sql Server 行转列
--摘自百度 PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PIVOT(聚合函数(列) FOR 列 in (… ...
- js处理匿名函数
首先js 有DOM0 和DOM2级事件 DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序,既可以在元素中直接分配一个事件处理程序 一个元素可以绑定多个事件 DOM0: <div i ...