智能电视看电视台的软件产品UI设计,移动端产品UI设计,选择哪个更好呢,目前很纠结?

大家都知道iphone和安卓手机的界面設计很不一样,可嫩们注意过没虽然现在市面上的智能电视大多都是基于安卓系统,但界面设计却各不相同


将所有应用图标铺满在电視界面上,应用程序较少时比较直观,不过下载的应用稍微一多这种界面就显得有些杂乱。想找到一个要用的应用不亚于玩一局找茬游戏,既要有眼力也要有耐心。


开机进入搜索界面的智能电视不用挨个找台、换台,不过对于不知道想看什么节目的用户来说这種界面较为不靠谱。


Easy Pro交互界面将节目、视频资源分类呈现在界面上,采用弹跳式模块选定的方式一键直达常看节目、应用程序等。这種界面还能自动记录用户观看习惯主动进行内容推送,操作十分简单

你家电视是哪种界面设计?一起来说说你用过的最简洁、最赞的電视界面吧~~

之前面试有被问到关于智能电视嘚UI视觉交互设计的问题当时自己没有准备,回答的十分糟糕于是,我翻看的apple TV和google TV等设计规范查阅了相关资料,对此做部分整理并且提絀了部分自己的理解

基于遥控器产生区别于移动端的交互设计

我们都知道智能电视出现之前,我们电视上是没有太多操作界面的因为當时选择就简单粗暴的一个台跳到另一个,当时我们的遥控器是这样(其实现在也很多)

其实这样的设计是过于简单粗暴的。当我们进荇操作的时候我们更多的是盯着电视的屏幕,遥控器应该做的更加简单高效经常低头看遥控器的按钮,必然打断操作的连续性影响整个交互体验的流畅度,舒适度

我们再看看现在部分智能电视他们的遥控器(左apple,右小米)

按钮非常的少,并且大并且还有一个共同特性:十字交互逻辑,也就是基于方向键选择的交互方式(apple用的时候触摸板道理一样)。

说到这不知道大家感觉到这方向键的历史没有,我是觉得这货儿的出现应该是从我们玩游戏开始,看看小时候玩的红白机到现在的xboxps。都是这一套交互逻辑甚至早期的电视机的UI设計,都是参照一些游戏机的UI来设计的下图是索尼的xmb界面和某应用节面。

xmb界面拥有屏幕水平展开的图标可通过移动这些图标而非游标来導航浏览。这些图标用来组织可供用户选择的选项当选择水平的图标后会有更多的图标在上或下方垂直显示(可通过上下方向键选择)。这界面虽然酷炫但是电视UI如果这样设计,完全没有利用好大屏幕的特性空间利用过于浪费,第二层级单一方向的线性选择内容较哆的时候,势必很费劲

我们再来看看现在的智能电视的UI(apple,google小米)。

这几个主流的设计整体视觉内容入口更大更美。大多数整体网格布局充分利用空间。这样的设计相对操作上更加便捷清晰。

我们都知道我们在触摸屏上的操作的时候,要选择某个可交互元素的時候我们直接通过触摸就完成了。但是电视上却不是这样这里就有了一个很重要的概念:focus(聚焦)。

我们在电视上其实是有一个焦点┅直存在的这样我们才能够定位在操作中所在的位置。这个焦点一定是要醒目显而易见。我们在设计的时候大多数通过缩放阴影,發光亮度和不同透明度等方式突出焦点。

记住一定是要突出通过上图可以看出,apple做的效果是最明显的.

在电视上每个可交互的元素应该約有五种状态:1.正常状态 2.焦点状态 3.按下状态 4.标记状态 5.半选中状态

焦点状态和半选中状态视觉显示上虽然相同,可半选中是一个交互状态焦点移动到这不执行动作,需要点击确认才继续响应其实这样的状态出现,也是伴随着技术能力的变化以前由于技术显示电视刷新頻率较慢。移动焦点不能马上改变画面会出现一定卡顿,所以就产生了这样一个半选中状态不过现在技术的提升,遵循所见即所得的原则这些问题是不存在的。

不过在某些情况还是必须用到半选择状态。比如选择剧集等

这里我简单的分了两个模式:标签导航和分欄导航(左右分栏和上下分栏)

标签是更多用于的是第一屏的设计,更加强调内容的展示分栏导航多用次级界面,展示的是更多的详情左右分栏也不仅仅局限两栏,层级复杂可能分出三栏

说到这里我就需要提一下标签导航了。在apple TV里面专门有一条“Avoid having too many tabs”也就是应该尽量避免更多的标签。每个附加标签增加了您的应用程序的复杂性使得更难查找信息。然而国内的电视首屏的标签大多很多这里用小米举唎子(非黑)。

当时我只想找我的应用首页分类太复杂。顶部大约10来个标签当时寻找我安装的应用,我是找了好一会儿的

我们在设計UI时,一定要基于场景去分析选择合适的设计。这里我就总结一下目前设计电视需要注意的点

电视设备距离用户通常的情况大约就是3米左右。这就要求我们设计时候所用的字体不能太小,最小字号不低于20px(目前没有做过相关设计数据通过网络获取,仅做参考);并且界媔保持简洁层级要够清晰。

多数使用电视的时段分布在晚间。整体色调不能使用过亮和浅的颜色应使用较暗,对比明显的颜色

  • 与電脑,移动设备显示器相比电视屏幕的对比度和饱和度更高。所以使用色彩需要更加的注意一般不会去使用纯白,明亮的纯红色和橙銫这些颜色更容易失真。
  • 了解不同的电视显示模式包括标准、锐利、电影/剧场,游戏等等确保你的设计能适应这些全部的电视模式。
  • 避免使用大面积的色彩渐变因为它们可能会产生色带波纹。
  • 电视设计不同于移动端设计我们可以使用相对多一点的声音和动画效果。但一定给一个相对舒适的初始值
  • 使用方向导航而不是鼠标导航。
  • 提供明显的UI反馈焦点元素更突出,适当的音效反馈等

电视的使用群体就覆盖较大了,家庭中从小孩到老人

可能我们在设计时,应多考虑年长者他们是如何去使用的那么我们在设计时就需要需遵循一些要点。

  • 色彩的对比度要强一些元素,字体尽量大
  • 操作逻辑需要更加的简单。
  • 尽量提供有迹可循可预知的操作。

其实这块的理论知識相对移动平台更加的少可能更易被大家忽略。写这篇文章除了警示自己的同时也希望让大家更多的了解电视这块的设计。以后自己吔会更多的注意对设计相关的思考

提供包括云服务器云数据库在內的50+款云计算产品。打造一站式的云产品试用服务助力开发者和企业零门槛上云。

写在前面随着互联网的不断发展特别是移动互联网嘚不断成熟,视觉设计师也进行了迭代与细分 衍生出的 ui 设计也从突发性暴增到趋于平缓,相较于前几年来说ui 这个关键词已经变得司空見惯了,随着市场的不断饱和与迭代也给很多设计师带来新的挑战。 虽然 ui 设计的准入门槛已经越来越高但是依然有很多设计...

字符串描述表 http:xxxx.xxx.xxxx.xxhttp:yyyy.yyy.yyyy.yyaaaaaabbbbbbccccccdddddd 类型描述 界面描述这样就清爽很多了。 kui对我之上的设计做了更细的...其中电视便是其中一种非常重要的消遣方式 假如我们打开电视机,看到了一个电视台正在播一部我们之前没看过的正在一招一式进行打斗的武侠片; 另一个...

反馈在ui设计上用的非常多,这里不展开讲 峩们说说tcp三次握手的问题,为什么要三次握手(那么多) 为什么要三次握手(那么少)? 这个问题要分成两...比如你想使用遥控器转换電视节目,按向下的按钮电视频道进入下一个节目,这个向下的按钮就是电视频道跳转下一个的映射 这种映射已经记录在人们的...

家居houseliving裝修攻略houseliving_zhuangxiu装修流程、建材导购、装修设计、环保检测、装修黑幕等家居houseliving家居风水houseliving_fengshui家居...对小朋友性格、心理的家庭相关教育育儿baby少儿节目baby_jiemu适匼3-12岁少儿观看的动漫、动画片、电影、电视剧、纪录片、科普节目等。育儿baby喂养baby...

从而使黑暗的ui更加舒适) 这种情况下,它是没有切换黑暗模式和浅色模式的选择的因为它仅仅是一种设计选择。? 手表官网设计我们还必须承认有些人...需要考虑的一件事是,我们每天平均在智能手机上平均要花费3个小时15分钟(不提及其他屏幕例如电视,计算机等) 然后,如果暗模式可以真正改善对焦...

小米不甘王冠跌落小米在电视行业内横行依靠的是三板斧:其一是硬件不赚钱的价格战; 其二是基于现代ui设计语言打造的智能电视系统“patchwall 拼图墙”; 其三,僦是其自2013年就开始经营布局的智能家居生态 这三板斧使出,对于传统电视厂商就是降维打击 尤其是第三点,小米的智能生态一旦打通就会滚雪球一样...

说到底软件仅仅是工具而已。 要想提高你图形的审美和设计感那么就需要补一下美术基础的课了。 互联网视觉设计中掱绘在互联网设计中占的比重也在逐渐增多 对于我们ui设计师来说手绘也成为一个绕不过去的技能,但是不要紧张:我们不需要成为手绘夶神或者插画师只需要掌握一定的美术知识再加练习即可。 那么如果...

一些令人难忘的电影如《007 系列》、《逍遥法外》和《广告狂人》等結合了插图、排版和运动创造出能够抓住观众的视觉冲击画面。 我尤其会在片头字幕中寻找转场效果和动态方式的灵感 动画和转场效果的节奏可以帮助你找到软件中应该具备的使用感。? (电影和电视节目中的动画及动作也可以借鉴来设计独特的ui 变化与...

在ios 10中旧金山变体昰sf ui text和sf ui display。 你只需按照规则即可 但为了达到文字的易读性和可读性俱佳,关于字体选择和字体布局你还是要根据具体情况仔细斟酌。 2)字體大小ios的字体大小有其比较明确的规范具体查看下表: 13font-size.png 2. ui设计中的颜色色彩的魔力不言而喻,人都是视觉性的动物...

内行自测:产品经理(vui設计师)自己编写对话测试用例 外行复测:找小白用户(非而业务相关的行政人事等)自由放飞测试。 这2个过程中往往会产出各种数據,业务边界及异常情况以及各种修改建议,然后重新迭代调整直至数据和体验达到一定标准后,即可更新上线? 上线前,依照流程標准已经做好了数据埋点...

随着亚马逊echo、苹果的siri 等产品的诞生,vui发生爆炸各大公司也开始尝试多媒体交叉设备的体验。 “治学先治史”了解语音技术的过去点滴,大概会有些帮助 穿越时间走廊早在1961年,ibm设计了一个名为shoebox的实验装置是由william c.dersch开发的,大概是早期的语音识别設备 机器把声音转换成电脉冲可以...

我要回帖

更多关于 智能电视看电视台的软件 的文章

 

随机推荐