Web UI设计规范

画布建立尺寸宽度：1920px

分辨率：72像素/英寸

颜色：RGB

网页内容安全宽度：≤1200px

首屏内容建议高度：800px

网页栅格系统（Grid system）

App UI设计规范（iOS）

屏幕尺寸表：iOS各设备尺寸

字体：系统默认中文字体：苹方

APP ICON尺寸

UI官方组件

状态栏 Status Bar

导航栏 Navigation Bar

搜索栏 Search Bar

标签栏 Tab Bar

列表视图 Table Vie

App UI设计规范（Android）

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