2023年Widget：網(wǎng)絡(luò)革命新思維

Widget：網(wǎng)絡(luò)革命新思維從6月的全球開發(fā)者大會(huì)至今，大部分蘋果用戶都更新至iOS14正式版系統(tǒng)。Widget成為新版本系統(tǒng)中爭(zhēng)論度最高的部分，知乎、小紅書、公眾號(hào)各個(gè)平臺(tái)都能會(huì)看到關(guān)于桌面小組件的爭(zhēng)論以及各種關(guān)于小組件排版設(shè)計(jì)攻略。本文帶你了解Widget的「前世今生」，除了很Android外，Widget這次為什么會(huì)成為這次iOS14更新的重中之重，各大應(yīng)用搶先適配iOS14，搶占流量的新入口。

01從Konfabulator到Widget

小部件最初來源于蘋果電腦工程師Rose的一個(gè)插件工具—Konfabulator，用來更換桌面運(yùn)行工具的皮膚和外觀。2022年的Konfabulator是運(yùn)行在蘋果操作系統(tǒng)之上的，而其中的主運(yùn)行文件叫做Widget。就像現(xiàn)在許多的新型產(chǎn)品一樣，當(dāng)年的Konfabulator一經(jīng)發(fā)布，在美國(guó)引起眾多人的關(guān)注，兩位開發(fā)者也最終打算將這款工具命名為Widget。

始終到2022年11月Widget1.8版本正式對(duì)外發(fā)布，此時(shí)的Widget不再局限于某一平臺(tái)，而是一款跨平臺(tái)的產(chǎn)品。Windows和Mac用戶可以依據(jù)自己的喜好開發(fā)或使用Widget工具，這只是這款工具的開頭。

02碎片的Android系統(tǒng)

時(shí)間來到2022，當(dāng)時(shí)的蘋果已經(jīng)推出了iOS2。而Google聯(lián)合多家廠商開發(fā)了安卓系統(tǒng)，當(dāng)時(shí)Android的最大特色就是開放，開發(fā)者可以依據(jù)自己的喜好隨便的修改底層文件，我們當(dāng)時(shí)印象中多變的Android桌面使用的就是Widget程序。我們熟知的小米最早出圈的正式基于Android的MIUI。正是由于各家的隨便設(shè)計(jì)導(dǎo)致后來的Android設(shè)計(jì)語言碎片化嚴(yán)峻、交互感受相互割裂。始終持續(xù)到Google將物理設(shè)計(jì)體驗(yàn)帶入屏幕的設(shè)計(jì)語言MaterialDesign，利用具象化的設(shè)計(jì)語言規(guī)范各家的開發(fā)，遵守統(tǒng)一的設(shè)計(jì)語言和交互感受，由于篇幅限制就不具體綻開去說。

Widget的定位其實(shí)相當(dāng)于應(yīng)用程序的擴(kuò)展程序，使用的關(guān)鍵點(diǎn)在于用戶可以在不打開應(yīng)用、無需加載等待的狀況下，在屏幕上快速獵取信息甚至進(jìn)行簡(jiǎn)潔的操作。

Widget按應(yīng)用可分為三種：DesktopWidget、WEBWidget以及MobileWidget，目前爭(zhēng)論最多的iOS14更新的Widget其實(shí)是運(yùn)行在移動(dòng)設(shè)備上的DesktopWidget，又稱為MobileWidget。

注：Widget在剛進(jìn)入中國(guó)的時(shí)候，沒有通用的譯名，由當(dāng)時(shí)的中搜命名為“微件”。直到這次iOS14才使用“小組件“的命名。

03什么是Widget

蘋果多次強(qiáng)調(diào)Widget不是進(jìn)入應(yīng)用的另一種快捷方式，Widget是一種的信息呈現(xiàn)方式，用來快速供應(yīng)展現(xiàn)某些用戶關(guān)懷的應(yīng)用程序數(shù)據(jù)。

1.Widget按類型的劃分

Widget根據(jù)用戶使用場(chǎng)景的不同，可以分為：信息小組件、集合小組件、控件小組件及混合小組件。而iOS始終將主屏幕的掌握放置于掌握中心中進(jìn)行交互，因此小組件類型的主要是信息小組件及集合小組件。

1）信息小組件

在人們的日常生活中有一類應(yīng)用，無需進(jìn)行操作，但應(yīng)用需要常常性的更新信息。比如：天氣、時(shí)鐘等等。信息小部件將應(yīng)用的關(guān)鍵性信息展現(xiàn)在小部件上，同時(shí)跟蹤相關(guān)信息的變化。依據(jù)小部件的大小選擇性的展現(xiàn)信息的密度。

2）集合小組件

將同一類型的眾多元素展現(xiàn)在小部件內(nèi)，常見的比如：新聞報(bào)道、系列圖片或電子郵件等等。這類小部件有兩個(gè)特點(diǎn)：1.信息集合；2.點(diǎn)擊集合元素中的某一個(gè)元素可快速進(jìn)入詳情頁進(jìn)行掃瞄。集合小部件可進(jìn)行垂直滾動(dòng)，但在iPhone端由于交互限制，并不能進(jìn)行此項(xiàng)操作。例如：微博、知乎。

3）控件小組件

控件小組件子除了顯示常用的功能狀態(tài)外，用戶可直接在主屏幕進(jìn)行簡(jiǎn)潔的觸發(fā)操作，不需要打開相關(guān)應(yīng)用，類似相關(guān)應(yīng)用的外部遙控器。例如：音樂類小部件，用戶可以在當(dāng)前小部件上進(jìn)行簡(jiǎn)潔的暫停、切換曲目等操作。而iOS系統(tǒng)傳統(tǒng)的“掌握中心”包括大部分的手機(jī)操作部分，因此iOS14的小組件還是以展現(xiàn)信息為主。

4）混合小組件

實(shí)際上更多的小部件是同時(shí)具備以上兩個(gè)到三個(gè)特性的混合小部件。比如：音樂類小部件，不僅可以進(jìn)行簡(jiǎn)潔的交互，同時(shí)也展現(xiàn)了當(dāng)前播放音樂的基本數(shù)據(jù)。

04iOS14Widget的限制

蘋果作為全球化的頂級(jí)手機(jī)制作商，始終追求通用的設(shè)計(jì)語言。設(shè)計(jì)規(guī)范包括：完整性、全都性、直接操作、反饋、隱喻，用戶掌握等幾個(gè)設(shè)計(jì)原則。蘋果有別于其他手機(jī)系統(tǒng)的封閉式系統(tǒng)，作為一個(gè)習(xí)慣于為用戶做打算的父系公司，雖然這次Widget的跟新被看做是蘋果對(duì)于之前掌握的削減，但在iOS14關(guān)于Widget的官方設(shè)計(jì)指南中，也有明確的關(guān)于Widget尺寸的限制、卡片式的圓角半徑的限制、展現(xiàn)內(nèi)容形式限制、設(shè)計(jì)交互的限制。

1.視覺規(guī)章限制

iOS桌面小組件的內(nèi)容雖然可以通過開發(fā)定制，但在手機(jī)桌面仍舊保留規(guī)范的視覺規(guī)章。

1）三種尺寸

Android小部件之前雖然也有限制minHeight和minWidth的大小屬性，但卻可以通過左右上下拉伸大小，調(diào)整小部件信息展現(xiàn)內(nèi)容的多少，因此大小其實(shí)是不受掌握的。

在iOS14這次更新的小部件，同一應(yīng)用限制只供應(yīng)3種尺寸22、24、44。

小組件的核心功能是讓用戶無需進(jìn)入app便可獲得信息，即少量但即時(shí)、有用且高度相關(guān)的信息。因此針對(duì)不同作用的應(yīng)用需要先進(jìn)行展現(xiàn)信息的梳理整合，明確小部件的核心目標(biāo)。

22小尺寸的小部件類似動(dòng)態(tài)圖標(biāo)，僅顯示當(dāng)前當(dāng)?shù)氐奶鞖?，并可以打開應(yīng)用。24中等尺寸以及44大尺寸的小部件，則可以在22的基礎(chǔ)上額外展現(xiàn)更豐富的信息，并且可以與用戶進(jìn)行交互。同時(shí)為了確保全部小部件的圓角看起來都是一樣的，要求全部小部件采納SwiftUI容器應(yīng)用正確的角半徑。

2）位置吸附

Android手機(jī)桌面的widget可以隨便的放置在任何位置。而iOS的小部件和之前的全部圖標(biāo)一樣，仍舊要緊貼其他應(yīng)用吸附在屏幕的頂端，不能居住只能靠邊放置。

3）智能堆棧

當(dāng)在同一區(qū)域盼望有多個(gè)小組件進(jìn)行展現(xiàn)時(shí)，可以使用智能堆棧功能。依據(jù)不同的使用場(chǎng)景，通過上下滑動(dòng)進(jìn)行切換。Siri會(huì)依據(jù)時(shí)間的變化，顯示不同的小組件內(nèi)容。

2.以內(nèi)容為核心的配置方式

蘋果從iOS7開頭借鑒了微軟以及谷歌的設(shè)計(jì)語言，削減視覺裝飾、拋棄了擬物化的設(shè)計(jì)風(fēng)格，盡量以內(nèi)容為核心，在這次的iOS小部件也對(duì)內(nèi)容展現(xiàn)進(jìn)行了限制。

聚焦內(nèi)容目標(biāo)點(diǎn)。小部件的關(guān)鍵點(diǎn)在讓用戶易于掃瞄，所以需要前期進(jìn)行設(shè)計(jì)目標(biāo)的梳理，僅展現(xiàn)少量的信息，專注于程序的某一部分內(nèi)容。顯示內(nèi)容與大小的關(guān)聯(lián)性。創(chuàng)建不同尺寸的小部件時(shí)，不應(yīng)當(dāng)只是簡(jiǎn)潔的擴(kuò)大小部件的大小，而應(yīng)當(dāng)是在大尺寸時(shí)考慮展現(xiàn)更多內(nèi)容，更具體的可視化效果，圍繞基本信息的基礎(chǔ)上修改表現(xiàn)形式，進(jìn)行優(yōu)化和調(diào)整。供應(yīng)真正有用的信息。小部件的意義在可以在主屏幕馬上為用戶供應(yīng)有意思的內(nèi)容，而不是像桌面圖標(biāo)一樣成為另一種快捷打開方式。保持展現(xiàn)內(nèi)容的更新。小組件的展現(xiàn)數(shù)據(jù)需要不斷的更新，否則無法吸引用戶的留意。查找應(yīng)用的特別性。例如日歷小組件，可以針對(duì)特定的時(shí)間和大事進(jìn)行獨(dú)特的視覺處理。3.克制的交互

合理的設(shè)置選項(xiàng)。長(zhǎng)按小組件會(huì)消失“編輯小組件”的選項(xiàng)，可以對(duì)組件的展現(xiàn)內(nèi)容做分層或重要程度展現(xiàn)。例如：天氣、時(shí)間切換城市的定位。網(wǎng)易云音樂“定制我的云音樂小組件”切換“每日音樂推舉、我喜愛的音樂、私人FM、歌單推舉、私人雷達(dá)”的挨次。避開在小組件中加入過多的交互元素。避開過多的目標(biāo)，以至于用戶無法點(diǎn)擊所需的目標(biāo)。依據(jù)內(nèi)容小尺寸，設(shè)置一個(gè)點(diǎn)擊元素便可，中大尺寸的小組件，可設(shè)置多個(gè)點(diǎn)擊元素。如中等尺寸的微博，可以通過點(diǎn)擊任意一條熱點(diǎn)，查看熱點(diǎn)內(nèi)容。僅支持點(diǎn)擊，不具備垂直滑動(dòng)。在Android的集合類小部件除了基礎(chǔ)的點(diǎn)擊交互外，支持部件內(nèi)信息的垂直滑動(dòng)，但在iOS系統(tǒng)中的小部件不具備垂直滑動(dòng)的操作方式，應(yīng)當(dāng)是蘋果考慮到小部件在左劃的homescreen，可以無限堆疊小部件，簡(jiǎn)單引起交互操作的沖突。唯一的交互方式就是點(diǎn)擊打開應(yīng)用?？梢钥吹絠OS14的widget沒有其他交互方式，只能通過點(diǎn)擊喚醒應(yīng)用或某條資訊的詳情頁。蘋果在保證一貫簡(jiǎn)潔明白的用戶體驗(yàn)外，不建議應(yīng)用商設(shè)計(jì)過于簡(jiǎn)單的樣式來呈現(xiàn)內(nèi)容，盡可能的削減用戶電池、網(wǎng)絡(luò)方面的消耗。

4.通用的布局形式

weight設(shè)計(jì)系統(tǒng)內(nèi)容常見布局形式，可以作為設(shè)計(jì)小組件時(shí)的參考。

05Widget新的流量入口

由于蘋果本身自帶的話題屬性，在2022年6月22日第一次線上開發(fā)者大會(huì)—WWDC20發(fā)布的widget，到iOS14正式版上線期間，國(guó)內(nèi)外熱度始終高居不下，首先各家應(yīng)用廠商、個(gè)人設(shè)計(jì)開發(fā)師都推出自己對(duì)widget適配的產(chǎn)品；小紅書、知乎、微博等公眾流量平臺(tái)的個(gè)大私欲流量博主基于產(chǎn)品的適配推出各種風(fēng)格主屏幕的應(yīng)用攻略，widget快速成為巨大的流量入口。

1.蘋果自己系統(tǒng)對(duì)widget的推舉

從6月分的開發(fā)者大會(huì)到正式版上線，蘋果在自家的應(yīng)用Appstore的Today專題、iOS14精選App對(duì)widget進(jìn)行了針對(duì)性的推舉，當(dāng)搜尋“小組件”等關(guān)鍵詞時(shí)還會(huì)消失“超有用的小組件”專題推舉。

基于蘋果用戶的巨大市場(chǎng)，App能夠獲得蘋果的推舉意味著大量有效曝光以及話題熱度，此時(shí)很大一部分應(yīng)用，依據(jù)產(chǎn)品特點(diǎn)，搶先適配小組件功能，獲得蘋果推舉，搶占一波流量。

2.iOS帶火的APP

從9月份開頭，colorWidgets、倒數(shù)日、Widgetsmith、我的天氣等多款以時(shí)鐘、計(jì)時(shí)、日歷、天氣功能的小組件應(yīng)用多次輪番登上AppStore應(yīng)用免費(fèi)榜第一。（數(shù)據(jù)來自七麥數(shù)據(jù)）

并且直到現(xiàn)在依舊維持相對(duì)穩(wěn)定排名的高度，及高下載量。

這些數(shù)據(jù)一方面不僅由于用戶在知乎、小紅書、抖音對(duì)于如于如何使用小組件的功能、如何更定制化的設(shè)計(jì)布局自己桌面的爭(zhēng)論，還在于各大社交平臺(tái)應(yīng)勢(shì)對(duì)于小組件話題的推送，使蘋果的小組件獲的了更多的關(guān)注度，與用戶關(guān)注度。

3.設(shè)計(jì)師制作小部件圖標(biāo)日進(jìn)斗金

而有些設(shè)計(jì)師看到這其中的巨大流量賺的盆滿缽滿。9月20日設(shè)計(jì)師@Traf在自己的社交媒體賬號(hào)發(fā)布了自己設(shè)計(jì)的iOS14主屏幕，立即獲得大量用戶的喜愛。Traf轉(zhuǎn)手將自己的這套圖標(biāo)以28美元的價(jià)格出售，開頭