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