Apple TV UI 设计规范总结 (一)概述

苹果电视 tvOS UI 设计规范总结

(一)概述

(二)Siri 遥控器和游戏控制器

(三)导航和焦点

(四)图标和图片

(五)视觉设计

(六)界面元素

苹果 tvOS 系统是基于 iOS 系统,是为 Apple TV 打造的全新的操作系统。它根据客厅环境重新设计,所以在 UI 交互设计与 iOS UI 有很多的差别。新的苹果 TV 不仅仅是一台电视机,还是一台游戏机,用户可以使用 tvOS 中的应用看电视,玩游戏,分享等。

相对于其他设备系统 UI 设计而言 tvOS 上做设计及开发是一件很幸福的事情,因为它只有 1 个尺寸 1920x1080。所以你不无需考虑不同尺寸的适配问题。

一、Apple TV 配置

64-bit A8 处理器 、32 GB/64 GB 存储空间、2 GB RAM、10/100 Mbps Ethernet、WiFi 802.11a/b/g/n/ac、1080p 分辨率、HDMI、全新 Siri 遥控器 /Apple TV 遥控器。

二、遥控器控制方式

一种使用 Siri,另一种是在屏幕上搜索。

三、设计规则

1、联动

Siri 遥控器让用户在整个房间任何一个角落,通过在遥控器的触控面板点击,滑动等直观的手势让用用户和内容已一种愉快和动人的方式连接在一起。

2、明确

tvOS UI 设计给人自然、简洁、直观的感受,让用户清楚它们在你的应用中的位置,让用户本能的知道该怎么做,无需教育。

tvOS UI 导航采用焦点模型。用户使用遥控器在界面元素间移动,例如电影海报、应用或按钮,通过点按选中某个元素。导航中的当前项是选中态,如果一个元素被选中聚焦,即使远看也该一目了然。

3、身临其境

美丽、无边框的艺术画面带来置身影院体验。对单个内容的聚焦提升了这种体验,遥控器的触摸表面让你觉得像在 iOS 设备上触摸屏幕。通过引人入胜的内容,含蓄,流畅的动画让用户身临其境。

4、tvOS 应用设计

tvOS 应用运行在 Apple TV 上。你要创建一个 TV 应用并遥控它,产生良好的游戏及观影体验,需要有别与 iOS 独特的考量因素。

UI 设计师要仔细考量客厅环境,你的用户可能在距离 TV 3 米以外的沙发上。所以你的应用,界面要直观、简洁、流畅,让用户在 3 米都能看清你呈献的内容,让用户在操作遥控器就感觉是在触屏一样,从而减少用户潜意识与屏幕的距离感。

5、主屏幕

主屏幕图标是你和用户第一次最主要建立情感联系的机会。说以你的 iCON 设计要独特,感人,令人难忘。

6、头部售架

头部售架是 Apple TV 的主屏幕上应用程序的最上面一行内容展示区。用户可以决定哪些应用程序是顶排。当其中一个程序被聚焦,顶部展区展示于此应用相关的特定推荐内容。

头部售架突出展现应用中推荐或者最新的内容,并且给用户提供直接跳转的独特机会。当聚焦 iTunes TV Shows 时,用户可以看见一系列推荐节目。聚焦并且点击一个节目,就会直接跳转到应用内相关的节目详情页。聚焦到一个节目时,按下遥控器的播放/暂停键即刻开始回放该节目。

7、焦点和视差

对苹果电视,图标,图像,按钮或其他界面元素被认为是在聚焦时,可视为处于聚焦态。当一个元素被聚焦,它会被缓缓的提到前景。在遥控器触控板上轻轻画圆,元素会相应地做出摇摆动作。与此同时,元素上出现照明光泽,制造表面反光的视觉效果。如果用户一段时间内没有操作,非聚焦中的内容转为暗淡而聚焦中的元素变的更大。这些共同作用的效果,与坐在沙发上的用户保持一种联系,并且提供了上下文和一种明确的感受,强调了什么在焦点。为了支持视差效果,提供图像分层是应用图标的要求之一,也是首页顶部展区的动态内容可以支持的。

待续……

相关阅读:
Apple TV UI 设计规范总结 (一)概述
Apple TV UI 设计规范总结 (二)遥控器和…
苹果电视 tvOS UI 设计规范总结 (三)用户交互
苹果电视 tvOS UI 设计规范总结 (四)视觉设计
苹果电视 tvOS UI 设计规范总结 (五)图标和图像

来源:UI 中国