今天我們以“小組件”作為一條線，好好聊聊 PC、移動端這么多件和提效相關的動作。

更多設計歷史回顧：

一、起源于 90 年代

1. 開端：蘋果公司的“桌面裝飾”

這事還得從 Mac 說起，當 Mac 還被稱為 Macintosh 時，初始團隊工程師 Andy Hertzfeld 就在思考：（當時）電腦都是單線程的，同一時間只能運行一個主程序。但他們設想“可以讓一些小程序（little program）在主程序運行時同時運行”。因為物理世界中的桌面上除了放文件，也會放時鐘、筆記這些小東西，Andy Hertzfeld 將這個功能命名為“桌面裝飾品”（desk ornament）[1]。后來被改名叫桌面配件“desk accessories”，因為 ornament 這個詞感覺太“裝飾感”，缺乏功能性。

早期的控制面板也是用桌面配件的方式實現(xiàn)的。這樣用戶在打開任何主程序時，都可以調整對系統(tǒng)的設定（比如音量大小、亮度等等）。

我們可以看到當時由開發(fā)者主導的設計流程中，不太會去系統(tǒng)性地評估思考這個功能的使用場景是什么，我們有這個能力，似乎這個能力也是必要的，因此我們就往下做了。做著做著發(fā)現(xiàn)其實很多場景下能夠使用這種能力，那就歪打正著了。

但的確從“桌面配件”這個功能誕生之初，它要解決的訴求就很明確：多線程/多任務處理。用戶可能在使用軟件的時候，突然就需要看一眼時間/復制粘貼什么東西/調一下亮度，那這些訴求都適用桌面配件來實現(xiàn)。

2. 與互聯(lián)網產生關聯(lián)：微軟的“活動桌面”

Active desktop 誕生于 90 年代 windows 和網景 Netscape 著名的“瀏覽器大戰(zhàn)”的時期。

當時 Windows 在網絡瀏覽器方面缺乏布局，而 Netscape 占領了很大的市值，據說創(chuàng)始人馬克安德森甚至飽含雄心壯志地聲稱：“未來網景將不只是一個瀏覽器，而會成為跨平臺的操作系統(tǒng)。微軟則將只剩下一個到處是 bug 的驅動程序。”當然最后的結果還是 Windows 憑借自己在 PC 驅動程序這個領域的優(yōu)勢打敗了網景，從此瀏覽器就作為一個預裝軟件和 windows 系統(tǒng)捆綁銷售。

Active desktop 就是這場戰(zhàn)爭之中 windows 研究出來的一個操作系統(tǒng)與瀏覽器結合的奇特功能。用戶可以從一些“網絡頻道”中選擇自己喜歡的內容，然后像添加收藏網頁一樣，直接把這些網絡內容“添加到”自己桌面上，用窗口的形式展示出來。比如說你可以在不打開任何網頁/程序的情況下，就能看到當天的股票走勢，然后點擊一下這個股票走勢圖又能帶你去股票網站。

雖然這個想法挺先鋒，某種程度上甚至可以算是今天小組件的雛形，但很遺憾因為 90 年代電腦內存不足、內容提供方少、用戶教育不怎么到位等多種原因，這個功能并沒有堅持下去。

二、興于 00～10 年代

1. 第三方小組件廠商入局

2000 年以后，小組件引擎 DesktopX/Konfabulator[2][3]等等如雨后春筍般出現(xiàn)在市場上。2003 年出現(xiàn)的蘋果第三方軟件 Konfabulator 雖然不算是第一個小組件引擎，但被認為是第一個成功商業(yè)化的、現(xiàn)象級的小組件產品。當時這款售價 25 美金的軟件能夠在你的桌面上放置許多別人制作好的組件，假如你會一些 javascript 和 UI 知識，你也能簡單的開發(fā)自己想要的小組件。

第三方引擎當然不會限制用戶制作小組件的風格和樣式，當時市場上不僅存在提升桌面效率的小組件引擎，還有許多以桌面主題定制化為目標的主題風格引擎。比如現(xiàn)在還有很多 windows 用戶使用 desktopX 制作一些很炫酷的主題。

第三方市場發(fā)展的那么好，肯定會被平臺注意到。在 2004 年的 Mac OS X Tiger 上蘋果馬上推出了自己的小組件功能，在這個版本中，你只要單擊底部欄上的“訪達”入口就能看“儀表盤”dashboard，這是一個懸浮在所有窗口上面的蒙層，里面裝著一大堆不同的小組件。

在后來的 OS X Lion 中，蘋果進一步將儀表盤與桌面進行了拆分，儀表盤被放在了一個獨立的空間中，你可以通過橫滑手勢進入這個類似于移動端“負一屏”的空間內，看到你自己下載的小組件。當然后來負一屏這個東西最終還是被取消了，蘋果后來采用了類似 Windows Vista 的設計來承載小組件。

2. 設想與遺憾：微軟的“桌面組件”

2007，Windows 發(fā)布了一套叫做“Vista”的操作系統(tǒng)。在 Vista 系統(tǒng)中，微軟啟用了一套前瞻性的、不同于以往任何版本的視覺系統(tǒng) Aero，這套以半透明、磨砂玻璃質感為標志性特征的視覺樣式，是微軟早期比較少見的有名字的視覺系統(tǒng)[4]。

“桌面組件”這個東西和 Aero 一起來了。和 active desktop 一樣，桌面組件能夠展示本地或者來自網絡的信息與服務。一開始，桌面組件以屏幕上的固定右側邊欄（sidebar）來展示，后來在 2018 年的時候微軟更新了這個功能，去掉了這個側邊欄并且將小組件的展示直接并入桌面。

為什么要去掉呢？微軟自己的說法是為了“提升向下兼容性、提升桌面的整體性、降低視覺雜音”。從這里其實可以看出早期 windows 和蘋果的設計理念差異還是挺大的，當時蘋果考慮的是如何將花里胡哨的小組件與桌面任務區(qū)隔開，而微軟則在想辦法讓不同形式的信息融合在一起。

但是，盡管 Vista 在設計上有很多創(chuàng)新點，它仍然從來沒有真正普及過，“桌面組件”系統(tǒng)在 Win7 系統(tǒng)中也可以使用，但是到 Win8 就不再以這樣的形式支持，而是被集成到了“啟動菜單”里。Win8 啟用了著名的設計系統(tǒng) Metro，對啟動菜單做了大刀闊斧的改革，讓其變成了一個整合信息、操作等多種元素的大頁面，而不再只是一個簡單的浮層菜單。

這個理念我還是很喜歡的，但 Metro 的設計風格可能對當時的用戶來講還是太過于超前了，評價并不怎么樣，后來的 Fluent Design 又在很多地方往回“收”了很多。

3. 安卓的嘗試

小組件在安卓系統(tǒng)上的應用源遠流長，幾乎可以算作安卓系統(tǒng)的一大特色，官方翻譯叫它“應用微件”，但這個名字實在太別扭了我們還是叫它小組件吧。

小組件的應用最早可以追溯到安卓 1.5 版“杯子蛋糕 Cupcake”，在這個版本中，“桌面”和“菜單”是兩個平行的獨立的空間。用戶可以為菜單里的應用“創(chuàng)建桌面上的快捷方式”，也就是“小組件”。可以說這個版本的小組件是非常核心的設計理念。

在“杯子蛋糕”里，你可以通過長按菜單里的圖標喚出右鍵菜單，來將對應的小組件添加到桌面。小組件的類型很多，包含電池、便利貼、日歷等實用系統(tǒng)工具，也支持第三方小組件。這些組件是可以直接操作的，也就是說通過組件，用戶可以完全不打開應用就可以進行核心操作，比如錄一段音頻。

這套設計一直堅持到了 2011 年安卓 4.0“冰淇淋三明治 Ice Cream Sandwich”。在這個版本的架構中，小組件不再只是應用的快捷方式，而成為了和應用平行的一套服務。在菜單中多了一個“小組件”tab，你可以直接從這里挑選喜歡的放在桌面上。

從這個版本開始，用戶可以自主設置小組件的大小比例。小組件 tab 里的“2X2、1X1”這種字樣，就是在說明這個組件占屏幕的大小。這個設計在當時就被吐槽“難用”、“亂”。雖然安卓為小組件提供了一些比例上限制，但他們形狀樣式都不同，最終呈現(xiàn)出來一種很不協(xié)調的感覺。導致并非發(fā)燒友的普通用戶要想做出一個好看的頁面并不容易。

Ice Cream Sandwich 的這套設計撐了 1 個版本，后續(xù)的多個版本中又對小組件的交互進行了調整，“軟豆糖 Jelly Bean”中首次出現(xiàn)了鎖屏小組件、“巧克力條 KitKat ”中取消了菜單中的小組件 tab，改成長按首頁觸發(fā)小組件設置。“棉花糖 Marshmallow ”調整了小組件設置的排版樣式。自此，基本形成了安卓組件交互的穩(wěn)定模式。

4. 蘋果的另一條路

和安卓相反，蘋果在很長一段時間都在極力避免小組件與應用菜單的耦合。

iOS 5 應該是蘋果最初啟用“小組件”這個說法的版本，在這個版本中，小組件的主要展示場景在通知中心。在主頁面做下滑手勢可以喚出“通知中心”，這里支持天氣、股市、日歷等常用組件，還支持快速發(fā) Twitter 和 Facebook。

在這個時候，“通知中心”的定位都是很復雜的，它既包含了實時信息的詳細展示（比如“5 分鐘前有個朋友給你發(fā)了一條短信”），又包含了用戶的高頻操作（比如“快速發(fā)推”），明顯前者的查看頻率/場景和后者是不一樣的。因此在后續(xù) iOS7 中，蘋果去掉了操作類的小組件在消息中心中的展示，從而使它成為一個純粹的“信息盒子”。

在這個版本中還另增了一個包含高頻操作的“控制中心”。雖然這個“控制中心”里聚合了一些用戶常用的操作，但它的定位很明顯類似于系統(tǒng)控制臺，因此這些操作僅包含系統(tǒng)操作（比如手電筒、相機），第三方的操作/服務不包含在內。

那么如何能滿足用戶快速獲取想要的第三方服務/信息呢？iOS8 的答案是：優(yōu)先支持目標明確的“找信息”的場景，也就是迭代搜索功能。從 iOS8 開始，蘋果的搜索不再局限于搜索本機內的信息，還兼任互聯(lián)網/App Store/不同第三方服務內部的檢索等等。雖然這和我們本篇聊的“小組件”解決方案不同，但它也是提效手段中的一種。

“找”的場景基本支持了，接下來蘋果又調轉方向去支持“看”的場景。在 iOS10，蘋果終于還是做了負一屏，并且將其與搜索功能做了強聚合，在滑動負一屏時搜索功能始終固定在頁面頂部。

和安卓不同的是，盡管蘋果還是支持了一般意義上說的的“小組件”，但對樣式做了非常嚴格的限制。2019 年的人機交互手冊中注明，小組件雖然支持按鈕/圖片/文字等多種內容形式，但：

1. 盡量避免橫滑/滾動
2. 盡量避免自定義小組件的背景顏色。所以你可以看到大多數(shù)小組件都用了蘋果原生的毛玻璃灰色作為背景色
3. 不允許開發(fā)者在小組件上放“打開應用”按鈕。而要求用戶點擊小組件上的內容自動跳轉。

這些規(guī)矩幫助蘋果的第三方小組件保持了與原生設計類似的風格，并且用戶也不需要對排版做太大修改，就能得到一個還能用的、長得過得去的頁面。

5. 在硬件上花功夫

不管是小組件、消息中心、聚焦搜索還是負一屏，都是為了提升移動端用戶找到自己想要的信息的效率。但是不是一定要用軟件交互的形式解決這個問題？也許蘋果是這么堅持的，但廣大廠商其實在 00～10 年間做過很多硬件方向的嘗試。

在 2000 年，三星率先推出一款帶有兩個屏幕的手機。蓋上手機的時候，小屏承擔起來電顯示、天氣時間等簡單的信息展示。可以說是上古時代的“鎖屏小組件”了。

近一點的智能機中，魅族 Pro 7 Plus 和小米 Ultra 也都嘗試給手機加上了附屏。但與其說這是一種提效手段，不如說它是一種專門支持自拍需求的場景化設計。特別是看魅族上市后的市場表現(xiàn)，也能佐證大多數(shù)用戶也不怎么買這塊屏幕的帳。

除了把屏幕放到手機后面支持自拍，HTC Ultra 走了另一條路，直接將主屏幕“拆”成兩個區(qū)域。在主屏幕上方有一個小小的附屏，用來放置通知、高頻操作等場景化的服務或者信息。這個設計在當時是很迷惑的，引用一句臺灣測評博主的看法：“與其增加那一個小小的屏幕，為何不要直接拉長就好了呢? ”

三、現(xiàn)狀：小組件和靈動島

1. 小組件：提效以外的應用

對于安卓來說，因為一開始就支持對小組件的高定制化程度，所以在支持了鎖屏、消息中心、控制中心、搜索等幾個場景下的迭代后，android 12 并沒有在提效這個方向給到我什么驚喜。唯一值得一提的是相對上一個版本的 material design，material3 明顯對小組件的設計做出了更多在顏色、功能、交互形式上的引導（還談不上限制）[4]。

對于蘋果來說，首先是對小組件的設計進一步強化，允許用戶直接添加小組件至桌面。但這一舉動倒并沒有明顯提高用戶操作效率，反倒是非常顯著的催生了用戶對于自定義桌面的熱情。市面上產生了許多幫助用戶創(chuàng)作自定義小組件的產品，比如“Widgetsmith”。通過這些軟件，你可以把整個手機主屏幕改得花里胡哨，而不再只能在蘋果那套視覺風格上微調。可以說，windows 時代主題風格引擎的風潮在移動端上又復現(xiàn)了一遍。

有開發(fā)者從這種自定義訴求中嗅到了社交因素的機會點。于是“Locket Widget”和國內的“貼貼”出現(xiàn)了，你可以在這款軟件上添加好友，然后直接將自己的照片展示在在對方主屏幕的小組件里。但蘋果仍然不允許用戶直接在小組件上進行操作，一切行為都需要跳轉至應用內完成。

2. 靈動島：提效新方案？

一開始概念發(fā)布時，我對靈動島的定位還是有點疑惑的，因為我記得當時有一張概念照片是靈動島包含了計算器的功能。這說明這個東西可能可以起到類似小組件甚至比小組件還有自由的操作功能。

但后來隨著實體產品發(fā)布和規(guī)范的產出，現(xiàn)在來看小組件很明顯支持的是“當下活動”的實時展示，算是蘋果在多線程工作這個場景下做的支持。和此前的消息中心可能略有一些重疊，但和小組件的定位又是不相同的。我覺得從這個角度上去看，雖然現(xiàn)在因為硬件的原因導致 2022 年的 iPhone14 長得有點像 HTC Ultra，但小組件這個東西的思路還是有價值的。未來期待在硬件迭代后，小組件能和其他提效手段有一個比較好的整合。

關于靈動島的設計分析：

總體而言，在提效這條路上，其實很多現(xiàn)在的設計都不能算作“新設計”。一個設計能夠流行起來，除了看支持的場景是否立得住，也得考慮當下的用戶是不是足夠成熟、能夠接得住這樣的設計。蘋果做的許多嘗試，其實安卓和 windows 早就支持了，但當時處在一個用戶能力還不成熟的階段，所以效果也不是特別好。但這并不意味著他們的設計就是“爛的”，只是不合時宜。設計最怕不合時宜。

更多設計歷史回顧：

本文參考

1. https://www.folklore.org/StoryView.py?story=Desk_Ornaments.txt ；
2. ?https://littletinyfrogs.com/article/34276/konfabulator-for-windows-vs-desktopx
3. https://www.cnet.com/tech/services-and-software/developer-calls-apples-tiger-a-copycat/
4. ?https://www.bilibili.com/video/BV1vY4y1a7Yx/?spm_id_from=333.337.search-card.all.click ；
5. https://m3.material.io/components/widgets

歡迎關注作者微信公眾號：「白話說交互」