最新消息:文章中包含代码时,请遵守代码高亮规范!

TV-UI的设计【原创】

Android Shirley 126浏览 0评论

智能TV的普及、TV应用越来越多
电视作为一个普通大众家里必备的家用电器,终于迎来了它的一波打革命——智能电视。曾经家里的电视由黑白的进化成彩色的,收看方式也分有线和无线,但无一例外主要是电视台放什么我们看什么,我们拥有的权利是在不同的电视台之间进行挑选。相信曾经的5点到6点半之间各个电视台的动画片让大家翘首以待,每天盼着吧。如果智能电视的厂家已经越来越多,智能电视也走进了众多家庭,深为年轻大众所喜爱。智能电视大家可以理解以为一台大的平板,里面的各种内容可以自己挑选和点播,也可以安装上不同的APP完成自己相应的需求。为了在这块新天地占上一块属于自己的地方,各种投资人也是开始了这种类型APP的开发诉求,这里就来简单的说一下关于TV UI的设计。

屏幕
普通的UI设计中,我们主要是以竖屏为基础进行的设计,只有在极少数的情况下才考虑横屏,游戏UI除外。在面对TV的设计中,我们主要考虑横屏为基础的设计,元素之间的排列与选择也相应的选择横向。电视的屏幕长宽比为16:9,这个比例和笔记本屏幕,大多手机屏幕的比例一致,也接近于黄金比例。我们设计时,需要以1080P来设计,宽度为1920像素,高度为1080像素,分辨率为72像素每英寸。悬元素设计时就要考虑横向排列和交互。

十字键交互和横向交互
这两个名词其实说的意思差不多,只是出发点不一样而已,十字键交互是从用户的操控出发,因为上文虽然说智能电视可以看做一台大型的平板,但是操作上并不是触屏的,我们在现阶段还是通过遥控器进行操作,所以上下左右加确定返回的十字键就尤为重要。横向交互主要从电视的角度出发,由于电视的是横屏的电子设备,内容在横向滚动时,其存在的时长(或者说距离)才是更长的。设计师要尤其注意如何方便用户的操作,既能让用户理解操作的模型,有能准确定位到当前的焦点,此外还要考虑用户操作的步骤,如果步骤太多那就是未必是理想的交互了。

目屏距离
在普通的UI设计中,我们默认用户是离屏幕较近的距离进行使用操作。到了TV的设计中,我们尤其要注意这个问题,一般普通的家庭的客厅的宽度在3M-4M左右,我们面向电视的距离就在2M多到4M多这个区间类,那我们在设计时就特别考虑这一层,元素的辨识度,和字体大小都非常重要,可以40号左右作为普通字号,也避免使用极细的字体。

卡片式设计和配色
卡片式是TVui设计的一个重要趋势,主要是由于卡片式的辨识度和易操作性,可以可以简单的理解屏幕内容,降低用户的学习难度。卡片式的配色上通过不同的配色分割不同的模块,方便用户的记忆。设计的配色有个重要禁区就是避免使用大面积的纯白,因为大面积的纯白在电视上看上去会闪屏,晃眼睛。我们在选择配色时,背景上尽量用深一些的颜色,模块上用鲜艳一些的颜色,突出的文字部分用浅色或者白色即可。

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22105.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Shirley的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!