最新iOS設計規范十|5大拓展程序(Extensions)

編輯導語:作為互聯網應用開發者、設計者,iOS系統是其需要熟悉的操作系統,熟悉iOS系統的設計規范一定程度上有助于推動產品工作效率,并提升用戶體驗。上篇文章里,作者對iOS系統的系統能力做了介紹,本篇文章作者繼續對拓展程序進行闡述,一起來看一下。

iOS是運行于iPhone、iPad和iPod touch設備上、最常用的移動操作系統之一。作為互聯網應用的開發者、產品經理、體驗設計師,都應當理解并熟悉平臺的設計規范。這有利于提高我們的工作效率,保證用戶良好的體驗。

iOS設計規范系列共10篇。本文是第10篇,介紹拓展程序(Extensions)。

最新iOS設計規范十|5大拓展程序(Extensions)

一、鍵盤自定義(Custom Keyboard)

可以通過“鍵盤自定義”擴展程序來自定義鍵盤。

用戶在“設置”中啟用自定義鍵盤后,他們可以將其用于任何應用程序中的文本輸入,但編輯安全文本字段和電話號碼字段時除外。人們可以啟用多個自定義鍵盤,并可以隨時在它們之間進行切換。

最新iOS設計規范十|5大拓展程序(Extensions)

1)確保自定義鍵盤是有意義的

自定義鍵盤只有當APP想要在系統層面,提供一個獨一無二的鍵盤功能時才有意義。例如:輸入文本的新方式或輸入iOS不支持的語言的能力。

如果你只是需要在你自己的APP中使用自定義鍵盤,那么可以考慮使用一個自定義輸入視圖來代替。

2)提供一種在鍵盤之間切換的明顯而簡便的方法

人們知道,標準的iOS鍵盤上的Globe鍵(在啟用了多個鍵盤時會替換Emoji鍵)會迅速切換到其他鍵盤。他們希望您的鍵盤具有類似的直觀體驗。

請注意,當安裝了多個鍵盤時,Globe鍵會替換Emoji鍵。

3)不要復制系統提供的鍵盤功能

在某些設備上,即使在使用自定義鍵盤時,“表情符號/地球”鍵和“聽寫”鍵也會自動出現在鍵盤下方。您的應用程序不會影響這些鍵,因此請在鍵盤上重復輸入,以免引起混淆。

4)考慮在您的應用中提供鍵盤教程

人們已經習慣了標準鍵盤,學習新鍵盤需要花費時間。通過在您的應用中(而不是在鍵盤本身中)提供使用說明,使入門過程更容易。

告訴人們如何啟用鍵盤,在輸入文本時將其激活,使用它,然后切換回標準鍵盤。

自定義輸入視圖

自定義輸入視圖用自定義鍵盤替換了標準鍵盤,但僅在您的應用程序中,而不是在系統范圍內。

使用自定義輸入視圖可提供獨特而有效的數據輸入方法。例如,數字實現了用于在編輯電子表格時輸入數字值的自定義輸入視圖。

最新iOS設計規范十|5大拓展程序(Extensions)

1)使功能顯而易見

自定義輸入視圖上的控件應在您的應用程序上下文中有意義。數據輸入應清晰直觀,因此無需其他說明。

2)在鍵入過程中播放標準的鍵盤點擊聲音

當用戶點擊鍵盤上的按鍵時,鍵盤點擊聲音會提供可聽見的反饋。在輸入視圖中點擊自定義控件也會產生這種聲音。請注意,此聲音僅對可見的自定義輸入視圖可用,并且人們可以在“設置——聲音”中禁用聲音。

3)如有必要,提供輸入附件視圖

一些應用程序實現了一個額外的自定義輸入附件視圖,該視圖顯示在鍵盤上方。在數字中,輸入附件視圖可幫助人們輸入標準或自定義計算。

最新iOS設計規范十|5大拓展程序(Extensions)

二、文件提供(Document Providers)

“文件提供”擴展程序實現了一個有著自定義界面的,并且可以從系統上的其他APP中進行文檔的導入、導出以及移動的擴展功能。加載文件提供程序擴展時,其界面將顯示在包含導航欄的模式視圖中。

最新iOS設計規范十|5大拓展程序(Extensions)

1)用戶打開或導入文件時,僅顯示特定于上下文的文檔和信息

當用戶打開或導入文檔時,僅顯示適合當前上下文的文檔。例如,如果PDF編輯應用程序加載了擴展程序,則僅將PDF文件列出為可以打開或導入的可能文檔。

確保列出其他可能也有幫助的信息,例如修改日期、大小以及文檔是本地文件還是遠程文件。

2)人們在導出和移動文檔時選擇目的地

除非您的應用將文檔存儲在單個目錄中,否則用戶應導航到目錄層次結構中的特定目標。考慮提供一種添加新子目錄的方法。

3)不要提供自定義導航欄

您的擴展程序將加載到已經包含導航欄的模式視圖中。提供第二個導航欄會造成混亂,并占用您內容的空間。

三、信息發送(Messaging)

iMessage APP和貼紙包是一種關于消息發送的擴展程序,它可以讓用戶與朋友分享內容、進行富有表現力的交流和共享協作體驗。

iMessage應用程序

iMessage應用程序可在Messages對話的上下文中提供交互式體驗。iMessage應用程序使人們可以共享數據和媒體,在共享任務上進行協作以及彼此玩游戲。

最新iOS設計規范十|5大拓展程序(Extensions)

1)設計一個直觀的界面

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

2)提供重點內容

為了清楚和易于使用,每個消息傳遞擴展都應具有單個焦點。例如,請勿嘗試設計一個將貼紙和拼車功能都結合在一起的應用程序。

3)提供有趣的協作體驗

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

4)突出顯示有趣的iOS應用內容

通過在消息空間顯示其內容來擴展iOS應用程序的功能。考慮人們可能想要共享哪些信息,以及他們如何在活躍對話的背景下與您的應用進行交互。

5)插入內容以避免裁切

應用程序的內容以帶有圓角的消息氣泡形式顯示,因此請不要將重要信息放在拐角處。

6)區分緊湊型視圖和擴展視圖

您的應用將顯示在對話下方的緊湊視圖中。此視圖應在視覺上將您的應用與其他應用區分開來,并提供對常用功能的訪問。人們還可以在展開的視圖中打開您的應用,以訪問高級功能或一次查看更多選項。

7)只允許在擴展視圖中進行文本編輯

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

1. 貼紙

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

最新iOS設計規范十|5大拓展程序(Extensions)

1)為表達而設計

人們使用貼紙在視覺上傳達情緒和反應。努力提供貼近人們情感的貼紙。考慮合并圖像、單詞和短語以為對話添加新的維度。

2)放眼全球

消息傳遞是一種通用的通信形式。力求獲得具有廣泛國際吸引力的貼紙。

3)使用描述性圖像名稱或提供替代文本標簽。

盡管它們在屏幕上不可見,但是圖像名稱和其他文本標簽使VoiceOver可以聽得見地描述貼紙,從而使視力障礙者的導航更加輕松。

4)通過動畫增加活力

盡管貼圖可以是靜態圖像,但動畫貼圖是在對話中傳遞能量的好方法。確保使用足夠高的幀頻以保持運動流暢。

5)測試放置的可能性

用戶可以縮放,旋轉和在對話的各個部分上放置貼紙。確保您的貼紙清晰可見,無論其位置或大小如何,其顏色和圖像均不同。

6)考慮使用鮮艷的色彩和透明度

鮮艷的色彩為對話增添了豐富感和興奮感。透明性允許將貼紙有意義地放置在消息,照片和其他貼紙上。

2. 貼紙尺寸

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

最新iOS設計規范十|5大拓展程序(Extensions)

1)適當縮放貼紙

盡管可以根據需要將Messages縮小較大的貼紙,但最好提供預先縮放的貼紙以實現最佳質量和性能。

2)請注意文件大小限制

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

3. 貼紙格式

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

最新iOS設計規范十|5大拓展程序(Extensions)

4. iMessage應用程序和貼紙包圖標

像iOS應用一樣,iMessage應用和貼紙包也需要可識別的應用圖標。保持背景簡單,并提供單個焦點。設計一個帶有單個中心點的圖標,一目了然。包括一個不會壓倒其他圖標的簡單背景。

保持圖標四角方形。系統應用一個自動將圖標角變圓的蒙版。提供不同大小的圖標。您的圖標出現在App Store、消息、通知和設置中。為確保您的圖標在任何情況下和在任何設備上均顯示精美,可以提供以下尺寸的圖標變體:

最新iOS設計規范十|5大拓展程序(Extensions)

四、照片編輯(Photo Editing)

通過“照片編輯”擴展程序,人們可以通過應用濾鏡或進行其他更改來在“照片”應用程序中修改照片和視頻。修改總是以新文件的形式保存在“照片”應用中,從而安全地保留原始版本。

最新iOS設計規范十|5大拓展程序(Extensions)

要訪問照片編輯擴展名,照片必須處于編輯模式。

在編輯模式下,點擊工具欄中的擴展名圖標將顯示可用編輯擴展名的操作菜單。選擇一個將在包含導航欄的模式視圖中顯示擴展的界面。撤消該視圖將確認并保存編輯,或取消編輯并返回到“照片”應用程序。

1)確認取消編輯

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

2)不要提供自定義導航欄

您的擴展程序將加載到已經包含導航欄的模式視圖中。提供第二個導航欄會造成混亂,并占用正在編輯內容的空間。

3)讓人們預覽編輯

如果您看不到它的外觀,則很難批準該編輯。在關閉您的擴展程序并返回到“照片”應用程序之前,讓人們看到他們的工作結果。

4)使用您的應用程序圖標作為照片編輯擴展程序圖標

這使您確信該擴展程序實際上是由您的應用程序提供的。

五、分享和操作(Sharing and Actions)

“分享和操作”擴展程序為與APP、社交媒體帳戶和其他服務共享當前頁面中的信息提供了一種便捷的方式。操作擴展則是讓用戶啟動針對當前內容的任務,例如添加書簽、復制鏈接、保存圖像。

用戶在點擊頁面中的操作按鈕,會顯示帶有共享擴展和操作擴展的活動視圖。該活動視圖只會顯示與當前內容相關的擴展。例如:在編輯視頻時,你不會看到文本類的操作按鈕。在活動視圖中,共享擴展顯示在操作擴展的上方。

最新iOS設計規范十|5大拓展程序(Extensions)

1)啟用一個集中的任務

擴展程序不是迷你應用程序。它執行與當前上下文有關的范圍狹窄的任務。

2)制作一個熟悉的界面

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

3)簡化并限制交互

最好的擴展程序使人們僅需幾個步驟即可執行任務。例如,共享擴展名可以通過單擊立即將圖像發布到社交媒體帳戶。僅在必要時提供接口。

4)避免將模式視圖放在擴展中

默認情況下,擴展顯示在模式視圖中。盡管在擴展名上方可能會發出警報,但請避免分層附加模式視圖。

5)使用您的主應用程序表示冗長的操作進度

在啟動共享或操作后,應立即關閉活動視圖。耗時的任務應在后臺繼續,您的主應用程序應提供某種方式來檢查這些任務的狀態。請勿為此使用通知。人們不想在每次任務完成時都看到通知,盡管如果有問題也可以通知他們。

6)將模板圖像用作操作擴展圖標

模板圖像使用遮罩創建圖標。使用具有適當透明度和抗鋸齒的黑色和白色,并且不要包含陰影。模板圖片應居中放置在大約70px×70px的區域中。

本文是iOS平臺規范第10篇,介紹了iOS的擴展程序(Extensions),參考資料Apple Developer-Human Interface Guidelines。本文是該系列最后一篇,感謝你的閱讀。后續將陸續發表其他規范類文章,敬請關注。

#專欄作家#

曉吾,微信公眾號:體驗主義,人人都是產品經理專欄作家。騰訊高級交互設計師,前創新工場、新浪微博交互設計師。專注社交創新與娛樂產品設計。

本文由 @曉吾 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!

4人打賞

文章若有侵權請來信告知:品牌行銷策略,產品行銷與設計,各類型行銷推廣案例分享-品牌行銷點點讚 » 最新iOS設計規范十|5大拓展程序(Extensions)