2020-6-28 資深UI設計者
iOS 14 桌面小組件是這次更新當中的重要功能之一。桌面小組件賦予了 APP 全新的入口，更豐富的交互層級，更多樣的操作模式。
這個在 Android 上存在了十幾年的功能，時至今日，給人的感覺和認知依然不夠強烈——時鐘、天氣、播放控制、快捷開關、待辦事項可能是用得大家最多的幾個小組件，而絕大多數(shù)用戶不會主動想到去用小組件功能。
但是簡單地用「抄襲」二字來描述 iOS 14 上的這一特性又欠缺妥當——畢竟早在 2005 年，Mac OS X 10.4 Tiger 中的 Dashboard 就已經把屏幕小組件給玩兒出花來了。
2005年 Macworld 喬布斯演示Dashboard 小組件
Maemo 開發(fā)者大會上探討小組件背后的心理學機制
在移動端設備上，單具備觸摸屏功能的系統(tǒng)當中，無論是更早的塞班、Maemo，還是同時期的 webOS、Windows Phone 其實都有各自的 Widgets （WP叫動態(tài)磁貼，APP 和組件的融合設計）。其中， Maemo 的設計團隊甚至曾經聘請過心理學和行為學家來專門研究小組件的用戶交互背后的心理學原理。
Windows Phone 中的 APP 快捷方式和小組件是一體化的，多尺寸可選
webOS 中同樣也有屏幕小組件
所以，在今天，更值得我們關注的問題在于：作為目前最主流的 iOS 系統(tǒng)，它的桌面小組件在設計上有哪些講究，而它和 Android 上的桌面小組件有哪些不同？
答案就在 iOS 14 悄悄更新之后的設計規(guī)范當中，咱們一起來看看吧。
說明：以下的內容為蘋果官方設計指南（HIG）的翻譯。
小組件能夠提煉 APP 中的關鍵信息，呈現(xiàn)在 iPhone、iPad 和 Mac 當中最為醒目的位置。小組件以一種令人愉悅的視覺和交互形態(tài)，幫助用戶個性化地呈現(xiàn)屏幕內容，優(yōu)化主屏幕的體驗。
小組件在 iOS 14 和 macOS 11 及更高的版本上才可用，而相關的開發(fā)人員文檔可以戳這里閱讀：
小組件通常有小、中、大三種不同的大小尺寸，在iPhone、iPad 和 Mac 系統(tǒng)當中，用戶可以在小組件庫當中找到小組件，并且選取合適的尺寸。選擇了小組件之后，用戶可以進入界面編輯模式，在這個模式下，用戶可以移動小組件到想要的位置，并且可以根據(jù)需求進行進一步的設置和調整。比如可以在同一屏上放置多個小尺寸的天氣小組件，并且通過設置，讓每個小組件顯示不同位置的天氣。用戶可以將組件放置到主屏幕上，也可以放到 iPhone 的 「今日」頁面上（也就是所謂的最左側的負一屏），iPad 的 「今日」 頁面上，以及 macOS 的通知中心。
在 iPhone 和 iPad 上，小組件還預制了「智能堆棧」功能，也就是說多個小組件可以在同一區(qū)域堆疊，同樣的，用戶可以將它放置在iPhone 的主屏幕以及 iPhone 和 iPad 的 「今日」 頁面上。「智能堆棧」中包含一系列默認小組件，它涵蓋了用戶經常會打開的各種小組件，并且隨著時間的變化，Siri 會幫用戶篩選出最符合當前環(huán)境和語境下的小組件內容，突出顯示。如果用戶打開了「自動旋轉」的選項，Siri 同樣可以高亮顯示自定義的小組件堆棧中的相關小組件。
注意：曾經為 iOS 13 以及更早系統(tǒng)版本所設計的小組件，在新版的系統(tǒng)的主屏幕上是不可用的，但是仍然可以在 「今日」 視圖和 macOS 的通知中心使用。
盡管用戶可以點擊小組件進入APP，然后進行更多的操作，但是小組件的核心功能，始終是顯示少量但是即時的、有用且高度相關的信息，讓用戶無需進入 APP 就可以獲取信息。明確每個小組件的核心目標，并且梳理整合需要展現(xiàn)的信息，是整個設計過程中至關重要的一步。
在多數(shù)情況下，你需要將你的設計目標梳理得非常明確。比如天氣 APP 的小組件，需要顯示的特定某個位置的天氣信息，而一個卡路里跟蹤的 APP 的小組件需要顯示的，可能是當天消耗的卡路里，而新聞 APP 的小組件可能展現(xiàn)的是熱門資訊。通常，小組件可以很專注地呈現(xiàn)程序的一部分內容，就像游戲當中角色所處的狀態(tài)一樣。
在較大的小組件中，你可以顯示更多的數(shù)據(jù)，或者更詳細的可視化的效果，當然，不管多大，它始終應該專注于做一件事情。例如在較小尺寸的小組件中，可以僅僅顯示當前當?shù)氐奶鞖庑畔ⅲ惶熘械淖罡邷囟龋谥械瘸叽绲男〗M件中，同樣的數(shù)據(jù)也被列舉出來，但是額外增加了 6 個小時的天氣預報。在大尺寸的小組件當中，可以在6小時預報的基礎上，還額外展現(xiàn)未來 5 天的天氣預報。
小尺寸小組件
中尺寸小組件
大尺寸小組件
人們真正喜歡小組件的地方，是它能夠提供有意義的信息內容，而不是提供另外一個程序快捷方式。
通常，設計師需要避免簡單地擴大小組件的尺寸而不針對性地修改內容，創(chuàng)建的小組件尺寸變化的同時，它的內容也應該進行相應的優(yōu)化和改變。
如果小組件的內容沒有變化，那么用戶可能不會將它置于醒目的位置。盡管小組件不太可能每分鐘都有所更新內容，但是盡量保持更新的內容，可以更多地吸引用戶的目光，這一點很重要。
比如日歷的屏幕小組件，可以針對特定的時間和事件進行獨特的視覺處理，比如在生日的展現(xiàn)方式就不一樣。
在許多情況下，用戶需要提供特定的信息之后，屏幕小組件才能顯示有效的內容。比如，用戶在使用天氣APP的小組件的時候，需要先選擇特定的地點；使用股票APP的小組件的時候，需要選擇特定的一支股票。不過也有例外的情況，比如 Podcasts（博客） 的小組件默認顯示最近內容，因此用戶無需預先進行配置就可以直接使用。
這些在使用前要進行的配置選項，不應當要求用戶進行過多的設置才可使用，應當足夠便捷。同時，用戶也無需針對小組件的 UI 進行配置，因為桌面小組件的 UI 界面對于用戶而言，是已經配置好的。相關的開發(fā)文檔可以戳這里查看：
當用戶點擊小組件的時候，它可以打開 APP 當中對應的頁面和位置。比如，當用戶點擊股票APP 對應的小組件的時候，由于小組件顯示的是特定的股票的信息，所以點擊小組件之后打開 APP ，APP 應該顯示的是這款股票所在的頁面和完整的信息。
通常最小尺寸的小組件可以提供一個可點擊的元素，而在中大尺寸的小組件當中，可以提供多個可點擊元素，比如中尺寸的筆記 APP 小組件當中，可以添加多個筆記條目，點擊其中任意一個可以顯示對應的筆記內容。
盡管有多個可點擊元素對于 APP 而言非常有意義，但是提供過多的可點擊元素，可能會讓用戶迷惑且無法正確點擊對的目標。
在有的 APP 當中，用戶登錄之后可以獲取更多的功能和服務，可以在小組件中讓用戶知道這一點。比如，對于一款預訂類的 APP，可以在小組件中包含「登錄以查看預訂」這樣的提示。
為了保持小組件內的信息的相關性和有效性，小組件應該定期刷新以更新內容。小組件不支持連續(xù)的實時更新，并且系統(tǒng)會基于種種因素，來調整和限制其內容的更新頻率。為了讓小組件找到對的更新頻率，你需要知道你的 APP 的內容更新頻率，并且預估用戶會多久查看一次新的數(shù)據(jù)。舉個例子，潮汐變化雖然是實時的，但是用戶追蹤海灘潮汐信息變化也通常是以小時來計算的。如果你注意到用戶查看小組件的內容頻率變化，超過了它的信息更新頻率，那么你可以考慮在小組件中顯示上次更新的時間節(jié)點，以便用戶知曉它的更新頻率。相關的開發(fā)人員文檔看這里：
小組件本身的更新頻率是受限的，你可以讓系統(tǒng)來直接更新其中的時間和日期，將注意力集中到開發(fā)它的其他功能上。
如果你確定了數(shù)據(jù)的更新頻率，就沒有必要將舊有的信息作為占位符來使用。
在 iOS 14 以及更高的版本當中，小組件可以使用豐富且大膽的配色，使用令人回味的配圖以及清晰的文本，所有的這些優(yōu)質的設計素材可以讓小組件中的信息和功能一目了然。獨特、精美的小組件不僅提供有效的信息，而且還能讓整個屏幕內容個性十足。
如果你需要在小組件中呈現(xiàn)品牌LOGO、文字名稱、應用圖標，那么盡量以無干擾的模式來將內容集成到其中。在某些情況下，比如當你使用屏幕編輯模式來調整布局的時候，系統(tǒng)會在小組件的下方顯示對應的 APP 的名稱和信息，因此你無需在小組件中再做強調，盡量以色彩、版式等視覺設計來凸顯它的特征。
如果小組件中信息過于稀疏，那么它看起來不太具有存在的必要；如果信息量太過于密集，則可能讓整個小組件顯得臃腫密集且難于使用。你需要尋求合理整合內容的方法，確保人們能夠立刻掌握信息，尤其是基本的信息，并且可以在此基礎上花費更多的時間來查看細節(jié)。你可能在更大尺寸的小組件上，用信息圖來替代簡單的文本，這樣也不會讓信息過載，但是呈現(xiàn)形式上的改變，會讓體驗變得更好。
豐富漂亮的色彩是非常吸引人的，但是色彩決不能影響用戶吸收和了解基本的信息。色彩應該可以作為提升整個小組件視覺屬性的一種重要手段，但是它一定不能喧賓奪主，影響內容本身。在 iOS 14 的設計素材中，內置了一系列的系統(tǒng)推薦用色。
小組件應該在深色和淺色模式下都看起來非常棒才行。通常，盡量避免在深色模式下，使用淺色的小組件背景并搭配深色的文本，或者在淺色模式下，使用淺色文本搭配深色背景。當你根據(jù)使用 iOS 系統(tǒng)內置的語義配色系統(tǒng)來配置背景和文本配色的時候，色彩可以根據(jù)你當前的環(huán)境，自動匹配。
當然你還可以借助現(xiàn)成的設計素材來手工配置和選擇。詳細的使用說明可以參考下面的鏈接：
使用系統(tǒng)字體能夠能夠讓你的小組件看起來非常原生，并且不論是什么樣的文本字重、樣式，都非常的美觀。如果你使用其他的第三方字體，可能很難做到這一點。當然，如果僅僅是在小組件的標題中使用自定義的第三方字體，而正文和其他的文本字體使用 SF Pro，效果也可以做到很棒。具體可以參考下面的規(guī)范：
確保小組件中文本正確調用字體，而不是被柵格化之后的視覺元素，這樣可以讓系統(tǒng)內置的 VoiceOver 讀取其中的內容。
SF Symbols 能夠幫助你讓符號圖標以及 SF Pro 的文本可以正確對齊和縮放。相關的內容可以參考下列規(guī)范：
當小組件在加載相應的數(shù)據(jù)之后，就可以顯示占位符的內容了，但是這些占位符信息應該足夠逼真才能幫助用戶認識它。將 UI 中靜態(tài)的框架和視覺化的占位符結合起來就可以創(chuàng)建出可供識別的預覽模式。比如使用半透明的條狀矩形來作為文本占位符，使用圓環(huán)或者正方形來替代圖像和符號。
小組件的描述能夠幫助用戶更清晰地了解它的功能。巧妙地使用引導性動詞能夠更好地幫助用戶了解它的功能。比如，「查看當前天氣狀況和位置」以及「跟蹤即將開始的活動和會議」。避免不必要的短語，盡量使用平易近人的表達方式。
屏幕小組件可以縮放以適應不同的屏幕尺寸，除了使用 SF Pro 和 SF Symbols 之外，你還需要控制好小組件的尺寸，確保在每個不同的設備屏幕上看起來都很舒適。
為了確保你的圖片素材在最大的小組件上看起來都是不錯的，可以盡量按使其按比例縮放來匹配較小尺寸小組件的顯示。下面是尺寸規(guī)范：
為了確保你的設計和小組件完美的匹配起來，請注意匹配兩者的角半徑，在 SwiftUI 容器內設置正確的角半徑。相關的開發(fā)文檔看這里：
標準的邊距為 16pt，如果你的小組件當中包含有文本、圖形等元素，請使用標準邊距以避免邊緣擁擠導致體驗不佳。如果使用圖形背景來創(chuàng)建分組，或者有按鈕元素，那么你可能需要使用窄邊距（8pt）。
iOS 和 Android 是目前最主流的兩大移動端操作系統(tǒng)，其中 Android 平臺的小組件出現(xiàn)得相對更早。但是相比于更加統(tǒng)一的 iOS 平臺，百花齊放的 Android 第三方定制化的系統(tǒng)，加上相對寬松的開發(fā)機制，使得 Android 平臺上的小組件設計極度缺乏統(tǒng)一性。
在 Google Design 頁面當中，Material Design 的設計規(guī)范在很大程度上已經比 iOS 更加豐富，但是在小組件設計這一章節(jié)的內容，可以用簡單粗陋來形容。
設計規(guī)范中，相對簡單地展示了 Android 小組件的4個常見類別，以及4種常見交互。下面是對 Android 這套寬松簡單的設計規(guī)范的快速歸納：
信息展現(xiàn)型小組件是將對于用戶重要的信息，隨著時間推移來呈現(xiàn)，比如時間、天氣、運動狀況，點擊即可帶用戶跳轉到 APP 當中。
信息集合型小組件會顯示更多的信息，它專注于兩個交互：瀏覽收藏和打開詳細信息。
控制型小組件的功能是在不打開 APP 的前提下，直接觸發(fā)某些 APP 的功能，比如音樂控制。
混合型小組件可以將多種功用混合到一個小組件當中。
Android 小組件通常支持4種交互，一種是滾動瀏覽，一種是尺寸調整縮放，還有就是導航操作，比如跳轉到特定APP當中，最后一種是進行配置調整，比如對組件中的元素進行調整。
單從信息量上來說，Android 系統(tǒng)的小組件設計指南僅僅只是做了最基礎的指引，考慮到生態(tài)的開放性，這種「放任」是很自然的一件事情。
從 iOS 14 開始，蘋果在 iOS、iPadOS、macOS、watchOS 乃至于 tvOS 上的聯(lián)動與融合，已經變得非常深入了。而 iOS 系統(tǒng)的復雜性開始顯露，小組件就是其中的一環(huán)。
和蘋果一貫以來的UI設計類似，它有著開放的一面，但是它的另一面是約束，這種約束很巧妙，比如說深色模式，你使用官方的設計和開發(fā)素材，調用官方的組件，能很快實現(xiàn)頗為不錯的效果，但是與此同時，你的設計和開發(fā)空間也受到了相應的約束。
在 Android 上，小組件可以更為自由地調整尺寸，但是誰都無法準確預知它在某一款手機上，整體的體驗是什么樣的。這個小組件的邊緣會和哪個圖標對齊，風格是不是一致的？這種問題在 iOS 14 上很大程度上是不存在的，單尺寸問題就已經進行了極為詳盡的約束——它一定會對齊，在體驗上幾乎不太可能跑偏。
從小組件開始，我們迎來一個更加豐富、復雜的 iOS 系統(tǒng)。
文章來源：優(yōu)設 作者：陳子木