「設計之變」--從iPhone應用到iPad應用

在作APP的iPad版本設計時,咱們經常須要考慮:如何在延續iPhone版本設計特點和優勢同時,充分利用iPad的特性更好地進行設計。本文從iPad和iPhone的差別性入手,試圖總結這一設計過程當中須要注意的問題。app

 

1、視圖之變
屏幕尺寸的差別直接影響到用戶可見的視圖範圍和應用的信息佈局。iPhone5: 屏幕4.0英寸 分辨率1136×640; New iPad:屏幕9.7英寸, 分辨率 2048×1536框架


1.1全屏切換與視覺穩定性
因爲屏幕空間限制,iPhone上不一樣內容之間的切換一般經過全屏切換(full-screen transitions)來實現,但全屏切換會帶來視覺穩定性的下降和位置感的丟失。而iPad的屏幕尺寸和獨有的UI框架則能夠很方便地解決這一問題。ide


在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的例子。經過頁面分割和浮動窗口,用戶能夠在一個頁面內完成多封郵件或文章的操做。spa


-浮動窗口(popover)設計


 

-頁面分割(split view):常見的處理方式爲從左向右依次層級加深。在同一屏以內能夠顯示2-3個層級的內容,方便用戶在不一樣層級之間切換和查閱。例如Kayak iPad版經過視圖分割一個界面內呈現了iPhone上3個層級的內容。3d


 

1.2卡片和卷軸
卡片和卷軸是移動設備上兩種主要的信息展示形式,在iPhone上因爲頁面空間的限制,多個信息的展示通常採用卷軸的形式,上下滑動並點擊更多展示所有信息內容。在iPad上則能夠將卷軸轉換會卡片式展示,一屏以內左右滑動展示更多內容,提高交互效率。例如Ted iPad客戶端:orm


 

2、操控之變
物理尺寸的差別還引發操控方式的顯著變化。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、氛圍之變
3.1 更廣大渲染空間
咱們在設計應用時若是利用iPad的優點而對界面元素進行適度的優化,注意氛圍的渲染,每每能取得更好的效果。


例如 NBA應用court side,在iPad版中增長了渲染氣氛的球員、球場等元素。


 

3.2 擬物化界面的調整
iOS界面最大的一個特色是界面的擬物化,在由iPhone向iPad設計時須要擬物化元素的調整。例如備忘錄在iPhone中咱們可能看到的是一個小小的記事頁面,而在iPad中咱們能夠完整展示一個筆記本全貌。日曆、時間顯示、播放器、手寫板、閱讀器、名片夾的設計也是同理。


 
 
4、特性之變
除了GPS、陀螺儀等iPhone也具備的特性,iPad還有一些獨特的特性,例如 Evernote Peek巧妙地利用了iPad smart cover 功能,經過cover的開合來進行問題及答案的顯示,從而提高操做體驗。

 

結語:爲了得到更好的使用體驗,在iPhone向iPad進行設計移植時須要多從視圖、操控、氛圍、獨有特性等角度進行思考,拋磚引玉,期待看到愈來愈多的精緻又統一的iPad應用。