始於小元件、玩出新花樣:用 OneWidget 讓 iPhone「一鍵換膚」

語言: CN / TW / HK

OneWidget 最早釋出於 2020 年,是一款 iOS 桌面小元件工具集。

關聯閱讀: 該如何使用 iOS 14 小元件?OneWidget 桌面小元件工具集是我的答案

經過 2020 年、2021 年的迭代,我們來到了3.0版本。在本次重要更新中,我們釋出了全新的 UI,新增了更精緻的小元件,並帶來了重要的功能:桌面主題裝飾。

全新的「玻璃擬物」風格

我們認為一個好的軟體作品應該是立體的,產品、設計、開發、測試等各個環節都應該做到精緻。所以當我們再次出發設計 UI 時,我們希望風格在未來幾年是相對流行的,可行性上也應該是力所能及的。

我們團隊在年初發布了 一款記錄孩子成長的新產品 OneGrow ,在這個產品中我們嘗試了擬物風格。當我們看到 Windows 11 的宣傳影片,我們深受啟發,發現了更好的選擇。後來通過對比「輕擬物」和「玻璃擬物」的效果和複用性,最終選擇了現在的「玻璃擬物風格」。

全新 UI:玻璃擬物風格

玻璃擬物在顏色配合上更加靈活而非單純的黑白。同時在視覺上更加立體和動感,這將在產品中帶來更好的視覺衝擊。

iOS 主題應該怎麼做

iOS 並不像 Android 系統那樣能方便地更換主題,不能實現「一鍵換膚」,iOS 做主題功能會更加曲折。在開發這個功能時,我們決定通過拆分主題構成的元素,來分別判斷能不能實現、如何實現,用這種逐個擊破的方式來完成最終的效果。

最直接影響手機桌面主題視覺的三個要素是:桌布、圖示、小元件。

主題 = 桌布 + 圖示 + 小元件

桌布我們最不陌生,小元件在 iOS14 之後也變得不那麼陌生,最複雜和最困難的應該是應用圖示了,因為我們並沒有辦法去更改「別人家的門」。那我們到底怎麼實現主題裝修的呢?

第一步:下載主題素材圖

在 iOS 上實現主題裝修是一個複雜的過程,我們為了讓這個複雜的過程變得稍微簡單一些。將「桌布」和「小元件」的配置步驟合二為一,桌布圖為使用者呈現後,使用者可以直接儲存到相簿然後進行自主設定。影響小元件視覺的很大一部分也是因為元件背景圖,所以我們不干預使用者配置小元件的其他選項,而只是提供背景圖,方便使用者替換已有的小元件。

第二步:安裝應用圖示快捷方式

雖然我們不能更改「別人家的門」,但是我們可以修一條「去別人家的路」。

iOS 很久以來都是允許在桌面新增快捷方式的,你可以通過 Safari 安裝網頁的快捷方式,也可以通過快捷指令 App 將一些指令安裝到桌面,你甚至可以在 Mac 上通過 Apple Configurator 自己做一個打包了快捷方式的描述檔案。

OneWidget 所採用的方式是通過描述檔案來「批量安裝應用圖示」。這種方式可以讓 OneWidget 通過伺服器幫使用者快速生成他們所需要的圖示合集,然後一次性打包安裝到手機桌面。安裝之後,可以在桌面單個刪除和移動,如果刪掉描述檔案,還可以將整個應用圖示庫全部移除。

在設計和開發主題功能的過程中,我們前後做過很多方案,我們向 30+ 位使用者進行了一對一交流,他們中間有一些是重度使用者,一些是輕度使用者。在和他們交流之後我們確定了現在這一套方案。

我們希望新使用者能夠更快地上手,而老使用者又能從中做出更多個性化的選擇,OneWidget 現在可以免費下載,也有很多免費主題供應,歡迎你在體驗之後通過評論留下你的使用感受。

小元件功能大更新

OneWidget 是 iOS 上最早的小元件產品之一。我們希望通過持續迭代,能夠做到讓更多使用者滿意。3.0 版本我們對小元件做了全面升級,包括新增邏輯、展示方式和配置功能。

全新的小元件發現頁

OneWidget 最早版本的小元件發現頁,單螢幕展示的小元件並不多,對於一些不需要文字備註的小元件來說是一種空間的浪費。這一次,我們更新了小元件的發現頁,在推薦頁面儘可能展示了當下比較熱門的小元件。

而在標籤篩選區域,使用者可以根據需求快速定位到某個標籤下的小元件列表。

全新的小元件詳情頁

小元件詳情頁我們也更加突出了小元件的樣式。OneWidget 3.0 還帶來了和系統相同的小元件預覽動畫。在詳情頁中間,使用者可以快速滑動切換同一標籤下的其他小元件,在頂部可以切換不同的尺寸。

對於一些需要資料才能夠呈現效果的小元件,我們提前預置了示例資料,方便使用者檢視最終效果。

全新的小元件新增和編輯功能

以前 OneWidget 的小元件並不支援在主 App 內新增,而是需要直接在桌面配置後選擇引數來實現不同的效果。這種方式的問題是:在很多時候我們需要操作很多引數,而且很多引數無法直接預覽。

所以,在這一次 3.0 版本更新中,我們「不得不」帶來這種巨大的改變:小元件支援在主 App 中新增和配置,在桌面僅須選擇 1 次即可。

在編輯小元件的頁面,你現在可以方便地編輯預覽顏色背景、圖片背景、透明背景、字型顏色、字型樣式、小元件資料等

iPad 應用:內容和體驗優化

iPad 使用者也是 OneWidget 中非常重要的一部分,也有越來越多的人開始使用 iPad 辦公、娛樂和學習,所以我們希望給 iPad 的使用者同樣帶來體驗升級。

iPad 專屬主題

以前 iPad 版本上的主題都是直接沿用 iPhone 上的樣式,現在,iPad 上所展示的主題都是經過單獨設計的了,在 OneWidget 的 iPad 版本上,從封面圖到預覽圖都適應了 iPad 尺寸的風格,我們還帶來了 iPad 專屬的超大尺寸小元件。

更合理的佈局和鍵鼠體驗

iPad 擁有更大的空間,可以更好地展示更多內容。所以 iPad 版應用的佈局與 iPhone 會有所差別,OneWidget 在 iPad 上採用了側邊欄的選單形式,讓主要內容展示在右側,且儘可能佔滿空間。所以在主題發現頁、小元件發現頁、個人中心頁,都是採用這種側邊欄的導航方式,讓內容在右側自適應寬度變化,最終帶來了空間利用率提高、內容展示豐富的效果。

如果你使用外接滑鼠,還可以看到我們專為滑鼠指標的操作做了優化。

其它重要的功能預告

除此之外,在 WWDC22 之後,我們團隊正在為 OneWidget 開發更多新特性和功能。未來的 3 個月時間,我們預計還會有兩次重要的更新發布,屆時也歡迎大家下載體驗。

接下來,我們將專注於以下 2 項內容的開發工作:

  • 更奇妙的小元件
  • 適配 iOS / iPadOS 16 新特性

送碼

你可以在 App Store 下載 OneWidget。

歡迎大家在評論區留下你對 OneWidget 的想法、建議和使用體驗,我們將在下週三 (06.27) 抽出 5 位讀者送出 OneWidget 兌換碼。

> 下載少數派 2.0 客戶端、關注少數派公眾號,閱讀更多WWDC22 專題報道 :man|type_1_2::computer:

> 實用、好用的正版軟體,少數派為你呈現 :rocket: