更多電視設計干貨:
譯者推薦:在這篇文章中,作者深入探討了智能電視應用設計的關鍵技巧,幫助設計師們應對這一快速發展的領域。隨著智能電視的普及,用戶對應用的期望不斷提高,設計師需要掌握如何在大屏幕上創造引人入勝的體驗。文章分享了六個實用建議,包括考慮觀看距離、優化遙控導航和確保用戶隱私等。無論你是新手還是資深設計師,這些見解都能為你的設計工作提供寶貴的指導和靈感。
電視早已不僅僅是一個用來看新聞的盒子。隨著智能電視的普及,電視應用的使用頻率大幅上升。根據 Inscape 最新報告顯示,智能電視用戶使用的應用數量已翻了一番,從 2021 年第四季度平均每人 2.6 款,增加到 2023 年第三季度平均每人 5.4 款。
盡管電視平臺應用的使用量逐年提升,但針對這一領域設計的詳盡指南和相關文章卻明顯稀缺。這也難怪,很多設計師在涉足電視應用設計時往往會感到不知所措。在這篇文章中,我將基于自己 8 年以上的電視應用設計經驗,分享一些心得和建議,幫助你突破挑戰,打造出極具吸引力且用戶友好的電視應用。
測試臺在 Okko 辦公室,視頻流媒體平臺
探索智能電視平臺
我們在著手開發智能電視應用程序之前,必須意識到智能電視不僅僅是一種傳統電視設備。支持智能電視功能的技術還被廣泛部署到其他外部設備中,例如機頂盒、游戲主機、數字媒體播放器,以及任何使用電視作為顯示輸出的聯網設備。
這些設備可兼容多種操作系統,其中全球最受歡迎的分別是 Android OS(38.1%)、三星的 Tizen(21.3%)以及 Roku(12.5%)。相較之下,LG 的 webOS、亞馬遜的 Fire TV 和蘋果的 tvOS 所占市場份額則較為有限。由于操作系統的種類繁多,這也在應用程序的開發上帶來了一定的難題。然而,大多數電視都可以通過某種形式支持網頁技術。因此,為了更高效地利用開發資源,大部分公司選擇專注開發適配于多數電視設備的網絡應用程序。
例如,索尼的 PlayStation 游戲主機擁有其專屬操作系統,但為這個系統開發原生應用并不實際。Roku 和 tvOS 要求進行原生開發,而三星與 LG 只支持基于網頁的開發,而 Android TV 則同時支持原生和網頁兩種開發方式。
智能電視操作系統市場份額
以下是我總結的有關原生和跨平臺開發中應用程序設計的關鍵策略,其中也融入了一些我個人實踐中的重要體會。
觀看距離是智能電視在用戶體驗上區別于智能手機或筆記本電腦的關鍵因素之一。對于電視而言,用戶通常會保持約 3 米的觀看距離。這就要求界面的組件尺寸和文本樣式能夠在遠處保持清晰可見。為這種距離進行設計,需要對視覺層次感和文本可讀性有透徹的把握。
另一個不可忽視的重要因素是,電視屏幕在白天會受到強光的影響(陽光可能是主要問題),而在夜晚則面臨高對比度的情況。因此,在設計時,應始終測試字體的清晰度以及顏色對比的效果。
洞察 1:或許你會擔心如何為不同尺寸的電視調整布局,類似于電器商店展示的情境。然而,幸運的是,所有電視都具備相同的寬高比,所以從全高清分辨率(1920x1080)入手,你可以輕松地縮放到所需的尺寸。
單一模型轉換為常見電視屏幕尺寸
在選擇字體時,應優先選擇字體較大且字重較粗的字體。鑒于電視顯示器存在各種細微差異,這樣更能保證文字的可讀性。對于全高清屏幕,根據具體字體和樣式,建議將最小文本尺寸設置為約 22 像素,可在上下 2 像素范圍內調整。
用戶往往習慣于在舒適的家中觀看電視,通常會坐著或躺在沙發上,并與親朋好友進行交談。在這樣一種輕松的氛圍中,即便用戶無法完全專注于屏幕或因為某些原因分神,設計也應能夠正常發揮作用。因此,界面需要保持簡潔與整潔。一目了然的設計能夠讓用戶輕松找到所需內容,而不至于感到困擾或不便。
聚焦元素的可視化變體
洞察 2:為提升導航體驗,聚焦元素應具備三種核心狀態:默認、聚焦和按下。可以借助對比色、邊框、陰影或尺寸變化來引導用戶關注關鍵元素。但需注意,在整個應用中應限制使用一種或不超過兩種方式,以確保用戶體驗的明晰性與系統性。
由于智能電視主要用于夜間觀影,深色配色方案更符合眼部觀看的舒適性。如果你的品牌一般采用淺色風格,可以嘗試專門為電視端設計一個深色主題。盡管可以通過調整主題,在白天和夜間之間切換淺色與深色模式,但這種功能在 tvOS 之外尚未被廣泛支持。除了夜晚觀看這一場景外,還需要注意其他重要因素,如色彩渲染(可能會因不同顯示設備的差異而有所變化)、顯示模式(可能影響畫面的對比度與亮度)以及色彩對比度(在低畫質顯示設備上可能存在較大差異)。
洞察 3:鑒于存在諸多細微差別,對顏色在不同電視機及多種環境中的表現進行測試尤為重要,以防止出現任何意外情況。
具有深色主題的流行電視應用:Netflix、Youtube、Hulu 和 Spotify
電視界面需要圍繞遙控器的導航方式設計。用戶應能夠清晰辨認自己在屏幕中的位置,并能夠順暢地在各個組件之間切換。由于遙控器僅支持有限的方向輸入方式,不同于觸摸屏或鼠標操作,因此導航設計必須直觀簡單。
各種電視和機頂盒的遙控器
洞察 4:大多數傳統遙控器只能進行四個方向的移動,這可能會導致對角線移動的內容令用戶迷惑。不過,如果你的應用需要較為復雜的控制功能,可以考慮將導航功能“交給”智能手機來實現。
電視的安全區域是指屏幕邊緣可能會被設備裁切的部分。關于安全區域的尺寸,不同廠商會提供各自的指導。例如,蘋果建議屏幕上下邊緣應至少留出 60 像素的距離,左右邊緣則要預留 80 像素。由于 Apple TV 能夠適配各種電視型號,因此這些建議通常被認為具有普遍適用性。
安全區域
洞察 5:在進行屏幕設計時,需要注意安全范圍,確保組件不會因位于邊緣而被裁剪處理。此外,輪播圖中的側邊卡片等元素也應避免超出視覺可見區域。
與智能手機通常為個人設備不同,電視更多情況下被家庭成員共同使用。因此,在設計時保護用戶的個人信息尤為重要。這需要包括用戶個人檔案管理、用戶間的無縫切換,以及保證諸如觀看歷史和喜好等敏感數據的私密性和安全性等功能的考慮。
Netflix 上的個人資料切換頁
洞察 6:假如應用涉及用戶的個人信息,這些信息不宜在初始界面直接呈現。此外,添加家長控制功能至關重要,以有效保護兒童免受不適內容的侵害,確保為所有家庭成員提供一個安全的觀看環境。
智能電視為用戶帶來了獨特而靈活的使用體驗,但其技術規格較為有限,這要求在設計時必須格外謹慎。因此,開發此類平臺的應用程序時,應優先追求設計的簡潔性,而非復雜性。通過善用標準平臺功能(如 CSS 動畫)并避免使用消耗資源較大的效果,如模糊處理,可最大程度地確保在不同設備上實現最佳性能。
*CSS:(Content Scramble System)是一種用于網頁設計的樣式表語言,它可以控制網頁的布局、字體、顏色等方面的樣式。CSS 通過將樣式與 HTML 文檔分離,使得網頁設計更加靈活和易于維護。
預計未來五年內,智能電視市場規模將增長一倍,因此,現在正是設計師抓住機遇,在這一迅速擴展的市場中取得領先的絕佳時刻。
通過深入了解平臺、關注用戶使用環境,并遵循相關最佳實踐,您可以打造一款讓用戶喜愛的電視應用程序。掌握電視設計的獨特之處,從觀看距離到遙控器操作,將能夠提供一流的使用體驗。
快樂設計!
歡迎關注作者微信公眾號:「TCC翻譯情報局」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。
發評論!每天贏獎品
點擊 登錄 后,在評論區留言,系統會隨機派送獎品
2012年成立至今,是國內備受歡迎的設計師平臺,提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 2 條評論點贊,解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓