top of page
bg.png
portfolio_img_l.png
TOSHIBA CAST TV APP

 無線投影電視遙控APP

專案背景PROJECT BACKGROUND

當數位內容取代傳統電視頻道

隨著智能電視提供更多元的數位媒體內容,網路影片逐漸成為主要的收視來源,甚至取代了傳統的電視頻道服務。在2013年,Google推出了Chromecast投放技術,以行動優先的投放模式為特色,讓使用者能夠在手機上選擇內容,輕鬆投放到電視上播放,使網路內容的瀏覽更加便利。

於2015年問世的Toshiba Cast TV是一款專注於媒體投放功能的智能電視。在這個專案中,我們設計了遙控器應用程式和相關的互動體驗。致力於提供直覺且容易上手的介面設計,讓使用者能夠輕鬆地選擇和投放他們喜愛的內容,享受優質的觀影體驗。

專案目標DESIGN GOALS

隨選即播的「行動優先」操控

這個專案是針對TOSHIBA Cast TV(內建Chromecast的電視)的遙控器APP設計,旨在取代傳統的實體遙控器,同時提供更多隨選數位內容的進階功能。因此,我們的設計目標是確保應用程式能夠滿足實體和數位使用需求,保持操作的簡單易懂。從概念提案到實際量產,我們需要達成以下設計目標:

  1. 取代實體遙控器:確保應用程式具備實體按鍵的所有功能,以便使用者能夠輕鬆地控制電視的各項操作。

  2. 考慮多人、多機的使用情境:建立合理的操作邏輯,讓多人同時使用或切換不同設備時能夠順利控制各自的功能。

  3. 影音多媒體播放控制:提供完整的影音播放控制功能,例如收藏影片、建立播放清單,以及播放、暫停和停止等基本操作。

Man Trying App
我的角色MY ROLE

在此專案中,我擔任UI/UX設計師的角色。我負責與團隊主管合作,為客戶的應用程式進行設計和規劃。我的工作包含體驗設計,定義APP和電視機的操作方式,以及基於Android和iOS的開發規範進行介面設計。我也參與產品的迭代和改版,根據使用者反饋和使用性測試進行調整和優化設計。我的目標是確保設計符合客戶需求,並與工程師密切溝通,使設計能夠順利實現。

專案:TOSHIBA Cast TV App - 電視遙控器APP設計

角色:UI/UX 設計師

設計主管:Lizette Chiang

@ Compal Electronic Inc. 2015 & 2016

定義問題 PROBLEMS & NEEDS

遙控體驗,各取所需

現今科技的進步改變了看電視的方式,不再僅限於使用遙控器切換頻道。隨著智慧化功能的增加,我們可以享受更多的便利,例如瀏覽網路影片和切換不同的多媒體內容。然而,在家庭中,電視通常是公用的,因此我們需要了解每個家庭成員的使用習慣,並根據這些差異設計適合的介面。我們將針對「電視遙控」和「內容投放」兩個情境,設計不同的介面,以滿足各個成員的需求,提供更好的使用體驗。

Watching TVs

「電視遙控」情境

對於喜歡傳統電視節目的使用者來說,他們熟悉使用遙控器來切換頻道。為了滿足這樣的需求,我們的遙控器應用程式在「電視遙控」模式中提供了熟悉的介面,包括數字鍵、音量鍵、功能鍵和方向鍵等按鍵,並以符合使用者習慣的方式排列。這樣,他們可以輕鬆控制電視,享受更好的使用體驗。

casting.jpg

「內容投放」情境

偏好網路串流媒體服務的使用者,喜歡在網路媒體平台上觀看影片,如Netflix、YouTube等。他們熱衷於探索各種線上內容,包括網路獨家節目、短片、紀錄片等。他們也透過推薦系統和熱門排行榜等尋找新的影片並與其他使用者分享觀影心得。在設計「內容投放」模式時,我們重視讓使用者輕鬆收集喜愛的內容,並進行個人化的分類、播放、排程和分享。

設計概念CONCEPT

保有實體遙控器的直覺,結合數位化的優勢

我們設計了「電視遙控」和「內容投放」兩種模式,滿足不同使用情境和需求。設計著重於直覺的操作介面,讓使用者輕鬆上手,就像使用實體遙控器一樣。同時,利用數位優勢,使用者可以紀錄、收藏和分類個人喜好的內容,隨時投放到Cast TV上。一個遙控器即可控制多台電視,且無空間限制。

1. 保有實體遙控器的直覺

  • 不用看也能操作: 使用手勢作為主要互動方式,替代了螢幕按鈕。手勢方向用於切換頻道和調整音量。透過使用性測試,我們找到了最佳的手機傾斜角度和頻道切換速度。
    *測試中還發現人們對手勢上下有反向操作的概念,類似於滑鼠捲動的直覺方向因人而異。因此,我們新增了客製化選項,讓使用者能按照自己的操作習慣進行設定。

tv_edited.png
  • 永遠隨侍在側: 透過iOS和Android的快速操作面板,使用者可以在螢幕鎖定的情況下直覺地操作遙控介面,不需要打開App畫面,更便捷。

2. 結合數位化的優勢

112.gif
  • 功能輕鬆切換:遙控器APP根據媒體內容,顯示相應控制介面,減輕視覺負擔,簡化操作。且無線控制,可同時控制多台電視,無空間限制。

  • 一鍵加入喜愛影片:使用者可輕鬆將YouTube或其他網路影片一鍵加入收藏清單,就像網頁書籤,方便組織和播放喜愛的影片,即時投放到Cast TV上。

20180322-為產品打造互動體驗_edited.jpg
設計流程 DESIGN PROCESS

我通常在確定設計提案後,開始定義線框圖和流程。這有助於檢視介面操作的邏輯和畫面之間的關聯性,以符合使用需求。這個專案的特殊之處在於每次改版是由不同的開發團隊負責,因此我們提供詳細的設計文件,以便新團隊快速了解整個應用程式的運作邏輯和功能需求。

​介面線框圖

線框圖是我常使用的工具,這個工具對於溝通和展示設計想法非常有用,它呈現畫面的視覺結構和佈局,元件位置、大小、關聯等,促進團隊間快速討論和設計溝通,確保產出能符合期待。

UI 規格書:資訊架構與流程定義

UI規格定義著重於介面的各種案例、操作和互動行為,包括頁面載入、使用者操作、資料輸入驗證、狀態變化、資訊呈現、響應式設計和特殊設定和使用情境。詳細的UI規格有助於確保介面的一致性、易用性和符合使用者需求。

​介面視覺提案

3-3 Number.png
3-2 cast control(menu).png
3-1 tv control(back).png
3-4 D-pad.png
Cast TV 2.0 - iOS - Gesture Preference Settings_1.png

交付定義文件

121.png
221.png
截圖 2023-05-18 下午5.33.32.png
bottom of page