当前位置:黄页网 > 行业资讯 > 聚焦

小米电视ui 我总结了这份智能电视UI设计基本原则

日期:2019-11-07    编辑:聚焦编辑小组    来源:黄页网
之前一直在做移动端的 UI 设计,在进入小米后,开始接触电视端的 UI 设计,目前在负责小米电视商城。经过一个电视端项目后,自己做了一些关于电视 UI 的总结以及设计方法原则。

之前一直在做移动端的 UI 设计,在进入小米后,开始接触电视端的 UI 设计,目前在负责小米电视商城。经过一个电视端项目后,自己做了一些关于电视 UI 的总结以及设计方法原则。

电视 UI 算得上是一个偏冷门的界面设计,因为它的交互比较特殊,同时有一些限制,比如交互限制,焦点原则等等。以下就自己的项目经验为电视 UI 设计原则做一个总结。

智能电视的特性

对于现在家庭智能电视而言,技术在不断的进步,但是其饱和度和对比度有的还是很强,还会遇到大红碰到大紫的色块对比。但是信息变得简约了,都是以 tab 导航为主,下面是几个卡片信息瀑布流显示。语音提示很重要,会随着焦点的移动发出提示声响,提示用户电视焦点的移动状态。

小米电视商城全新改版,在接到需求后,一定要模拟用户来体验一下购物流程还有用电视购物的环境,环境应该是固定的,那就是在家里。电视和手机购物体验是不一样的,电视是要用遥控器来控制,所以每一步的操作流程都很珍贵,如果界面跳转太多,会给用户一种烦躁的感觉,所以尽量同一层级的信息要在同一界面填写完毕,避免二次跳转。

第二点说的就是焦点问题,焦点不能层次不齐,跳动太大会引起视觉不适。以小米电视商城详情为例,焦点尽量在同一水平线上,同行的焦点移动,视觉感受上会舒服很多。

设计尺寸

智能电视的分辨率和大家平常在 app 看电影的时候差不多,如上图所示,目前 1080p 最常见,2k 和 4k 基本都是资源类节目。设计尺寸以小米电视为例,通常做 1920*1080 的视觉稿就可以了,开发会适配比 1920*1080 小的电视屏幕,这样下来,如果小分辨率的电视没问题了,大的分辨率也就没问题了。

我们知道在设计 app 的时候,都有左右间距的控制,移动端一般常见的控制在 28px 或者 32px,电视端因为是大屏设计,所以预留的空间也要大一些,基本左右留出 120px,上面留出 90px 就可以了。一般我设计的时候左右是固定的 120px,上面可以随设计内容来自定义,90px 或者 100px,都是可以的,只要视觉舒服即可。

焦点在电视端 UI 设计里显得尤为重要,因为它就是你的视觉焦点,焦点会随着遥控器上下左右确认而改变。焦点的设计不能是扁平的,因为那样不能够提醒用户焦点状态的位置,焦点的设计应该是放大的、夸张的、可以带边框,也可以使用投影外发光的方式来设计,确保能够给用户足够的清晰位置。

焦点放大我这里建议放大 1.1 倍或者 1.2 倍就可以了,再大就显得过于大了。

交互设计

如上图所示,我在设计焦点的时候,就用了放大+外边框的形式,这样焦点移动起来可以让用户足够看到位置所在。电视端的交互也是很简单的,基本属于十字交互,即自上而下,从左到右的交互方式。红色剪头属于禁区,所有的电视交互,没有斜 45 度的交互,这样是错误的。

大家可以看到,在 app 里,常见的弹窗和浮窗可以压盖在可点击功能上,比如美团的红包,爱奇艺的一键关注,即使是这样,也不会影响功能的正常使用。但是电视端的设计,如果两个可点击功能压盖在一起,焦点是无法获取的,因为它没法判断你想要选的那个功能,所以在电视上,一定要将两个功能分开来布局最为合适。

露出屏外的内容,和移动端设计是一样的。如果有多个卡片内容,我们需要将露出屏外的那张卡片做一些边界化处理,控制好间距,也就是说我们要将一个完整的卡片漏出来一些,让用户知道,后面还有内容;反之,用户可能不知道后面还有内容,就不会按遥控器右键查看了。

电视端 UI 设计忌讳控件隐藏,比如上图,如果有很多文字的时候,左边的设计是错误的,因为隐藏了 button 按钮。改为右边的设计是比较好的,我们可以选择焦点选中文字给一个弹窗状态或者其它,将 button 功能位露出来,如果一个界面可选功能位较少,我们设计的时候尽量在第一屏展示。如果实在不行,可以选择吸底吸边来设计。

视觉设计

颜色的选择运用是重中之重,因为这个会直接影响到用户的视觉体验。因为用户环境大多数是晚上的时候回去看电视,分开灯和关灯的情况,开灯的情况其实还好。如果关灯,颜色太刺眼的话,饱和度较高的颜色会直接影响到眼睛,这个危害是很大的,而且不一样颜色的色块,会增加用户的视觉负担,这样就得不偿失了。所以我们要避免大面积的使用单一纯色或者渐变色。

电视 UI 设计中,白色谨慎使用。因为白色过多实在是太刺眼了,我们可以选中较为灰一些的接近白色的颜色来代替。

背景的运用这里也建议使用深色的背景,原因和上述讲的一样,还有一个就是深色背景可以更好地衬托出界面的主要内容。反之如果用浅色的背景,有的卡片如果需求方要求设计成浅色,那么这样浅色的背景+浅色的卡片叠在一起,主要内容就特别难区分了。

我们在设计电视端 UI 的时候,要真实的先去体验一下特殊的场景,电视端每个 tab 是一个频道,每个频道的设计风格也是不同的,比如少儿频道,购物频道和电影电视剧频道,设计风格肯定不同,体验模拟流程可以让我们更快地了解电视特性。

字体的选择默认思源黑体,因为这个字体是开源字体,可以免费使用,没有版权之分,以上列入的字体是小米电视商城改版的字号,具体的字体和间距可以根据自己的设计需求变化。

关于字体的选择,当然你也可以选用其它字体,或者一些特殊字体,好看的字体,但是这样的话,字体包应该会很大,会影响一些加载速度。

字体颜色的选择尽量用白色或者亮色,深色背景上选用白色是最好的,这样更易于阅读。

字体的粗细大小,这里标题建议加粗选择,其余选择常规字体就好,避免太粗或者太细的字体。

更好的智能家居体验

电视的设计只是其中的一部分,未来我们的电视可能比现在的体验更加好,比如会出现实景商城,单一的图片形式已经不能满足我们对购物的需求,一些视频类,动效类的体验会更加合适。想让电视拥有好的体验并不是一件简单的事情,想必大家已经从诸多「电视盒子」上体验到了这一点。我们曾经熟悉的电视已经发生改变,而我们适应的手机、平板和电脑和新的电视还有着巨大的差别,我们需要忘掉之前熟悉的模式,未来五年、十年、甚至更久。电视、电灯、冰箱洗衣机等智能家具的体验,正是我们设计师需要在未来几年所做的事情,这很重要。

小米电视商城全新改版是我接触的第一个电视端 UI 设计项目,第一期的优化还有很多不足,根据项目经验总结了上面的规范。以上的基本设计规范掌握后,那么做电视 UI 基本问题不大,大的错误肯定不会有了,但是每个公司的设计规范肯定也有所差别。电视端的设计是个偏冷门的 UI 设计,多掌握一些另类项目经验也是设计师必备的技能。

相关阅读
 小米 小米电视 电视 总结 这份 智能 智能电视 ui设计 设计 基本 基本原则 原则
  • 国产手机“血战”小米华为表现得尤为突出
  • 苹果推出原装充电外壳Smart Battery Case 售价848元
  • 2016年苹果可能发布iPhone 7
  • 陆毅自曝出道片酬50元 揭明星演员的片酬榜首是谁
  • 男士挑选西服简单法则出炉
  • 股票买入原则有哪些 股票买入五大有效原则
  • 基金投资入门:股票型基金投资技巧及原则
  • 股票调仓是什么意思?调仓换股遵循哪些原则
  • 金叉判断原则有哪些 金叉是什么意思?
  • 买股票有哪些原则?买股票应遵循以下几个原则
  • 勇士球星克莱送球衣送钱称记得传播这份慷慨
  • 老年人补钙防止骨质疏松 老年人补钙的饮食原则
  • 养生首先从饮食开始 老年人饮食养生原则
  • 怎么内调饮食养气色 女性气血双补营养原则
  • 健康饮食的十项原则 饮食对健康的重要性你知多少
  • 中医风寒感冒的治疗原则 感冒用中医怎么治疗
  • 儿童用药要谨慎 妈妈必知的儿童用药六原则
  • 如何给宝宝穿衣的原则 秋冬宝宝该怎么穿衣
  • 科学育儿原则大起底之如何看待放养育儿观
  • 男孩子的教育应该遵循的4大原则你做到了几点
  • 孕妈妈视线 胎教中应该遵循的四个原则
  • 聪明妈妈分享给宝宝怎么补铁的5大原则
  • 9项关于宝宝健康饮食的原则妈妈一定要知道
  • 懒妈妈为宝宝准备早餐一定要遵守的原则
  • MACD买卖交易原则有哪些跟如何分析MACD指标
  • 2016流行色趋势 时尚达人的绿色搭配原则
  • 如何购买机动车辆保险 务必遵守这些原则
  • 养肺的饮食起居 护肺饮食的几大原则
  • 震荡行情怎么炒股 震荡行情投资原则有哪些
  • 如何分析量比 量比的使用原则有哪些
  • 如何选购儿童险 保险选购原则有哪些
  • 发改委规范铁路运输企业收费 按正价清费规范透明原则
  • 集合竞价成交原则:集合竞价时成交价格如何确定
  • 深喉技巧 高手总结:超详细深喉交刺激私处的技巧
  • 蜜丝佛陀粉底膏 蜜丝佛陀的粉底霜怎么用 蜜丝佛陀粉底霜教程Kevin老师教你化妆基本功
  • led电视机十大品牌 led电视机十大品牌 智能电视知名品牌排行
  • 如何让爱情长久 女人要如何经营爱情 六不要原则让爱情更长久
  • 暗粉色是什么颜色 混合肤色有点暗适合什么粉底液 坚守四原则找对你的粉底色
  • 肠炎不能吃什么东西 患有肠胃炎不能吃什么 尽量以少吃多餐为原则
  • 孕妇最忌讳的药 孕妇慎用是什么意思 “孕妇慎用”药品5大原则
  • 交往的心理健康原则 正常异性交往有利于心理健康
  • 小米电视怎么样 小米电视型号价格参数介绍
  • 帅气阮经天不顾形象迎接挑战 揭秘他的接戏原则
  • 孕期坚持“12235原则” 5大禁忌别碰
  • 男人如何减肥?男人减肥的饮食原则是什么
  • 新型城镇化方案拟定六大原则 18股有望一飞冲天
  • 塑料化工—废旧料粉碎设备的选用原则
  • 冶金热处理设备选择的原则及分
  • 凸显商品特性:商超玩具陈列15原则
  • 姐姐和弟弟做 婚姻“五有”原则 让小三自动消失
  • 怎样母乳奶粉混合喂养更好/专家提示混合喂养四原则
  • 东莞女德班被停办,东莞女德班原则,东莞女德班停办原因
  • “守护冰激凌”胖轩:不仅是个吃货 更是一个有原则的吃货!
  • 异地恋维持10大原则 我们说好不放开彼此的手
  • 痛经喝红糖水有效吗?/女性经期的饮食原则
  • 拒绝传统早餐/瘦身早餐4原则
  • 肝病的饮食原则/患者们都知道吗
  • 三大饮食原则/帮女性调理好内分泌
  • 武进区“政府购买公共服务”确立五大原则
  • 给宝宝讲童话故事/要掌握四个原则
  • 意外怀孕手术后的五大保养原则
  • 副作用小的降压药有哪些 告诉您降压药的服用原则有哪些
  • 揭秘腰酸是妇科病吗 6个腰酸的治疗原则
  • 手上有小红点很痒是怎么回事 湿疹的4种有效的治疗原则
  • 胃溃疡最佳治疗方法有哪些? 13个原则有效消疼止痛
  • 横向阻生智齿一定要拔吗? 原则:有必要才拔
  • 肾阴虚吃什么水果好? 有哪些进补原则和饮食推荐
  • 胆红素高吃什么食物好? 一些合理饮食原则告诉大家
  • 嗓子哑了怎么快速恢复 4个饮食保养原则注重声带保健
  • 肝病的早期症状图片大全 治疗肝病的三种原则
  • 癌症止痛药有哪些? 运用时需坚持四个原则
  • 反流性食管炎症状有什么?反流性食管炎的治疗原则
  • 怀孕四个月了臀部疼痛什么原因 注意怀孕期间饮食原则
  • 感染性休克的抢救原则大全 有哪5个急救措施
  • 中国居民膳食指南的基本原则
  • 脑瘤期能活多久? 手术治疗应遵循4个原则
  • 患上肛门湿疹怎么办 一般治疗原则要牢记
  • 情人节蛋糕图片欣赏???情人相处必须遵循5大原则
  • 前列腺结石有什么症状? 5大治疗原则你不得不知道
  • 病人患甲亢可以吃什么 5大饮食原则你不得不知
  • 丑男要想娶美女需遵循7项原则
  • 女人对付小三只需5大原则
  • 怎么看男人潜意识的原则
  • 异性交往原则有哪些
  • 婚恋心理学 5大原则让婚姻更幸福
  • 约约约!剩女约会的6大原则
  • 摆脱单身 剩女约会六大原则
  • 女人在失恋后必须坚持的六大原则
  • 工于心计+没有原则 6类女人不是男人理想型
  • 男人心中的10个爱情原则
  • 熟女要谨记的10大性福原则
  • 六大女性约会原则 让你告别单身
  • 熟女捍卫爱情牢记五大原则
  • 遵守和谐婚姻原则 让爱延续
  • 逃离暧昧陷阱:异性合租切记六原则
  • 女人择偶切勿忘记五个原则
  • 四个原则让爱情甜蜜到底
  • 把握这一原则,能解决夫妻关系的绝大多数问题
  • 女生恋爱时请记住4个原则,尤其是第三个
  • 调整失恋心态不妨试试这6大原则!
  • 感情中,聪明女人一定坚持的7个原则!
  • 男女交往有哪些原则呢?要注意些什么呢?
  • 想要摆脱单身困境 剩女约会要注意六大原则
  • 和田玉墨玉鉴别 和田玉墨玉的鉴别原则
  • 冠心病的饮食 冠心病患者饮食遵循四大原则
  • 安全活动有哪些 安全教育的原则有哪些
  • 科学体育运动的原则 小学生科学体育锻炼的方法与原则
  • 老年人食疗保健 老年人饮食保健的原则
  • 饮食健康 健康饮食要注重六个原则
  • 栏目热点
    猜你喜欢
    本类最新