雷火电竞首页-中国电竞赛事及体育赛事平台

聯系我們 face+ 關于 服務 案例
首頁 案例 服務 關于 face+

智能電視UI設計教程分享 ,共同來學習

Time: 2020-03-11

        智能電視如今進行設計才可以讓人們獲得更好的體驗呢?接下來就讓我們來為大家分享智能電視UI設計教程,如果你對此也非常的感興趣的話,自然就需要好好的研究下下面的內容,一定會讓大家受益匪淺的。

  一、UI設計方向

  UI是用戶界面,是英文User和 interface的縮寫。從字面上看是用戶與界面2個組成部分,但實際上還包括用戶與界面之間的交互關系,所以這樣可分為3個方向,他們分別是:用戶研究、交互設計、界面設計。

智能電視設計1.jpg

  (圖片來自網絡)

  二、智能電視UI設計教程

  1、使用場景

  在開始接到需求之前,我們首先需要了解使用場景和環境,了解這些這些特性設計更符合場景的界面,符合良好的用戶體驗。

  因此在TV的界面設計上最好讓用戶通過方向鍵和OK能夠進行操作,并提供返回鍵,避免用戶低頭看遙控器尋找按鍵而打斷操作的任務流。TV標配音響系(音量是默認開啟的)。所以在app設計中,可以使用聲音作為幫助提示和操作反饋提示。

  2、智能電視的特性

  智能電視液晶屏區別于電腦顯示設備和手機顯示設備,當你設計你的APP ui界面時,你要知道根本上智能電視與電腦或移動設備(手機)是不同的。除開它的尺寸大小因素,電視顯示出的信息總量比電腦或移動設備的

  要少,你應該提供更少的UI,盡可能的自動化處理某些任務,而不是要求用戶去互動。

  市面上大多電視的尺寸都具有一定欺騙性。盡管現代電視的屏幕對角線通常大于40英寸,成比例地,觀眾坐在電視前比坐在電腦顯示屏前要遠。作為用戶的感受到的是,電視屏幕尺寸“似乎”比電腦顯示器要小。當你在設

  計UI時,你可以用自己的手機連接ps來模擬這種體驗.

智能電視UI設計2.jpg

  (圖片來自網絡)

  3、顯示器和移動設備的顯示分辨率

  電腦顯示器最大分辨率,通常小于或等于顯卡分辨率。顯卡決定最大分辨率,顯示器決定像素密度。移動設備的分

  辨率和像素密度往往是固定的,電腦操作系統能自動處理分辨率和像素密度的問題。

  Android系統根據設備屏幕大小和像素密度來按比例縮放UI。此外,你可以提供可替換的UI資源,為不同設備準備最好的UI體驗。

  電視顯示分辨率

  電視(即使是最現代化的那些電腦)有基于掃描線的顯示分辨率。Google TV 支持3種掃描線值的高清電視:720p,1080i和1080p,這代表720逐行掃描線,1080隔行掃描線和1080逐行掃描線(Android將后兩者視作等同)。720值意味著電視可以在屏幕的垂直方向上“尋址”720條不同的線;1080值則意味著電視以在垂直方向上“尋址”1080條線。

  這些線有多高,每條線之間的“寬”是多少?也就是說電視的實際像素密度是多少?Android將這些數值抽象顯示為與密度無關的像素單位(縮寫 dp)。

  Android 應用程序得益于Android的縮放技術??傊?,你應該為1080p的規格來設計UI,允許Android系統將你的UI縮小到720p的規格,因為縮小圖形的效果通常要優于放大的效果。為了得到最好的圖片縮放效果,可以給開發提供.9.png切圖。

  智能電視的設計尺寸

  所以建議以1080P作為視覺設計稿尺寸,切圖可以使用android 9-patch切圖進行低分辨率適配,在測試的時候選擇用低分辨率測試可以更好的發現問題;確保在TV所有顯示模式下經過測試,都不會產生問題。

  拿上面的圖為例,設計尺寸為1920X1080,因為上面講到的電視屏幕顯示特性,不同廠家甚至還不一樣,那么為了避免這些問題的出現,在設計界面的時候,如上圖給邊緣留10%或以上的外邊距,所有內容放在這個容器內去設。

  上下邊距留90個像素,左右邊距留120個像素,具體數值可以自己根據實際情況去協調。

  智能電視UI設計教程如上文所述,想必我們已經在上文為大家進行了全面的總結,希望大家可以通過上文提升自己的能力。


合作咨詢

上海(總部)

上海市浦東新區郭守敬路498號22號樓
021-61057328
[email protected]

辦公地址地圖

北京

北京市東城區后永康17號A座
010-64015620
[email protected]

辦公地址地圖

成都

四川省成都市錦江區東大街牛王廟段100號
028-62790929
[email protected]

辦公地址地圖
首頁 | 案例 | 服務 | 關于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開