RW

Writing

Syncnext 改版日誌

tvOS,SwiftUI,Player,Notion,Design

Created by Ronnie Wong on 2021/9/1

index.png

專案概述

本次專案討論的是 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 累積了很多問題，其中包括有：

  1. CloudKit 的同步時間太長，偶然會出現無限等待的狀態；
  2. 進行擴展來源開發的難度太大，缺乏統一的 Protocol 支持；
  3. 在缺乏資料的狀態下，詳細頁面太難看了；
  4. 使用 Storyboard 維護的 UI 界面，在 xcode 打開速度十分緩慢；
  5. 更多問題我也想不起了。
舊版首頁.png
沒有資料的詳細頁面.png
缺乏資料的詳細頁面

B | Redesign

B1 | 參考設計

tvOS App 能提供參考的設計來源並不豐富，不像 iOS 具備龐大的可參考資源。本次項目我主要從 Dribbble \ Behance 等尋找了很多 Web、tvOS 的設計參考。不過更多的設計參考來自 tv+ app。

參考資料.png

Apple TV app 的設計是 tvOS 的設計典範。

圖二來自 Sergey Valenda 的設計
https://www.behance.net/gallery/95475615/Movix

B2 | 設計

很多時候提及設計，通常的知識就會認為這會是一份設計稿。然而，SyncPlayer 2.0 的開發並沒有開啟任何設計工具，而是直接地在 xcode 開始了 SwiftUI 的代碼，並透過模擬器預覽實現的。

設計.png

C | 具體頁面設計

具體頁面有如下：

  1. 最近播放
  2. 收藏和推薦
  3. 詳細頁面
  4. VOD 內容列表
  5. 通用頻道
  6. 其他

C1 | 最近播放

設計對比 - 1.png
設計元素 - 1.png

最近播放是完全參考了 Apple TV App 的待播清單的設計方式。

使用了一張大的封面圖以及多個項目的組合。不過我的數據並不是 PGC，所以我無法保證任何條件下，都具備良好的橫向封面圖的顯示。但是我依然使用，是因為我不能過度重複使用豎向封面圖。

C2 | 收藏和推薦

設計元素 - 3.png

豎向封面圖 →
可訪問具體媒體內容

全部使用「豎向封面圖」的形式時候，都會進入一個相似的「通用媒體」頁面。

這裡遵守了進入相似的功能，應該具備相同的形式這一設計規則。

設計元素 - 4.png

C3 | 詳細頁面（通用媒體頁面）

舊版詳細 - 1.png
舊版詳細 - 2.png
1.0 詳細頁面 - 2

舊版的詳細設計主要參考了 TV app 的媒體詳細頁面的設計風格。

在幾年的使用下來，面臨的問題存在很多。

包括有如下：

  1. 當缺乏 metadata 額外資料時候，不能視覺優雅地呈現；
  2. 很多用戶不喜歡進行額外的操作進行 Metadata 的匹配操作；
  3. 分集不見得存在分集描述，然後當缺乏這個資料時候，分集組件變得空洞；
  4. 分集不見得具備多個條目，電影類別的往往就只有一個播放結果。

根據上述的問題，所以我完全重新設計的媒體詳細頁面，提供了一個既可以在 metadata 資料完整時候表現良好，然後在缺乏 metadata 依然具備良好觀感的設計佈局。

全新媒體詳細｜具體表現

詳細數據 - 1.png
詳細數據 - 2.png
詳細數據 - 3.png
詳細數據 - 4.png
詳細數據 - 5.png
詳細數據 - 6.png

C4 | VOD 內容

VOD 內容處理也是一個巨大的難題。

當前的操作方式是：

  1. 在豆瓣 API 上取得熱門播放列表；
  2. 使用名稱在 VOD API 上搜索；

當然，搜索結果十分不盡人意。

因此，我通過幾個優化手段，改善搜索結果的質量：

  1. 明確一些 VOD API 為高質量 API，作為默認的推薦結果；
  2. 提供簡單的篩選器。

透過上述兩個手段，大部分時候的初始搜索結果已經具備可滿足的狀態。

具體表現

搜索結果 - 1.png
搜索結果 - 2.png
搜索結果 - 3.png

C5 | 通用頻道頁面

舊版頻道 - 1.png

在本次的改版中，頻道也有所改變，具體改變如下：

  1. 不再存在一個默認的進入首頁，而是提供預先的頻道入口進入對應的內容；
  2. 在代碼上，所有的頻道都共享相同的代碼；
  3. 在代碼上，頻道的媒體內容、具體播放分集都抽象為「通用媒體」和「通用分集」；
  4. 使用了 SwiftUI 進行列表排版，性能經過一定優化，處於可接受的狀態；
  5. 改善了分類樣式。
code.png
新版頻道 - 1.png
新版頻道 - 2.png
新版頻道 - 3.png

C6 | 其他

其他的頁面就維護 tvOS 風格就妥善了。

這裡就不詳細描述了。

其他 - 2.png
其他 - 4.png
其他 - 1.png
其他 - 3.png

D | 數據

SyncPlayer 1.0 是使用 CloudKit 的雲端數據庫運作，2.0 修改為只有本地 CoreData 數據庫。

根據舊版的用戶反饋，部分用戶存在偶然無法和 CloudKit 通信。

同時，在我幾年的使用經歷來說，需要維持多設備同步的要求不存在，所以移除了 CloudKit 同步的功能（舊的計畫是存在 iOS 版本）。

同時，部分的 App 數據在 2.0 的編寫中，我把數據遷移到了在 Notion 儲存，這樣，我就可以更方便地維護 App 的數據了。

notion.png

E | 總結

2.0 對於 1.0 解決了如下問題：

  • 在低數據完善度時候的設計樣式；
  • 修正了 1.0 必須需要把媒體內容添加到播放列表的錯誤使用操作流程；
  • 在代碼上，更容易處理擴展內容了。

就我個人而言，我十分滿意本次的 SyncPlayer 的改版。無論從代碼開發上，還是設計靈活度都比舊版本得到了巨大的提升。

Notion 公開地址：https://qoli.notion.site/Syncnext-c01c1b36c4018342857901a47c12e0af