青小蛙の博客

网络电视的介面设计原则

青小蛙 设计UI

前段时间,Apple 公开了 Apple TV Tech Talks 的影片。刚好因为工作关系,需要开始研究 Apple TV 的设计规范,在此分享一些心得给大家。

Apple TV 界面

这次的 Apple TV 介面设计,主要有三个设计原则,连结,清晰,以及融入 (Connected, Clear and Immersive)。

连结

透过 Apple TV 遥控器上方的触控面板 (Touch Surface) ,使用者可以进行Swipe (滑动),Tap (触碰),以及 Click (点击)来与电视上的物件互动。

当物件 (例如 APP Icon ) 被选择时,可以轻微的在触控面板上滑动,该物件会随着滑动方向进行旋转,仿佛好像真的触摸着荧幕上的物件,而这样的互动,让使用者与物件之间产生情感上的连结。

如果没有 Apple TV 的朋友,可以透过 Robert van Klinken 使用 Framer 所制作的原型,实际体验看看:Apple TV Icon

清晰

在这么大的画面上,要让使用者随时保持清晰他的所在位置,不是一件简单的事。为了解决此问题,Apple TV 设计了ㄧ套 Focus Model 的系统。 只要是被使用者所选择的物件,都必须给它明显的视觉变化,使得专注物件在视觉上一目了然。

因为 Focus Model 的设计关系,所有的按钮多了一个 Focused 状态,也就是类似被选取中的一种状态。由上面提到一样,这个状态是利用加深阴影以及按钮变大来辨别,而不是使用颜色或是边匡线来强调,借此维持版面的干净。

加深阴影

融入

当使用者开启电视时,期待是即时娱乐,即时内容,所以设计师应该尽量减少在画面上的 UI 元件,让内容突出。假使你是在设计一个新的电视频道 APP,尽可能使用大版面的图片,减少文字的描述,像是影片海报等等。

了解上面的 Apple TV的设计原则后,接下来,我们需要能够分辨设计 Apple TV 与 iPhone 上一些差异要点。 建议使用点击(Click) 多过于触碰(Tap)

Apple 提醒各位设计师,要记得使用者在拿遥控器时,与手机是不太一样,特别是拇指的位置。使用者习惯性的会把拇指依靠在触控面板上,会造成误触的机率变高,如果是很重要的操作,尽量使用点击 (就是把触控面板往下压会有物理回馈)。

Apple TV 遥控器

不同介面下进行滑动(Swipe),物件互动方式会改变

在前面了解 Focus Model 的运作后,你会发现在 Apple TV 进行 Swipe 时,物件移动的方式,会与 iPhone 有些微的不同。我们在触控面板上左右滑动时,画面上被选取的物件,会依据我们所滑动的方向进行切换,例如,往左滑动,左边的物件会切换成 Focused,这样的互动看起来就是移动我们的专注点。然而,当我们在导览满版图片时,往左滑动,则是切向右边的照片,这感觉像是把图片往左移开,而这个行为就与 iPhone 上一模一样。

各位有机会可以下载 Airbnb 的 Apple TV APP,当他在选择旅游地点时就是切换物件之间的 Focused 状态,选择好后,点击进入满版的导览租屋资讯,这时就会回到 iPhone 般的移开图片操作。

横向滑动

很多时候,我们会有很多的物件要显示在画面上,列表难免会过长超出荧幕 ,如果是在手机上,大多数都会设计,让使用者上下滑动去导览这些物件。但是,这样的操作在 TV 上并不适合,建议大家尽可能考虑使用横轴移动,减少垂直移动,因为 TV 不像手机一般,可以随时切换回到主选单,也就是说当你滑到最下方时,你要用同样的时间回到最上方。

最好的案例就是 Apple TV 上的 Music,如果有订阅 Apple Music 朋友,你可以比较 为您推荐 以及 最新精选 这两个项目的操作,前者就是垂直移动,后者则是横向移动。

减少输入文字的频率

目前在 Apple TV 上的文字输入不是很理想,千万不要让使用者在电视上进行拢长的文字输入,例如,注册流程。有非常高的机率使用者会跳出你服务。 目前大多数服务的解决方式,都是把这些手续转跳到手机或是 PC 上。

翻译:Chris Chen 資料來源:Apple TV

青小蛙
那一池,氲光拂过的荷叶