Appstore：iOS14小部件設(shè)計指南

iOS14小部件設(shè)計指南

在iOS 14及更高版本中，獨特精美的小部件不僅可以提供有用的信息，還可以讓用戶個性化主屏幕，借助這一功能可以有效的展示產(chǎn)品內(nèi)容，提高App活躍及留存。本周我們來重點介紹，如何設(shè)計漂亮的小部件~

1、通過顏色，版式和圖像傳達您的品牌

如果您需要在小部件中顯示徽標、文字標記或應(yīng)用程序圖標，請以不干擾內(nèi)容的方式將其集成。在某些情況下（例如在iPhone主屏幕上和在編輯模式下），系統(tǒng)會在小部件下方自動顯示您的應(yīng)用名稱，因此您無需在內(nèi)容中重復(fù)該名稱。

2、小部件設(shè)置舒適的信息密度

當(dāng)內(nèi)容顯得稀疏時，小部件可能看起來是多余的；當(dāng)內(nèi)容太密集時，小部件將無法瀏覽。如果要包含很多信息，請避免讓小部件成為難以解析的項的拼貼。尋求整理內(nèi)容的方法，以便人們可以立即掌握關(guān)鍵部分，并以更長的時間查看相關(guān)細節(jié)。您可能還考慮創(chuàng)建一個較大的小部件，并尋找可以用圖形替換文本而又不會失去清晰度的位置。

3、明智地使用顏色，支持暗模式

豐富、美麗的色彩會吸引用戶的眼球，正確地使用顏色可以增強小部件的外觀，而又不會與它的內(nèi)容競爭。小部件在亮色和深色外觀上都應(yīng)該看起來很棒。通常，請避免在淺色背景上顯示深色文本以顯示深色，或在淺色背景上顯示淺色文本以顯示淺色。當(dāng)您將語義系統(tǒng)顏色用于文本和背景時，這些顏色會動態(tài)適應(yīng)當(dāng)前外觀。您還可以通過在資產(chǎn)目錄中放置顏色變體來支持不同的外觀。

4、考慮使用SF Pro

使用系統(tǒng)字體可以幫助您的小部件輕松顯示各種粗細，樣式和大小的美觀文本。如果您需要使用自定義字體，請考慮謹慎使用。對于小部件中的大文本使用自定義字體，對于小文本使用SF Pro，通常效果很好。始終在窗口小部件中使用文本元素，以確保文本縮放良好。特別是，請勿光柵化文本-這樣做會阻止VoiceOver（iPhone輔助功能）說出您的內(nèi)容。考慮使用SF符號，SF Symbols可以幫助您將符號與使用SF Pro的文本對齊和縮放。

5、設(shè)計一個現(xiàn)實的預(yù)覽以顯示在小部件庫中

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

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

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

7、為您的小部件寫一個簡潔的描述

小部件庫顯示的描述可以幫助人們理解每個小部件的功能。從動作動詞開始描述通常效果很好；例如，“查看當(dāng)前天氣狀況和位置預(yù)測”或“跟蹤即將舉行的活動和會議”。避免包含不必要的短語來引用窗口小部件本身，例如“此窗口小部件顯示...”，“使用此窗口小部件...”或“添加此窗口小部件”。

8、適應(yīng)不同的屏幕尺寸

窗口小部件可以縮放以適應(yīng)不同設(shè)備和屏幕區(qū)域的屏幕大小。除了使用SF Pro和SF Symbols外，您還可以通過提供適當(dāng)大小的內(nèi)容來確保小部件在每個設(shè)備上看起來都很好。

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

9、將內(nèi)容的角半徑與小部件的角半徑進行協(xié)調(diào)。

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

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

如果您的窗口小部件顯示諸如文本，字形和圖形之類的內(nèi)容，請使用標準邊距來避免邊緣擁擠和外觀混亂。如果使用背景形狀創(chuàng)建視覺內(nèi)容分組，或者顯示按鈕背景，則可能需要使用窄邊距。窄邊距（寬度為8個點）還可以幫助使包含信息的圖形更易于人們閱讀。