UI设计规范大全

Web UI设计规范

画布建立尺寸宽度:1920px

分辨率:72像素/英寸

颜色:RGB

QQ截图20171207131424.png

网页内容安全宽度:1200px

首屏内容建议高度:800px

1243.jpg


网页栅格系统

1512625193745481.jpg1512625309408478.jpg

55.jpg


App UI设计规范(iOS)

屏幕尺寸表:

iOS各设备尺寸

blob.png


系统默认中文字体:苹方

字体下载连接:苹方字体点击下载


APP ICON尺寸


UI官方组件

点击下载iOS 11官方UI组件库

状态栏 Status Bar

1234.jpg

导航栏 Navigation Bar

54.jpg

搜索栏 Search Bar

235.jpg

标签栏 Tab Bar

列表视图 Table View


App UI设计规范(Android)

Android各设备尺寸:

blob.png


系统默认中文字体:思源黑体

字体下载连接:思源黑体点击下载


APP ICON尺寸

blob.png


UI官方组件


Watch UI设计规范

各设备尺寸

blob.png


智能电视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、为屏幕文本设置比印刷文本更大的行间距。


视觉焦点

应用程序的通行状态包括上下文、选择和焦点。上下文通常是一套分类,而选择是用户已经选中的分类。焦点是在光标下的控件或元素。这些控件或元素都应该有与众不同的高亮状态,而且高亮的机制在整个应用程序中应该保持一致。

举个例子,如果是一个都是影片的屏幕上,应用程序提供一行显示不同类别的上下文标签。例如“全部电影”、“最新发行”、“流行”、“编辑推荐”等等。如果用户选择了其中的一个标签,“选中”状态应该在视觉上与正在变动的“聚焦”状态不同,以此来指出当前屏幕导航所在的位置。