案例學習:從桌面到iOS
iPad端的Keynote
桌面端的Keynote是一款強大的、靈活的創造世界級幻燈片的app。人們因Keynote很好地結合易于使用與無數細節打造的細粒度控制而喜愛它,比如動畫和文本屬性。
iPad端的Keynote把握了桌面端Keynote的精華,并通過創造如下的用戶體驗使其在iPad上賓至如歸:
專注于用戶的內容
降低復雜性而不減少功能
提供快捷方式
改編桌面端體驗上熟悉的內容
通過生動的動畫提供反饋和交流
由于通過使用iPad原生的模式來提供期待的功能,Keynonte用戶能夠很快明白如何在iPad上使用app。新用戶也能很容易地學會如何在iPad上使用Keynote,因為他們可以通過簡單、自然的方式直接操控他們的內容。
Keynote從桌面端到iPad端的轉變是基于無數從細微到深入的修改和重設計的。這里是一些最明顯的適應性改編:
一個精簡的工具欄。工具欄上只有少量的元素,但它們使用戶能夠始終獲取他們創造內容所需要的功能和工具。
一個簡化的、主次排列的檢查器來響應用戶的關注。iPad端的Keynote檢查器會自動包含人們在修改所選中的物體的時候需要的工具和屬性?;旧先藗兛梢栽跈z查器的第一頁獲取他們需要的所有內容。如果他們需要修改一些較少改變的屬性,他們可以繼續到別的檢查器界面獲取。
很多的預置風格集合。人們可以通過預置的風格來簡單地改變物體的外觀和感覺,例如圖標和表格。除了顏色方案,每種集合都包括了對應風格的屬性,比如表頭和坐標軸標識,它們被設計成與所有主題相協調。
直接操控內容,并且配有合乎意義的動畫。在iPad端的Keynote上,用戶拖動幻燈片使其到新的位置,扭轉物體使其旋轉,以及點擊圖片來選中它。直接操控的印象為iPad端的Keynote執行的響應動畫所加強。比如說,當用戶移動幻燈片時,它會輕輕地震動一下,當他們將幻燈片放置到一個新的位置時,周圍的幻燈片會像波紋一下向外擴展來給它提供空間。
iPhone端的郵件
在OS X系統中郵件是最高可見的、好用的以及受贊譽的app之一。它也是一個非常強大的創建、接收、排序、存儲郵件;追蹤行動項目和活動;創建備注和請帖的程序。桌面端的郵件使用了很多的視窗來呈現這些強大的功能。
iPhone端的郵件專注于桌面端郵件的核心功能,幫助人們接收、創建、發送和管理他們的郵件。iPhone端的郵件使用了如下為移動端體驗定制的UI來提供這些濃縮的功能:
流線型的外觀使人們的內容前置居中
為不同的任務設計不同的視圖
可以輕松縮放的直覺性的信息結構
在需要的時候提供強大的編輯和管理工具
使用精妙而有表現力的動畫來與動作交互并提供反饋
要認識到iPhone端的郵件并不是一個比桌面端郵件更好的app,而是一個重新為移動端用戶設計的郵件app。通過集中精力與桌面端的部分特性并使用愈加迷人的UI展示它們,當他們使用移動端的時候,iPhone端的郵件給予了人們郵件的核心體驗。
為了使郵件的體驗符合移動端的環境,iPhone端的郵件使用了很多關鍵的方式創新UI。
清晰的、高關注度的屏幕。每個屏幕都展示了郵件體驗的一部分:賬戶列表、郵箱列表、郵件列表、郵件視圖以及新建郵件視圖。在一個屏幕上,用戶可以滑動查看所有內容。
簡單、可預測的導航。點擊每一個屏幕,人們會從一般界面(賬戶列表)進入到特殊界面(郵件視圖)。每個屏幕都展示了一個標題來告訴人們他們在哪,以及一個返回按鈕使人們可以簡單地回到之前的步驟。
簡單、可點擊的控件會在需要的時候顯示。因為創建一封新郵件以及檢查新郵件是人們也許會在任何環境下都想要的基本功能,iPhone端的郵件使它們在很多屏幕上均可獲取。當人們查看一封郵件時,諸如回復、移動和刪除功能都是可獲取的,因為他門正在操作一封郵件。
不同的任務有不同類型的反饋。當人們刪除一封郵件時,它會有進入刪除按鈕的動畫。當人們發送一封郵件時,他們可以看到這個過程;當發送結束時,他們可以聽到一聲有特色的聲音。通過查看郵件列表工具欄的精細文本時,人們可以瞥一眼就知道他們的郵箱上一次更新是什么時候。
iOS端的Web內容
iOS端的Safari提供了iOS設備中杰出的移動Web瀏覽體驗。人們欣賞其簡明的文字、銳利的圖片以及通過旋轉設備或點擊屏幕來調整他們的界面的能力。
標準的網頁能在iOS設備上良好地顯示。特別是那些識別設備并且不使用插入式的網頁可以在iPhone和iPad上都顯示得很棒,即使需要調整也只是一點點。
除此之外,最成功的網頁有以下特性:
如果網頁的寬度需要匹配設備的寬度的話,為設備設置合適的窗口
不要使用CSS固定定位,這樣當用戶調整視圖的時候內容就不會移出屏幕
使用不依賴于點交互的基于觸摸的UI
有時候,其他的修改也會合適。比如說,網頁程序總是設置適當的窗口寬度并隱藏iOS端Safari的UI。查看Safari Web Content Guide中的Configuting the Viewport和Configuring Web Applications學習如何做這些修改。
網頁也可以使用其他方式來使桌面Web體驗適應iOS端的Safari:
協調iOS端Safari中的鍵盤。當鍵盤和格式助手可見的時候,iPhone中的Safari會在URL文本內容以下、鍵盤和格式助手以上的區域顯示你的網頁。
協調iOS端Safari中的彈出菜單控件。在桌面端的Safari中,包含大量內容的彈出菜單會像在OS X的app中一樣顯示;也就是說,菜單會打開來顯示所有的內容,如果必須的話甚至會超出窗口的邊界。而對于iOS端的Safari,彈出菜單是使用原生的元素顯示的,因而提供了一個更好的體驗。比如說,在iPhone上,彈出菜單通過一個選取器(一個用戶可選的內容組成的列表)來顯示。(查看Picker學習更多關于選取器控件的內容)。
本文翻譯自蘋果官方開發文檔