全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

2020-6-28    資深UI設(shè)計(jì)者

iOS 14 桌面小組件是這次更新當(dāng)中的重要功能之一。桌面小組件賦予了 APP 全新的入口,更豐富的交互層級(jí),更多樣的操作模式。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

這個(gè)在 Android 上存在了十幾年的功能,時(shí)至今日,給人的感覺和認(rèn)知依然不夠強(qiáng)烈——時(shí)鐘、天氣、播放控制、快捷開關(guān)、待辦事項(xiàng)可能是用得大家最多的幾個(gè)小組件,而絕大多數(shù)用戶不會(huì)主動(dòng)想到去用小組件功能。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

但是簡(jiǎn)單地用「抄襲」二字來描述 iOS 14 上的這一特性又欠缺妥當(dāng)——畢竟早在 2005 年,Mac OS X 10.4 Tiger 中的 Dashboard 就已經(jīng)把屏幕小組件給玩兒出花來了。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

2005年 Macworld 喬布斯演示Dashboard 小組件

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

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é)原理。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

Windows Phone 中的 APP 快捷方式和小組件是一體化的,多尺寸可選

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

webOS 中同樣也有屏幕小組件

所以,在今天,更值得我們關(guān)注的問題在于:作為目前最主流的 iOS 系統(tǒng),它的桌面小組件在設(shè)計(jì)上有哪些講究,而它和 Android 上的桌面小組件有哪些不同?

答案就在 iOS 14 悄悄更新之后的設(shè)計(jì)規(guī)范當(dāng)中,咱們一起來看看吧。

說明:以下的內(nèi)容為蘋果官方設(shè)計(jì)指南(HIG)的翻譯。

1、桌面小組件概述

小組件能夠提煉 APP 中的關(guān)鍵信息,呈現(xiàn)在 iPhone、iPad 和 Mac 當(dāng)中最為醒目的位置。小組件以一種令人愉悅的視覺和交互形態(tài),幫助用戶個(gè)性化地呈現(xiàn)屏幕內(nèi)容,優(yōu)化主屏幕的體驗(yàn)。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

小組件在 iOS 14 和 macOS 11 及更高的版本上才可用,而相關(guān)的開發(fā)人員文檔可以戳這里閱讀:

Creating a Widget Extension

2、仔細(xì)審視小組件

小組件通常有小、中、大三種不同的大小尺寸,在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 的通知中心。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

在 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)小組件。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

注意:曾經(jīng)為 iOS 13 以及更早系統(tǒng)版本所設(shè)計(jì)的小組件,在新版的系統(tǒng)的主屏幕上是不可用的,但是仍然可以在 「今日」 視圖和 macOS 的通知中心使用。

3、如何創(chuàng)建實(shí)用且聚焦的小組件

盡管用戶可以點(diǎn)擊小組件進(jìn)入APP,然后進(jìn)行更多的操作,但是小組件的核心功能,始終是顯示少量但是即時(shí)的、有用且高度相關(guān)的信息,讓用戶無需進(jìn)入 APP 就可以獲取信息。明確每個(gè)小組件的核心目標(biāo),并且梳理整合需要展現(xiàn)的信息,是整個(gè)設(shè)計(jì)過程中至關(guān)重要的一步。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

3.1、將設(shè)計(jì)目標(biāo)聚焦在一個(gè)點(diǎn)上

在多數(shù)情況下,你需要將你的設(shè)計(jì)目標(biāo)梳理得非常明確。比如天氣 APP 的小組件,需要顯示的特定某個(gè)位置的天氣信息,而一個(gè)卡路里跟蹤的 APP 的小組件需要顯示的,可能是當(dāng)天消耗的卡路里,而新聞 APP 的小組件可能展現(xiàn)的是熱門資訊。通常,小組件可以很專注地呈現(xiàn)程序的一部分內(nèi)容,就像游戲當(dāng)中角色所處的狀態(tài)一樣。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

3.2、小組件顯示內(nèi)容和大小緊密關(guān)聯(lián)

在較大的小組件中,你可以顯示更多的數(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)。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

小尺寸小組件

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

中尺寸小組件

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

大尺寸小組件

3.3、不要讓小組件成為另一個(gè) APP 快捷方式

人們真正喜歡小組件的地方,是它能夠提供有意義的信息內(nèi)容,而不是提供另外一個(gè)程序快捷方式。

3.4、多個(gè)尺寸的小組件更有價(jià)值

通常,設(shè)計(jì)師需要避免簡(jiǎn)單地?cái)U(kuò)大小組件的尺寸而不針對(duì)性地修改內(nèi)容,創(chuàng)建的小組件尺寸變化的同時(shí),它的內(nèi)容也應(yīng)該進(jìn)行相應(yīng)的優(yōu)化和改變。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

3.5、小組件最好全天候地動(dòng)態(tài)展現(xiàn)信息

如果小組件的內(nèi)容沒有變化,那么用戶可能不會(huì)將它置于醒目的位置。盡管小組件不太可能每分鐘都有所更新內(nèi)容,但是盡量保持更新的內(nèi)容,可以更多地吸引用戶的目光,這一點(diǎn)很重要。

3.6、尋求令人愉悅和驚喜的契機(jī)

比如日歷的屏幕小組件,可以針對(duì)特定的時(shí)間和事件進(jìn)行獨(dú)特的視覺處理,比如在生日的展現(xiàn)方式就不一樣。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

4、為小組件進(jìn)行配置并設(shè)計(jì)交互

4.1、小組件需要提供合理的設(shè)置選項(xiàng)

在許多情況下,用戶需要提供特定的信息之后,屏幕小組件才能顯示有效的內(nèi)容。比如,用戶在使用天氣APP的小組件的時(shí)候,需要先選擇特定的地點(diǎn);使用股票APP的小組件的時(shí)候,需要選擇特定的一支股票。不過也有例外的情況,比如 Podcasts(博客) 的小組件默認(rèn)顯示最近內(nèi)容,因此用戶無需預(yù)先進(jìn)行配置就可以直接使用。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

這些在使用前要進(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ā)文檔可以戳這里查看:

Making a Configurable Widget

4.2、確保點(diǎn)擊時(shí)能進(jìn)入 APP 對(duì)應(yīng)的位置

當(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)該顯示的是這款股票所在的頁面和完整的信息。

4.3、避免在小組件中加入過多交互元素

通常最小尺寸的小組件可以提供一個(gè)可點(diǎn)擊的元素,而在中大尺寸的小組件當(dāng)中,可以提供多個(gè)可點(diǎn)擊元素,比如中尺寸的筆記 APP 小組件當(dāng)中,可以添加多個(gè)筆記條目,點(diǎn)擊其中任意一個(gè)可以顯示對(duì)應(yīng)的筆記內(nèi)容。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

盡管有多個(gè)可點(diǎn)擊元素對(duì)于 APP 而言非常有意義,但是提供過多的可點(diǎn)擊元素,可能會(huì)讓用戶迷惑且無法正確點(diǎn)擊對(duì)的目標(biāo)。

4.4、讓用戶明確知道登錄授權(quán)的價(jià)值

在有的 APP 當(dāng)中,用戶登錄之后可以獲取更多的功能和服務(wù),可以在小組件中讓用戶知道這一點(diǎn)。比如,對(duì)于一款預(yù)訂類的 APP,可以在小組件中包含「登錄以查看預(yù)訂」這樣的提示。

5、更新小組件的內(nèi)容

5.1、保持小組件內(nèi)的內(nèi)容為信息

為了保持小組件內(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ā)人員文檔看這里:

Keeping a Widget Up to Date

5.2、讓系統(tǒng)來更新小組件中的時(shí)間和日期

小組件本身的更新頻率是受限的,你可以讓系統(tǒng)來直接更新其中的時(shí)間和日期,將注意力集中到開發(fā)它的其他功能上。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

5.3、快速顯示內(nèi)容

如果你確定了數(shù)據(jù)的更新頻率,就沒有必要將舊有的信息作為占位符來使用。

6、如何設(shè)計(jì)足夠漂亮的小組件

在 iOS 14 以及更高的版本當(dāng)中,小組件可以使用豐富且大膽的配色,使用令人回味的配圖以及清晰的文本,所有的這些優(yōu)質(zhì)的設(shè)計(jì)素材可以讓小組件中的信息和功能一目了然。獨(dú)特、精美的小組件不僅提供有效的信息,而且還能讓整個(gè)屏幕內(nèi)容個(gè)性十足。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

6.1、用色彩、版式和圖像來凸顯品牌

如果你需要在小組件中呈現(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ì)來凸顯它的特征。

6.2、營造舒適的信息密度

如果小組件中信息過于稀疏,那么它看起來不太具有存在的必要;如果信息量太過于密集,則可能讓整個(gè)小組件顯得臃腫密集且難于使用。你需要尋求合理整合內(nèi)容的方法,確保人們能夠立刻掌握信息,尤其是基本的信息,并且可以在此基礎(chǔ)上花費(fèi)更多的時(shí)間來查看細(xì)節(jié)。你可能在更大尺寸的小組件上,用信息圖來替代簡(jiǎn)單的文本,這樣也不會(huì)讓信息過載,但是呈現(xiàn)形式上的改變,會(huì)讓體驗(yàn)變得更好。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

6.3、巧妙地用色

豐富漂亮的色彩是非常吸引人的,但是色彩決不能影響用戶吸收和了解基本的信息。色彩應(yīng)該可以作為提升整個(gè)小組件視覺屬性的一種重要手段,但是它一定不能喧賓奪主,影響內(nèi)容本身。在 iOS 14 的設(shè)計(jì)素材中,內(nèi)置了一系列的系統(tǒng)推薦用色。

6.4、支持深色模式

小組件應(yīng)該在深色和淺色模式下都看起來非常棒才行。通常,盡量避免在深色模式下,使用淺色的小組件背景并搭配深色的文本,或者在淺色模式下,使用淺色文本搭配深色背景。當(dāng)你根據(jù)使用 iOS 系統(tǒng)內(nèi)置的語義配色系統(tǒng)來配置背景和文本配色的時(shí)候,色彩可以根據(jù)你當(dāng)前的環(huán)境,自動(dòng)匹配。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

當(dāng)然你還可以借助現(xiàn)成的設(shè)計(jì)素材來手工配置和選擇。詳細(xì)的使用說明可以參考下面的鏈接:

Dark Mode(iOS)
Dark Mode(macOS)
About Asset Catalogs

6.5、使用 SF Pro

使用系統(tǒng)字體能夠能夠讓你的小組件看起來非常原生,并且不論是什么樣的文本字重、樣式,都非常的美觀。如果你使用其他的第三方字體,可能很難做到這一點(diǎn)。當(dāng)然,如果僅僅是在小組件的標(biāo)題中使用自定義的第三方字體,而正文和其他的文本字體使用 SF Pro,效果也可以做到很棒。具體可以參考下面的規(guī)范:

Typography(iOS)
Typography(macOS)

6.6、確保小組件中文本可縮放

確保小組件中文本正確調(diào)用字體,而不是被柵格化之后的視覺元素,這樣可以讓系統(tǒng)內(nèi)置的 VoiceOver 讀取其中的內(nèi)容。

6.7、使用 SF Symbols

SF Symbols 能夠幫助你讓符號(hào)圖標(biāo)以及 SF Pro 的文本可以正確對(duì)齊和縮放。相關(guān)的內(nèi)容可以參考下列規(guī)范:

SF Symbols

6.8、提供逼真的占位符演示內(nèi)容

當(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)。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

6.9、為小組件撰寫一個(gè)簡(jiǎn)短的描述

小組件的描述能夠幫助用戶更清晰地了解它的功能。巧妙地使用引導(dǎo)性動(dòng)詞能夠更好地幫助用戶了解它的功能。比如,「查看當(dāng)前天氣狀況和位置」以及「跟蹤即將開始的活動(dòng)和會(huì)議」。避免不必要的短語,盡量使用平易近人的表達(dá)方式。

7、適應(yīng)不同屏幕尺寸

屏幕小組件可以縮放以適應(yīng)不同的屏幕尺寸,除了使用 SF Pro 和 SF Symbols 之外,你還需要控制好小組件的尺寸,確保在每個(gè)不同的設(shè)備屏幕上看起來都很舒適。

7.1、調(diào)整背景圖片尺寸匹配小組件

為了確保你的圖片素材在最大的小組件上看起來都是不錯(cuò)的,可以盡量按使其按比例縮放來匹配較小尺寸小組件的顯示。下面是尺寸規(guī)范:

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

7.2、將內(nèi)容的角半徑與小組件角半徑匹配

為了確保你的設(shè)計(jì)和小組件完美的匹配起來,請(qǐng)注意匹配兩者的角半徑,在 SwiftUI 容器內(nèi)設(shè)置正確的角半徑。相關(guān)的開發(fā)文檔看這里:

ContainerRelativeShape

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

7.3、控制邊距確保易讀性

標(biāo)準(zhǔn)的邊距為 16pt,如果你的小組件當(dāng)中包含有文本、圖形等元素,請(qǐng)使用標(biāo)準(zhǔn)邊距以避免邊緣擁擠導(dǎo)致體驗(yàn)不佳。如果使用圖形背景來創(chuàng)建分組,或者有按鈕元素,那么你可能需要使用窄邊距(8pt)。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

8、Android 小組件的設(shè)計(jì)規(guī)范

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ī)范的快速歸納:

8.1、信息展現(xiàn)型小組件

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

信息展現(xiàn)型小組件是將對(duì)于用戶重要的信息,隨著時(shí)間推移來呈現(xiàn),比如時(shí)間、天氣、運(yùn)動(dòng)狀況,點(diǎn)擊即可帶用戶跳轉(zhuǎn)到 APP 當(dāng)中。

8.2、信息集合型小組件

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

信息集合型小組件會(huì)顯示更多的信息,它專注于兩個(gè)交互:瀏覽收藏和打開詳細(xì)信息。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

8.3、控制型小組件

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

控制型小組件的功能是在不打開 APP 的前提下,直接觸發(fā)某些 APP 的功能,比如音樂控制。

8.4、混合型小組件

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

混合型小組件可以將多種功用混合到一個(gè)小組件當(dāng)中。

8.5、Android 小組件的交互

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

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)的開放性,這種「放任」是很自然的一件事情。

結(jié)語

從 iOS 14 開始,蘋果在 iOS、iPadOS、macOS、watchOS 乃至于 tvOS 上的聯(lián)動(dòng)與融合,已經(jīng)變得非常深入了。而 iOS 系統(tǒng)的復(fù)雜性開始顯露,小組件就是其中的一環(huán)。

全新的 iOS 14 小組件要如何設(shè)計(jì)?來看官方設(shè)計(jì)指南!

和蘋果一貫以來的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è)    作者:陳子木

分享本文至:

日歷

鏈接

個(gè)人資料

存檔