overview

關於TVBS大運動+

目標：打造100%運動新聞的並且提供刺激賽事預測遊戲的運動APP

運動迷都希望補充更多的運動新聞

也都有自己最了解這個運動的驕傲感

TVBS大運動+想成為一個提供運動迷最多元、最專業的運動新聞的APP

還能透過好懂的競猜系統增加關注賽事的樂趣並獲取獎勵以運動迷需求！

運動迷都希望補充更多的運動新聞

也都有自己最了解這個運動的驕傲感

TVBS大運動+想成為一個提供運動迷最多元、最專業的運動新聞的APP

還能透過好懂的競猜系統增加關注賽事的樂趣並獲取獎勵以運動迷需求！

目標受眾分析

將目標受眾定位在輕度到重度運動迷

市場調查與競爭分析

針對其他競品做分析比較，找出大運動家可以創造出的優勢

UIUX設計

賽事轉換帶來的挑戰與優化

NBA 版本設計（初版）

排行榜-當週

看更多-新聞列表

今日新聞-預測進行中

會員-未登入

賽事頁-賽程

專案背景

專案背景

專案背景

本專案最初設計是原設計師先針對 NBA 賽事預測做設計，但由我接手時 NBA 賽季已快開打。

由於奧運賽程繁多、時間緊迫，專案決策由主管與 PM 主導，我的角色是在既有框架內優化 UI，確保產品能如期上線。

賽事的轉型

最初的決策是先以NBA的競猜模式上線，但發現時間上可能無法完成開發，所以最終考量以七月底的巴黎奧運賽事作為上線目標。

核心挑戰

1.時間短團隊人力有限（需在短時間內完成 UI 設計，確保開發團隊能順利實作）

2.設計限制（在既有訂好的設計框架內，不大幅度調整以完善及優化UIUX)

第一次迭代-賽事卡片版本

預測賽式分類

多選一：適用於游泳、田徑等競速項目

二選一：適用於籃球、羽球等對戰型運動

賽事的選擇?比賽太多?

考慮到開放預測奧運所有比賽可能對用戶來說負擔太大或較不感興趣，因此決定挑選出台灣近年來較熱門的賽事做開放預測，以及關注度較高的籃球項目(唯一不限制只有台灣選手的項目)

初步賽事卡片分類

1v1比賽單人賽事

1v1比賽單人賽事

1v1比賽單人賽事

1v1比賽多人賽事

多選賽事

1v1團體賽事(僅限籃球)

多選賽制預測遇到的問題

多選賽制預測遇到的問題

多選賽制預測遇到的問題

最開始是先以多選的方式進行思考，假設某場比賽是24選4，只要猜對一個就加一分，以此類推，但後來與團隊討論認為這種方式對於用戶來說過於複雜，思考成本變高就可能影響體驗。

設計優化

✅ 簡化為「二選一」模式，減少用戶選擇障礙
✅ 強化台灣選手的關注度，增加互動性

賽事內頁該呈現的資訊大不同

賽事內頁該呈現的資訊大不同

賽事內頁該呈現的資訊大不同

1.對戰單位不同：NBA 以球隊為主，而奧運以國家隊或個人為主。

2.數據結構不同：NBA 可聚焦於球隊戰績與數據分析，奧運並不是。

設計優化

✅ 以「台灣選手」為核心，只顯示台灣選手資訊，避免多國選手資訊過載
✅ 取消 NBA 版本中的球隊戰績與數據分析，改為台灣選手個人紀錄與比賽歷程

✅ 以「台灣選手」為核心，只顯示台灣選手資訊，避免多國選手資訊過載
✅ 取消 NBA 版本中的球隊戰績與數據分析，改為台灣選手個人紀錄與比賽歷程

✅ 以「台灣選手」為核心，只顯示台灣選手資訊，避免多國選手資訊過載
✅ 取消 NBA 版本中的球隊戰績與數據分析，改為台灣選手個人紀錄與比賽歷程

進一步的挑戰：開發時程的限制

我們進一步與開發團隊確認可行性，發現即使多選一簡化為二選一模式，仍然 無法在時程內完成所有設計與開發需求。因此，我們再次評估 賽事預測的所有核心功能與必要性，並做出以下取捨：

❌ 捨棄功能

  1. 多選一的預測模式（因為其開發複雜度較高，且已經透過前期改動統一為二選一）

  2. 點進賽事卡片查看詳細資訊的內頁（雖然能提供更完整的比賽細節，但開發成本高）

  3. 捨棄賽事卡片下方的及時預測人數（原先是希望透過預測人數達到用戶共鳴，但對於預測的影響較小所以也先刪除）

✅ 保留功能

  1. 1v1類型的賽事預測（用戶仍然可以進行其他賽制的預測，並且也能涵蓋大部分台灣熱門賽事）

  2. 得知比賽結果（確保用戶能夠追蹤自己的預測結果）

我們進一步與開發團隊確認可行性，發現即使多選一簡化為二選一模式，仍然 無法在時程內完成所有設計與開發需求。因此，我們再次評估 賽事預測的所有核心功能與必要性，並做出以下取捨：

❌ 捨棄功能

  1. 多選一的預測模式（因為其開發複雜度較高，且已經透過前期改動統一為二選一）

  2. 點進賽事卡片查看詳細資訊的內頁（雖然能提供更完整的比賽細節，但開發成本高）

  3. 捨棄賽事卡片下方的及時預測人數（原先是希望透過預測人數達到用戶共鳴，但對於預測的影響較小所以也先刪除）

✅ 保留功能

  1. 1v1類型的賽事預測（用戶仍然可以進行其他賽制的預測，並且也能涵蓋大部分台灣熱門賽事）

  2. 得知比賽結果（確保用戶能夠追蹤自己的預測結果）

我們進一步與開發團隊確認可行性，發現即使多選一簡化為二選一模式，仍然 無法在時程內完成所有設計與開發需求。因此，我們再次評估 賽事預測的所有核心功能與必要性，並做出以下取捨：

❌ 捨棄功能

  1. 多選一的預測模式（因為其開發複雜度較高，且已經透過前期改動統一為二選一）

  2. 點進賽事卡片查看詳細資訊的內頁（雖然能提供更完整的比賽細節，但開發成本高）

  3. 捨棄賽事卡片下方的及時預測人數（原先是希望透過預測人數達到用戶共鳴，但對於預測的影響較小所以也先刪除）

✅ 保留功能

  1. 1v1類型的賽事預測（用戶仍然可以進行其他賽制的預測，並且也能涵蓋大部分台灣熱門賽事）

  2. 得知比賽結果（確保用戶能夠追蹤自己的預測結果）

最終決策 & 調整

🔶 捨棄了多選一的賽制
🔶 捨棄賽事內頁降低開發負擔，讓產品得以準時上線

🔶 捨棄了多選一的賽制
🔶 捨棄賽事內頁降低開發負擔，讓產品得以準時上線

🔶 捨棄了多選一的賽制
🔶 捨棄賽事內頁降低開發負擔，讓產品得以準時上線

第二次迭代-時間與預測

比賽時間的範圍

NBA的比賽時間大部分集中在台灣時間的早上，但是巴黎奧運的賽事幾乎是涵蓋24小時都可能有比賽進行

遇到的問題

我們最初設計的預測機制是 「比賽開始前皆可預測」，但發現套用到奧運賽事會導致一些問題：

1️⃣ 用戶難以養成習慣

  • 因為比賽時間較分散，如果開放隨時預測，使用者可能會忘記參與，導致互動率降低。

2️⃣ 時差影響預測體驗

  • 巴黎奧運的比賽大多發生在 台灣時間 15:00 - 24:00，但還是有部分在凌晨 00:00 - 06:00開賽，如果讓用戶想到才預測，可能會錯過參與時機。

解決方案：統一預測時間 & 調整凌晨賽事

✅ 固定預測時間：每天 06:00 - 14:00

  • 用戶可以在早上一次性預測當天的賽事，養成習慣，避免錯過。

  • 預測範圍涵蓋 當天下午 15:00 - 24:00 及 隔天凌晨 00:00 - 06:00 的比賽。

✅ 凌晨比賽預測時間調整

  • 因為預測機會是以「天」為單位每日回補，導致00:00 - 06:00 的比賽無法當天預測，所以將這些比賽挪到前一天開放預測。

  • 例如，8/5 凌晨03:00的比賽，會在 8/4 06:00 - 14:00 開放預測。

設計影響與結果

🎯 用戶可養成「早上預測」的習慣，提高每日活躍度
🎯 減少因比賽時差導致的錯過預測問題
🎯 讓預測次數變得有策略性，而非無限制猜測

8/5 03:00的比賽會放在8/4

8/5 03:00的比賽會放在8/4

On boarding

奧運期間與HTC冠名合作

首頁

新聞分類與導航優化

新增動態分類機制，除了基本的籃球、棒球分類，當有特殊活動（如奧運、世界盃）時，會額外新增專屬分頁，或是有品牌合作活動（如奧運期間與HTC冠名合作） 會以webview形式呈現，確保用戶能快速找到相關資訊。

賽事預測卡片更新優化

1.新增預測時段提醒：在卡片下方以小字標註預測可進行的時間，確保用戶清楚預測時機。

2.優化預測資訊顯示：將「預測剩餘次數」與「今日賽事場數」整合呈現，讓用戶快速掌握可預測的場次與次數。

3.戰績資訊統整：將「預測分數」、「命中率」等個人戰績數據集中顯示於一個區塊，減少資訊分散，提高可讀性與查閱效率。

添加排名上升動畫

若是用戶排名有上升，在每日分數結算後第一次打開APP會出現排名上升的小動畫，增加用戶成就體驗

改版前

改版後

我的戰績

提升了戰績資訊的可讀性，並透過視覺框線強調其重要性，更容易吸引用戶注意

賽事卡片細節

賽事卡片細節

賽事卡片細節

比賽狀態

未開賽

比賽中

已結束

賽事類型

單打或雙打賽事

單打或雙打賽事

單打或雙打賽事

籃球賽事

比分

箭頭指向贏方

無箭頭表示輸方

按鈕狀態

未開放

未預測

已預測/預測成功

預測失敗

單擊按鈕

單擊按鈕

長按按鈕

長按按鈕

賽事頁

改版前

改版後

預測按鈕

在初版設計中，預測按鈕採用單擊即選擇的方式，但這樣的互動方式過於單調，也擔心單擊可能會造成誤觸，於是改為「長按」1.5秒交互:


1.長按確認預測，增加決策的沉浸感

2.搭配震動回饋，提升觸感反饋

3.加入音效，增強預測的臨場感

iOS → 長按時持續震動，讓用戶感覺「正在鎖定選擇」。
Android → 長按時無法震動，在按壓結束時給一個較明顯的震動，來代表「預測完成」。

在初版設計中，預測按鈕採用單擊即選擇的方式，但這樣的互動方式過於單調，也擔心單擊可能會造成誤觸，於是改為「長按」1.5秒交互:


1.長按確認預測，增加決策的沉浸感

2.搭配震動回饋，提升觸感反饋

3.加入音效，增強預測的臨場感


iOS → 長按時持續震動，讓用戶感覺「正在鎖定選擇」。
Android → 長按時無法震動，在按壓結束時給一個較明顯的震動，來代表「預測完成」。

在初版設計中，預測按鈕採用單擊即選擇的方式，但這樣的互動方式過於單調，也擔心單擊可能會造成誤觸，於是改為「長按」1.5秒交互:


1.長按確認預測，增加決策的沉浸感

2.搭配震動回饋，提升觸感反饋

3.加入音效，增強預測的臨場感

iOS → 長按時持續震動，讓用戶感覺「正在鎖定選擇」。
Android → 長按時無法震動，在按壓結束時給一個較明顯的震動，來代表「預測完成」。

活動獎勵Banner

時間緊迫下用 WebView + 純圖片 Banner形式呈現活動獎勵資訊，樣可以確保用戶在查看排行榜時，能夠立即注意到獎勵資訊。

改版前

改版後

排行榜

排行榜UI微調

原先的模式會將前三名特別獨立出來，但是考慮到一定會出現同分的狀況，所以UI上更改成統一模式，以減少同分排名視覺上帶來太強烈的截斷感。

上線後的優化與迭代

用戶反饋與APP迭代歷程

閱讀體驗不佳

痛點1

賽事預測卡片使用體驗較不友善

痛點2

APP命名對用戶在商店搜尋不易

痛點3

除了修復基本錯誤及性能提升
根據蒐集的用戶反饋以及團隊考量後的優化大項

閱讀體驗不佳

痛點1

賽事預測卡片使用體驗較不友善

痛點2

APP命名對用戶在商店搜尋不易

痛點3

除了修復基本錯誤及性能提升
根據蒐集的用戶反饋以及團隊考量後的優化大項

閱讀體驗不佳

痛點1

賽事預測卡片使用體驗較不友善

痛點2

APP命名對用戶在商店搜尋不易

痛點3

除了修復基本錯誤及性能提升
根據蒐集的用戶反饋以及團隊考量後的優化大項

上線後UI設計改版

針對世界棒球12強項目進行設計的優化

新聞版面改版

🚨 舊設計的問題

  • 小字可能對部分用戶閱讀不易

  • 圖文小視覺吸引力較低

✅ 優化方案

  • 將條列式更改成大卡片模式

為什麼要更改成大卡片模式?

  1. 沉浸感更強，用戶已經依據專欄頁籤點進來，代表想深入閱讀，所以不用擔心資訊密度過低。

  2. 視覺吸引力較高，提升閱讀體驗，大卡片的圖片＋大字標題組合，可以讓內容更吸引人、增強點擊意願。

賽事卡片改版

🚨 舊設計的問題

  • 綠色按鈕太搶眼，讓 UI 層級不平衡。

  • 不論是最初針對NBA設計的版本還是後來修改的奧運版本，預測狀態都不夠清晰易懂。

✅ 優化方案

  • 色塊 = 按鈕，直接點選隊伍就能預測，提高直覺性。

  • 預測狀態 & 結果上移，確保用戶第一眼就能判斷當前進度。

  • 去除額外按鈕，減少視覺顏色雜訊，讓畫面更清爽。

  • 提供預測人數比例，供用戶參考。

新賽事卡片細節

按下預測就會出現拳頭，顏色不會隨著任何狀態改變，只是單純讓用戶自己判斷預測哪一方的依據

預測狀態

賽事預測機制：時間軸 & 決策樹

賽事預測機制：時間軸 & 決策樹

賽事預測機制：時間軸 & 決策樹

重新審視預測系統，確保用戶能夠在適當的時間進行預測，並且 UI 可準確反映比賽進行狀態。透過時間軸關係圖與決策樹，確保開發團隊能更輕鬆維護與擴展未來的預測機制。

時間軸關係圖 → 展示時間規則與 UI 對應方式

時間區間劃分

  • 投票開放時間（18:00 - 24:00）。

  • 比賽僅能在投票結束後進行。（若未來規則改變，可以重新調整）。

  • 確保每個階段的 UI 設計一致，避免使用者混淆。

比賽進行狀態

  • 比賽未開始 → 可預測（UI 顯示「可投票」）。

  • 比賽進行中 → 目前不開放投票（若未來規則改變，可以重新調整）。

  • 比賽已結束 → 進入結算階段，顯示預測結果。

決策樹 → 展示所有可能的 UI 狀態確保邏輯完整

第一層：當天是否有比賽 → 避免顯示空卡片

第二層：是否在預測時間內 → 確保投票機制運作正確

第三層：比賽狀態（未開始 / 進行中 / 已結束） → 確保 UI 對應正確狀態

第四層：用戶是否已投票 → 確保互動行為合理

第五層：結果狀態 → 確保UI正確顯示讓使用者能理解當下狀態

第一層：當天是否有比賽 → 避免顯示空卡片

第二層：是否在預測時間內 → 確保投票機制運作正確

第三層：比賽狀態（未開始 / 進行中 / 已結束） → 確保 UI 對應正確狀態

第四層：用戶是否已投票 → 確保互動行為合理

第五層：結果狀態 → 確保UI正確顯示讓使用者能理解當下狀態

第一層：當天是否有比賽 → 避免顯示空卡片

第二層：是否在預測時間內 → 確保投票機制運作正確

第三層：比賽狀態（未開始 / 進行中 / 已結束） → 確保 UI 對應正確狀態

第四層：用戶是否已投票 → 確保互動行為合理

第五層：結果狀態 → 確保UI正確顯示讓使用者能理解當下狀態

APP名稱更改：TVBS 大運動+ → TVBS 大運動家


🔍 取名的初衷

應用程式原名為 「TVBS 大運動+」，其中 「+」象徵：

✅提供更多運動相關資訊，涵蓋多種賽事、即時新聞。

✅Plus 的概念，讓用戶在這裡一次掌握所有運動消息。

🚨 遇到的問題

1️⃣搜尋困難：包含 「+」符號，用戶輸入時容易忽略或輸錯，影響搜尋結果。

2️⃣名稱閱讀不直覺：由英文、中文和符號組成，不容易被記住。

APP名稱更改：TVBS 大運動+ → TVBS 大運動家


🔍 取名的初衷

應用程式原名為 「TVBS 大運動+」，其中 「+」象徵：

✅提供更多運動相關資訊，涵蓋多種賽事、即時新聞。

✅Plus 的概念，讓用戶在這裡一次掌握所有運動消息。


🚨 遇到的問題

1️⃣搜尋困難：包含 「+」符號，用戶輸入時容易忽略或輸錯，影響搜尋結果。

2️⃣名稱閱讀不直覺：由英文、中文和符號組成，不容易被記住。

APP名稱更改：TVBS 大運動+ → TVBS 大運動家


🔍 取名的初衷

應用程式原名為 「TVBS 大運動+」，其中 「+」象徵：

  • 提供更多運動相關資訊，涵蓋多種賽事、即時新聞。

  • Plus 的概念，讓用戶在這裡一次掌握所有運動消息。


🚨 遇到的問題

  1. 搜尋困難：包含 「+」符號，用戶輸入時容易忽略或輸錯，影響搜尋結果。

  2. 名稱閱讀不直覺：由英文、中文和符號組成，不容易被記住。

APP名稱不易快速搜尋

🔄 重新命名的決策過程

✅ 保持 TVBS 品牌識別，不影響用戶認知。
✅ 強調「運動愛好者」定位，提升情感共鳴。
✅ 移除符號，讓名稱輸入更流暢，改善搜尋體驗。


💡 最終選擇「TVBS大運動家」

1️⃣「運動家」代表熱愛運動的使用者，符合社群互動與預測功能。

2️⃣去掉「+」後，名稱更簡潔直覺，提升搜尋表現。

🔄 重新命名的決策過程

✅ 保持 TVBS 品牌識別，不影響用戶認知。
✅ 強調「運動愛好者」定位，提升情感共鳴。
✅ 移除符號，讓名稱輸入更流暢，改善搜尋體驗。


💡 最終選擇「TVBS大運動家」

1️⃣「運動家」代表熱愛運動的使用者，符合社群互動與預測功能。

2️⃣去掉「+」後，名稱更簡潔直覺，提升搜尋表現。

🔄 重新命名的決策過程

✅ 保持 TVBS 品牌識別，不影響用戶認知。
✅ 強調「運動愛好者」定位，提升情感共鳴。
✅ 移除符號，讓名稱輸入更流暢，改善搜尋體驗。


💡 最終選擇「TVBS大運動家」

1️⃣「運動家」代表熱愛運動的使用者，符合社群互動與預測功能。

2️⃣去掉「+」後，名稱更簡潔直覺，提升搜尋表現。

舊lLOGO

新LOGO

loading動畫設計

🆖 舊設計

雖然loading動畫已經有改成品牌色，但是在思考或許還可以再有趣一些

🆕 新設計

新構想的設計結合運動家設計出一個在跑步的色塊小人物

demo