Take control of your screen with one tap , uninterrupted gaming experience.

Take control of your screen with one tap , uninterrupted gaming experience.

一鍵掌控螢幕,讓你感受沈靜式的遊戲體驗

一鍵掌控螢幕,讓你感受沈靜式的遊戲體驗

01

專案概述

Summary

OSD Remote App 是 MSI 推出的螢幕控制手機軟體,以此代替螢幕上的物理按鈕,進而提升遊戲玩家在遊戲時的順暢度和沈靜,來獲得更好的遊戲體驗。這個軟體集合了多種功能,主要將原螢幕控制軟件中的部分功能進行包裝,確保在遊戲的過程能幫助玩家快速進行設定,包括遊戲監控、遊戲設定檔、系統設置、操縱杆控制等等。

這原先為 2018 年的作品,透過官網的產品更新,我們能夠感知到過去的設計為產品帶來了更多的使用者,且公司願意投入更多資源進行優化,因此 5 年後我也希望自己能夠挑戰過去的設計。為了從單一螢幕發展多螢幕支持,以及操作體驗的優化,整個設計方案圍繞在“設計彈性”與“優化體驗”兩個核心。設計彈性我們希望 App 能夠納入更多螢幕的控制,達到多支持的無縫切換,優化體驗我們打算通過自定義設定、 UI 視覺來提升整體感受和實際面的提效。

專案期間

Jun 2017 - Jan 2018

擔任角色

UI Designer

負責項目

UI Design

Visual Design

備註

部分內容及 UI 已於 2023 更新

團隊目標

延續 2019「OSD Remote App」的產品目標,讓遊戲玩家能夠隨時調整螢幕狀態,達到最好的遊戲體驗,並以 2023 年 MSI Gaming Intelligence 風格為基底,優化整體 App UI 與操作體驗。

角色與產出

於專案中,我與設計主管共同規劃產品方向,將現有 OSD 電腦端軟體收斂,納入手機端,在設計後與產品單位的工程師評估技術可行性及實際交付。(專案於 2023 年重新設計,大方向不變)

專案挑戰

作為電競產品的附屬工具,我們需探討市場上遊戲趨勢及玩家關鍵應用,且遊戲趨勢會逐年更動,如何協助使用者提升遊戲中的操作體驗,設計需要具備長期運營的彈性和風格。

成果與影響

我們在 2 個月內便完成新的設計和開發,並於 6 個月內獲得 5萬+ 的使用者,於 2023 年 使用者更是超過 10萬+ ,儘管 2023 新的設計無法更新評估,但我們收到許多長期合作的玩家肯定。

02

產品架構

Product Architecture

2019 年 的設計將第二層架構定為「調整」、「模式」和「設定」,而新的架構僅分成「首頁」和「設定」,新的這架構有三個優勢:

•對多對多裝置使用者,在裝置切換之間更順暢

•使用者調整裝置細節時,能夠專注且快速

•2019年為功能測試, 2023 年功能經過頻率上的分析,我們根據優先權做調整,減少了整體操作步驟和來回重工。

03

項目規劃

Project Planning

04

項目總覽

Project Overview

05

使用者畫像

Persona

遊戲玩家

會使用電腦進行遊戲的使用者

對於螢幕在遊戲體驗上的感受度不高,專注在遊戲內部反饋,因此,通常會進行一次性設計後,就不太會隨遊戲調整。

職業玩家

以電競遊戲作為工作的使用者

對於螢幕具有高準確性需求,尤其在遊戲進行期間進行設定時,傾向直觀、快速的即時反應,且無論進行什麼設定,穩定性是最高原則。

3C 愛好者

熱愛追求新 3C 產品體驗的使用者

主動會探索新的功能,並且深入每一項功能,儘管有些功能不太會去使用,都會自己親自操作一遍,還會紀錄與分享。

使用者痛點與訴求

操作不直觀

設定不準確

響應延遲

穩定性不佳

操作繁瑣

缺乏創新

資訊不足

06

探索設計風格

Explore Design Styles

我們相信,通過直觀、簡潔的使用者介面並滿足即時的交互行為,能夠降低使用者的學習成本,提升操作的流暢度,確保使用者能夠在遊戲中以直覺的反應完成螢幕的調整,達到最佳的遊戲體驗狀態。

07

顏色規範

Color Guidelines

08

字體規範

Typography Guidelines

09

Logo 設計

Logo Design

10

線框稿

Wireframe

11

組件展示

UI Component

OSD Remote App 的組件多數來自於電腦版的操作軟件,形成統一規範的組件集合,以此作為其他相關產品復用、修改的目的。這對於 MSI 來說是個需要多方評估的過程,過去我們專注在電腦產品上,比較少有手機的應用,但隨著移動裝置的普及和遊戲體驗的多元性,組件庫的整合會是長期成本降低的工具,方便不同設計師調用,且確保同步更新和使用者體驗的一致性。

12

設計成果

Design Deliverables

為什麼要重新設計?

挑戰新的能力,建立新的風格

一方面是對過去工作的反思能力,從這幾年的實戰經驗中學習,並試著提升設計原作品的品質。另一方面,過去的設計在技術限制下,使用者僅能使用單一螢幕進行連線,以及調整基本的參數來提升遊戲過程,但隨著玩家的需求提升,我們需要解決多螢幕需求、多元的遊戲體驗和不同目標的操作,因此才有了新的設計。

與裝置進行連線

一台手機與不同裝置進行連線

當使用者的環境有多個螢幕,或在一個區域中有相同的螢幕,我們可以透過PIN碼來搭配手機和螢幕,並在手機記錄後自動匹配。

多裝置應用

從遊戲玩家進行擴散

隨著資訊產業的發展,許多使用者不在滿足於單一螢幕的使用,相對的,在2023 年進行重新設計時,也評估這一段,單一螢幕的連接意味著限縮了市場,也無法滿足目前的使用者(例. 金融分析師)。我們回歸 App 原本目的 - 希望幫助使用者提升效率、改善體驗或增加多工能力。

多裝置應用

從遊戲玩家進行擴散

隨著資訊產業的發展,許多使用者不在滿足於單一螢幕的使用,相對的,在2023 年進行重新設計時,也評估這一段,單一螢幕的連接意味著限縮了市場,也無法滿足目前的使用者(例. 金融分析師)。我們回歸 App 原本目的 - 希望幫助使用者提升效率、改善體驗或增加多工能力。

多裝置應用

從遊戲玩家進行擴散

隨著資訊產業的發展,許多使用者不在滿足於單一螢幕的使用,相對的,在2023 年進行重新設計時,也評估這一段,單一螢幕的連接意味著限縮了市場,也無法滿足目前的使用者(例. 金融分析師)。我們回歸 App 原本目的 - 希望幫助使用者提升效率、改善體驗或增加多工能力。

實時狀態調整

沈靜式的調整

OSD Remote App 的使用者通常在執行的過程當中,會需要快速、準確的調整參數,尤其對於職業玩家更是重要,因此我們將原本的一些下拉選單展開成單間切換,也將整體的按鈕按數值放大,讓使用者在執行過幾次後,可以很直覺的做操作。

實時狀態調整

沈靜式的調整

OSD Remote App 的使用者通常在執行的過程當中,會需要快速、準確的調整參數,尤其對於職業玩家更是重要,因此我們將原本的一些下拉選單展開成單間切換,也將整體的按鈕按數值放大,讓使用者在執行過幾次後,可以很直覺的做操作。

實時狀態調整

沈靜式的調整

OSD Remote App 的使用者通常在執行的過程當中,會需要快速、準確的調整參數,尤其對於職業玩家更是重要,因此我們將原本的一些下拉選單展開成單間切換,也將整體的按鈕按數值放大,讓使用者在執行過幾次後,可以很直覺的做操作。

不同模組切換

原型+競品分析

除了原先的遊戲玩家,我們建立了更多模組提供使用者做使用,當時以 0-1 的階段,我們以兩個方式建立初始預設參數,一個為建立簡單的 MVP,進行使用者測試,另一個從分析競品的參數設定和用戶回饋,找到市場上已經被接受的標準,並作為初始設置的基礎。

不同模組切換

原型+競品分析

除了原先的遊戲玩家,我們建立了更多模組提供使用者做使用,當時以 0-1 的階段,我們以兩個方式建立初始預設參數,一個為建立簡單的 MVP,進行使用者測試,另一個從分析競品的參數設定和用戶回饋,找到市場上已經被接受的標準,並作為初始設置的基礎。

不同模組切換

原型+競品分析

除了原先的遊戲玩家,我們建立了更多模組提供使用者做使用,當時以 0-1 的階段,我們以兩個方式建立初始預設參數,一個為建立簡單的 MVP,進行使用者測試,另一個從分析競品的參數設定和用戶回饋,找到市場上已經被接受的標準,並作為初始設置的基礎。

多螢幕與多視圖

減少切換

2018 設計便已經具備多視圖功能,這表示使用者在顯示器上具有多個視圖顯示的需求,因此在重新設計時,我不止考慮多是圖的需求,將多台螢幕與多台電腦連線時的多視圖需求,而經常可見的方法便是:使用 PbP(畫邊畫)或 PiP(畫中畫)。

•PbP:允許多個輸入來源並排顯示在同一螢幕上,將它們視為單獨的視窗。

•PiP:主顯示器上覆蓋了一個較小的輔助窗口,使用戶能夠在關注主要內容的同時監視另一個來源。

多螢幕與多視圖

減少切換

2018 設計便已經具備多視圖功能,這表示使用者在顯示器上具有多個視圖顯示的需求,因此在重新設計時,我不止考慮多是圖的需求,將多台螢幕與多台電腦連線時的多視圖需求,而經常可見的方法便是:使用 PbP(畫邊畫)或 PiP(畫中畫)。

•PbP:允許多個輸入來源並排顯示在同一螢幕上,將它們視為單獨的視窗。

•PiP:主顯示器上覆蓋了一個較小的輔助窗口,使用戶能夠在關注主要內容的同時監視另一個來源。

多螢幕與多視圖

減少切換

2018 設計便已經具備多視圖功能,這表示使用者在顯示器上具有多個視圖顯示的需求,因此在重新設計時,我不止考慮多是圖的需求,將多台螢幕與多台電腦連線時的多視圖需求,而經常可見的方法便是:使用 PbP(畫邊畫)或 PiP(畫中畫)。

•PbP:允許多個輸入來源並排顯示在同一螢幕上,將它們視為單獨的視窗。

•PiP:主顯示器上覆蓋了一個較小的輔助窗口,使用戶能夠在關注主要內容的同時監視另一個來源。

為絕地求生客製功能

深更多遊戲玩家的支持

深入遊戲,贏得玩家支持

經過 360 智庫的研究報告,2014年起,手機遊戲人均銷售營收增長率開始下降,同時,PC端的人均銷售營收增長率一直位居高位,其增加速度還在加快。其中,支持手遊和端遊的絕地求生遊戲於 2016 年的搜索量快速攀升,潛力巨大。到了 2017年 10月甚至有巨頭(騰訊)入場,因此我們相信,我們在行銷上為這款遊戲推出更多附加功能,便能吸引更多玩家關注產品。

13

成效分析

Effectiveness Analysis

10

+

1年破 5萬, 3 年破 10萬人數下載

2018 年的設計,短短 3 年內就已經突破 10萬人下載,這意味著有超過 10 萬人購買單一螢幕,並且願意下載 App 操作。但過去 2018 年時,此 App 僅支持單一型號螢幕的使用,這也可能是 3 年後下載人數和產品更新停止的原因,在 2023 年我重新進行設計,我希望將 MSI 相關的螢幕產品做串接,也提升 App 支援的彈性,藉此創造更多的商機。

14

反思與學習

Reflection and Learning

2018 年我們以市場趨勢帶動周邊技術與服務,2023 年我以設計彈性驅動商業機會

作為一家以電競市場為核心的品牌,MSI 將主流遊戲《絕地求生》納入行銷目標,成功將產品定位與遊戲需求結合。在遊戲快速成長的背景下,公司電競螢幕的銷售也取得了不錯的成績,並顯著提升了玩家的遊戲體驗。

然而,回到 2018 年,當時我還是一名 Junior Designer,負責與研究員一起進行玩家訪談。儘管參與了使用者研究,設計過程中仍多處於被動執行階段。產品 UI 的風格與功能方向多以「與 PC 端相同即可」為指導,缺乏對移動端特性的深度分析。這一策略雖然簡化了設計流程,但未能充分解決跨裝置操作差異及用戶痛點,導致潛在風險被忽略。

帶著對當年設計遺憾的反思,我選擇 Redesign 這款作品,重新審視問題所在。比如,為何公司眾多產品中,僅一台螢幕能與手機連線?這種設計是專注還是干擾用戶?品牌風格是否符合多元使用者的需求?針對這些疑問,我進行桌面研究,重回用戶視角,通過重新下載遊戲並分析玩家反饋,挖掘新的優化方向。

在 Redesign 的過程中,我深刻體會到設計必然伴隨風險,無法追求「完美」或「零風險」。因此,我的重點放在提升設計的易用性和彈性,優化點擊與流程,同時考慮未來更多裝置與用戶場景,為使用者創造價值的同時也增強商業機會。這次挑戰不僅要求平衡設計、商業和使用者體驗,也教會我評估資源與風險的重要性,使我的設計不再局限於「好看」或「我想做」。

最後,這款產品在 Google Play 上已久未更新,原因或許與公司策略調整有關。對我而言,看到自己參與從 0 到 1 的項目停滯不前,難免有些遺憾。這段經歷對我設計生涯初期的成長卻意義非凡——它不僅拓展了我的設計思維,也教會我如何在團隊合作中找到平衡。這段經歷無疑是一次寶貴的學習與反思旅程。

14

反思與學習

Reflection and Learning

2018 年我們以市場趨勢帶動周邊技術與服務,2023 年我以設計彈性驅動商業機會

作為一家以電競市場為核心的品牌,MSI 將主流遊戲《絕地求生》納入行銷目標,成功將產品定位與遊戲需求結合。在遊戲快速成長的背景下,公司電競螢幕的銷售也取得了不錯的成績,並顯著提升了玩家的遊戲體驗。

然而,回到 2018 年,當時我還是一名 Junior Designer,負責與研究員一起進行玩家訪談。儘管參與了使用者研究,設計過程中仍多處於被動執行階段。產品 UI 的風格與功能方向多以「與 PC 端相同即可」為指導,缺乏對移動端特性的深度分析。這一策略雖然簡化了設計流程,但未能充分解決跨裝置操作差異及用戶痛點,導致潛在風險被忽略。

帶著對當年設計遺憾的反思,我選擇 Redesign 這款作品,重新審視問題所在。比如,為何公司眾多產品中,僅一台螢幕能與手機連線?這種設計是專注還是干擾用戶?品牌風格是否符合多元使用者的需求?針對這些疑問,我進行桌面研究,重回用戶視角,通過重新下載遊戲並分析玩家反饋,挖掘新的優化方向。

在 Redesign 的過程中,我深刻體會到設計必然伴隨風險,無法追求「完美」或「零風險」。因此,我的重點放在提升設計的易用性和彈性,優化點擊與流程,同時考慮未來更多裝置與用戶場景,為使用者創造價值的同時也增強商業機會。這次挑戰不僅要求平衡設計、商業和使用者體驗,也教會我評估資源與風險的重要性,使我的設計不再局限於「好看」或「我想做」。

最後,這款產品在 Google Play 上已久未更新,原因或許與公司策略調整有關。對我而言,看到自己參與從 0 到 1 的項目停滯不前,難免有些遺憾。這段經歷對我設計生涯初期的成長卻意義非凡——它不僅拓展了我的設計思維,也教會我如何在團隊合作中找到平衡。這段經歷無疑是一次寶貴的學習與反思旅程。

14

反思與學習

Reflection and Learning

2018 年我們以市場趨勢帶動周邊技術與服務,

2023 年我以設計彈性驅動商業機會

作為一家以電競市場為核心的品牌,MSI 將主流遊戲《絕地求生》納入行銷目標,成功將產品定位與遊戲需求結合。在遊戲快速成長的背景下,公司電競螢幕的銷售也取得了不錯的成績,並顯著提升了玩家的遊戲體驗。

然而,回到 2018 年,當時我還是一名 Junior Designer,負責與研究員一起進行玩家訪談。儘管參與了使用者研究,設計過程中仍多處於被動執行階段。產品 UI 的風格與功能方向多以「與 PC 端相同即可」為指導,缺乏對移動端特性的深度分析。這一策略雖然簡化了設計流程,但未能充分解決跨裝置操作差異及用戶痛點,導致潛在風險被忽略。

帶著對當年設計遺憾的反思,我選擇 Redesign 這款作品,重新審視問題所在。比如,為何公司眾多產品中,僅一台螢幕能與手機連線?這種設計是專注還是干擾用戶?品牌風格是否符合多元使用者的需求?針對這些疑問,我進行桌面研究,重回用戶視角,通過重新下載遊戲並分析玩家反饋,挖掘新的優化方向。

在 Redesign 的過程中,我深刻體會到設計必然伴隨風險,無法追求「完美」或「零風險」。因此,我的重點放在提升設計的易用性和彈性,優化點擊與流程,同時考慮未來更多裝置與用戶場景,為使用者創造價值的同時也增強商業機會。這次挑戰不僅要求平衡設計、商業和使用者體驗,也教會我評估資源與風險的重要性,使我的設計不再局限於「好看」或「我想做」。

最後,這款產品在 Google Play 上已久未更新,原因或許與公司策略調整有關。對我而言,看到自己參與從 0 到 1 的項目停滯不前,難免有些遺憾。這段經歷對我設計生涯初期的成長卻意義非凡——它不僅拓展了我的設計思維,也教會我如何在團隊合作中找到平衡。這段經歷無疑是一次寶貴的學習與反思旅程。

Copyright © 2024 Dukelee

Copyright © 2024 Dukelee

Copyright © 2024 Dukelee

Copyright © 2024 Dukelee