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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
【自译】Apple TV 人机界面指南 1:概述
0.0°
2017-04-21 自译外文 规范/资料 原作者: Apple 官方 举报 1662 9 2 0

此文译自苹果发布的《tvOS Human Interface Guidelines》。希望能帮助中国的设计师们更好地了解 Apple TV 的设计规范。


译时仓促,如在阅读中发现错误与疏漏之处,欢迎发邮件至 liz1916@163.com 告知我。后续也会给出 Google TV、Fire TV 的译作,敬请关注。




「第一章  概述」

章节目录

1.1  设计原则

1.2  应用

1.3  主页

1.4  顶层展示位

1.5  焦点与视差


新一代 Apple TV 重新定义了客厅体验。让你身临其境地体验大屏上前所未有的非凡内容。


1.1  设计原则


苹果产品以让用户直触内容而著称。尽管 Apple TV 并不是直接手持接触的设备,人们依然期待在这之上延续同样的体验。对大部分家庭而言,置于客厅的 Apple TV 能把人们聚到一块,进行娱乐或者交谈。


Apple TV 具有该平台独有的设计要求。不论你是开发游戏、流媒体应用还是家用应用,在设想产品时都请牢记以下原则:


联动

Siri 遥控器让用户能够使用流畅直观的手势(如轻挥手腕、轻触、滑动或点击),在房间任意角落与内容进行交互,利用遥控器的触摸板、重力传感器以及陀螺仪,提供了一种愉快且富有魅力的连接内容的方式。

overview-connected观看视频


明确

Apple TV 的应用应给予用户自然、直观的感受。通过使用提供的布局网格、提高远距文本的辨识度、去除无关的视觉装饰降低界面复杂度等方法,让用户本能地知道该怎么做,并且时刻清楚他们在应用中的位置。


Apple TV 采用焦点模式浏览。用户可以滑动遥控器的触摸板浏览电影海报、应用或按钮等界面元素,焦点移动到哪个元素上就高亮哪个元素。元素被选中但未被点击前应处于焦点或聚焦状态。确保焦点态在远距仍清晰可辨。执行预期的按钮行为就不会让用户在浏览时迷失方向,例如单击某个元素应进入相应详情页,按「菜单」键应返回。

overview-clear

观看视频


沉浸感

漂亮、无边框的画面带来丰富的电影体验,使用户深陷其中。专注于内容会提升这种体验。同时,遥控器的触摸板也让你感觉像是在 iOS 设备上触摸屏幕。声效贯穿于整个系统以增强视觉体验。应力求通过引人入胜的内容、微妙流畅的动效、令人惊叹的图像和醉人的音效,让用户身临其境。 

overview-immersive

观看视频



1.2  应用


tvOS 提供开发框架,以构建引人入胜的游戏、实用工具和其他直接运行在 Apple TV 上的应用。如果你熟悉 iOS 应用设计,那么你需要知道的内容已经足够了,多数一样的界面元素和开发框架也存在于 tvOS 中。然而,要想创建一个用遥控操纵、在电视屏幕上运转良好的绝妙电影体验,需要有别于 iOS 的独特设计考量。 

overview-native-apps

让用户感觉能通过遥控器与应用连接。在 iOS 设备上,用户观看、触摸的是同一个设备。而 Apple TV 上的情况是,用户在房间另一头看屏幕,同时操作着手里的遥控器。寻找通过遥控器连接用户与应用的机会。


考虑用户与屏幕的距离。设计合适的界面元素使它们清晰且易于发现,不会淹没在背景图片或相邻项目之中。确保焦点始终清晰明确,并能实时反馈用户在遥控器上的操作结果。


创造共享体验。用户通常是在公共的环境中观看电视。考虑你的应用如何吸引群体用户,以及若每次都是不同的用户打开应用该如何处理。


相关应用开发信息,请参阅《App Programming Guide for tvOS》



1.3  主页


Apple TV 主页会显示本机安装的应用。用户可以在浏览网格排列的应用图标时,选中某个图标,接着点击启动该应用。 

overview-home-screen

主页上的应用图标是讲述应用故事以及与用户建立情感连接的好机会,要给用户很棒的第一印象。请设计一个独特、动人且易于记忆的图标吧。


相关设计指南,请参阅《Icons and Images》中的《App Icon》章节。



1.4  顶层展示位


顶层展示位是位于 Apple TV 主页首行应用列表之上的内容展示区。用户可以决定在首行应用列表放置哪些应用。当焦点移至首行应用中的某一个时,顶部展示位会显示与该应用相关的精选内容。 

overview-top-shelf

对应用来说,顶层展示位是一个突出最新、精选或有用内容的独佳机会,同时能让用户直接跳转至相关内容。举个例子,当焦点在 App Store 上时,顶层展示位上的横幅广告(banner)会突出显示值得注意的新应用;当焦点在 iTunes TV Shows 上时,用户会看见一排精选节目。移动焦点至某个节目上然后单击,会直接跳转到应用内的相关详情页。当焦点在某个节目上时,按遥控器的「播放/暂停」键开始播放节目。


关于精选内容设计指南,请参阅《Icons and Images》中的《Top Shelf》章节。



1.5  焦点与视差


在 Apple TV 上,当元素(图标、图片、按钮或其他界面元素)是当前屏幕上最高亮的元素时,被视为处于焦点态。当元素获得焦点时,会被缓缓升至前景。用手指在遥控器触摸板上轻轻划圈,元素会做出相应地摇晃,同时,会对元素增加光照令其表面产生反光的效果。用户长时间不活动的话,非焦点项会变暗而焦点项会变得更大。这些效果提供了清晰的层级感和上下文场景来强化焦点,共同维系着与坐在沙发上的用户之间的联系。

overview-parallax-artwork观看视频


视差效果用于体现焦点的层级和动态,是种广泛用于系统的微妙视觉效果。通过图片分层、透明度、缩放以及移动,视差效果营造出具有鲜活感的真实 3D 效果。支持视差效果的分层图片是应用图标的要求,同时,也为主页上顶层展示位的动态内容提供支持。强烈建议在应用里每个可获得焦点的图片内容上使用分层图片。


更多关于焦点的信息,请参阅《Focus and Selection》。在《Layered Images》章节可以学习如何为视差效果设计图片。关于焦点和视差效果的实现指南,请参阅《App Programming Guide for tvOS》。 




更新:2017-04-21

收藏

9人已收藏

栗子被占了

精益是一种素质。

  • 5

    作品

  • 13

    粉丝

  • 4

    关注

  • 【自译】Fire TV 体验设计指南
  • 【自译】Apple TV 人机界面指南 4:视觉设计
  • 【自译】Apple TV 人机界面指南 3:用户交互
  • 【自译】Apple TV 人机界面指南 2:遥控与手柄

    猜你喜欢

      2017-04-21 自译外文 规范/资料 原作者: Apple 官方 举报 1662 9 2 0

      【自译】Apple TV 人机界面指南 1:概述

      0.0°

      你确定要举报【自译】Apple TV 人机界面指南 1:概述

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年04月06日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      9
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录