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

iPad 版 Keynote 應(yīng)用

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

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

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

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

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

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

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

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

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

iPhone 版郵件應(yīng)用

郵件應(yīng)用是 OS X 中一款好用而又廣受好評(píng)的常見(jiàn)應(yīng)用。它也是一個(gè)很強(qiáng)大的程序，可以允許用戶撰寫(xiě)、接收、分類(lèi)和存儲(chǔ)郵件，追蹤行動(dòng)和事件，也可以編寫(xiě)備忘錄和邀請(qǐng)等。桌面版的郵件應(yīng)用通過(guò)一系列的窗口提供了這些強(qiáng)大的功能。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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