鍍金池/ 教程/ iOS/ 應(yīng)用拓展
內(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ù)
云打印

應(yīng)用拓展

應(yīng)用擴展可以拓展應(yīng)用的使用范圍。當(dāng)用戶使用其他應(yīng)用時,應(yīng)用擴展使得他們?nèi)匀豢梢允褂媚愕膽?yīng)用的部分功能。例如,當(dāng)用戶使用 Safari 瀏覽網(wǎng)頁時,他們可以使用分享擴展來發(fā)送圖片或分享文章到你的社交網(wǎng)站應(yīng)用上;或者當(dāng)他們使用照片應(yīng)用時,可能會使用你的圖片編輯擴展,來為一張圖片加上濾鏡效果。(在這些場景中,Safari 和照片應(yīng)用為用戶提供了拓展途徑,因而被稱為主應(yīng)用( host apps )。)

你通過將應(yīng)用擴展包含在一個功能完整的 ios 應(yīng)用中實現(xiàn),而同時這個 iOS 應(yīng)用也是你 提交給 Apple Store 的。(包含擴展的應(yīng)用被稱為容器應(yīng)用( containing app ))。在啟用擴展之后,人們就可以在使用其他應(yīng)用的同時,通過擴展執(zhí)行快速任務(wù)。例如,在郵件中瀏覽某個商品時,人們可以不用離開郵件應(yīng)用就使用你的動作擴展,把商品添加到購物清單中。

下表開發(fā)者可以創(chuàng)建的應(yīng)用擴展種類表

應(yīng)用擴展 使用擴展說明
最近窗口部件 在通知中心的當(dāng)前視圖,獲取快速更新或執(zhí)行快速任務(wù)
分享 發(fā)送到網(wǎng)站或與他人分享內(nèi)容
動作 通過另一個應(yīng)用的上下文信息來操作或查看內(nèi)容
照片編輯 通過照片應(yīng)用編輯照片或視頻
文件提供器 訪問、管理文件庫
自定義鍵盤 使用自定義鍵盤替代 iOS 系統(tǒng)提供的鍵盤

以下指南適用于所有類型的應(yīng)用擴展,針對特定類型應(yīng)用擴展的指南請參閱后續(xù)章節(jié)。(

令單任務(wù)可用。應(yīng)用擴展并不是應(yīng)用的精簡版,相反,它幫助用戶在器全局目標(biāo)的上下文中完成小范圍內(nèi)的有限任務(wù)。例如,動作擴展可以為用戶提供一種不同的方式來查看當(dāng)前內(nèi)容。

保證用戶交互的有限、流暢。好的應(yīng)用擴展應(yīng)該讓用戶可以僅通過幾步點擊就完成任務(wù),從而保證他們能盡快回到之前的場景中。例如,分享擴展只需一次點擊即可完成一張圖片的分享。

讓容器應(yīng)用的名稱盡量包含其應(yīng)用擴展的名稱。盡管在容器應(yīng)用中不同的擴展應(yīng)該有不同的名字,但你需要確保用戶能夠明白擴展和你的應(yīng)用之間的關(guān)系。用戶會在很多不同的情況下使用擴展,如果不能辨識出擴展的來源,那么他們就未必會信任這些擴展。

大部分情況下,復(fù)用容器應(yīng)用的圖標(biāo)。顯示用戶熟悉的圖標(biāo)是獲得用戶信任的另一種方式。請注意,對于動作擴展來說,你應(yīng)該使用單色版本的容器應(yīng)用圖標(biāo)。

重要:和設(shè)計圖標(biāo)和圖形一樣,不要重復(fù)使用iOS的圖標(biāo)和圖片,不要為蘋果的產(chǎn)品和設(shè)計再創(chuàng)建一套圖片。 避免在擴展上部顯示模態(tài)視圖。很多擴展默認以模態(tài)視圖來顯示,所以應(yīng)避免再疊加模態(tài)視圖。盡管有時候用戶可能會在擴展上部看到警告框,但是在設(shè)計擴展的工作流時,應(yīng)避免出現(xiàn)模態(tài)視圖。

最近窗口部件

人們會在通知中心的最近區(qū)中查看最近窗口部件(Today widgets)。由于用戶會設(shè)置最近區(qū)令其顯示他們最關(guān)注的信息,所以設(shè)計你的應(yīng)用最近窗口部件時,應(yīng)當(dāng)以獲取用戶最關(guān)注信息中的一席之地為目標(biāo)。

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

設(shè)計與通知中心風(fēng)格一致的外觀。當(dāng)使用通知中心的默認邊距和背景時,你的最近窗口部件就會帶給用戶統(tǒng)一的觀感。為獲得最佳的效果,你應(yīng)該重點關(guān)注你的內(nèi)容而不是背景或其他,尤其應(yīng)該避免繪制一片純色背景。

注意:iOS會自動在自定義的部件內(nèi)容上方顯示應(yīng)用的圖標(biāo)和標(biāo)題(圖標(biāo)會顯示在標(biāo)題前面的空白處)。

將部件內(nèi)容與標(biāo)題對齊。當(dāng)你的部件內(nèi)容與標(biāo)題對齊時,人們就可以很簡單地瀏覽到他們想要的部件的當(dāng)前視圖。遵守當(dāng)前視圖中的邊距規(guī)范,并將內(nèi)容約束在如圖的部件內(nèi)容區(qū)內(nèi)。

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

一般情況下,使用白色的系統(tǒng)字體來顯示文本。在通知中心默認背景下白色文字會看起來較好。對于二級文本,可以使用系統(tǒng)提供的vibrant外觀樣式(查看notificationCenterVibrancyEffect了解更多)。

提供通知中心式的體驗。人們訪問通知中心來獲取簡要的更新或者執(zhí)行一個非常簡單的任務(wù),所以最近部件最好只顯示適量的信息、進行有限的互動,特別是:

  • 避免用戶在部件中需要滾動或縱向移動來查看全部的信息。部件可以通過縱向擴展來顯示更多的信息,但若部件的高度超過通知中心的高度時,用戶體驗就下降了,因為這樣會干擾對其他部件的查看。
  • 避免使用橫向掃動或拖曳,因為這會干擾通知中心的導(dǎo)航欄顯示。
  • 盡可能使用戶只需一步操作就完成任務(wù)或打開你的應(yīng)用(注意,在最近部件中鍵盤是不可用的)。
  • 優(yōu)化性能以便人們可以即刻獲得有用的信息??紤]在本地緩存信息是不錯的選擇,以便當(dāng)有更新時就可顯示最近信息。人們只希望在最近視圖中花很少的時間,如果部件使用內(nèi)存不當(dāng),iOS就可能會終止它。

在適當(dāng)情況下,使用戶可以通過點擊最近部件打開你的應(yīng)用。因為最近部件提供了一種有限、精簡的體驗,所以它能有效引導(dǎo)人們到你的應(yīng)用了解更多信息或功能。最好不要提供一個“打開應(yīng)用”按鈕,而是應(yīng)該讓你的整個最近部件都可以通過點擊打開應(yīng)用。你也可以讓用戶通過點擊部件中的一個合適的UI部件,來打開你的應(yīng)用中與這個UI部件相關(guān)的界面。比如,日歷窗口部件顯示了當(dāng)天的事務(wù),如果用戶想要獲得某個事務(wù)的更多信息,他們可以點擊部件中的該事務(wù)提醒來打開日歷應(yīng)用進行查看。

注意:雖然通過窗口部件打開應(yīng)用是不錯的用戶體驗,但持續(xù)在部件中提供有用且及時的信息依然很重要。用戶不會喜歡一個功能只是打開相應(yīng)應(yīng)用的最近窗口部件。

分享和動作擴展

人們通過點擊應(yīng)用中的動作按鈕(Action button)來使用分享和動作擴展。在通過動作按鈕顯示的動作視圖控制器(activity view controller)中,動作擴展被列在底部,分享擴展被列在動作擴展之上。人們可以使用更多(More)按鈕來管理顯示在動作視圖控制器中的分享和動作擴展。

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

分享或動作擴展通常被認為是在當(dāng)前用戶場景下用來輸入內(nèi)容之用。例如,當(dāng)在 Safari 中閱讀一篇文章時,用戶可能會點擊動作按鈕并使用一個分享擴展來發(fā)送這篇文章到分享網(wǎng)站上,也可能會使用一個動作擴展來查看這篇文章的翻譯。

注意:在動作視圖控制器中,iOS 只會顯示支持當(dāng)前內(nèi)容類型的動作擴展。例如,當(dāng)用戶當(dāng)前內(nèi)容是視頻時,iOS 就不會顯示支持文本的動作擴展。

盡可能在分享擴展中使用系統(tǒng)提供的UI。系統(tǒng)所提供的構(gòu)造視圖控制器(compose view controller)提供給用戶一種一致的體驗,并能自動支持一些常用任務(wù),例如預(yù)覽和確認標(biāo)準項,同步內(nèi)容,查看動態(tài)效果,以及完成一封郵件,欲知更多關(guān)于使用系統(tǒng)提供的撰寫視圖控制器,請參見 App Extension Programming Guide 中的Share。

如果上傳需要一定時間,考慮在分享擴展的容器應(yīng)用中顯示上傳進度。無論分享的文件有多大,人們都期待在點擊擴展中的發(fā)送或分享按鈕后,能立即返回他們之前的場景。雖然你需要讓進度狀態(tài)可以更新,但是用戶不希望每次上傳完畢后都收到通知,并且擴展的重載也無法通過編程實現(xiàn)。在這種情況下,在容器應(yīng)用中顯示上傳進度是一種不錯解決方案,這樣容器應(yīng)用就可以在后臺處理任務(wù),并在遇到問題時發(fā)送通知。

為動作擴展使用單色的應(yīng)用圖標(biāo)。(與之相反,分享擴展則應(yīng)該使用其容器應(yīng)用的彩色應(yīng)用圖標(biāo)。)當(dāng)為動作擴展設(shè)計圖標(biāo)時,你可能需要從創(chuàng)建一個應(yīng)用圖標(biāo)的模版開始著手。如有需要,可以只關(guān)注圖標(biāo)所特有的元素來簡化設(shè)計。 如果你在容器應(yīng)用中提供了多個動作擴展,那么最好為他們設(shè)計一套圖標(biāo),并確保這套圖標(biāo)中的每一個看起來都與容器應(yīng)用的圖標(biāo)是關(guān)聯(lián)的。

圖片編輯擴展

當(dāng)人們在照片(Photos)應(yīng)用中查看圖片或視頻時,可以使用圖片編輯擴展。一般來說,圖片編輯擴展能幫助用戶為圖片添加濾鏡或進行一些其他的圖片或視頻編輯。在用戶保存了變更后,編輯過的內(nèi)容就能照片應(yīng)用中查看。 照片應(yīng)用提供了一個模態(tài)視圖來顯示你圖片編輯擴展的自定義 UI 。當(dāng)用戶在確認取消對圖片或視頻的編輯時(你必須要在代碼上確保可以進行這個操作),照片應(yīng)用還可以顯示一個確認視圖。

避免在圖片編輯擴展中使用導(dǎo)航欄。如圖所示,承載擴展的模態(tài)視圖已經(jīng)包含了導(dǎo)航欄,若再增加另一個導(dǎo)航欄,既會占據(jù)更多你的界面空間,還會使用戶產(chǎn)生困擾。(照片應(yīng)用默認會以全屏高度來顯示你的視圖,所以你的內(nèi)容會出現(xiàn)在內(nèi)建的導(dǎo)航欄之下。)

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

如果可以,讓用戶能夠預(yù)覽編輯效果。盡可能讓用戶在關(guān)閉擴展返回照片應(yīng)用之前看到他們編輯的效果。

文檔提供器擴展

文檔提供器擴展令用戶可以在其他各種應(yīng)用中查閱你的應(yīng)用所管理的文檔。在主應(yīng)用(host app)中,文檔采集視圖控制器(document picker view controller)會顯示你的擴展所提供的 UI(想要了解更多有關(guān)文檔采集視圖控制器的內(nèi)容,請查閱UIDocumentPickerViewController Class Reference)。

注意:文檔提供者擴展由兩個不同的部分組成:文檔采集視圖控制器擴展和文件提供者擴展。文檔采集視圖控制器擴展包含了你的自定義 UI,文件提供者擴展則實現(xiàn)對文件的訪問。為了方便,本節(jié)所使用的術(shù)語文檔提供者擴展(Document Provider extension)是用來描述擴展中,文檔采集視圖控制器部分的 UI 和體驗。

避免在文檔提供者擴展中使用導(dǎo)航欄。iOS會在文檔采集視圖控制器基于導(dǎo)航欄的界面內(nèi),顯示你擴展的自定義 UI 。所以,在內(nèi)建導(dǎo)航欄之下再顯示第二個導(dǎo)航欄會使用戶感到困惑,并且還會占據(jù)原本你的內(nèi)容區(qū)域。(文檔采集視圖控制器默認會以全屏高度來顯示你的視圖,所以你的內(nèi)容會出現(xiàn)在內(nèi)建的導(dǎo)航欄之下。)

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

自定義輸入法

人們使用帶有自定義鍵盤的輸入法擴展來替換 iOS 自帶的輸入法。在啟用輸入法擴展之后,當(dāng)人們點擊絕大部分文本輸入?yún)^(qū)域時就能使用自定義輸入法。但可以使用自定義輸入法的不包括受保護的文本區(qū)域(例如密碼輸入?yún)^(qū))和電話鍵盤區(qū)(例如聯(lián)系人中的電話號碼區(qū))。

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

為用戶提供明顯的方式來切換輸入法。人們對于 iOS 的輸入法切換按鈕很熟悉,他們會期望在你的輸入法中也有類似的體驗。