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

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

Web UI设计规范

画布建立尺寸宽度:1920px

分辨率:72像素/英寸

颜色:RGB

blankblank

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

首屏内容建议高度:800px

blankblank

网页栅格系统(Grid system)

blankblank

App UI设计规范(iOS)

屏幕尺寸表:

iOS各设备尺寸

blankblank
blankblank
blankblank

系统默认中文字体:苹方

字体下载连接:

blankblank

其他字体

blankblank

APP ICON尺寸

blankblank

UI官方组件

状态栏 Status Bar

blankblank

导航栏 Navigation Bar

blankblank

搜索栏 Search Bar

blankblank

标签栏 Tab Bar

blankblank

列表视图 Table View

blankblank

App UI设计规范(Android)

Android各设备尺寸:

blankblank
blankblank

系统默认中文字体:思源黑体
字体下载连接:

blankblank

APP ICON尺寸

blankblank

UI官方组件

blankblank

Watch UI设计规范

各设备尺寸

blankblank

智能电视UI设计规范

设计尺寸:

blankblank

内容安全范围

blankblank

色彩
与电脑显示器相比,电视屏幕有更高的对比度和饱和度。考虑到这点,在使用纯色的时候要考虑一下准则:
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、为屏幕文本设置比印刷文本更大的行间距。

视觉焦点
应用程序的通行状态包括上下文、选择和焦点。上下文通常是一套分类,而选择是用户已经选中的分类。焦点是在光标下的控件或元素。这些控件或元素都应该有与众不同的高亮状态,而且高亮的机制在整个应用程序中应该保持一致。
举个例子,如果是一个都是影片的屏幕上,应用程序提供一行显示不同类别的上下文标签。例如“全部电影”、“最新发行”、“流行”、“编辑推荐”等等。如果用户选择了其中的一个标签,“选中”状态应该在视觉上与正在变动的“聚焦”状态不同,以此来指出当前屏幕导航所在的位置。

blankblank
blankblank
blankblank

更多设计学习交流加微信:djnan9124

What do you think?

Written by marketer

blank

请多关照!15个来自日本最优秀的网页设计 | 分享

blank

2019年网页设计趋势前瞻,先睹为快!