iOS11人機交互指南(十)- Extensions

一、自定義鍵盤(Custom Keyboards

鍵盤擴展用一個自定義鍵盤代替了標準鍵盤。 自定義鍵盤在“設置”的“通用”>“鍵盤”下啟用。 啟用后,除了編輯安全文本字段和電話號碼字段時,鍵盤在任何應用程序的文本輸入過程中均可用。 用戶可以啟用多個自定義鍵盤,并隨時在它們之間切換。

確保你確實需要一個自定義的鍵盤。 如果您想在系統范圍內展現獨特的鍵盤功能,例如以新穎方式輸入文本或輸入iOS不支持的語言,自定義鍵盤就很有意義。 如果您只想在您的應用中使用自定義鍵盤,請考慮改為創建自定義輸入視圖。 參見?Custom Input Views

提供一種明顯且輕松的方式在鍵盤之間切換。 用戶知道,當啟用多個鍵盤時,點擊標準iOS鍵盤上的地球符號鍵可以快速切換到其他鍵盤,從而取代表情符鍵。 他們期望在鍵盤上有類似的直觀體驗。 請注意,當您安裝了多個鍵盤時,用Globe鍵(地球符號鍵)替換Emoji(表情符號鍵)。

請勿復制系統提供的鍵盤功能。在iPhone X上,即使使用自定義鍵盤,Emoji / Globe鍵和Dictation鍵也會自動出現在鍵盤下方。 你的應用程序不能影響這些鍵,所以請避免在你的鍵盤上重復它們以免造成混淆。

考慮在您的應用中提供鍵盤教程。 用戶習慣用標準鍵盤,學習新鍵盤需要時間。 通過在您的應用中提供使用說明(而不是在鍵盤本身中),讓使用過程更輕松。 告訴用戶如何啟用鍵盤,在文本輸入過程中將其激活來使用它,而后切換回標準鍵盤。

開發指導請參閱 中?App Extension Programming Guide?中的?Custom Keyboard

自定義輸入視圖

自定義輸入視圖會使用自定義鍵盤替換標準鍵盤,但僅僅只在您的應用中,而不能在系統范圍內使用。 使用自定義輸入視圖來提供獨特而有效的數據輸入方法。 例如,在編輯電子表格時,用自定義輸入視圖來輸入數字值。

使功能明顯易見。 自定義輸入視圖上的控件應該在應用程序的情景中有意義。 數據輸入應該清晰直觀,因此不需要額外的指令。

在輸入過程中播放標準鍵盤點擊聲。 當用戶敲擊鍵盤上的按鍵時,鍵盤點擊聲提供有效反饋。 在您的輸入視圖中點擊自定義控件也應該產生這種聲音。 請注意,此聲音僅適用于可見的自定義輸入視圖,并且用戶可以在“設置”>“聲音”中系統范圍禁用此聲音。 有關開發人員指南,請參閱?UIDevice 中的?playInputClick

必要時提供輸入附件視圖。 某些應用程序實現了在鍵盤上方顯示的額外自定義輸入附件視圖。 在Numbers中,輸入附件視圖可幫助用戶輸入標準的或自定義數值。

開發指導請參閱Text Programming Guide for iOS?中的?Custom Data Input Views

二、文檔提供程序(Document Providers

文檔提供程序擴展實現用于導入、導出、打開或移動系統上其他應用程序內的應用程序文檔的自定義界面。 文檔提供程序擴展加載時,其界面將顯示在包含導航欄的模式視圖中。

當用戶打開或導入文件時,只顯示特定情境的文檔和信息。 當某人使用您的擴展程序打開或導入文檔時,僅顯示適合當前上下文的文檔。 例如,如果PDF編輯應用程序加載您的擴展名,則只列出PDF文件作為可以打開或導入的可能文檔。 請務必列出其他可能有用的信息,例如修改日期、大小以及文檔是本地還是遠程。

讓用戶在導出和移動文檔時選擇一個目的地。 除非您的應用程序將文檔存儲在單個目錄中,否則讓用戶導航到目錄層次結構中的特定目的地。 考慮提供一種添加新的子目錄的方式。

不要提供自定義導航欄。 您的擴展在已包含導航欄的模態視圖中加載。 提供第二個導航欄會令人困惑,并占用您的內容空間。

開發指導請參閱?App Extension Programming Guide?中的?Document Provider

三、主屏幕快速操作(Home Screen Quick Actions

主屏幕快速操作是使用3D Touch在主屏幕上執行有用的、app特定操作的便捷方式。 用手指對應用程序圖標施加一些壓力——比您點擊和握住的壓力更大——來查看可用快速操作的列表。 點擊一個來激活它。例如,郵件包含快速操作,可直接進入收件箱或VIP郵箱、啟動搜索和創建新消息。 每個主屏幕快速操作都包括一個標題、左側或右側的一個圖標(取決于您的應用在主屏幕上的位置)和一個可選字幕。 標題和字幕在從左到右的語言中始終左對齊。 新的信息可用時,您的應用程序甚至可以動態更新其快速操作。 例如,消息提供了用于打開最近對話的快速操作。

提示:

某些應用在其快速操作列表上方顯示一個窗口部件。例如,股票快速操作列表出現在顯示您當前股票價值的窗口部件下方。 考慮用一個窗口部件來提供更吸引人的體驗。 有關窗口部件設計指南,請參閱?Home Screen Quick Action Widgets

創建引人注目且高價值任務的快速操作。 例如,地圖可讓用戶在他們當前的位置搜索附近,或者在沒有首先打開地圖應用的情況下獲取路線。 每個應用程序應至少啟用一個有用的快速操作,最多提供四個。

避免使用快速操作來簡化導航。 如果訪問應用中的重要區域比較困難或耗時,請首先修改導航。然后,重點提供有用的和創造性任務的快速操作。

避免對快速操作做出不可預測的更改。 動態快速操作是保持操作相關的好方法。例如,根據當前位置或您應用中每日時刻最近的活動,或設置更改來更新快速操作可能都是有用的。 但是,操作不應該以不可預知或混淆的方式改變。

為每個快速操作提供一個簡潔的標題。 操作的標題應立即傳達操作的結果;例如“Directions Home”,“創建新聯系人”和“新信息”。如果您需要提供更多的上下文,請提供字幕。 例如,郵件使用字幕來指示收件箱和VIP文件夾中是否有未讀郵件。 不要在標題或字幕中包含應用程序名稱或任何無關信息,縮短文本以避免被截斷,并在編寫文本時考慮本地化。

不要對通知使用快速操作。 用戶希望以其他方式接收來自應用的通知。請參閱 Notifications

為每個快速操作提供一個可識別的圖標。 盡可能使用熟悉的系統圖標。請參閱?Quick Action Icons。如果您設計自己的圖標,請下載?Quick Action Icon Template,并遵循?Custom Icons 中的指導。

不要使用表情符號代替圖標。表情符號不能與右對齊的文本正確對齊。另外,表情符號是全彩色的,而快速操作圖標是純色的。

四、消息(Messaging

iMessage apps?和?Sticker packs?是可讓用戶與朋友分享內容、交流表達和分享協作體驗的短信擴展程序。

iMessage Apps

iMessage app 在消息對話的上下文中提供了一種交互式體驗。 iMessage app 使用戶能夠共享數據和媒體,在共享任務上進行協作,并能和對方一起玩游戲。

左:緊湊;右:展開

設計一個直觀的界面。 如果您的iMessage應用程序提供靜態內容(如文本、照片或視頻),請確保用戶能輕易瀏覽和選擇要插入對話的項目。如果您的應用程序是交互式的,例如多人游戲板或協作外賣訂單,請確保其功能實用且易于理解。

提供重點內容。 為了清晰和易于使用,每個消息傳遞擴展都應該有單一焦點。 例如,不要試圖設計一個結合了貼紙和乘車分享的應用程序。

提供有趣的協作體驗。 iMessage應用程序通常用于兩個或更多人之間快節奏、非正式對話的環境中。 創造性地利用這種環境來鼓勵通過共享、編輯或擴充內容來回參與。 如果各方都在一起使用該應用程序,則會實時更新內容。

突出有趣的iOS應用內容。 通過在消息空間中顯示其內容來擴展您的iOS應用的功能。 考慮用戶可能想要共享什么類型的信息,以及如何在活動對話的上下文中與應用程序交互。

插入內容以避免裁剪。 您的應用內容呈現在帶圓角的消息氣泡中,因此不要在角落中放置重要信息。

區分緊湊視圖和展開視圖。 您的應用出現在對話下方的緊湊視圖中。 這個視圖應該在視覺上區分你的應用和其他應用,并提供對常用功能的訪問。用戶也可以在展開視圖中打開您的應用,以訪問高級功能或一次查看更多選項。 請注意,在緊湊視圖中不允許水平滾動。

僅允許在展開視圖中進行文本編輯。緊湊視圖與鍵盤高度大致相同。為確保用戶能夠看到他們正在編輯的內容,只允許在展開視圖中輸入文本。

貼紙(Stickers

貼紙為用戶提供了一種有趣且引人入勝的方式,讓他們無需鍵入或使用表情符號即可在消息對話中表達自己。 貼紙是可以發送或放置在消息、照片和其他貼紙上的圖像或動畫,以增添強調并傳達情感。

左:緊湊;右:展開

設計得富有表現力。 用戶使用貼紙來視覺傳達情緒和反應。努力提供在情感層面與用戶聯系的貼紙。考慮合并圖像、單詞和短語以增加對話的新維度。

全球思考。 信息是一種通用的通信形式,瞄準具有廣泛國際吸引力的貼紙。

使用描述性圖像名稱或提供可選文字標簽。雖然圖像名稱和可選文本標簽在屏幕上不可見,但它們可讓畫外音描述貼紙,讓視覺障礙人士更輕松地進行導航。

通過動畫增加活力。 雖然貼紙可以是靜態圖像,但動畫貼紙是在對話中傳遞能量的好方法。一定要使用足夠高的幀率來保持運動流體。

測試放置的可能性。用戶可以縮放、旋轉并在對話的部分區域放置貼紙。 無論您的貼紙位置或尺寸如何,確保它對在不同顏色和圖像下清晰可見。

考慮使用鮮艷的色彩和透明度。鮮艷的色彩增添了對話的豐富性和興奮感。透明度允許將有意義的貼紙放置到消息、照片和其他貼紙上。

貼紙大小

信息支持三種貼紙大小,它們顯示在基于網格的瀏覽器中。選擇最適合您的內容的尺寸,并為您所有貼紙準備此尺寸。

適當縮放貼紙。雖然信息會根據需要縮放較大的貼紙,但最好提供預縮放貼紙以獲得最佳質量和性能。

請注意文件大小的限制。為了提高效率,每張貼紙不得超過500KB。請注意,Xcode使用24位調色板保存PNG動畫,這可能導致文件大小超出預期。

貼紙格式

信息支持以下文件格式的貼紙:

iMessage應用和貼紙包圖標

與iOS應用程序一樣,iMessage應用和貼紙包需要可識別的應用程序圖標。

保持簡單的背景并提供單一焦點。 用一個中心點設計一個圖標,一目了然地捕捉注意力,使用不會壓倒其他圖標的簡單背景。

保持圖標角為方形。 系統會自動將圖標角變成圓角。

提供不同尺寸的圖標。您的圖標會出現在App Store、信息、通知和設置中。為確保您的圖標在任何環境和任何設備上看起來都很棒,您可以提供以下尺寸的圖標變體:

有關設計出色應用程序圖標的其他指導(其中大部分可應用于iMessage應用程序和貼圖包圖標),請參閱?App Icon

要下載iMessage應用程序和貼圖包圖標 Photoshop 模板,請參閱?Resources

開發指導請參閱?The Messages Framework

五、照片編輯(Photo Editing

照片編輯擴展可讓用戶通過應用過濾器或進行其他更改來修改照片應用中的照片和視頻。 編輯總是作為新文件保存在照片應用程序中,從而安全地保留原始版本。

要訪問照片編輯擴展程序,照片必須處于編輯模式。在編輯模式下,點擊工具欄中的擴展圖標,會顯示可用編輯擴展的操作菜單。 選擇一個在包含導航欄的模態視圖中顯示擴展的界面。 關閉此視圖可確認并保存編輯,或取消該視圖并返回到照片應用。

確認取消編輯。 編輯照片或視頻可能非常耗時。 如果有用戶點擊取消按鈕,不要立即放棄他們的更改。請他們確認他們確實想要取消,并通知他們取消后任何修改都將丟失。 如果尚未進行編輯,則無需顯示此確認。

不要提供自定義導航欄。 您的擴展在已包含導航欄的模態視圖中加載。提供第二個導航欄會令人困惑,并且占用了正在編輯內容的空間。

讓用戶預覽編輯。如果看不到編輯后的樣子,用戶很難確認。讓用戶在關閉您的擴展程序并返回到照片應用程序之前看到他們編輯的結果。

為照片編輯擴展圖標使用您的應用程序圖標。這增加了擴展實際是由您的應用程序提供的自信。

開發指導請參閱?App Extension Programming Guide?中的?Photo Editing

六、共享和操作(Sharing and Actions

共享擴展提供了一種方便的方式,可以通過應用程序、社交媒體帳戶和其他服務共享當前上下文中的信息。操作擴展可讓用戶啟動內容特定的任務,例如添加書簽、復制鏈接或保存圖像。用戶通過點擊應用中的“操作”按鈕來顯示活動視圖,從而訪問共享擴展和操作擴展。 活動視圖僅顯示與當前上下文相關的擴展。 例如,在編輯視頻時,您不會看到文本操作動作。 在活動視圖中,共享擴展羅列在操作擴展上方。

啟用單一的重點任務。擴展程序不是一個小應用程序。它執行與當前上下文相關的狹義范圍的任務。

制作一個熟悉的界面。對于共享擴展,盡可能使用系統提供的合成視圖,因為對用戶是熟悉的,可在整個系統中提供一致的共享體驗。對于操作擴展,請包括您的應用名稱,或者設計一個可識別的并且感覺像是您應用的自然延伸的界面。

簡化并限制交互。最好的擴展讓用戶只需幾個步驟即可完成任務。例如,共享擴展程序可能會通過單擊來立即將圖像發布到社交媒體帳戶。僅在必要時提供界面。

避免將模態視圖放在擴展程序之上。擴展名默認顯示在模態視圖中。雖然彈窗可能比擴展更有用,但避免分層添加其他模式視圖。

使用您的主應用程序來傳達冗長操作的進度。活動視圖應在啟動共享或操作后立即解除。耗時的任務應該在后臺繼續進行,您的主應用程序應該提供一些方法來檢查這些任務的狀態。不要為此使用通知用戶,用戶不希望每次任務完成時都看到通知,盡管如果出現問題通知他們是很好的。

使用模板圖像作為操作擴展圖標。模板圖像使用蒙版來創建圖標。使用具有適當透明度和抗鋸齒功能的黑白色,并且不包含陰影。模板圖片應該位于大約70px×70px的區域中心。

更多指南請參閱?Activity Views。有關開發人員指南,請參閱?App Extension Programming Guide?中的?ShareAction

提示:

共享擴展程序會自動使用您的應用圖標,從而增加擴展實際上由您的應用提供的信心。

七、窗口小組件(Widgets

小組件是一種可顯示少量及時、有用的信息或特定于應用程序功能的擴展程序。 例如,“新聞”窗口部件顯示頂級標題;日歷提供了兩個小組件,一個顯示當前的事件,另一個顯示下一個事件;備忘錄可讓您預覽最近的筆記并快速創建新筆記、提醒、照片和繪圖。 小組件高度是可自定義的,可以包含按鈕、文本、布局設置、圖像等。

使用3D Touch將壓力施加到主屏幕上的應用程序圖標時,窗口組件會出現在快速操作列表的上方。用戶還可將他們關注的小組件添加到搜索屏幕中,通過在主屏幕和鎖定屏幕上向右滑動來訪問搜索屏幕。你的目標應該是設計一個用戶想要添加到搜索屏幕的小組件。

左:搜索屏幕小組件;右: 主屏幕快速操作小組件

設計一個良好的可瀏覽體驗。用戶使用小組件來進行簡單的更新并執行非常簡單的任務,因此提供適量的信息和交互性至關重要。盡可能提供可在一次點擊中完成的任務。小組件中不支持平移和滾動。

快速顯示內容。用戶花極少時間來查看小組件,并且不會等待內容加載。使用本地緩存信息,以便在獲取更新時始終顯示最新信息。

提供足夠的邊距和填充。避免將內容擴展到小組件的邊緣,通常,在每條邊與內容之間提供至少幾個像素的邊距。使用小組件頂部的應用程序圖標指引對齊,當與這個圖標的中心對齊時,內容往往顯示良好。如果您的應用程序提供網格式布局,請確保您在網格項之間提供了足夠和相等的填充,盡可能將圖標和按鈕的網格限制為每行四個。

適應性強。小組件的寬度根據設備和方向而有所不同。 窗口小組件顯示的高度和信息取決于窗口是否折疊或展開(并非所有窗口小組件都支持展開)。折疊的小組件是大約是兩個半表格行的高度。理想情況下,擴展的小組件不會高于屏幕的高度。快速操作列表僅顯示處于折疊狀態的小組件。 折疊狀態下,一個小組件顯示可獨立存在的重要信息。展開后,小組件會顯示強化主要信息的其他信息。例如,“天氣”窗口小組件折疊時會顯示當前天氣狀況,但會在展開后添加小時天氣預測。

避免自定義小組件的背景。系統提供的亮度、模糊組件背景旨在保持一致性和易讀性,盡可能使用它。切勿使用照片作為背景,因為它可能與鎖定和主屏幕壁紙沖突。

通常使用黑色或深灰色的系統字體作為文本。系統字體的設計易讀,深色與標準小組件背景搭配良好。

適當時,讓用戶跳轉到您的應用程序來做更多。您的小組件應該獨立于您的應用運行。但是,如果用戶偶爾需要完成更多你的小組件沒提供的,要讓他容易達到。不要包含一個“打開應用程序”按鈕,這會占據您內容的空間。相反,讓用戶點擊內容本身以在應用中查看或修改內容。例如,在日歷小組件中,您可以點擊事件以在日歷應用程序中打開它。切勿使用您的小組件打開其他應用程序。

為小組件選擇一個好名稱。 每個小組件的內容上方都會顯示應用圖標和標題。一般來說,您的小組件名稱應該與您應用的名稱相匹配。如果您的應用提供多個小組件,請考慮使用您的應用名稱作為主要組件名稱,并為其他組件提供簡潔明了的名稱。如果您使用自定義標題,請考慮用應用程序名稱加上前綴。例如,用于顯示附近位置的地圖小組件名稱為“地圖附近”。包含您的應用名稱會增加小組件實際上由您的應用提供的信心。

讓用戶知道認證何時增加價值。如果您的小組件在某人登錄您的應用時提供了其他功能,請確保用戶知道這一點。例如,顯示即將到來的預訂的應用程序,在用戶并未登錄時可能會包含一條消息:“登錄到應用程序以查看您的預訂”。

為快速操作列表選擇一個小組件。如果您的應用有多個小組件,請選擇一個出現在使用3D Touch的主屏幕快速操作菜單上(向您的應用圖標施加壓力時顯示)。

開發指導請參閱?App Extension Programming Guide

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,428評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,024評論 3 413
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,285評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,548評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,328評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,878評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,971評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,098評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,616評論 1 331
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,554評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,725評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,243評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,971評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,361評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,613評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,339評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,695評論 2 370

推薦閱讀更多精彩內容