回覆列表
  • 1 # 開發豆丁

    一、使用場景

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

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

    二、智慧電視的特性

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

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

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

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

    三、顯示器和移動裝置的顯示解析度

    電腦顯示器最大解析度,通常小於或等於顯示卡解析度。顯示卡決定最大解析度,顯示器決定畫素密度。移動裝置的分

    辨率和畫素密度往往是固定的,電腦作業系統能自動處理解析度和畫素密度的問題。

    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所有顯示模式下經過測試,都不會產生問題。

    四、焦點

    不管是為哪個廠商的電視盒子或者 TV OS做,你都需要理解一個叫Focus Engine的設計概念,你要時刻記得在電視UI上應該始終有一個東西是處在Focus的狀態 也就是焦點狀態。

    舉個栗子:如上圖中有很多個磁貼排布,而在移動裝置上,你需要選擇哪個就直接點選哪個磁貼即可。而在電視上,預設狀態就應該是選中了一排照片中的某一個,而你需要點選某一個,就需要先移動焦點到對應的磁貼上,點選OK來完成選擇,這是由遙控器這種獨特的互動方式決定的。

    然後放大的倍率,如果沒有太大感覺得話,我在這裡推薦,放大 1.1倍-1.5倍之間,而我經常用的是1.2倍太小不明顯,太大容易遮擋其他資訊,具體可以自己逐個去嘗試不同的效果,再根據自己的介面風格,選擇一個最合適的作為規範。

    基於遙控器的操作限制,儘可能的讓使用者透過上下左右和OK鍵來進行操作。

    儘可能的減少文字輸入的操作,因為在TV上在沒有鍵盤輔助輸入的情況下,透過游標在虛擬鍵盤上輸入文字是一個非常蛋疼的事情,必要的情況下,為用、戶提供語音輸入方式。

    在佈局上儘量讓佈局如圖下右,不要有層疊的互動控制元件出現,會增加選擇困難。這部分互動方式在下文我會再拿出、來講。

    五、導航與狀態

    在TV端中,導航遵循簡單,易用,且為了遙控機方向鍵上,下,左,右,加OK鍵的操作,常見的導航方式為橫向導航欄,縱向導航欄。

    六、選單

    十字互動和磁貼是TV端應用主流的互動方式,但實際應用中,十字互動在安卓平臺開發難度相對較大,且最多隻能展示兩級選單,當遇到三級選單需求,在設計和開發時就會顯得很吃力。

    磁貼風格,開發難度相對小,但下級菜單隻能反覆套用磁貼進行展示,當進入二級選單時候,一級選單名已經被替換,且一級選單不夠醒目,容易使使用者丟失當前位置,新手操作起來就顯得混亂了。

    考慮這些因素,我們在設計選單的時候,就要優先考慮一級選單足夠醒目,讓使用者即使有三級或者四級選單,也能讓使用者隨時知道介面的當前位置,而磁貼因為能展示豐富的內容,也符合扁平化趨勢,如果可以借鑑一下設計方式。

    七、狀態

    其實總結起來,TV端在常規的狀態中,多了一個半選中狀態,這個互動其實在早時候,按鍵手機時代,經常用到。我的經驗建議是,儘可能的透過程式自動處理,去簡化個互動,減少使用者的操作步驟

    八,顏色

    其實總結起來,TV端在常規的狀態中,多了一個半選中狀態,這個互動其實在早時候,按鍵手機時代,經常用到。我的經驗建議是,儘可能的透過程式自動處理,去簡化個互動,減少使用者的操作步驟

    九、字型

    在使用字型時,避免纖細字型或者有過寬、過窄筆畫的字型。使用簡單無襯線字型並選用抗鋸齒功能來增加易讀性。

    目前,TVOS幾乎大多是安卓系統,字型使用思源黑體,在你需求需要時,你可以考慮嵌入以獲得授權的字型包。但你需要記住一點,嵌入字型包必定會拖慢系統的執行速度,應用的效能會下降,做好應用的記憶體管理是很有必要,當然這是開發的事情,你只需要瞭解。

    以下是一些提高文字易讀性的一些方法建議:

    儘可能的減少大量文字的出現。

    將長句改為幾個短句,讓使用者可以快速瀏覽。

    雖然尺寸是,算是3X圖,但字型的大小不是移動端規範的3X,而是為觀看距離設計的,相對會大很多。

    在電視上,在深色背景上的淺色文字比在淺色背景上的深色文字更容易閱讀。

    使用Android的標準字型尺寸。例如,標準的小字型字號為14sp,在1080p的螢幕上,這相當於28點的字號。

    為螢幕文字設定比印刷文字更大的行間距。

    十、個人建議

    接觸TV專案大概8個月,根據我這個階段的學習,和實際工作,我總結和歸納的這些基本知識和注意事項,這些大致能幫助剛接觸TV專案的朋友快速瞭解電視大屏的基本介面設計方法和互動知識,避免一些不必要的坑。

    但因為每個公司流程不一樣,各自制定的規範也有所不同,更多的是透過多實戰,多嘗試,去對比和總結,在根據自己的產品定位,去設計出最合適的方案。

    最後說一句,TV端設計因為針對使用者群都是偏大齡,大部分情況並沒有像APP那樣顯得高大上,潮流,好看的介面未必是合適的,但是合適的介面,一定是最好的設計。

  • 中秋節和大豐收的關聯?
  • 得了癌症的病人,在後期出現全身水腫,還能否治好?