關(guān)于iOS 14的Widget意狠，在HIG中的建議內(nèi)容悼吱，官方文檔地址
https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/widgets/

小組件從app中提出關(guān)鍵內(nèi)容胞得，顯示在讓人們能在iPhone、iPad和Mac上一眼就看到地方陈肛。有用且宜人闻书，也能讓人么按自己獨(dú)特的方式個(gè)性化定制自己的iPhone主屏幕。
小組件在iOS14和macOS11后可用涝影，開(kāi)發(fā)指南 -> Creating a Widget Extension

image

A Closer Look at Widgets

可用創(chuàng)建小枣察、中、大三種尺寸的小組件燃逻，在iPhone序目、iPad和Mac的小組件庫(kù)里找到小組件并選擇一個(gè)組件的尺寸。選擇組建后伯襟，進(jìn)入編輯模式移動(dòng)組件到想要放置的位置猿涨，很多情況下會(huì)對(duì)組件進(jìn)行配置。
例如姆怪，人們可能在主屏幕上選擇放置多個(gè)小尺寸天氣組件叛赚，這樣可以為每個(gè)組件配置不同的地點(diǎn)來(lái)顯示其天氣澡绩。
人們可以在iPhone的主屏幕或Today視圖里，iPad的Today視圖里和macOS的通知中心里放置小組件俺附。

在iPhone和iPad上肥卡，組件庫(kù)提供了一個(gè)預(yù)創(chuàng)建的組件棧 - 叫Smart Stack(智能疊放)，它可以防止在iPhone的主屏幕上事镣，或者iPhone和iPad的Today視圖里步鉴。

Creating a Useful, Focused Widget

盡管人們可以點(diǎn)擊小組件來(lái)在app里查看操作更多內(nèi)容，小組件的主要意圖是在不打開(kāi)app的情況下顯示少量的璃哟、個(gè)人相關(guān)的信息氛琢。為小組件確認(rèn)一個(gè)單一的idea，并且確定信息范圍沮稚，是設(shè)計(jì)階段的的首要步驟艺沼。
Focus your widget on one idea. 大多數(shù)情況下，可以用app的主要idea來(lái)做小組件的idea蕴掏。例如障般，天氣app可以顯示某地的天氣信息，卡路里追蹤app可以顯示每日卡路里消耗盛杰，新聞app可以顯示流行故事挽荡。同樣的，也可以聚焦于app的主要idea的某一部分即供，比如游戲中顯示角色的狀態(tài)定拟，或畫(huà)圖app顯示最喜歡的素描作品.

image

Small

Medium

Large

Avoid creating a widget that does nothing but launch your app. 人們會(huì)因?yàn)榭梢钥焖俜奖阍L問(wèn)有意義內(nèi)容而喜歡小組件，而不是因?yàn)樗峁┝肆硪环N打開(kāi)App的方式

Offer your widget in multiple sizes when doing so adds value. 通常吻育，避免只是簡(jiǎn)單地?cái)U(kuò)大一個(gè)小號(hào)組件的內(nèi)容來(lái)填充更大的區(qū)域念秧。為你的idea創(chuàng)建一個(gè)合適尺寸的組件，比提供所有尺寸的組件更重要扫沼。

Prefer dynamic information that changes throughout the day. 如果一個(gè)組件的內(nèi)容從不會(huì)變化出爹，人們可能不會(huì)把他放在顯眼的位置庄吼。盡管組件不會(huì)時(shí)不時(shí)更新，找到一種方式來(lái)保持它們的內(nèi)容新鮮來(lái)獲取更多的關(guān)注是很重要的严就。

Look for opportunities to surprise and delight. 比如总寻，你可能為你的日歷組件設(shè)計(jì)一個(gè)獨(dú)特的視覺(jué)效果來(lái)顯示有意義的時(shí)機(jī)，像生日或節(jié)日之類的梢为。

image

Supporting Widget Configuration and Interactivity

Offer a configurable widget when it makes sense. 很多情況下渐行，在組件顯示有用的內(nèi)容前，人們需要明確它們想看的的信息是什么铸董。例如祟印，人們需要為一個(gè)天氣組件選擇地點(diǎn)，或者為股票組件選擇股票代碼粟害。相反地蕴忆，播客組件是預(yù)配置好的來(lái)顯示最近內(nèi)容，這樣人們不需要去定制它悲幅。
如果你在創(chuàng)建一個(gè)可配置組件套鹅，避免要求太多的設(shè)置或索要一些人們可能很難獲取到的信息。你不需要為自己的組件設(shè)計(jì)一個(gè)配置UI汰具，因?yàn)橄到y(tǒng)會(huì)自動(dòng)生成它卓鹿。開(kāi)發(fā)指南Making a Configurable Widget

Ensure that tapping your widget opens your app at the right location. 當(dāng)人們點(diǎn)擊組件時(shí)，它會(huì)深度鏈接到app中與組件內(nèi)容相關(guān)留荔、提供更多細(xì)節(jié)和操作的地方吟孙。例如，當(dāng)人們點(diǎn)擊一個(gè)股票代碼組件聚蝶，股票app會(huì)打開(kāi)顯示關(guān)于該只股票信息的頁(yè)面杰妓。類似地，當(dāng)人們點(diǎn)擊一個(gè)小號(hào)股票觀察列表組件時(shí)碘勉，app打開(kāi)顯示完整的觀察列表稚失。

Avoid defining too many tap targets. 一個(gè)小號(hào)組件支持一個(gè)單獨(dú)的點(diǎn)擊目標(biāo)，但是中號(hào)和大號(hào)組件可以提供多個(gè)目標(biāo)恰聘。例如，中號(hào)Notes組件可以顯示幾條記錄吸占。當(dāng)人們點(diǎn)擊其中一個(gè)時(shí)晴叨，App打開(kāi)顯示該條記錄。

image

Let people know when authentication adds value. 如果你的組件在登錄了app之后可以提供更多的功能件蚕，要確保人們知道這點(diǎn)孙技。例如产禾，一個(gè)顯示upcoming reservation的app，在人們未登錄時(shí)可能包含像"登錄來(lái)查看預(yù)約"這樣的信息

Updating Widget Content

Keep your widget up-to-date. 為了保持相關(guān)且有用牵啦，組件需要定期刷新它們的信息亚情。組件不支持 持續(xù)的、實(shí)時(shí)的更新哈雏，而且系統(tǒng)可能根據(jù)多種原因調(diào)整更新的限制楞件。根據(jù)數(shù)據(jù)多長(zhǎng)時(shí)間變化一次和預(yù)估人們多長(zhǎng)時(shí)間需要看到一次新數(shù)據(jù)來(lái)為你的組件找到合適的更新頻率。例如裳瘪，一個(gè)幫助人們追蹤海灘潮汐的組件土浸，可以按小時(shí)提供有用的信息，盡管潮汐情況是持續(xù)變化的彭羹。
如果人們可能比你更新數(shù)據(jù)更頻繁地查查看你的組件黄伊，考慮下顯示描述數(shù)據(jù)最后一次更新時(shí)間的文本。developer guidance Keeping a Widget Up to Date

Let the system update dates and times in your widget. 組件的更新頻率是受限的派殷，你可以通過(guò)讓系統(tǒng)刷新日期和時(shí)間信息來(lái)preserve一些你的更新機(jī)會(huì)还最。

Show content quickly. 當(dāng)你確定了適合你所顯示數(shù)據(jù)的更新頻率時(shí)，不需要在占位內(nèi)容后隱藏過(guò)期數(shù)據(jù)愈腾。

Designing a Beautiful Widget

在iOS14及以后憋活，組件使用豐富且大膽的色彩, 令人思緒馳騁的圖片, 和清晰易讀的文本。一個(gè)獨(dú)特虱黄、漂亮的組件不知提供有用的信息悦即，也可以讓人們定制化自己的主屏幕。

Communicate your brand through color, typography, and images.
如果你需要在組件中顯示你的logo橱乱、商標(biāo)或app圖標(biāo)辜梳，用不會(huì)從內(nèi)容中分心的方式整合它。一些情況下泳叠，比如在iPhone的主屏幕和編輯模式中作瞄，系統(tǒng)會(huì)自動(dòng)在你的組件下顯示你的app名字，所以不需要在內(nèi)容中重復(fù)它危纫。

Aim for a comfortable density of information. 當(dāng)內(nèi)容顯示很稀少時(shí)宗挥，組件似乎就沒(méi)有必要性了；當(dāng)內(nèi)容過(guò)于密集時(shí)种蝶，組件就不是那么一目了然了契耿。入股有大量的信息想包括，避免讓你的組件稱為一組難以解析的東西螃征。
找一種方式來(lái)策劃內(nèi)容搪桂，讓人們可以立即抓到重要的部分，然后用更長(zhǎng)的時(shí)間來(lái)查看相關(guān)的細(xì)節(jié)盯滚。你也可以考慮創(chuàng)建一個(gè)更大的組件踢械，在不丟失清晰度的情況下用圖像替換文本酗电。

Use color judiciously. 豐富、漂亮的色彩可以吸引眼球内列，但它們絕不應(yīng)該阻礙人們一眼抓到組件的信息撵术。使用色彩來(lái)增強(qiáng)組件的表現(xiàn)，而不是跟它的內(nèi)容產(chǎn)生競(jìng)爭(zhēng)德绿。在asset catalog中，可以詳列出你希望系統(tǒng)使用來(lái)生成組件配置UI的色彩移稳。

Support Dark Mode. 組件應(yīng)該在淺色和深色模式中都顯示良好蕴纳。通常个粱，避免在深色模式中顯示淺色背景上的深色文本，或者在淺色模式中顯示黑色背景上的淺色文本都许。當(dāng)為文本和背景使用語(yǔ)義系統(tǒng)顏色時(shí)稻薇，顏色會(huì)動(dòng)態(tài)適配當(dāng)前的顯示模式胶征。也可以通過(guò)在asset catalog中放入顏色變體來(lái)支持不同的顯示模式。For guidance, see Dark Mode(iOS) and Dark Mode(macOS); for developer guidance, see About Asset Catalogs.

image	image

Consider using SF Pro. 使用系統(tǒng)字體可以在任何平臺(tái)上讓你的組件look at home睛低，并且可以用各種各樣的粗細(xì)、風(fēng)格和大小來(lái)顯示好看的文本钱雷。如果你需要使用定制的字體，請(qǐng)謹(jǐn)慎使用并且確保它能夠一目了然罩抗。通常在組件中為大文本使用定制字體拉庵、為小文本使用SF Pro效果會(huì)很好套蒂。
For guidance, see Typography(iOS) and Typography(macOS)

Always use text elements in a widget to ensure that your text scales well. 特別是，不用柵格化(rasterize)文本操刀，這樣做會(huì)阻止旁白(VoiceOver)朗讀你的內(nèi)容伸辟。

Consider using SF Symbols. SF Symobls 使用SF Pro的文本幫助你對(duì)齊和縮放符號(hào)。For guidance, see SF Symbols

Design a realistic preview to display in the widget gallery. 突出顯示組件的外觀和能力可以幫助人們做出明智的決定馍刮，可以鼓勵(lì)他們添加你的組件。你可以在組件預(yù)覽中顯示真實(shí)數(shù)據(jù)窃蹋，但是如果數(shù)據(jù)需要太長(zhǎng)時(shí)間來(lái)生成或加來(lái)卡啰，使用真實(shí)的模擬數(shù)據(jù)來(lái)顯示静稻。

Design placeholder content that helps people recognize your widget. 一個(gè)組件在它的數(shù)據(jù)加載中時(shí)會(huì)顯示占位內(nèi)容。你可以使用 代表實(shí)際內(nèi)容的半透明形狀 和 UI的靜態(tài)部分 來(lái)創(chuàng)建一個(gè)有效預(yù)覽匈辱。例如振湾，可以使用不同寬度的圓角矩形來(lái)表示文本行，使用圓形或方形來(lái)代替字形和圖像亡脸。

image	image

Write a succinct description of your widget. 組件庫(kù)中顯示描述來(lái)幫助人們了解每個(gè)組件可以做什么押搪。通常用一個(gè)行為動(dòng)詞開(kāi)頭會(huì)很好；例如浅碾，"查看當(dāng)前的天氣狀況和某地的預(yù)告"大州，或"追蹤即將舉行的活動(dòng)和會(huì)議"。避免包含非必要的垂谢、涉及組件自身的詞語(yǔ)厦画，像是"這個(gè)組件顯示了..."，"使用這個(gè)組件來(lái)..."或者"添加這個(gè)組件"滥朱。使用平易近人的語(yǔ)言和大寫(xiě)句式根暑。

Adapting to Different Screen Sizes 適配不同屏幕尺寸

組件會(huì)縮放來(lái)適配不同設(shè)備的的屏幕尺寸和在屏幕上的區(qū)域。此外徙邻，使用SF Pro 和 SF Symobls排嫌，通過(guò)提供適當(dāng)大小的內(nèi)容，可以確保你的組件在每種設(shè)備上顯示良好缰犁。

Size background images to match the largest widget dimensions. 確保你的圖片在最大的組件尺寸上看起來(lái)良好淳地，然后讓他們縮放來(lái)顯示在較小的尺寸上。使用下面列出的值作為指導(dǎo)民鼓。

Coordinate the corner radius of your content with the corner radius of the widget. 確保你的內(nèi)容在組件的圓角下展示良好薇芝，使用用SwiftUI容器來(lái)應(yīng)用正確的圓角。
For developer guidance, see ContainerRelativeShape

In general, use standard margins to ensure your content is comfortably legible. 標(biāo)準(zhǔn)的間距是16個(gè)點(diǎn)丰嘉。如果你的組件顯示內(nèi)容像是文本夯到、排版和圖像，使用標(biāo)準(zhǔn)的間距來(lái)避免邊緣擁擠和雜亂無(wú)章饮亏。如果你使用背景圖形來(lái)創(chuàng)建視覺(jué)內(nèi)容分組耍贾，或者顯示背景按鈕，你可能需要使用緊貼的邊距荐开。Tight margins，寬度為8個(gè)點(diǎn)晃听，可以幫助人們更好閱讀包含信息的圖像。