新闻资讯

新闻资讯 行业动态

(Web/App/Watch/TV)最新UI设计规范

编辑:011     时间:2020-02-17

Web UI设计规范

画布建立尺寸宽度:1920px

分辨率:72像素/英寸

颜色:RGB



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

首屏内容建议高度:800px



网页栅格系统(Grid system)



App UI设计规范(iOS)


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


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




UI官方组件

状态栏 Status Bar




导航栏 Navigation Bar



搜索栏 Search Bar


标签栏 Tab Bar


列表视图 Table Vie


App UI设计规范(Android)


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


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


视觉焦点

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

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



郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

回复列表

相关推荐