恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
大屏电视UI视觉规范
0.0°
2020-05-20 原创文章 经验/观点 举报 3165 21 6 1

智能电视端的设计对我来说也算是一个新领域,从去年开始做智能电视app到现在后期的运营,从中也积攒了一些经验。以下就自己的项目经验和学习对智能电视UI做一个总结。

一、智能电视特性


二、智能电视UI设计准则


1. 使用手机作为UI模型。

虽然电视的尺寸大于电脑尺寸,但实际上观众坐在电视前比坐在电脑显示屏前要远。观众感受到的是,电视屏幕尺寸比电脑显示器要小。所以我们在设计UI时,可以使用手机作为 “模型”来模拟这种体验。


2. 在页面上的元素之间应该留出更多的空白空间,避免屏幕上杂乱的外观。

要做到这一点,需要综合使用更大的外边距和内边距。这对“触屏”UI也同样是一个好建议。


3. 电视总是横屏的。

在电视上,水平方向的可用空间比垂直方向上的可用空间要多。将屏幕上的导航控件水平放置,为内容部分节省下垂直空间。


三、智能电视分辨率




智能电视的分辨率与移动端app看电影时的显示差不多,如上图所示,目前常见的是1080P。

设计稿一般用1920x1080的尺寸就可以了,开发会对小的电视屏幕进行适配。



跟移动端app一样,屏幕上下左右都应留出适当的间距以保证用户舒服的一个观看使用体验,电视UI界面理论上来讲是应该留出一个10%左右的空白边。我设计的是上下52px,左右94px,但这个数据不是绝对的,可根据实际内容调整,只要视觉舒服就可以了。


举个例子,桌面app精选页要比普通的电影、电视剧分类页面的上下左右间距大一些,因为视频app的素材内容基本是按照16:9的比例设计的,而桌面的精选页素材更灵活些,它可能会承载一些宣传性质的推广素材,所以具体尺寸可根据实际内容来制定


视频app


小米桌面


四、色彩


与电脑显示器相比,电视屏幕拥有更高的对比度和饱和度,所以在调整颜色的时候有以下几点规范:


1、谨慎地使用纯白色(#FFFFFF)。纯白色在电视屏幕上会引起振动或图像重影。用#F1F1F1(hex)或者240/240/240(RGB)来代替使用纯白色。

2、避免使用明亮的白色系,红色系和橙色系,因为这些颜色在电视上显示会特别严重的失真。

3、了解不同的电视显示模式,包括标准、锐利、电影/剧场,游戏等等。确保你的应用能适应这些全部的电视模式。

4、避免使用大面积的色彩渐变,因为它们可能会导致色带。

5、如果可能,在低质量的显示器上测试应用程序。这些设备可能有较差的伽马值和颜色设置。


五、字体



1、字体大小无绝对值,可根据实际情况对应调整。

2、字体粗细,一般大标题可以用粗一点的字体,但应避免过粗和过细的情况。

3、段落间距尽可能大一些,避免屏幕上出现杂乱的外观。


六、焦点


我们在设置焦点时应让焦点部分高亮放大显示,例如:


焦点线框形式,这种形式适合一行多列的海报之间切换,海报厚重用线框提亮且放大即能突出焦点又不会显的沉闷。焦点线框粗细一般在3-5px



焦点面框形式,背景单色或线框的部分可采用这种高亮的渐变色突出焦点,文字标签部分应给出一定的宽高空间。




七、鲨鱼视频海报尺寸(间距自适应)



Powered by Froala Editor

更新:2020-05-20

收藏

21人已收藏

xiaonan_1989

用心做设计,站在用户角度思考问题

  • 8

    作品

  • 3

    粉丝

  • 11

    关注

  • 运营h5
  • 小摩托加速器
  • 智能闪烁照度计app设计
  • 萌宠屋社交app
相关标签
经验ui

    猜你喜欢

      2020-05-20 原创文章 经验/观点 举报 3165 21 6 1

      大屏电视UI视觉规范

      0.0°

      你确定要举报大屏电视UI视觉规范

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年05月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      21
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录