HIG iOS 翻譯 Extension|擴充

benchen900
15 min readOct 24, 2021

--

Extension 擴充
Custom Keyboards 自訂鍵盤
File Providers 資料工具
Messaging 訊息
Photo Editing 相片編輯
Sharing and Actions 分享與操作
Home Screen Quick Actions 主畫面快速動作(原文已刪除)
Widgets(原文已刪除)

Custom Keyboards

原文連結

鍵盤擴充以自訂鍵盤取代標準鍵盤。在設定中啟用自訂鍵盤,在路徑:一般>鍵盤中調整。一經啟用,可以在任何App中使用該鍵盤,除了編輯安全性文字框和手機號碼框。人們可以使用多個自訂鍵盤並隨時切換

確認是否需要自訂鍵盤 當你想要使用鍵盤的獨特功能時,使用自訂鍵盤是合理的,像是輸入文字的新方法或是iOS不支援的語言。若你想要只在App中使用自訂鍵盤,考慮創建自定Input View。查看Custom Input Views

明顯易用的鍵盤切換方法 人們知道iOS的標準鍵盤中的“地球”鍵是用來切換其他鍵盤。他們預期在你的鍵盤有相似的直覺體驗。注意當你安裝多個鍵盤時,地球鍵會取代Emoji鍵

切勿複製系統提供鍵盤的功能 在某些裝置中,即便使用自訂鍵盤也會自動出現“地球”、“Emoji”、“聽寫”鍵。你的App不會影響這些按鍵,因此避免重複出現以免混淆

思考如何在App中提供鍵盤教程 人們已經習慣標準鍵盤,而學習新鍵盤需要時間。透過App中的教學讓Onboarding過程更容易,而非讓他們自己在鍵盤中摸索。告訴人們如何啟用鍵盤、在輸入時啟用、使用並切換回標準鍵盤

開發者指南請參閱Creating a Custom Keyboard

自訂輸入視圖

自訂輸入試圖以自訂鍵盤取代標準鍵盤,但只在你的App中而非整個系統。使用自訂輸入視圖提供獨特、效率的輸入法。例如Numbers提供在試算表輸入數值的自訂輸入視圖

顯而易見的功能 自訂輸入視圖的操作應合乎當前使用的環境。輸入應簡單且直覺,因此額外的教學是不必要的

輸入時播放標準鍵盤的按鍵音 當使用者剪輯鍵盤按鍵時鍵盤提供音效回饋。點擊輸入視圖中的自訂操作也應該產生相同音效。注意此音效只適用於可見的自訂輸入視圖,而人們可以透過在設定>聲音來關閉全系統的按鍵音音效。開發者指南請參閱UIDevice中的方法playInputClick

必要時提供輸入輔助視圖 某些App提供額外的自訂輸入輔助視圖,顯示於鍵盤上方。在Numbers中,輸入輔助幫助人們輸入標準或自訂計算式

File Providers 檔案檢視器

原文連結

檔案檢視器提供輸入、輸出、和其他App之間移動App檔案的自訂介面。當檔案檢視器安裝時,他的介面顯示在Navigation Bar的Modal View中

當使用者打開或輸入檔案時,只顯示特定檔案和其資訊 當人們使用你的擴充來打開或輸入檔案,在當前環境中只顯示合適的檔案。例如PDF編輯App安裝你的擴充,盡可能條列可被開啟或輸入的檔案。確保其他有用資訊也條列顯示,例如上一次編輯的時間、檔案大小、檔案位置、在本機或遠端

在輸出或移動檔案時讓人們選擇目的地 除非你的App Store檔案只有單一路徑,則讓使用者瀏覽特定目的地。考慮提供加入次要目的地的方法

切勿提供自訂Navigation Bar 你的擴充安裝在已經包含Navigation Bar的Modal View中。提供第二個Navigation Bar將使人困惑且佔空間的

開發者指南請參閱FileProvider

Messaging 訊息

原文連結

iMessage appsSticker packs是讓人們與朋友分享內容、溝通傳達、分享協作體驗的訊息擴充

iMessage App

iMessage App提供互動體驗。iMessage App讓人們和他人分享資訊、媒體、協作工作

Compact/Expanded

設計直覺的互動 若你的訊息App提供靜態物件如文字、圖片、影片,確保瀏覽、選取並插入對話容易上手。若你的App可互動,例如多人遊戲或共同外送訂單,確保功能性易使用、易理解

專注於內容 為了清楚且簡化的使用,每個訊息擴充應有單一重點。例如,勿嘗試在一個App中結合貼圖和共享交通的功能

提供有趣的協作體驗 訊息App通常用於兩人以上的快節奏、非正式溝通。透過共享、編輯、擴充內容來創造鼓勵不斷的參與使用的環境。若所有人都同時使用App,內容須即時更新

強調有趣的iOS App內容 在訊息空間中顯示內容擴展iOS App的功能性。思考什麼樣的內容人們會想要分享、他們如何在對話中與App互動

避免插入內容被剪裁 你的App將對話顯示在有圓角的泡泡訊息中,因此,不要將重要資訊置於角落

區分收合和展開視圖 你的App在對話中顯示為收合視圖。此視圖應在視覺上與其他App區分,並提供常用功能。人們也可以透過展開視圖來使用進階功能或查看更多選項

只允許在展開視圖中編輯訊息 收合視圖與鍵盤高度大致相同。只允許在展開視圖中編輯訊息,以確保使用者可以看見他們的編輯內容

Stickers 貼圖

訊息中的貼圖提供有趣、讓人表達自我的方式且無需輸入文字或Emoji。貼圖可以發送或放置在訊息、照片或其他貼圖上,以強調、傳達情感的圖像或動畫

Compact/Expanded

為傳達而設計 人們使用貼圖來傳達視覺畫的情緒或反應。盡力提供符合人們情感的貼圖。思考合併圖像、文字、短句來增加對話層次

思考國際通用 訊息是全球性的溝通。目標是通用的、具跨國性的貼圖

使用描述性的圖像名稱或提供替代文字標籤 雖然它們在螢幕上不可見,圖像名稱和替代文字讓VoiceOver透過聲音描述貼圖,讓視覺障礙者可以簡單地瀏覽

透過動畫貼圖增添活力 雖然貼圖可能是靜態圖像,對話中的動畫貼圖是賦予能量的好方法。確保動畫的幀數足夠保持流暢的動作

測試貼圖的放置 使用者可以縮放、旋轉並放置在對話中。確保你的貼圖清楚可見,無論在任何位置、大小和其他物件的顏色

如何使用漸層色和透明度 鮮豔的色彩加強豐富的對話。透明度允許有意地放在訊息、照片或其他貼圖上

貼圖尺寸

訊息支援三種貼圖尺寸,顯示在基於網格的瀏覽器上。選擇最適合的貼圖尺寸,並在準備該尺寸的貼圖

合適的縮放貼圖 儘管訊息會在必要時縮小較大的貼圖,最好提供預先縮放的貼圖已顯示最佳品質

注意檔案大小限制 為了提高效率,每個單一貼圖均不得超過500KB。注意Xcode使用24-bit色保存PNG動畫,可能會導致檔案超出預期

貼圖格式

訊息支援下列貼圖檔案格式

訊息App和貼圖包Icon

和iOS App一樣,iMessage App和貼圖包一樣需要可辨識的Icon

保持簡樸的背景和單一焦點 設計單一、置中、一目瞭然的Icon。以及不會過於搶眼的背景

保持Icon方角 系統會自動應用圓角的遮罩

提供不同尺寸的Icon 你的Icon會出現在App Store、訊息、通知、設定。為確保Icon在任何狀態和裝置上都能看起來不錯,你可以提供以下尺寸的Icon

關於設計App Icon的額外指南,包含如何將其應用於iMessage App和Sticker Pack Icon,請參閱App Icon.

下載iMessage App和Sticker Pack Icon Photoshop模板請參閱Resources

開發者指南請參閱The Messages Framework

Photo Editing 編輯

原文連結

相片編輯擴充讓人們透過相片App編輯相片、影片來套用濾鏡或其他變更。編輯後建立新檔案,安全的保存原始檔

為開啟相片編輯擴充,必須在編輯模式中開啟相片。點擊Toolbar中的擴充Icon來顯示可用的擴充選單。選擇其一來顯示含有Navigation Bar的擴充介面。確認並保存編輯動作或取消並放棄動作來離開擴充

確認取消編輯 編輯照片、影片會耗費時間。若某人點擊取消鍵,不要立即放棄動作。詢問他們是否真的想要取消,並告知他們的任何編輯動作將在取消後遺失。若沒有經過任何編輯動作則不需要顯示確認訊息

切勿提供自訂Navigation Bar 你的擴充將安裝在已經包含Navigation Bar的Modal View,提供第二個Navigation Bar會使人困惑且壓縮編輯區域

可預覽編輯 如果你無法看到預覽,將難以辨認編輯前後。在關閉擴充回到照片App前就看到變更結果

為你的相片編輯擴充使用App Icon 將使人確信該擴充是由你的App所提供

開發者指南請參閱App Extension Programming Guide中的Photo Editing

Sharing and Actions 分享和操作

原文連結

分享擴充提供方便的方式在App中當前頁面、社群媒體帳號、其他服務中分享資訊。動作況衝讓人們啟用特定工作,像是加到書籤、複製連結、儲存相片。人們可以透過點擊動作鍵(Action Button)來開啟分享、動作擴充。Activity View只會顯示和當前頁面相關的擴充。例如,你不會在影片編輯忠看到文字操作的動作。在Activity View中,分享擴充條列於動作擴充上方

單一、專注的工作 擴充並非小型App。它在有限範圍中顯示和當前頁面相關工作

設計熟悉的介面 分享擴充中,系統提供的組成視圖令人熟悉,且在系統中提供一致的分享體驗。盡可能使用它。而動作視圖包含App名稱或在App中設計可辨識的介面並感到自然

簡化且限制的互動 最佳的擴充讓使用者只需在幾次點擊間執行工作。例如僅需一個點擊而分享擴充將立即在社群媒體中貼出相片。只在必要時提供介面

避免在擴充上放置Modal View 在預設中擴充顯示於Modal View。只有Alert能覆蓋在擴充上方,避免在Modal View增加圖層

使用你的主要App來顯示長時間作業的進度 Activity View應當在分享或動作後立即關閉。

耗時的工作在背景中繼續,而主要App提供一些檢視工作狀態的方式。不要以通知顯示。人們不想在每一次完成時收到通知,而在出現問題時通知是可行的

在動作擴充Icon使用模板圖像 模板圖像使用遮罩來建立Icon。使用黑白、合適的透明度、無鋸齒且無陰影。模板圖像應置中而尺寸為70px × 70px

額外指南請參閱Activity Views。開發者指南請參閱App Extension Programming Guide中的ShareAction in

提示
分享擴充會自動使用你的App Icon,使人們相信擴充是由App所提供

Home Screen Quick Actions 主畫面快速動作

(原文已刪除)

主畫面快速動作是直接從主畫面操作有用的、特定App動作的方式。人們可以點擊並長按App Icon(在3D Touch的裝置僅需短暫點擊)即顯示可用的快速動作選單。例如Mail中提供卡開收件匣、VIP信箱、搜尋、撰寫新郵件等等的快速動作

每個主畫面快速動作包含標題、置左或置右的Icon(根據App在主畫面中的位置)、可選的次標題。再由左至右的語言中標題和次標題文字固定齊左。當有新資訊可獲得時你的App主畫面快速動作立即動態更新。例如訊息提供開啟最近對話的主畫面快速動作

某些App在主畫面快速動作上顯示Widget。例如在股票的快速動作上顯示當前股價。考慮提供Widget來提供更多加值體驗

創建吸引人的、高價值的快速動作選項 例如地圖讓人們可以在不用開啟App就搜尋周邊地點或回家方向。每個App都應該提供至少一個選項、最多四個

避免使用快速動作來簡化導覽 如果到達你的App中的重要頁面是困難且耗時的,首先修正你的導覽架構。再者提供有用、具創意的快速動作

避免對快速動作進行無法預測的更動 動態快速動作是保持動作關聯性的好方法。例如基於當前位置或最近活動、當前時間、設定變更來更新快速動作非常合理。然而,快速動作變動不應該無法預測且使人困惑

為每個快速動作提供足夠的標題空間 動作的標題應立即傳達動作結果,例如“前往主畫面”、“建立新聯絡人”、“新訊息“。若你需要更多提示可以提供次標題。郵件透過次標題顯示是否有未讀郵件在收鍵匣或VIP檔案夾中。不要在標題或次標題中包含App名稱或外來訊息。保持標題簡短以免截斷,轉寫文本時考慮當地化

不用快速動作來通知 人們預期從其他方式收取通知

為每個快速動作提供可識別的Icon 盡可能使用Quick Action Icon中列出的、熟悉的系統Icon。若你需要自己設計Icon,使用包含Apple UI Design Resources for iOS的快速動作Icon模板並遵循Custom Icon指南

不要使用Emoji當作Icon Emoji無法正確地對齊齊右的文字。同時,Emoji是多彩色而快速動作Icon是單色

Widgets

(原文已刪除)

Widget用來顯示少量、及時且有用的訊息或App特定功能。例如新聞Widget顯示頭條;行事曆顯示兩種Widget,分別為當日活動和接下來的活動;備忘錄讓你預覽最近的筆記、快速開啟新筆記、提醒、帳片、圖畫。Widget可高度自訂化,並包含按鈕、文字、自訂排版、圖像或其他

當你以3D Touch點擊主畫面中的App Icon,Widget出現在快速動作清單上方。人們也可以在主畫面或鎖定畫面又滑的搜尋頁中加入他們欲使用的Widget。你的目標是設計出令人想加入搜尋頁的Widget

設計出色的體驗 人們使用Widget來獲得簡要的更新或執行簡易動作,因此傳遞合適的資訊量和互動非常重要。盡可能在一次點擊即可完成工作。Widget不支援平移和滾動

快速顯示內容 人們花短暫時間查看Widget,不要花太多時間在讀取。在裝置使用快取來獲得更新以顯示最新資訊

提供充裕的MarginPadding 避免在Widget邊緣展開內容。一般來說,在各個邊緣和內容間提供至少幾個像素。在Widget頂部使用App Icon。當內容對齊Icon中心時往往運作得很好。若你的App提供網格排版,確保每個網格物件間有足夠的Padding。盡可能限制每行網格的Icon和按鈕的數量在四個內

適應性高 根據不同的裝置與方向有不同寬度的Widget。依照展開或收合(並非所有Widget支援展開)提供不同的高度及資訊。收合的Widget高度大約是兩個半的Table橫列。理想中的Widget高度不超過螢幕高度。只在收合狀態中顯示快速動作清單。收合時,Widget顯示可單獨檢視的重要資訊。展開時Widget顯示額外訊息補充主要資訊。例如天氣App在收合時顯示當前天氣,在展開時顯示每小時的天氣預測

避免自訂Widget背景 盡可能使用系統提供的淺色、模糊Widget背景傳達一致性和易讀性。絕不使用照片作為背景,他可能會與鎖定畫面或主畫面中的背景衝突

一般來說,以黑色或深灰色使用系統提供的字型 系統字型為易讀性而設計,而深色在標準Widget背景中看起來不錯

適時的讓人們進入App以執行更多功能 你的Widget應獨立出App運作。然而,若是人們偶爾需要進行更多動作超出Widget能力,使它易於執行。不要使用佔據空間的“打開App”按鍵。取而代之,讓人們點擊物件本身前往App檢視或編輯。例如行事曆,你可以點擊活動並前往App中的活動頁面。絕不要使用Widget而打開其他App

Widget的命名 App Icon和標題出現在每個Widget的內容上方。一般來說,Widget的名稱應搭配App名稱。若你的App提供兩個以上的Widget,考慮在名稱前方使用App名稱,清楚明瞭的動作在後。若你使用自訂標題,考慮加入前綴的App名稱。例如地圖週邊位置的標題為“Maps Nearby”(地圖-附近位置)。標題包含App名稱可以使人們確信Widget是由您的App提供

當認證有幫助時讓人們知道此功能 若你的Widget在登入App時提供額外功能,確保人們知悉。例如當人們尚未登入時顯示即將到來的預約並顯示“登入App來檢視您的預約”

為快速動作顯示Widget 若你的App包含多個Widget,當有人以3D Touch在主畫面點擊時顯示一個在快速動作選單中

上一篇

--

--