快捷搜索:  汽车  科技

智慧屏场景面板(原来智慧屏项目设计是这样做的)

智慧屏场景面板(原来智慧屏项目设计是这样做的)不管是从软件系统,还是内置apk应用,色彩基本都是偏向于使用暗色系,背景色和海报封面色彩的应用都相对比较平衡,视觉呈现效果都不会那么辣眼睛,目前市面上就智慧屏幕这块领域,比较全的开源设计系统可供参考的是华为的鸿蒙设计系统。智慧屏的对比度和饱和度非常高,所以使用纯色的时候需要考虑一下相关色彩准则。设计稿尺寸一般常用1080p作为基准设计尺寸:1920*1080px(基于电视机长宽比16:9),这样可以向上或下适配都比较方便,会更利于设计的发挥。由于智慧屏“过扫描”的特性,厂商必须在正常屏幕尺寸的外侧预留出空白边,保证设计内容能够被电路寻址,所以在做系统设计时候会在左右预留10%的安全边距,上下可以自定义设置边距,可根据设计内容来定义,只要是在视觉布局合理范围之内即可,如下图。实际工作项目:苏宁智慧屏Biuos 4.0系统设计时左右留白尺寸为114px,上留白120px,项目中所给的数值因为是

编辑导语:随着AI和5G的发展,两者的融合会辐射到更多的智能硬件上。智慧屏的应用变得广泛,你知道智慧屏是怎么设计的吗?作者总结了一份详细的介绍,希望对你有所帮助。

智慧屏场景面板(原来智慧屏项目设计是这样做的)(1)

加入苏宁智能终端智慧屏(TV)项目团队已经快一年多了,在智慧屏领域学习并收获了很多,所以想写点复盘,给自己的工作做下总结,同时也希望给已经或将从事于智能屏(TV端)设计的小伙伴提供一些帮助。

随着AI和5G的快速发展,两者的相互融合会辐射到更多的智慧硬件上,未来体验也不会仅仅局限于智能手机,Alot会有无限的可能,智慧屏幕设计也将会迎来新的契机,用户会根据具体的场景来发挥智智慧屏的更大的价值。

一、智慧屏-设计尺寸

智慧屏显示分辨率有720p、1080p、2K、4K,智慧屏的设计尺寸选择相对于手机的设计尺寸更简单,因为手机机型比较多,不光需要区分安卓和iOS系统,安卓系统里面还要区分不同的手机品牌。

设计稿尺寸一般常用1080p作为基准设计尺寸:1920*1080px(基于电视机长宽比16:9),这样可以向上或下适配都比较方便,会更利于设计的发挥。

二、智慧屏-安全边距

由于智慧屏“过扫描”的特性,厂商必须在正常屏幕尺寸的外侧预留出空白边,保证设计内容能够被电路寻址,所以在做系统设计时候会在左右预留10%的安全边距,上下可以自定义设置边距,可根据设计内容来定义,只要是在视觉布局合理范围之内即可,如下图。

智慧屏场景面板(原来智慧屏项目设计是这样做的)(2)

实际工作项目:苏宁智慧屏Biuos 4.0系统设计时左右留白尺寸为114px,上留白120px,项目中所给的数值因为是基于删格系统最小单位6px去设置,所以在预留的边距数值也可以根据具体设计需要去做改变。

三、智慧屏-设计色彩

智慧屏的对比度和饱和度非常高,所以使用纯色的时候需要考虑一下相关色彩准则。

  • 纯白色(#FFFFFF)会造成智慧屏各种显示问题,可使用浅白色(参考华为智慧屏前景色1#F1F3F5)代替纯白色。
  • 避免大面积的使用色彩渐变导致智慧屏出现色带。
  • 避免使用明亮色系(如白色系、红色系、橙色系),因为这些颜色的使用会让显示失真,同时增加用户的体验负担,影响观感,暗色系的色彩使用更能够突出智慧屏设计的高级感和质感。
  • 智慧屏系统示例:如华为HarmonyOS系统和小米MiUi TV系统。
  • apk应用示例:如优酷-酷喵和腾讯云试听极光。

不管是从软件系统,还是内置apk应用,色彩基本都是偏向于使用暗色系,背景色和海报封面色彩的应用都相对比较平衡,视觉呈现效果都不会那么辣眼睛,目前市面上就智慧屏幕这块领域,比较全的开源设计系统可供参考的是华为的鸿蒙设计系统。

智慧屏场景面板(原来智慧屏项目设计是这样做的)(3)

智慧屏场景面板(原来智慧屏项目设计是这样做的)(4)

四、智慧屏-架构设计

智慧屏系统市面上主流有且仅有两种:华为HarmonyOS系统和谷歌Android(市面上很多电视机品牌基本都是基于安卓系统开发的智慧屏系统,如小米、创维、pptv、海信等)

华为HarmonyOS系统的架构设计分为系统架构和应用架构,这点需要夸下华为的设计,模块化的架构设计,让应用功能模块区分更简单,每个模块对应专门的应用场景,体验感很强 富有创造力,毕竟是获得过红点设计大奖(“智慧屏鸿蒙UI系统”)

1. 华为HarmonyOS系统架构

主要由屏保,桌面(控制中心&通知栏,负一屏)最近任务三大部分组成,桌面主要包括顶部信号栏,中间视觉区域、底部应用功能入口。

  1. 顶部信号栏:搜索、设置、个人中心按钮,时间信息。
  2. 中部运营内容:这部分内容是基本由运营来配置。
  3. 底部应用:用户可以自定义设置排序,能显示多个,遥控器控制左右滑动查看应用桌面。

智慧屏场景面板(原来智慧屏项目设计是这样做的)(5)

猜您喜欢: