Apple TV UI设计规范总结 (一)概述Recommand
5年前Publish
1976
|
1
|
17
苹果电视 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遥控器让用户在整个房间任何一个角落,通过在遥控器的触控面板点击,滑动等直观的手势让用用户和内容已一种愉快和动人的方式连接在一起。


982f5884824aa8012060c8217e32.jpg




2、明确

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

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


45ad5884827ba8012060c8af739c.jpg




3、身临其境

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


69b0588482d6a801219c77b566ef.jpg




4、tvOS 应用设计

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

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


93df58848323a801219c773ae1eb.jpg




5、主屏幕

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


f51c5884835da8012060c8f43464.jpg




6、头部售架

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

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


809e5884836fa8012060c803a511.jpg




7、焦点和视差

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


033d58848385a801219c770a20e3.jpg



未完待续.......

导航链接:


(一)概述

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

(三)用户交互

(四)视觉设计

(五)图标和图像

(六)界面元素

(七)资源


17
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
北京 | UI设计师
收录收藏夹
更多收录此文章的收藏夹