iOS14小部件設計指南,ios13系統(tǒng)小組件,ios13時間表-ESG跨境

iOS14小部件設計指南,ios13系統(tǒng)小組件,ios13時間表

IOS14 Widget設計指南

iOS14 Widget設計指南

在iOS 14及更高版本中，獨特漂亮的小部件不僅可以提供有用的信息，還可以讓用戶個性化主屏幕。通過該功能，可以有效展示產(chǎn)品內(nèi)容，提高App活躍度和留存率。這一周，我們將重點討論如何設計漂亮的widgets ~

1.通過顏色、布局和圖像傳達你的品牌。

如果您需要在小部件中顯示徽標、文本標記或應用程序圖標，請以不干擾內(nèi)容的方式集成它們。在某些情況下(比如在iPhone主屏幕上和編輯模式下)，系統(tǒng)會自動在widget下顯示你的應用名稱，所以你不需要在內(nèi)容中重復這個名稱。

2.這個小部件設置了一個舒適的信息密度。

當內(nèi)容顯得稀疏時，小部件可能看起來是多余的；當內(nèi)容過于密集時，小部件將無法瀏覽。如果您想要包含大量信息，請避免將小部件做成難以解析的項目拼貼。尋求組織內(nèi)容的方法，使人們可以立即抓住關鍵部分，并在更長的時間內(nèi)查看相關細節(jié)。您還可以考慮創(chuàng)建一個更大的小部件，并尋找一個可以用圖形替換文本而又不失清晰的位置。

3.明智地使用顏色，并支持黑暗模式。

豐富而美麗的顏色會吸引用戶的注意力，正確使用顏色可以增強小工具的外觀，而不會與其內(nèi)容形成競爭。小部件應該在明亮和黑暗的外觀看起來都很棒。通常，避免在淺色背景上顯示深色文本以顯示深色，或者在淺色背景上顯示淺色文本以顯示淺色。當您對文本和背景使用語義系統(tǒng)顏色時，這些顏色將動態(tài)適應當前外觀。您還可以通過在資產(chǎn)目錄中放置顏色變化來支持不同的外觀。

4.考慮使用SF Pro

使用系統(tǒng)字體可以幫助您的小部件輕松顯示各種粗細、風格和大小的漂亮文本。如果需要使用自定義字體，請慎重考慮使用。在小部件中對大文本使用自定義字體，對小文本使用SF Pro通常效果很好。總是在小部件中使用文本元素，以確保文本縮放良好。特別是，不要柵格化文本這將阻止VoiceOver(iPhone輔助功能)朗讀您的內(nèi)容?？紤]到SF符號的使用，SF符號可以幫助您使用SF Pro將符號與文本對齊和縮放。

5.設計一個真實的預覽顯示在部件庫中。

突出小部件的外觀和功能有助于人們做出明智的決定，并鼓勵他們添加小部件。您可以在微件預覽中顯示真實數(shù)據(jù)，但如果數(shù)據(jù)生成或加載時間過長，請顯示真實的模擬數(shù)據(jù)。

6.設計占位符內(nèi)容，幫助人們識別您的小部件。

小部件在加載數(shù)據(jù)時顯示占位符內(nèi)容。通過將UI的靜態(tài)部分與代表實際內(nèi)容的半透明形狀相結合，可以創(chuàng)建有效的預覽。例如，您可以使用不同寬度的矩形建議線來標記文本行，并使用圓形或正方形來代替字形和圖像。

7.為你的部件寫一個簡明的描述。

微件庫中顯示的描述可以幫助人們理解每個微件的功能。從動作動詞開始通常效果很好；例如，“查看當前天氣狀況和位置預報”或“跟蹤即將到來的事件和會議”。避免使用不必要的短語來指代小部件本身，例如“這個小部件顯示了...”，“使用此小部件……”或者“添加此小部件”。

8.適應不同的屏幕尺寸

小工具可以縮放，以適應不同設備和屏幕區(qū)域的屏幕大小。除了使用SF Pro和SF符號，您還可以通過提供適當大小的內(nèi)容來確保小部件在每個設備上都很好看。

調(diào)整背景圖像的大小，以匹配最大的部件大小。確保您的圖像在最大的窗口小部件尺寸下看起來不錯，并將其縮小以較小的尺寸顯示。使用下面列出的值作為指南。

9.使內(nèi)容的角度半徑與小部件的角度半徑一致。

為了確保您的內(nèi)容在小部件的圓角內(nèi)看起來不錯，請使用SwiftUI容器來應用正確的圓角半徑。

請使用標準頁邊距，以確保您的內(nèi)容清晰易讀。標準邊距寬度為16磅。

如果您的小部件顯示文本、字形和圖形等內(nèi)容，請使用標準邊距來避免邊緣擁擠和外觀混亂。如果使用背景形狀來創(chuàng)建可視內(nèi)容分組或顯示按鈕背景，可能需要使用窄邊距。窄邊距(寬度為8磅)也有助于使包含信息的圖形更易于人們閱讀。

特別聲明：以上文章內(nèi)容僅代表作者本人觀點，不代表ESG跨境電商觀點或立場。如有關于作品內(nèi)容、版權或其它問題請于作品發(fā)表后的30日內(nèi)與ESG跨境電商聯(lián)系。