2021-4-7 ui設(shè)計分享達(dá)人
從6月分的全球開發(fā)者大會至今，大部分蘋果用戶都更新至iOS 14正式版系統(tǒng)。Widget成為新版本系統(tǒng)中討論度最高的部分，知乎、小紅書、公眾號各個平臺都能會看到關(guān)于桌面小組件的討論以及各種關(guān)于小組件排版設(shè)計攻略。本文帶你了解Widget的「前世今生」，除了很Android外，Widget這次為什么會成為這次iOS 14更新的重中之重，各大應(yīng)用搶先適配iOS 14，搶占流量的新入口。
小部件最初來源于蘋果電腦工程師Rose的一個插件工具—Konfabulator，用來更換桌面運(yùn)行工具的皮膚和外觀。2003年的Konfabulator是運(yùn)行在蘋果操作系統(tǒng)之上的，而其中的主運(yùn)行文件叫做Widget。就像現(xiàn)在很多的新型產(chǎn)品一樣，當(dāng)年的Konfabulator一經(jīng)發(fā)布，在美國引起眾多人的關(guān)注，兩位開發(fā)者也最終決定將這款工具命名為Widget。
一直到2004年11月Widget1.8版本正式對外發(fā)布，此時的Widget不再局限于某一平臺，而是一款跨平臺的產(chǎn)品。Windows和Mac用戶可以根據(jù)自己的喜好開發(fā)或使用Widget工具，這只是這款工具的開始。
時間來到2008，當(dāng)時的蘋果已經(jīng)推出了iOS 2。而Google聯(lián)合多家廠商開發(fā)了安卓系統(tǒng)，當(dāng)時Android的最大特色就是開放，開發(fā)者可以根據(jù)自己的喜好隨意的修改底層文件，我們當(dāng)時印象中多變的Android桌面使用的就是Widget程序。我們熟知的小米最早出圈的正式基于Android的MIUI。正是由于各家的隨意設(shè)計導(dǎo)致后來的Android設(shè)計語言碎片化嚴(yán)重、交互感受相互割裂。一直持續(xù)到Google將物理設(shè)計體驗帶入屏幕的設(shè)計語言Material Design，利用具象化的設(shè)計語言規(guī)范各家的開發(fā)，遵守統(tǒng)一的設(shè)計語言和交互感受，由于篇幅限制就不詳細(xì)展開去說。
Widget的定位其實相當(dāng)于應(yīng)用程序的擴(kuò)展程序，使用的關(guān)鍵點在于用戶可以在不打開應(yīng)用、無需加載等待的情況下，在屏幕上快速獲取信息甚至進(jìn)行簡單的操作。
Widget按應(yīng)用可分為三種：Desktop Widget、WEB Widget以及Mobile Widget，目前討論最多的iOS14更新的Widget其實是運(yùn)行在移動設(shè)備上的Desktop Widget，又稱為Mobile Widget。
注：Widget在剛進(jìn)入中國的時候，沒有通用的譯名，由當(dāng)時的中搜命名為“微件”。直到這次iOS 14才使用“小組件“的命名。
蘋果多次強(qiáng)調(diào)Widget不是進(jìn)入應(yīng)用的另一種快捷方式，Widget是一種的信息展現(xiàn)方式，用來快速提供展示某些用戶關(guān)心的應(yīng)用程序數(shù)據(jù)。
Widget按照用戶使用場景的不同，可以分為：信息小組件、集合小組件、控件小組件及混合小組件。而iOS 一直將主屏幕的控制放置于控制中心中進(jìn)行交互，因此小組件類型的主要是信息小組件及集合小組件。
在人們的日常生活中有一類應(yīng)用，無需進(jìn)行操作，但應(yīng)用需要經(jīng)常性的更新信息。比如：天氣、時鐘等等。信息小部件將應(yīng)用的關(guān)鍵性信息展示在小部件上，同時跟蹤相關(guān)信息的變化。根據(jù)小部件的大小選擇性的展示信息的密度。
將同一類型的眾多元素展示在小部件內(nèi)，常見的比如：新聞報道、系列圖片或電子郵件等等。這類小部件有兩個特點：1.信息集合；2.點擊集合元素中的某一個元素可快速進(jìn)入詳情頁進(jìn)行瀏覽。集合小部件可進(jìn)行垂直滾動，但在iPhone端由于交互限制，并不能進(jìn)行此項操作。例如：微博、知乎。
控件小組件子除了顯示常用的功能狀態(tài)外，用戶可直接在主屏幕進(jìn)行簡單的觸發(fā)操作，不需要打開相關(guān)應(yīng)用，類似相關(guān)應(yīng)用的外部遙控器。例如：音樂類小部件，用戶可以在當(dāng)前小部件上進(jìn)行簡單的暫停、切換曲目等操作。而iOS系統(tǒng)傳統(tǒng)的“控制中心”包括大部分的手機(jī)操作部分，因此iOS 14的小組件還是以展示信息為主。
實際上更多的小部件是同時具備以上兩個到三個特性的混合小部件。比如：音樂類小部件，不僅可以進(jìn)行簡單的交互，同時也展示了當(dāng)前播放音樂的基本數(shù)據(jù)。
蘋果作為全球化的頂級手機(jī)制作商，一直追求通用的設(shè)計語言。設(shè)計規(guī)范包括：完整性、一致性、直接操作、反饋、隱喻，用戶控制等幾個設(shè)計原則。蘋果有別于其他手機(jī)系統(tǒng)的封閉式系統(tǒng)，作為一個習(xí)慣于為用戶做決定的父系公司，雖然這次Widget的跟新被看做是蘋果對于之前控制的減少，但在iOS 14關(guān)于Widget的官方設(shè)計指南中，也有明確的關(guān)于Widget尺寸的限制、卡片式的圓角半徑的限制、展示內(nèi)容形式限制、設(shè)計交互的限制。
iOS桌面小組件的內(nèi)容雖然可以通過開發(fā)定制，但在手機(jī)桌面仍然保留規(guī)范的視覺規(guī)則。
Android小部件之前雖然也有限制minHeight和minWidth的大小屬性，但卻可以通過左右上下拉伸大小，調(diào)整小部件信息展示內(nèi)容的多少，因此大小其實是不受控制的。
在iOS 14這次更新的小部件，同一應(yīng)用限制只提供3種尺寸2x2、2x4、4x4。
小組件的核心功能是讓用戶無需進(jìn)入app便可獲得信息，即少量但即時、有用且高度相關(guān)的信息。因此針對不同作用的應(yīng)用需要先進(jìn)行展示信息的梳理整合，明確小部件的核心目標(biāo)。
2x2小尺寸的小部件類似動態(tài)圖標(biāo)，僅顯示當(dāng)前當(dāng)?shù)氐奶鞖猓⒖梢源蜷_應(yīng)用。
2x4中等尺寸以及4x4大尺寸的小部件，則可以在2x2的基礎(chǔ)上額外展示更豐富的信息，并且可以與用戶進(jìn)行交互。
同時為了確保所有小部件的圓角看起來都是一樣的，要求所有小部件采用SwiftUI容器應(yīng)用正確的角半徑。相關(guān)開發(fā)文檔ContainerRelativeShape
Android手機(jī)桌面的widget可以隨意的放置在任何位置。而iOS的小部件和之前的所有圖標(biāo)一樣，仍然要緊貼其他應(yīng)用吸附在屏幕的頂端，不能居住只能靠邊放置。
當(dāng)在同一區(qū)域希望有多個小組件進(jìn)行展示時，可以使用智能堆棧功能。根據(jù)不同的使用場景，通過上下滑動進(jìn)行切換。Siri會根據(jù)時間的變化，顯示不同的小組件內(nèi)容。
蘋果從iOS7開始借鑒了微軟以及谷歌的設(shè)計語言，減少視覺裝飾、拋棄了擬物化的設(shè)計風(fēng)格，盡量以內(nèi)容為核心，在這次的iOS小部件也對內(nèi)容展示進(jìn)行了限制。
聚焦內(nèi)容目標(biāo)點。小部件的關(guān)鍵點在讓用戶易于瀏覽，所以需要前期進(jìn)行設(shè)計目標(biāo)的梳理，僅展示少量的信息，專注于程序的某一部分內(nèi)容。
顯示內(nèi)容與大小的關(guān)聯(lián)性。創(chuàng)建不同尺寸的小部件時，不應(yīng)該只是簡單的擴(kuò)大小部件的大小，而應(yīng)該是在大尺寸時考慮展示更多內(nèi)容，更詳細(xì)的可視化效果，圍繞基本信息的基礎(chǔ)上修改表現(xiàn)形式，進(jìn)行優(yōu)化和調(diào)整。
提供真正有用的信息。小部件的意義在可以在主屏幕立即為用戶提供有意思的內(nèi)容，而不是像桌面圖標(biāo)一樣成為另一種快捷打開方式。
保持展示內(nèi)容的更新。小組件的展示數(shù)據(jù)需要不斷的更新，否則無法吸引用戶的注意。
尋找應(yīng)用的特殊性。例如日歷小組件，可以針對特定的時間和事件進(jìn)行獨(dú)特的視覺處理。
合理的設(shè)置選項。長按小組件會出現(xiàn)“編輯小組件”的選項，可以對組件的展示內(nèi)容做分層或重要程度展示。例如：天氣、時間切換城市的定位。網(wǎng)易云音樂“定制我的云音樂小組件”切換“每日音樂推薦、我喜歡的音樂、私人FM、歌單推薦、私人雷達(dá)”的順序。
避免在小組件中加入過多的交互元素。避免過多的目標(biāo)，以至于用戶無法點擊所需的目標(biāo)。根據(jù)內(nèi)容小尺寸，設(shè)置一個點擊元素便可，中大尺寸的小組件，可設(shè)置多個點擊元素。如中等尺寸的微博，可以通過點擊任意一條熱點，查看熱點內(nèi)容。
僅支持點擊，不具備垂直滑動。在Android的集合類小部件除了基礎(chǔ)的點擊交互外，支持部件內(nèi)信息的垂直滑動，但在iOS系統(tǒng)中的小部件不具備垂直滑動的操作方式，應(yīng)該是蘋果考慮到小部件在左劃的homescreen，可以無限堆疊小部件，容易引起交互操作的沖突。唯一的交互方式就是點擊打開應(yīng)用。
可以看到iOS 14的widget沒有其他交互方式，只能通過點擊喚醒應(yīng)用或某條資訊的詳情頁。蘋果在保證一貫簡單明了的用戶體驗外，不建議應(yīng)用商設(shè)計過于復(fù)雜的樣式來呈現(xiàn)內(nèi)容，盡可能的減少用戶電池、網(wǎng)絡(luò)方面的消耗。
weight設(shè)計系統(tǒng)內(nèi)容常見布局形式，可以作為設(shè)計小組件時的參考。
由于蘋果本身自帶的話題屬性，在2020年6月22日第一次線上開發(fā)者大會—WWDC20發(fā)布的widget，到iOS14正式版上線期間，國內(nèi)外熱度一直高居不下，首先各家應(yīng)用廠商、個人設(shè)計開發(fā)師都推出自己對widget適配的產(chǎn)品；小紅書、知乎、微博等公眾流量平臺的個大私欲流量博主基于產(chǎn)品的適配推出各種風(fēng)格主屏幕的應(yīng)用攻略，widget迅速成為巨大的流量入口。
從6月分的開發(fā)者大會到正式版上線，蘋果在自家的應(yīng)用App store的Today專題、iOS 14精選App對widget進(jìn)行了針對性的推薦，當(dāng)搜索“小組件”等關(guān)鍵詞時還會出現(xiàn)“超實用的小組件”專題推薦。
基于蘋果用戶的巨大市場，App能夠獲得蘋果的推薦意味著大量有效曝光以及話題熱度，此時很大一部分應(yīng)用，根據(jù)產(chǎn)品特點，搶先適配小組件功能，獲得蘋果推薦，搶占一波流量。
從9月份開始，color Widgets、倒數(shù)日、Widgetsmith、我的天氣等多款以時鐘、計時、日歷、天氣功能的小組件應(yīng)用多次輪番登上App Store應(yīng)用免費(fèi)榜第一。（數(shù)據(jù)來自七麥數(shù)據(jù)）
并且直到現(xiàn)在依然維持相對穩(wěn)定排名的高度，及高下載量。
這些數(shù)據(jù)一方面不僅因為用戶在知乎、小紅書、抖音對于如于如何使用小組件的功能、如何更定制化的設(shè)計布局自己桌面的討論，還在于各大社交平臺應(yīng)勢對于小組件話題的推送，使蘋果的小組件獲的了更多的關(guān)注度，與用戶關(guān)注度。
而有些設(shè)計師看到這其中的巨大流量賺的盆滿缽滿。9月20日設(shè)計師@Traf在自己的社交媒體賬號發(fā)布了自己設(shè)計的iOS 14主屏幕，立刻獲得大量用戶的喜歡。Traf轉(zhuǎn)手將自己的這套圖標(biāo)以28美元的價格出售，開始就獲得了3626人的支持（有興趣的小伙伴可以點擊https://icons.tr.af/ 購買），六天就賺了10 萬美元，有人要去畫圖標(biāo)了嗎？
蘋果對widget的特性定義為：簡單明了（Glanceable）、恰當(dāng)展示（Relevant）、個性化定制（Personalized）。阿里和京東于9月中旬基于對iOS新特性widget的理解與限制，分別對自家產(chǎn)品手淘和京東進(jìn)行了適配設(shè)計。
京東根據(jù)iOS 14 widget提煉出的關(guān)鍵詞：簡潔、高效、內(nèi)容化。整合自己出自己品牌的設(shè)計三大原則：個性、信息、情景。在設(shè)計原則的基礎(chǔ)上，結(jié)合京東的業(yè)務(wù)指標(biāo)和用戶場景，制定出了京東widget的四個方向：物流（工具）、直播（互動）、店鋪（私域）、秒殺（營銷）。
物流——提升獲取信息的效率。及時查看物流通知，跟蹤物流進(jìn)度，提升用戶獲取信息的效率
店鋪——建立用戶與產(chǎn)品間的連接。利用widget的展示功能，在桌面推出店鋪的新品，方便用戶隨時隨地關(guān)注不同店鋪的新品。
秒殺——聚焦首頁獲取核心信息。為用戶實時提供秒殺商品，紅包，配合京東的簽到形式，承載京東營銷矩陣的業(yè)務(wù)背景。
直播——用戶互動。推薦熱門、感興趣的直播，預(yù)告明星直播，增加用戶與用戶、用戶與主播間的互動。
手淘根據(jù)數(shù)據(jù)得出：用戶雖然平均每天進(jìn)入屏幕的次數(shù)超過90次，但停留的總時長不過幾分鐘。結(jié)合一閃而過的快速切換應(yīng)用的主屏幕里，設(shè)計交互復(fù)雜的應(yīng)用界面并不能契合用戶的需求。得出設(shè)計要素：一目了然、高相關(guān)性、個性化。
所見即所得的物流——將查看物流信息之前需要“打開手淘、點擊我的、進(jìn)入訂單、查看物流”4步操作，簡化至前臺widget透出，用戶輕松掌握包裹的一舉一動。
強(qiáng)大的訂單管理——基于手淘人群60%的目標(biāo)在訂單模式，快速啟動功能。以及對一些必要widget做了深色模式的顏色適配。
便捷的互動權(quán)益提醒——針對淘寶人生、淘金幣、芭芭農(nóng)場等互動專區(qū)，可在widget組件上時效了解自己互動權(quán)益的完成狀態(tài)。
千人千面內(nèi)容定制——基于商品、社區(qū)、直播、店鋪等手淘的廣泛產(chǎn)品，通過多元的方法將前臺的展示權(quán)利交給用戶。例如：關(guān)注的店鋪，關(guān)注的直播內(nèi)容，愛豆的時裝秀。
京東立足于自身的業(yè)務(wù)指標(biāo)和用戶場景制定京東widget的四個方向，手淘根據(jù)數(shù)據(jù)導(dǎo)向一目了然的用戶需求。但由于京東與手淘都是購物應(yīng)用，結(jié)合widget信息展示的特點，最終的聚焦點都是在于信息的獲取效率及提醒。使用戶在不打開應(yīng)用的前提下，滿足不同的場景需求。但淘寶常年的游戲營銷，淘寶人生、淘金幣、芭芭農(nóng)場的互動場景使他的業(yè)務(wù)場景化比京東更游戲化，在視覺方面也更豐富。
推薦閱讀：
下面推薦幾款我自己覺得非常不錯的小組件。
開發(fā)者David Smith發(fā)布的一款用戶可以自己創(chuàng)建定制天氣、日期、天文等widget的應(yīng)用。該應(yīng)用采用了直觀的圖形界面話，精確調(diào)整每個widget包括字體、顏色、背景色等的顯示信息和樣式。支持大、中、小三個尺寸，與iOS 14的Widget 大小是完整匹配。
與其他小組件不同的是，Widgetsmith可以根據(jù)時間自動變換小組件，在編輯小組件時選擇“Add a Timed Widget”，然后在表盤上劃分時間，并添加對應(yīng)的小組件。放置在桌面的小組件就會隨著時間變化成相對的畫面。
這款應(yīng)用與其他天氣類應(yīng)用不同的地方在于，它提供了9種的widget樣式，17個主題，滿足用戶各種風(fēng)格的需求。除了常規(guī)的天氣預(yù)報外，還有實時天氣，空氣質(zhì)量、世界天氣、生活指數(shù)可供選擇這款應(yīng)用與其他天氣類應(yīng)用不同的地方在于，它提供了9種的widget樣式，17個主題，滿足用戶各種風(fēng)格的需求。除了常規(guī)的天氣預(yù)報外，還有實時天氣，空氣質(zhì)量、世界天氣、生活指數(shù)可供選擇。
我的天氣同一家開發(fā)團(tuán)隊的另一款小組件倒數(shù)日，是一款可以直接在屏幕上看到不同主題倒數(shù)天數(shù)的小組件，能根據(jù)自己心情更換背景。此外還可以設(shè)置日歷小組件和時鐘小組件。
西窗炷采用白底黑字簡約的界面風(fēng)格，每天推送一首詩詞，點擊便可閱讀全文。也可以通過編輯小組件選擇自己想看朝代、體裁和顯示字體。
沒有買過豆瓣日歷的舉手，買完心心念念覺得自己會每天看一部電影，em……然而并沒有。豆瓣的小部件除了兩種電影日歷的樣式外，實時熱門書影音排行的界面也能讓用戶不用打開應(yīng)用，便可獲得及時的影音信息，點擊進(jìn)入詳情頁面。
當(dāng)然也有網(wǎng)友做出了史上最強(qiáng)小組件，以及其他有趣的組件
目前每個手機(jī)用戶主屏幕上都會有越來越多的app，我們的衣食住行娛樂都需要各種app的協(xié)助完成，但隨著app的增長，用戶會將各種app按照種類、類型進(jìn)行劃分，靠線索記憶或肌肉記憶，熟悉app的位置，但隨著時間的推移，我們可能又會有各種新的應(yīng)用需要下載使用。重復(fù)分類、查找、點擊進(jìn)入的行為，其實是很浪費(fèi)時間的步驟。
首先我將之前的主屏幕全部隱藏，只留一個主屏幕頁面。數(shù)據(jù)顯示日常對手機(jī)的操作交互中，有50%左右的通過左手/右手單手握持操作，而我本人習(xí)慣左手單手握持操作。操作熱區(qū)如下圖中所示的從左到右從下到上。
其中頂部區(qū)域及右邊區(qū)域放置，豆瓣、西窗燭、我的天氣等展示類小組件；Todoist、Thing3、倒數(shù)日等任務(wù)管理類小組件；知乎、微博、頭條等咨詢類小組件則可以放置于畫面中間，不妨礙點擊某條信息。也可以使用智能堆放功能，將多種小組件放置同一區(qū)域，通過上下滑動進(jìn)行切換。最后放置自己平時使用頻繁的應(yīng)用圖標(biāo)即可，使用頻率也是按從左向右的順序。大小方面
蘋果的app資源庫會默認(rèn)經(jīng)常使用應(yīng)用可以直接點擊進(jìn)入，在使用其他app不常用的app時，可以通過上方的查找區(qū)域進(jìn)行搜索。
目前已經(jīng)使用1個月左右，之前也試過各種好看的小部件，最后還是以效率為出發(fā)點，將大部分的app放置在app資源庫中。
在我們的認(rèn)知中，手機(jī)桌面更像是一個應(yīng)用程序的目錄。我們不會過多的在主屏幕停留，需要借助啟動圖標(biāo)點擊進(jìn)入應(yīng)用進(jìn)行操作，用戶打開某個桌面應(yīng)用，在應(yīng)用內(nèi)進(jìn)行操作；另一方面在當(dāng)前app應(yīng)用越來越多的現(xiàn)在，高頻應(yīng)用與低頻應(yīng)用混合，常常在使用時，陷入查找應(yīng)用中，降低了信息獲取的效率。小部件的使用，使得用戶雖然還是不能在主屏幕界面進(jìn)行數(shù)據(jù)處理，但小部件作為應(yīng)用程序的擴(kuò)展程序，用戶卻可以在不打開應(yīng)用、無需加載等待的情況下，在主屏幕上快速獲取信息甚至進(jìn)行簡單的操作，不得不說是在改變用戶長久以來的使用習(xí)慣。
無論是Google從碎片的Android系統(tǒng)轉(zhuǎn)向物理設(shè)計體驗的Material Design設(shè)計語言來規(guī)范各家的開發(fā)。還是最早提出“One productfamily，One platform，One store”希望將手指與手機(jī)觸摸交互與鼠標(biāo)指針交互的打通，保證多設(shè)備的一致性，但最后卻被自己各種花樣作死的微軟磁鐵設(shè)計。各家都在嘗試統(tǒng)一設(shè)計語言，以及交互感受。而這次iOS 14的，我們已經(jīng)看到了蘋果在iOS、iPadOS、macOS、watchOS乃至于tvOS上的聯(lián)動與融合，而小部件就是最重要的一步。
文章來源：站酷 作者：9號自習(xí)室
藍(lán)藍(lán)設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.cqzjtgb.com