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