鍍金池/ 教程/ iOS/ 案例學(xué)習(xí):從桌面到 iOS
錢包
iCloud
控件
適應(yīng)性和布局
編輯菜單(Edit Menu)
從概念到產(chǎn)品
啟動與停止
3D 觸摸
VoiceOver
Live Photos
HomeKit
臨時視圖
游戲中心(Game Center)
快速查看(Quick Look)
交互性與反饋
與 iOS 的整合
鍵盤和輸入頁面(Keyboards and Input Views)
iAd 富媒體廣告(iAd Rich Media Ads)
術(shù)語和措辭
HealthKit
案例學(xué)習(xí):從桌面到 iOS
導(dǎo)航
撤銷與重做(Undo and Redo)
研究型應(yīng)用程序
社交媒體
蘋果的移動支付平臺
圖標(biāo)和圖形
iOS 應(yīng)用解析
為 iOS 而設(shè)計
路線選擇(Routing)
設(shè)計原則
應(yīng)用內(nèi)購買服務(wù)(In-App Purchase)
品牌推廣
動畫
聲音(Sound)
多任務(wù)處理
內(nèi)容視圖
應(yīng)用擴(kuò)展
通知
訪問用戶數(shù)據(jù)(Accessing User Data)
無線打印 (AirPrint)
模態(tài)情境
顏色與字體

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

iPad 版 Keynote 應(yīng)用

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

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/49.jpg" alt="" />

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

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

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

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

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

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/50.jpg" alt="" />

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

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/51.jpg" alt="" />

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

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/52.jpg" alt="" />

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

iPhone 版郵件應(yīng)用

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

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/13.jpg" alt="" />

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

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

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

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

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

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/53.jpg" alt="" />

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

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

針對不同任務(wù)的不同類型的反饋。當(dāng)人們刪除一封消息時,它會動態(tài)地進(jìn)入垃圾桶圖標(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)頁瀏覽體驗(yàn)。人們喜歡閱讀清晰的文字和圖片,也希望能通過旋轉(zhuǎn)設(shè)備或者捏合和點(diǎn)擊屏幕來調(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)點(diǎn)擊操作的交互 有時候,額外的一些修改可以(使頁面)更合理。例如,在 iOS 系統(tǒng)中,很多網(wǎng)頁應(yīng)用會設(shè)置合適的視窗(viewport)寬度并通常隱藏 Safari 的 UI。如欲了解如何進(jìn)行這些修改,參見 Safari Web Content Guide 章節(jié)中的 Configuring the ViewportConfiguring 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)用中,彈出式菜單會包含很多選項(xiàng),就如在其他 OS X 應(yīng)用中一樣。在必要的情況下,菜單展開后可以超出應(yīng)用窗口的邊界以顯示其中的所有選項(xiàng)。在 iOS 版的 Safari 應(yīng)用中,彈出式菜單由原生的元素所呈現(xiàn),這樣能提供更好的用戶體驗(yàn)。例如,在 iPhone 上,彈出式菜單會出現(xiàn)在選擇器(picker)當(dāng)中,選擇器里會一個用戶可選擇的選項(xiàng)列表。(欲了解更多選擇器控件的內(nèi)容,可以參見Picker.)

上一篇:3D 觸摸下一篇:Live Photos