鍍金池/ 教程/ iOS/ 案例學(xué)習(xí):從桌面到 iOS
內(nèi)容視圖
控件
iCloud
導(dǎo)航
網(wǎng)頁剪藏圖標(biāo)
動畫
鍵盤和輸入頁面
設(shè)計策略
臨時視圖
撤銷與重做
交互與反饋
與 iOS 一體化
從概念到產(chǎn)品
品牌推廣
電子錢包
社交媒體
游戲中心
創(chuàng)建尺寸可調(diào)的圖片
案例學(xué)習(xí):從桌面到 iOS
多任務(wù)處理
蘋果支付
色彩和排版
報刊雜志圖標(biāo)
iOS 應(yīng)用解析
啟動和終止
聲音
快速查看
適應(yīng)性和布局
編輯菜單
健康組件
語音輔助
iAd 富媒體廣告
為 iOS 而設(shè)計
標(biāo)志與圖形
應(yīng)用圖標(biāo)
模態(tài)情景
圖標(biāo)與圖片尺寸
路線選擇
在應(yīng)用中購買
應(yīng)用拓展
啟動畫面
術(shù)語和措辭
通知
欄按鈕圖標(biāo)
訪問用戶數(shù)據(jù)
云打印

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

Keynote(iPad 版)

桌面版的 Keynote 應(yīng)用十分的強大,靈活,可以幫助你創(chuàng)建一個很棒的幻燈片。用戶喜愛 Keynote 的設(shè)計思想,它在具有無比細(xì)膩的操作的基礎(chǔ)上融合了簡單易用的原則,進而讓用戶可以精確地控制一些細(xì)節(jié),如動畫和文本屬性等等。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/keynote_desktop_2x.png" alt="" />

iPad 版的 Keynote 保留了桌面版的精髓,為了使用戶在 iPad 上使用時具有更舒適的用戶體驗,在設(shè)計上還增加了一些要素:

  • 專注于用戶內(nèi)容
  • 在不刪減功能的基礎(chǔ)上減少操作的復(fù)雜性
  • 提供提高效率的快捷操作
  • 延續(xù)了桌面版帶給用戶的熟悉的體驗
  • 通過一些動畫效果與用戶進行良好的反饋和交流

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

Keynote 從桌面版到 iPad 版,開發(fā)者進行了從細(xì)節(jié)到深層次的大量修改和重設(shè)計。一些明顯的對于 iPad 設(shè)備的適應(yīng)性體現(xiàn)在:

流線型的工具欄

雖然工具欄中只包含了少量元素,但這些元素卻非常關(guān)鍵,它們表示了用戶在創(chuàng)建內(nèi)容時所使用的全部功能,也是所有工具的統(tǒng)一入口。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/keynote_toolbar_2x.png" alt="" />

用戶內(nèi)容優(yōu)先的簡化版檢查器

iPad 版的 Keynote 能自動偵測各種工具,并且根據(jù)用戶的需求來修正被選擇的對象。通常,人們可以在第一檢查器視圖中完成他們需要的所有修改操作。如果他們需要修改那些不常用的屬性,他們可以通過下拉,獲取到另一個檢查器視圖來進行。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/keynote_inspector_2x.png" alt="" />

豐富的預(yù)設(shè)樣式集

使用預(yù)設(shè)的樣式,用戶可以簡單地改變對象(如表格或圖表)的外觀或視覺效果。除了顏色之外,每個預(yù)設(shè)集都包含有一套具有統(tǒng)一主題的屬性,例如表格的標(biāo)題和軸區(qū)分標(biāo)識等的預(yù)設(shè)屬性都被設(shè)計得與整體的主題和諧一致。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/keynote_presets_2x.png" alt="" />

通過有意義的動畫來直接操作內(nèi)容

在 iPad 版的 Keynote 中,用戶可以直接拖動對象到一個新的位置,可以使用手指扭動來旋轉(zhuǎn)一個對象,也可以輕擊圖片來選中它。Keynote 通過使用一些響應(yīng)動畫來進一步加深用戶對這種直接操作的印象。例如,用戶在移動某個對象時,這個對象會暫停一些效果,當(dāng)對象被放置在一個新的位置時,環(huán)繞在周圍的對象會自動向外擴散,來給被移動的對象留出空間。

郵件應(yīng)用(iPhone 版)

郵件應(yīng)用是 OS X 中一款好用而又廣受好評的常見應(yīng)用。它的功能十分強大,可以允許用戶撰寫、接收、分類和存儲郵件,追蹤行為和事件,也可以編寫備忘錄和邀請等。桌面版的郵件應(yīng)用使用了一系列的窗口來實現(xiàn)這些功能。

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

而 iPhone 版的郵件只專注于桌面版的核心功能,幫助用戶接收、撰寫、發(fā)送和組織他們的信息。為了能夠在專為 iPhone 版應(yīng)用設(shè)計的界面中呈現(xiàn)郵件的核心功能,開發(fā)者進行了以下工作:

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

事實上,相較于桌面版的郵件應(yīng)用,iPhone 版的郵件應(yīng)用并不是一個更好的應(yīng)用,而是為移動端用戶重新設(shè)計的郵件應(yīng)用。iPhone 版的郵件應(yīng)用濃縮了桌面版的核心功能,并將它們呈現(xiàn)在一個能夠吸引用戶的、精簡的界面之中,基于這個界面,為移動端的用戶提供了核心的郵件體驗。

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

直接且高度專注的頁面

每個頁面顯示了郵件應(yīng)用功能的其中一個方面:賬戶列表、郵箱列表、郵件列表、郵件查看視圖和編輯視圖。在一個屏幕內(nèi),用戶可以通過滑動操作查看完整的內(nèi)容。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/ds_mailscreens_2x.png" alt="" />

簡單可預(yù)見的導(dǎo)航

通過對每個屏幕的點擊,用戶可以逐層展開通用內(nèi)容(賬戶列表),進入詳情頁面(一封郵件)。每個頁面都會顯示一個標(biāo)題,指示用戶所在的位置;每個頁面也都設(shè)有一個返回按鈕,引導(dǎo)用戶更容易地返回到他們之前的位置。

用時即取的、簡單的可點控件

不論在任何場景之下,用戶最希望進行的操作都是編寫郵件和查閱新郵件,因此 iPhone 版的郵件應(yīng)用保證了用戶可以在多個頁面中都能方便地進入到這兩項功能的操作界面中。此外,用戶在查看一封郵件時,同時顯示回復(fù)、移動和刪除等對郵件的操作。

針對不同任務(wù)提示不同類型的反饋

當(dāng)用戶刪除一封消息時,它會滑入垃圾桶圖標(biāo)中。當(dāng)用戶發(fā)送一封消息時,可以看到它的發(fā)送過程;而當(dāng)發(fā)送結(jié)束時,用戶會聽到一個特別的聲音提示。用戶簡單一瞥郵件列表頁面工具欄的副標(biāo)題,就可以查看上次以此更新郵箱的時間。

網(wǎng)頁內(nèi)容瀏覽(iOS)

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

iOS 設(shè)備可以出色地呈現(xiàn)所有基于網(wǎng)頁設(shè)計標(biāo)準(zhǔn)建立的網(wǎng)頁。特別是那些能自動檢測設(shè)備且不需要任何插件的網(wǎng)站,不論是在 iPhone 還是 iPad 上都會有很好的呈現(xiàn)。網(wǎng)頁在兩種設(shè)備之間的適配不需要做很多的修改,即使有也很小。

除此之外,一個成功的網(wǎng)頁應(yīng)具備以下的基本特征:

  • 如果網(wǎng)頁的寬度需要匹配設(shè)備寬度,可以設(shè)置合適的視窗(viewport)來適應(yīng)設(shè)備
  • 避免使用 CSS 中固定的定位,以免當(dāng)用戶縮放或拖動頁面時,頁面內(nèi)容無法被移出屏幕
  • 配有一套基于觸控操作的用戶界面,而不是僅依賴基于傳統(tǒng)點擊操作的交互

有時候,進行一些額外的修改可以使頁面更合理。例如,在 iOS 系統(tǒng)中,很多瀏覽器會設(shè)置合適的視窗(viewport)寬度并通常隱藏 Safari 瀏覽器本身的控件。如欲了解更多如何進行這些修改,參見 Safari Web Content Guide 章節(jié)中的 Configuring the ViewportConfiguring Web Applications

網(wǎng)頁也可以通過一些其他的方法將桌面版的用戶體驗適配到 iOS 端的 Safari 中,如:

使鍵盤適應(yīng) iOS 端的 Safari

當(dāng)鍵盤和格式助手出現(xiàn)時,iPhone上 的 Safari 應(yīng)用會令你的網(wǎng)頁顯示在 URL 地址的下方,鍵盤和格式助手的上方。

使彈出式菜單適應(yīng) iOS 端的 Safari

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