案例學(xué)習(xí)：從桌面到 iOS

案例學(xué)習(xí)：從桌面到 iOS

iPad 版 Keynote 應(yīng)用

桌面版的 Keynote 應(yīng)用是一個十分強大而又靈活的應(yīng)用，可以創(chuàng)建非常優(yōu)秀的幻燈片。人們喜愛 Keynote 將簡單易用與細(xì)粒度的操作結(jié)合進而控制無數(shù)精確細(xì)節(jié)的方式，如動畫和文本屬性等。

iPad 版的 Keynote 提取了桌面版 Keynote 的核心要素，并通過創(chuàng)造以下的用戶體驗使它在 iPad 上更舒適：

• 專注于用戶輸入的內(nèi)容
• 通過削減功能降低系統(tǒng)的復(fù)雜度
• 提供有用而又令人愉悅的快捷操作
• 延續(xù)桌面版本的體驗
• 利用動人的動畫提供良好的反饋與交流

Keynote 用戶能很快理解如何使用 iPad 版，是因為它使用了 iPad 原生的范例，符合了用戶對功能上的預(yù)期。新用戶可以用簡單、自然的方式直接操控內(nèi)容，所以可以很容易學(xué)會如何使用 iPad 版的 Keynote.

Keynote 從桌面版向 iPad 版的轉(zhuǎn)變是基于從細(xì)節(jié)到整體的大量修改和重新設(shè)計的。以下是一些明顯的修改：

流線型的工具欄。工具欄中只有少數(shù)的元素，但是它們是用戶在創(chuàng)建內(nèi)容時所需的所有功能和工具的統(tǒng)一入口。

簡化并優(yōu)先響應(yīng)用戶焦點的檢查器。對于用戶所選的需要修改的對象，iPad 版的 Keynote 能自動控制其工具和屬性。(譯者注：特別是根據(jù)當(dāng)前的操作對象而有限選擇某些工具。)通常，人們可以在第一檢查器視圖中完成他們需要的所有修改操作。如果他們需要修改那些不常用的屬性，他們可以下拉另一個檢查器視圖來進行。

豐富的預(yù)設(shè)樣式集。人們可以利用預(yù)設(shè)的樣式很簡單地改變對象(如表格或圖表)的外觀或者感覺。除了顏色之外，每個集中，例如表格的標(biāo)題和軸區(qū)分標(biāo)識等的預(yù)設(shè)屬性都被設(shè)計得與整體的主題和諧一致。

直接操作內(nèi)容，豐富有意義的動畫。在 iPad 版的 Keynote 中，用戶可以拖動滑塊到一個新的位置，可以扭動旋轉(zhuǎn)一個對象，也可以輕擊圖片來選中它。iPad 版 Keynote 的響應(yīng)動畫進一步加強了這種可直接操作的印象。例如，用戶在移動某個滑塊時它通常會暫停，而當(dāng)它被放置在一個新的位置時，環(huán)繞在周圍的滑塊將會向外擴散給它留出空間。

iPhone 版郵件應(yīng)用

郵件應(yīng)用是 OS X 中一款好用而又廣受好評的常見應(yīng)用。它也是一個很強大的程序，可以允許用戶撰寫、接收、分類和存儲郵件，追蹤行動和事件，也可以編寫備忘錄和邀請等。桌面版的郵件應(yīng)用通過一系列的窗口提供了這些強大的功能。

iPhone 版的郵件專注于桌面版郵件的核心功能，幫助人們接收、撰寫、發(fā)送和組織他們的信息。為了塑造移動 iPhone 版的郵件應(yīng)用，將這些功能濃縮在為其量身定制的界面之中，做了如下的工作：

• 將人們的內(nèi)容前置和居中的合理化呈現(xiàn)
• 專為處理不同任務(wù)而設(shè)計的不同視圖
• 易于瀏覽并符合認(rèn)知的信息結(jié)構(gòu)
• 適時提供強大的編輯和組織性工具
• 用微妙且動人的動畫來傳達動作和提供反饋

必須明白的是，相對于桌面版的郵件應(yīng)用來說，iPhone 版的郵件應(yīng)用不是(注：或者說并不需要是)一個更好的應(yīng)用，而是為移動端用戶重新設(shè)計的郵件應(yīng)用。iPhone 版的郵件應(yīng)用專注于桌面版的功能子集并將它們呈現(xiàn)在一個吸引人的精簡界面之中，據(jù)此為移動端的用戶提供了核心的郵件體驗。

為了使郵件應(yīng)用的體驗?zāi)苓m應(yīng)移動場景，iPhone 版的郵件應(yīng)用在幾個關(guān)鍵的方面革新了用戶界面。

直接、高度專注的頁面。每個頁面顯示了郵件應(yīng)用體驗的一個方面：賬戶列表、郵箱列表、消息列表、消息查看和編輯視圖。用戶可以在一個屏幕內(nèi)滑動查看完整的內(nèi)容。

簡單、可預(yù)期的導(dǎo)航。通過每屏的一次點擊，用戶可以逐層展開綜合內(nèi)容(賬戶列表)進入具體頁面(一封消息)。每個頁面會顯示一個標(biāo)題用以指示用戶所在的位置，以及一個返回按鈕用以更容易地回溯到他們之前的步驟。

需要時即可獲取的、簡單的點擊性控件。基本上在任何場景之下，編寫郵件和查閱新郵件都是人們首要希望進行的操作，因此 iPhone 版的郵件應(yīng)用保證了這兩個功能在多個頁面中都可以便利地進行。當(dāng)用戶查看一封消息時，就會顯示諸如回復(fù)、移動和刪除等對消息的操作。

針對不同任務(wù)的不同類型的反饋。當(dāng)人們刪除一封消息時，它會動態(tài)地進入垃圾桶圖標(biāo)中。當(dāng)人們發(fā)送一封消息時，可以看到它的發(fā)送過程；而當(dāng)發(fā)送結(jié)束時，人們可以聽到一個特別的聲音提示。通過消息列表頁面工具欄的副標(biāo)題，用戶通過簡單一瞥就可以查看郵箱上次更新的時間。

iOS 系統(tǒng)內(nèi)的網(wǎng)頁內(nèi)容

iOS 版的 Safari 應(yīng)用在 iOS 設(shè)備上提供了出眾的移動網(wǎng)頁瀏覽體驗。人們喜歡閱讀清晰的文字和圖片，也希望能通過旋轉(zhuǎn)設(shè)備或者捏合和點擊屏幕來調(diào)整視圖。

基于標(biāo)準(zhǔn)建立的網(wǎng)站可以在 iOS 設(shè)備上顯示得很好。特別是那些能偵測設(shè)備并不需要插件的網(wǎng)站可以同時在 iPhone 和 iPad 上都表現(xiàn)得很好，兩者之間不會需要太多的修改，即使有也很小。

除此之外，成功的網(wǎng)站應(yīng)具備以下的特性：

• 如果頁面寬度需要匹配設(shè)備寬度，可以設(shè)置合適的視窗(viewport)來適應(yīng)設(shè)備
• 避免 CSS 中固定的定位，以便當(dāng)用戶縮放或拖動頁面時內(nèi)容無法被移出屏幕
• 擁有一套基于觸控操作的用戶界面，而不是依賴基于傳統(tǒng)點擊操作的交互 有時候，額外的一些修改可以(使頁面)更合理。例如，在 iOS 系統(tǒng)中，很多網(wǎng)頁應(yīng)用會設(shè)置合適的視窗(viewport)寬度并通常隱藏 Safari 的 UI。如欲了解如何進行這些修改，參見 Safari Web Content Guide 章節(jié)中的 Configuring the Viewport 和 Configuring Web Applications.

網(wǎng)站也可以通過其他的方法適配桌面網(wǎng)頁到 iOS 端的 Safari 瀏覽器中：

使鍵盤適應(yīng) iOS 端的 Safari. 當(dāng)鍵盤和格式輔助信息出現(xiàn)時，iPhone 上的 Safari 應(yīng)用會將你的網(wǎng)頁顯示在 URL 地址下方和鍵盤與格式輔助信息上方。

使彈出式菜單適應(yīng)iOS端的Safari.在桌面版的 Safari 應(yīng)用中，彈出式菜單會包含很多選項，就如在其他 OS X 應(yīng)用中一樣。在必要的情況下，菜單展開后可以超出應(yīng)用窗口的邊界以顯示其中的所有選項。在 iOS 版的 Safari 應(yīng)用中，彈出式菜單由原生的元素所呈現(xiàn)，這樣能提供更好的用戶體驗。例如，在 iPhone 上，彈出式菜單會出現(xiàn)在選擇器(picker)當(dāng)中，選擇器里會一個用戶可選擇的選項列表。(欲了解更多選擇器控件的內(nèi)容，可以參見Picker.)