高手的學習筆記!給Android TV做設計要註意的16個細節

分類:實用技巧 時間:2017-09-10

@平行煎餅  :雖然同樣是安卓系統,設計TV這種大屏幕的應用程序和設計手機平板等其它設備不太一樣,需要註意一些點。

1. 在Material Design的基礎上進行設計

可以使不同平臺的應用保持一致性:相同的外觀和相同的使用體驗,令用戶有熟悉感,而且Material Design也給用戶提供了愉悅和實用的體驗。

2. 易操作的界面

內容應該是電視應用的核心,用戶不用在屏幕上閱讀文字信息也能輕松操作;並且,視頻或媒體需要能夠被用戶輕松播放,這意味著需要減少點擊操作的次數。

3.最小化的界面

為了使用戶在使用TV應用有看電影的體驗,應該將用戶界面保持在最小化最簡潔的狀態,盡可能避免使用文字。

4. 保持簡潔

采用最少的步驟完成操作:

  • 減少不必要的導航步驟,減少用戶操作障礙,將交互動作的數量保持在最低限度。
  • 減少用戶認知負擔,將界面設計保持在最簡潔的狀態。
  • 減少導航和瀏覽對用戶的幹擾,將應用中的文本內容保持在最低。查看視覺信息比閱讀屏幕上的文本段落更容易,所以在可能的情況下,最好使用可視化組件。

5. 遙控器導航

用戶是使用D-pad遙控器控制瀏覽電視上的內容,D-pad遙控器包括四個方向按鈕和一個中央選擇按鈕,另外還有後退按鈕和主頁按鈕。這些控制按鈕限制了用戶,只能通過內容上下左右導航,並返回其導航流程。可以通過列表和網格布局來解釋這些限制條件,以X軸和Y軸的路徑,供用戶輕松瀏覽。為了幫助用戶更好的導航,當前選中的聚焦元素和未選中元素的樣式狀態對比應該盡可能的拉大。屏幕上的每個元素都應該有聚焦狀態,這意味著屏幕上始終會有一個最容易被發現的聚焦元素。

元素的聚焦狀態可以通過以下方式實現:

  • 縮放聚焦元素,使其顯示更大。
  • 改變聚焦元素陰影的亮度,使其更加明顯。
  • 改變元素的不透明度,將不重要的元素的透明度降低,使焦點元素更吸引人的註意。
  • 在聚焦元素中實施某種形式的動畫,以顯示它正在被交互。
  • 應該確保屏幕上總是有一個清晰的聚焦對象,這有助於使用D-pad遙控器來導航。

註意:為了提高效率,合理利用安卓TV提供的組件,不要在應用中使用工具欄或溢出菜單。

由於用戶可以用不同類型的遙控器進行導航操作,因此應該確保支持任何非標準輸入的遙控器以確保交互順利進行。

6. 用戶輸入

應該為應用提供靈活的輸入方式, 其中一種重要的方法是語音輸入。 雖然安卓TV具有允許通過屏幕進行文字輸入的虛擬鍵盤,使用遙控器輸入會很麻煩(使用遊戲手柄操作稍微簡單一些)。因此,語音輸入對於減少阻力是很重要的。

另一個選擇是將用戶輸入委托給移動設備—— 允許用戶使用其移動設備向電視系統輸入文本信息。 為此,應用應該能夠檢測到附近的設備(可能使用電視機連接到的WIFI網絡),並通過啟動應用程序顯示輸入文本的選項,允許用戶通過移動設備進行輸入。

7. 動態內容

為了提高用戶的活躍度和關註度,應該為應用添加動態特性。最重要的是,TV應用中顯示的內容應該和任何其它應用一樣,如果應用中沒有頻繁給用戶新的令人興奮的內容,用戶會感到無聊。例如,用戶在打開媒體內容應用時,應該加載最新的內容,而不是顯示以前看過的內容。

和移動應用程序一樣,我們應該在應用中支持分頁。當達到最後一個顯示的內容時,應該允許用戶繼續消費內容。

8. 背景

設計師應該盡可能合理利用大屏幕,可以通過在應用中展示美麗的、具有視覺沖擊的背景來實現。雖然可以使用Leanback Library中的BackgroundManager類輕松實現,但還可以展示內容數據來更改安卓TV系統的背景。

當用戶瀏覽主頁內容卡切換到焦點狀態時,背景圖也將作為系統背景來顯示。通過將圖像源附加到內容卡上顯示的數據對象可以輕松實現。如果可能,卡片上顯示的不同的縮略圖像應該應用於背景——在瀏覽內容時,會帶來令人滿意的視覺差異。

雖然背景圖片的尺寸應為1920×1080 px,但實際上必須要使用大5%的尺寸來照顧到動畫事件,所以,背景圖片的尺寸應該是2016×1134 px。如果背景圖片不符合這個要求,系統將自動縮放背景圖片。

註意:背景圖片應該是沒有透明度的。

9. 推薦

應用中最新和相關的內容應該放在主屏幕的推薦欄中。這有助於減少用戶完成打開電視到使用內容所需的步驟數量。

推薦應該基於應用中獲得的用戶數據。例如,用戶之前觀看過的內容。推薦項目將在安卓TV主屏幕的第一行顯示。

推薦的內容可以是回到用戶之前觀看的內容,或推薦他們新的或相關的內容。這裏有幾種可以推薦給用戶內容的類型,詳細內容如下:

  • 延續內容:推薦用戶繼續觀看或收聽他們之前消費的內容,甚至是移動到合輯或系列中的一個內容。這也是允許用戶以最小的阻力得到他們想要的內容。
  • 新內容:當用戶已經收看或收聽過的內容有了更新時,會使用這種卡片。例如,應用知道用戶觀看一個特定的節目,它之後會給我推薦節目的新內容。
  • 相關內容:這種卡片可以推薦給用戶適合的新內容。如果得知用戶觀看過某個節目或音樂類型的主題,那麽可以推薦給他們也可能喜歡的內容。

推薦不同類型的內容,在應用中展示的方法:

  • 刷新:當刷新已經出現在屏幕上的推薦內容時,請勿重復加載之前顯示過的推薦內容。已經打開過和播放過的任何內容都不應該出現在刷新後的推薦列表中,刷新後的內容應該全新的。
  • 自定義:可以以不同方式定制我們的推薦卡,這樣,可以在卡片上體現風格和品牌。雖然卡片的屬性允許使用提供間斷的標題和副標題,我們應該使用卡片的圖像將該項目描述給用戶——圖像足以起到教育用戶的作用。
  • 分組:可以根據推薦內容的來源進行分組,例如對新內容進行分組,對已訂閱的內容進行分組。這些推薦可以通過標簽輕松分組,例如“熱門”、“最新”、和“相關”等等。這樣,就可以輕松將推薦的內容分成可識別的類別。

雖然可以將推薦分配權重來決定其顯示順序,但是每個分組都會相互排序,來確保主要的推薦不會被錯誤排序。

10. 圖標

圖標不僅可以使應用更美觀、有趣,它還可以向用戶描繪文本信息。正如之前說提出的,應該通過視覺的手段來展現TV的文本內容。

  • 使用單一顏色的標題圖標可以使界面保持簡潔,並且在導航過程中不會太分心。顯然,這取決於正確使用應用中導航背景顏色和圖標。
  • 這些圖標都很簡單,沒有復雜的形狀。
  • 圖標應該和顯示的內容相關,它應該是現實內容的補充,但不需要很復雜。

11. 音頻

我們可以在TV應用中使用聲音來增強電影體驗。聲音如果被正確使用,可以是一種補充視覺效果的偉大方式,甚至可以不需要使用文本通知。使用聲音很容易把效果弄得過於誇張,所以設計恰到好處的聲音是非常重要的。

聲音是在屏幕上顯示視覺通知的絕佳代替選擇。這樣可以不打斷屏幕中目前的內容,在電視屏幕上顯示是系統組件(如toast和彈出框)看起來並不是好。用戶試圖與禁用組件進行交互,或到達列表的尾部時,播放聲音可以很好的表達錯誤情況的發生。

當用戶只是部分使用電視應用時,可以以聲音的形式得到通知反饋。如果用戶正在和朋友聊天,或者用戶閱讀時以電視播放背景音樂,也可以讓他們知道發生了什麽。

12. 排版

首先,為應用設計界面時,應該確保所有界面都有橫屏模式。同時,也應該確保基於焦點的導航創建易於瀏覽的布局。可以使用行,列表,網格,使用X軸和Y軸來布局內容。

電視與手機和平板有完全不同的體驗,所以以往移動設備的布局可能不使用於電視應用。應該避免的是:

  • 工具欄和動作欄不適用於電視接口的組件。一些條欄(如溢出菜單)很難在電視上導航,所以也是不適合電視應用。
  • 有觸摸交互的組件(如ViewPagers,ScrollViews)不適用於電視接口,應該避免使用。
  • 我們創建的任何布局都應該填充整個屏幕。在設計電視應用的界面時,應該避免在透明活動下顯示之前的視圖。

13. OVERSCAN

所謂Overscan區域,就是電視機屏幕四周某些不可見的區域,這是電視機的特性。顯示內容並不能總是在“安全區域”中顯示,而不被遮蔽。我們需要確保考慮在Overscan區域,沒有任何文字或組件被電視屏幕邊緣遮蔽。

我們可以通過添加大小為屏幕尺寸5%的邊距來避免內容被Overscan區域遮擋。1920×1080的屏幕將具有27px的垂直邊距和48px的水平邊距。

14. 顏色

與移動設備的渲染相比,電視屏幕渲染可能是非常不精準的。可能是由於電視的設置,濾色和任何濾波可能發生,這些都可能導致色相或亮度差異在屏幕上無法區分或誇張。為了避免嚴重的顏色問題,我們可以采取以下方法:

  • 在屏幕上避免留有大片純白色的空白區域,這種顏色會顯得過分明亮,並且在巨大屏幕上視覺效果不好。同樣也適用於高飽和度顏色填充屏幕的大部分區域。
  • 應該避免使用非常暗的顏色,因為對比度的設置可能會導致用戶無法識別。
  • 理性選擇顏色。推薦用暗色做為主色調加上重點色合理搭配來創建一組令人愉悅的配色,在屏幕上顯示。

15. 字體

盡管上面提到,在設計電視應用時,文字內容應該保持在最低限度,但這並不意味著我們完全不使用任何文本。在使用文字的情況下,我們可以依照一些準則來確保電視屏幕中的文字在一定距離可以被讀取和導航。下面是電視應用中用於排版的一些字體及大小的推薦:

註意:由於安卓TV應用會在各種各樣的制造商設備上運行,電視屏幕都具有不同的對比度、銳度和色彩。我們應該避免使用過細的字體和字重,這會使用戶難以閱讀。

16. 文字

如前所述,電視應用中的文字應該保持在最低限度。大多數用戶是遠距離閱讀文本,這會導致閱讀變得非常困難,所以不要期待用戶會在看電視的時候閱讀大段的文字。但是,當我們確實需要使用文本的時候,我們需要註意以下幾點:

  • 文本應該分成小部分,以便文本可以輕松瀏覽。盡可能使用圖像來幫助這種行為。
  • 仔細選擇文字顏色和背景顏色。在暗色背景上的淺色文字比淺色背景上的暗色文字更容易閱讀。
  • 無襯線字體可以幫助提高文本在電視屏幕上的可讀性——應避免使用很細的字重,和或窄或寬筆畫的字體,因為他們可能會對可讀性產生負面影響。

「如何為電視界面做設計?」

  1. 《未來新趨勢!為電視做UI設計系列教程之基礎組成部分》
  2. 《未來新趨勢!為電視做UI設計系列教程之實戰經驗總結》
  3. 《掌握新趨勢!為Apple TV進行UI設計需要了解哪些基本規則》

原文地址: zhihu

【優設網 原創文章 投稿郵箱:[email protected]

================ 明星欄目推薦 ================

優優教程網: UiiiUiii.com 是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的 知識樹專欄 。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手並制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備:http://hao.uisdc.com


Tags: 用戶 保持 導航 按鈕 減少 操作

文章來源:


ads
ads

相關文章
ads

相關文章

ad