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

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

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

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

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

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

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

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

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

4、考慮使用SF Pro

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

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

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

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

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

7、為您的小部件寫一個(gè)簡潔的描述

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

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

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

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

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

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

請(qǐng)使用標(biāo)準(zhǔn)頁邊距來確保您的內(nèi)容清晰易讀。標(biāo)準(zhǔn)邊距寬度為16點(diǎn)。

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