智能电视上音乐播放器的UI设计

2016-04-28 本文已影响589人 whykiller

标题

这次的设计包含了页面布局、配色、文字大小以及一些电视上设计的细节等。（以720p为例子）

一、页面布局

推荐页布局

左侧的50px是主体列表的起始位置，在推荐页面，每个单元格我给的是400px*400px的大小，这在电视上来说是比较大的尺寸了，起到一个推荐的作用。单元格和单元格之间的间距是20px，在720p的设计上，一般的间距我喜欢用20px—30px，这个间距让列表看起来比较舒服。

tab栏留了60px的高度，并不是单纯地指字体应该是占满这个空间，而是包括focus框和文字在内，都应该尽量不超出这区域。

播放器的功能按键等是放在页面的底部，预留了80px的位置，把进度条以及播放按钮等放在视线的底部，也是契合了现在人们的观看习惯。

长列表页的布局

对于长列表，因为实际情况，列表项的内容比较多，为了呈现更多的内容，所以选择了两行的排列方式，可视度会降低，但是对于选择上会比较方便，长列表的单元格是180px*180px，对于一些图片来说不至于看不清主体元素，但也不会太占地方。

歌单页的布局

左侧的430px*430px位置是放置列表页所呈现过的海报图，而右侧则是歌曲的列表。

二、背景图的设计

在上一篇文章讲到过，电视端屏幕的色彩对比度及饱和度都相对较高，所以选择背景时我还是以饱和度偏低为原则，一开始选择了纯色渐变带一点纹理的背景。

纯色渐变背景

这张背景比较干净，但是对于音乐播放器来说显得有点单调。所以，我又调了一张灰色的背景，背景时舞台下的观众。

灰色的背景

这张背景比较符合音乐的那种氛围，而且与我们的主色调比较相配，所以最后选择了这一张背景。

三、tab栏的设计

tab栏效果

这次的tab栏采取的电视端常用的标签式的，通过字体颜色来区分当前的状态，focus状态时为产品的主色，而normal状态下，因为背景是深灰色的，所以采取了明度稍高的灰色。tab栏字体大小为28px，上一篇文章中说过电视端的最佳文字范围应该为：20px～32px，在这里因为列表页的原因我用了中等偏大的字体。

四、筛选页的设计

电视端的筛选页与手机端和pc端有一定的差别，因为电视上不适于观看大段的文字，而筛选页的文字比较多而且排列比较密，这会使得用户在使用这项功能时比较不方便，所以在设计时与排行榜的一二级菜单区分的一样的方法，当焦点移动到相应的类型时，该类型的所有语种才会呈现focus状态，而剩下的则呈现normal状态，这样做的好处是方便用户在选择可以更加清晰明了，效果如下图所示：

筛选页面

五、主要配色方案

配色方案

这次的focus状态选择了红色，是因为在灰色的背景下红色显得比较亮眼；而文字的focus状态依然使用了白色，在灰色背景下更易于阅读。

六、文字大小方案

文字大小方案

作为页面中的一级标题，用了28px大小的字体，而列表页里的标题则是用了22px，在电视端的列表标题，22px或者24px都可，但是24px会影响整体的布局，所以选择了较小的22px。

七、焦点框的样式

海报的focus框

文字列表的focus框

对于海报还是选择线框的focus框，这次增加了黑色的外发光让焦点有一种浮起的效果，这种效果在文字列表下更加的明显。（参考了apple TV的设计）

八、播放功能icon的排列

底部播放栏

播放icon

PS：这些icon非本人设计，直接取用了产品中的icon

如第一张图所示，一开始的设计是将列表、模式及收藏放在播放条的右边，后来发现在电视端上，左右横跨一个进度条去移动焦点会使用户比较容易丢失当前的焦点所在，所以后来将留个功能按钮都放在了进度条的左侧。

icon间的距离约为15px—25px。

九、歌单列表的设计

歌单列表页

左侧的海报是歌单的封面，而歌单的背景则是将封面虚化并且加上一层黑色的蒙版，这样在切换不同的歌单时背景都会有所改变。如效果图所示，focus框让当前选择的歌曲浮起，使焦点所在一目了然，而红色的字体则表示了正在播放的歌曲，在排序前用icon替代了数字，也是为了当焦点在底部播放功能icon上时可以更加清晰的知道当前歌曲。

列表的文字是22px，与海报列表页的标题相同，可视度一般，但是可以呈现更多的内容，在正常的距离下观看电视时对于观看文字影响较小。