Web UI設計規範

畫布建立尺寸寬度：1920px

分辨率：72像素/英寸

顏色：RGB

網頁內容安全寬度：≤1200px

首屏內容建議高度：800px

網頁柵格系統（Grid system）

App UI設計規範（iOS）

屏幕尺寸表：iOS各設備尺寸

字體：系統默認中文字體：蘋方

UI官方組件

狀態欄 Status Bar

搜索欄 Search Bar

標籤欄 Tab Bar

列表視圖 Table Vie

App UI設計規範（Android）

APP ICON尺寸

UI官方組件

Watch UI設計規範

各設備尺寸

智能電視UI設計規範

設計尺寸：

安全範圍

色彩

與電腦顯示器相比，電視屏幕有更高的對比度和飽和度。考慮到這點，在使用純色的時候要考慮一下準則：

1、謹慎地使用純白色（#FFFFFF）。純白色在電視屏幕上會引起振動或圖像重影。用#F1F1F1(hex)或者240/240/240(RGB)來代替使用純白色。

2、避免使用明亮的白色系，紅色系和橙色系，因爲這些顏色在電視上顯示會特別嚴重的失真。

3、瞭解不同的電視顯示模式，包括標準、銳利、電影/劇場，遊戲等等。確保你的應用能適應這些全部的電視模式。

4、避免使用大面積的色彩漸變，因爲它們可能會導致色帶。

5、如果可能，在低質量的顯示器上測試你的應用程序。這些設備可能有較差的伽馬值和顏色設置。

文本

對電視來說，避免纖細字體或者有過寬、過窄筆畫的字體。使用簡單無襯線字體並選用抗鋸齒功能來增加易讀性。目前，Google TV只支持Droid Serif 字體族，但是你可以使用嵌入字體來創建一個更個性化的外觀。然而，牢記嵌入字體會拖慢系統運行。

1、以下是一些提高文本易讀性的方法：

2、每個段落限制90個單詞。

3、將長句改爲幾個短句，讓用戶可以快速瀏覽。

4、在每行保持5-7個單詞，不要少於3個單詞，也不要多於12個單詞。

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

6、使用Android的標準字體尺寸。例如，標準的小字體字號爲14sp，在1080p的屏幕上，這相當於28點的字號。

7、爲屏幕文本設置比印刷文本更大的行間距。

視覺焦點

應用程序的通行狀態包括上下文、選擇和焦點。上下文通常是一套分類，而選擇是用戶已經選中的分類。焦點是在光標下的控件或元素。這些控件或元素都應該有與衆不同的高亮狀態，而且高亮的機制在整個應用程序中應該保持一致。

舉個例子，如果是一個都是影片的屏幕上，應用程序提供一行顯示不同類別的上下文標籤。例如“全部電影”、“最新發行”、“流行”、“編輯推薦”等等。如果用戶選擇了其中的一個標籤，“選中”狀態應該在視覺上與正在變動的“聚焦”狀態不同，以此來指出當前屏幕導航所在的位置。

Powered by Froala Editor