恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
电视应用如何用好andriod tv设计规则
0.0°
2016-06-23 原创文章 行业资讯 举报 5807 16 19 1

作为中国首个运用 Android TV 设计规则的电视应用产品,沙发管家在TV端独有的操作方式上,提升了用户对 Android TV 产品的体验。

让我们以时间为线索,纵观 Android 在交互设计上的发展,你会发现,Android 和 iOS 不一样的地方在于,Android 通过开放的方式渐渐的找到了自己的产品风格。这也说明了Android 的设计是通过大量用户的体验验证得来的,尤其是在后期推出了非常成熟的material design,material design 有着非常严谨的设计规范,仅是遵循 material design 也是可以设计出一款易用性较强的产品。


作为一款中国OTT领域主流的智能电视应用市场,沙发管家在5月份发布的5.0版本上,做了第一个吃螃蟹的人,成为中国首个运用 Android TV 设计规则的电视应用产品。然而,在体验了沙发管家V5后,你会发现沙发管家不仅遵循了material design,同时也没有完全拘泥于其中,融合了自己产品的风格,在TV端独有的操作方式上,提升了用户对 Android TV 产品的体验。那就让我们从设计的角度来解读一下沙发管家V5版的一些特点。



material design 让交互更加符合用户体验场景


了解 Android 的小伙伴都知道 material design 的设计特性,就是在虚拟的界面中让体验更加真实,让界面简单化变得更加纯净,还原物体的自然效果。

众所周知 material design 引入Z轴的概念,按钮按照Z轴位置划分,有三种类型,扁平(Flat),抬升(Raised),浮动(Floating)。

Image title


Image title




沙发管家V5版在整体交互上也体现了这一点。对于用户最频繁使用的搜索功能,将其设计成了层级最高的 Floating action button 即悬浮按钮,无论是在侧边栏的分类菜单界面,还是在首界面搜索功能都在同一个位置,并且处于按钮的最高层级。这样的设计不仅标明了搜索的重要性,同时用户也能根据记忆在不同的场景下都可以快速的找到搜索功能。

Image title




在交互框架上,沙发管家运用了 Raised 即抬升的设计结构。焦点信息层级被抬升突出,让信息与界面一起运动,这样的设计可以让信息最大的展示在用户面前,便于下一步操作。窥一斑而知全豹,通过这些设计的细节,就足以看出沙发管家V5版针对 Android TV 的交互设计理念下足了功夫。


视觉的不断成熟也是Android产品进步的标志

全新的card概念,让界面在空间逻辑、关系,动态的转变与过度都能呈现出更加贴近自然的视觉体验。

Google 是扁平化设计的推动者,在体验设计中 Microsoft 率先提出了扁平设计,但是由于Microsoft 的衰落,加上对扁平的理解过于表层,人们并没有重视他的这一举动。然而扁平化设计与 Android 的设计理念不约而同,化繁为简,更有效的去呈现界面中信息的重要性,突出交互的流畅性。Android 不断的在演进自己的设计规范,最终形成了上面我们提到的 material design,从交互到视觉都给出了完整的用户体验原则。沙发管家在视觉上也不落后于潮流,是与交互体验一致的卡片设计。让我们对比的看一下国外优秀的TV端产品的设计。

Image title

Image title

Amazon Fire TV


Image title

Netflix


Image title

Android TV



国外现在主流的 OTT 服务商在Android TV中,Amazon Fire TV 、Netflix 都是广泛受到用户好评的产品。

我们能看出国外的主流设计与沙发管家一样,都采用了卡片设计,但是在这样的设计中Amazon Fire TV 却没有很好的将信息等级进行分类,页面虽然保持了美感却没有将信息进行更加明确的层级设计,让页面在整体呈现时显得拥挤和缺少视觉中心,这一问题在进入下一层级才有所缓解。好的视觉设计是要理解交互设计的精髓,那么来看看V5是怎么做的。



卡片式信息设计可以如此友好

Image title

Image title


可以清晰的看到,沙发管家是最接近 Android TV 原生设计的。在同一页面中,针对信息的重要性,沙发管家V5对卡片进行了多元化的设计,这也十分符合material design设计原则,就是充分利用卡片的可扩展性及对信息呈现的丰富性。页面根据信息产生有规律的变化,让用户在浏览过程中不会感到枯燥与乏味。沙发管家合理的利用了界面的空间,专题之间的留白,比例关系都拿捏的恰到好处。对选中专题的高亮提示都有很好的视觉引导性,让用户可以更加专注的进行操作。也就是我们前面提到的“抬升”。

Image title

这里还有一个在提升用户体验的细节,在主界面向右呼出菜单,菜单选项其实是tab签的样式,在焦点移动的同时,右侧的内容区域也会跟随专题tab进行变化,形成一种可以快速预览的用户体验。这样的体验帮助用户做出快速的判断,也大大提升了效率。好的设计就是通过一连串的巧妙设计与对细节的打磨将用户带入到打造的用户体验场景中来。



最后


通过体验,总的来说沙发管家已经是一款在设计上非常成熟的TV端产品,基于Android又不局限于规范进行设计拥有着自己的产品个性(这也是Android对产品的理解)。整体的设计理念已经可以和国外知名产品媲美,带动了国内TV端产品用户体验设计的步伐。

Image title

在最后想说在对沙发管家V5版进行体验的时候进入了一个叫“V5感谢有你”的模块,看到了一些用户对沙发管家提出的建议和反馈的bug,沙发管家也针对这些问题做出了相应的设计调整。这让身为用户体验设计师的我为之感动,一个世界级的产品只有真正了解用户的痛点与爽点,将用户体验作为产品进化核心,才能最终的得到用户的认可与喜爱。


更新:2016-06-23

收藏

16人已收藏

  • 1

    作品

  • 0

    粉丝

  • 0

    关注

    猜你喜欢

      2016-06-23 原创文章 行业资讯 举报 5807 16 19 1

      电视应用如何用好andriod tv设计规则

      0.0°

      你确定要举报电视应用如何用好andriod tv设计规则

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年06月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      19
      16
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录