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

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

IOS14 Widget設(shè)計(jì)指南

iOS14 Widget設(shè)計(jì)指南

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

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

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

2.這個(gè)小部件設(shè)置了一個(gè)舒適的信息密度。

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

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

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

4.考慮使用SF Pro

使用系統(tǒng)字體可以幫助您的小部件輕松顯示各種粗細(xì)、風(fēng)格和大小的漂亮文本。如果需要使用自定義字體，請(qǐng)慎重考慮使用。在小部件中對(duì)大文本使用自定義字體，對(duì)小文本使用SF Pro通常效果很好?？偸窃谛〔考惺褂梦谋驹?，以確保文本縮放良好。特別是，不要柵格化文本這將阻止VoiceOver(iPhone輔助功能)朗讀您的內(nèi)容。考慮到SF符號(hào)的使用，SF符號(hào)可以幫助您使用SF Pro將符號(hào)與文本對(duì)齊和縮放。

5.設(shè)計(jì)一個(gè)真實(shí)的預(yù)覽顯示在部件庫中。

突出小部件的外觀和功能有助于人們做出明智的決定，并鼓勵(lì)他們添加小部件。您可以在微件預(yù)覽中顯示真實(shí)數(shù)據(jù)，但如果數(shù)據(jù)生成或加載時(shí)間過長(zhǎng)，請(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ù)覽。例如，您可以使用不同寬度的矩形建議線來標(biāo)記文本行，并使用圓形或正方形來代替字形和圖像。

7.為你的部件寫一個(gè)簡(jiǎn)明的描述。

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

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

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

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

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

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

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

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

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