Writing
Syncnext 改版日誌
tvOS,SwiftUI,Player,Notion,Design · 2026-04-26
專案概述
本次專案討論的是 SyncPlayer 1.0 向 2.0 的改版過程。1.0 版本 2019 年立案。由於具備歷史性的問題，維護難度日漸困難。所以在 2021 年 10 月，我毅然開始了 2.0 的重寫計畫，使用全新的 Swift 5.5 新特性和 tvOS 15 的相關新特性，以及使用 SwiftUI 進行編寫。
SyncPlayer 是一款多媒體播放 App，面向 tvOS 平台。提供了埋堆堆、對接 VOD API，以及對接了部分影音網站，以滿足使用者在 tvOS 上觀看電視劇、電影，以及維護播放進度的一個 app。
app 首頁
https://www.notion.so/qoli/SyncPlayer-821b80378be241149fa5e9a1bbf6cfdc
特點
01 | 基於 SwiftUI 進行改版開發
SwiftUI 作為一個新的聲明式開發框架，解決了過往使用 Storyboard 開發 UI 的問題。讓代碼管理更為容易以及更加可重用。
02 | 完整的 UI 改版
2.0 推翻了 1.0 的所有 UI 設計，重新思考了所有 1.0 累積的設計問題。並給予了對應的解決方向。
03 | Notion 的 API 後台
本次更新以 Notion 作為 API 後台，由於 SyncPlayer 的數據變動比較少，使用 Notion 作為 API 可以不需開發任何後端程序。
04 | 設計樣式兼容低完善度狀態
SyncPlayer 的數據來自第三方網站，數據狀態不見得在公司企業內的完善以及有專人維護，所以設計上來說，必須能在低完善度的數據狀態下，也有良好的視覺表現。
A | 歷史問題
在幾年的用戶反饋下，SyncPlayer 1.0 累積了很多問題，其中包括有：
- CloudKit 的同步時間太長，偶然會出現無限等待的狀態；
- 進行擴展來源開發的難度太大，缺乏統一的 Protocol 支持；
- 在缺乏資料的狀態下，詳細頁面太難看了；
- 使用 Storyboard 維護的 UI 界面，在 xcode 打開速度十分緩慢；
- 更多問題我也想不起了。
B | Redesign
B1 | 參考設計
tvOS App 能提供參考的設計來源並不豐富，不像 iOS 具備龐大的可參考資源。本次項目我主要從 Dribbble \ Behance 等尋找了很多 Web、tvOS 的設計參考。不過更多的設計參考來自 tv+ app。
Apple TV app 的設計是 tvOS 的設計典範。
圖二來自 Sergey Valenda 的設計
https://www.behance.net/gallery/95475615/Movix
B2 | 設計
很多時候提及設計，通常的知識就會認為這會是一份設計稿。然而，SyncPlayer 2.0 的開發並沒有開啟任何設計工具，而是直接地在 xcode 開始了 SwiftUI 的代碼，並透過模擬器預覽實現的。
C | 具體頁面設計
具體頁面有如下：
- 最近播放
- 收藏和推薦
- 詳細頁面
- VOD 內容列表
- 通用頻道
- 其他
C1 | 最近播放
最近播放是完全參考了 Apple TV App 的待播清單的設計方式。
使用了一張大的封面圖以及多個項目的組合。不過我的數據並不是 PGC，所以我無法保證任何條件下，都具備良好的橫向封面圖的顯示。但是我依然使用，是因為我不能過度重複使用豎向封面圖。
C2 | 收藏和推薦
豎向封面圖 →
可訪問具體媒體內容
全部使用「豎向封面圖」的形式時候，都會進入一個相似的「通用媒體」頁面。
這裡遵守了進入相似的功能，應該具備相同的形式這一設計規則。
C3 | 詳細頁面（通用媒體頁面）
舊版的詳細設計主要參考了 TV app 的媒體詳細頁面的設計風格。
在幾年的使用下來，面臨的問題存在很多。
包括有如下：
- 當缺乏 metadata 額外資料時候，不能視覺優雅地呈現；
- 很多用戶不喜歡進行額外的操作進行 Metadata 的匹配操作；
- 分集不見得存在分集描述，然後當缺乏這個資料時候，分集組件變得空洞；
- 分集不見得具備多個條目，電影類別的往往就只有一個播放結果。
根據上述的問題，所以我完全重新設計的媒體詳細頁面，提供了一個既可以在 metadata 資料完整時候表現良好，然後在缺乏 metadata 依然具備良好觀感的設計佈局。
全新媒體詳細｜具體表現
