设计规范AppleTV人机界面指南–UXRen社群

新AppleTV重新定义了起居室的体验,你能将非同凡响而身临其境的内容投放到大屏幕上,这是前所未有的体验。

无论你是在开发游戏、媒体流应用,还是家庭实用应用,在构想产品的时候请记住这些设计原则。

AppleTV通过革命性的Siri遥控器为电视带来了触控体验。用户可以在房间的任何一个角落,通过流畅、直观的手势与内容进行交互。触控板的操作犹如人们熟悉的trackpad,全新的遥控器支持轻触、滑动和点按。请利用触控的优势,运用令人愉悦、引人入胜的方式,将用户和内容连接在一起。

AppleTV给人自然、直观的感受,令你本能地知道该怎么做。你的应用应该增强这一体验。用布局网格、动作和透明度打造语境。为每个元素赋予空间感,让用户清楚它们在你的应用中的位置。AppleTV的导航采用焦点模型。用户使用遥控器在界面元素间移动,例如电影海报、应用或按钮,通过点按选中某个元素。导航中的当前项是选中态,如果一个元素被选中聚焦,即使远看也该一目了然。

精美、绵延无边框的艺术画面将用户吞没在丰富多彩的影音体验中。对单个内容的聚焦提升了这种体验,遥控器的触控版会让你觉得自己在直接触摸屏幕,与在iOS设备上操作无异。通过吸引人的内容、令人振奋的影像、以及精巧流畅的动画力求沉浸感。

tvOS为一系列本地运行的应用提供了开发框架,如吸引人的游戏、实用工具和其他AppleTV本地应用。如果你熟悉iOS应用设计,你就已经知道大部分你需要了解的东西了。大部分界面元素和开发框架在tvOS里也同样存在。然而,想创造一个可以遥控、在电视屏幕运转良好的出色影音体验确实需要一些重要而且独特的设计考量。

仔细思考用户交互。把你应用的体验设计得直观、简洁、流畅。在iOS里,用户看到的和触摸的是同一个设备。在AppleTV上,用户看着房间另一头的屏幕,同时触摸的是遥控器。寻找机会通过遥控器让用户感到和应用连接在一起,即使他们坐在一定距离之外。

考虑用户与屏幕的距离,让焦点醒目。你的应用将会是在距离电视10英尺外的沙发上也能被使用的。相应地去设计界面元素,让用户不会感到困惑。并且明确聚焦的事物以及明确在遥控器上操作带来的反馈。

创造共享体验。用户通常在公共环境中享受电视。考虑你的应用应该怎样吸引一组用户,以及每次打开应用的都是不同的用户。

AppleTV首页展现已安装的应用。用户浏览网格排列的一系列应用图标,选中一个并通过点击来启动应用。

在首页上,你的应用图标是讲述你应用的故事以及与用户建立情感连接的最好机会。你的应用图标应该建立好的第一印象,所以请设计一个独特、动人、便于记忆的图标吧。设计指导参阅4.2应用图标。

推荐内容的设计指南,参阅4.3顶部展区图片。

视差效果是一种贯穿整个系统的精巧视觉效果,它传达了聚焦元素的纵深和动态。通过图片分层、透明度、缩放和动效,视差效果打造了活灵活现的、真实的3D感。为了支持视差效果,提供图像分层是应用图标的要求之一,也是首页顶部展区的动态内容可以支持的。我们提倡应用中任何可被聚焦的图片内容都使用分层图片。

使用革命性的Siri遥控器,与屏幕内容创建一种独特、亲密的联系。

遥控器为AppleTV最主要的操作设备,创造性地利用遥控器的触控板、加速计以及陀螺仪,为用户提供令人感叹的和直观的体验。用户在客厅使用遥控器时感觉像直接与电视交互一样。

遥控器的触控板可以检测到多种直观的单指手势。利用手势可以与你的内容建立一种实感的联系。

用户可以在选项间向上、下、左、右移动焦点。滑动手势的滚动通常带有惯性,即基于滑动的力度,滚动开始快,随后慢下来。通过这种方式,用户可以毫不费劲地在大量内容中移动。

点击能激活控件或选择一个选项。点击是一个强意图性的动作,也是触发行动的主要形式。“点击并长按”是用来触发特定情境下的动作。举个例子,点击并长按界面元素可以进入编辑状态。

轻触能在一系列的元素中逐个浏览。在基于UIKit的标准界面的应用中,轻触导航的不同区域能直接导航。举个例子,轻触触控板的顶部向上导航。一些应用会使用轻触手势来显示隐藏的控件。

为了避免在无意中触发动作,所以要区分点击和轻触。点击手势是一种强意图的交互行为,常适用于按下按钮,确认选择以及在游戏中发起一个动作。轻触手势适用于导航或者展示一些额外的信息。但需要注意的是用户在拿起遥控器、移动遥控或把遥控器交给他人时,他们的手指可能会自然地放在遥控器上。

避免使用标准手势执行非标准的行为,除非你的应用是一个需要手势的互动游戏(activegameplay)。重新定义标准手势的含义会导致用户困扰和交互复杂性。

当且仅当必要时,你的应用能定义新手势。人们熟悉标准的手势,不喜欢被迫学习其他的方法去完成相同的事情。在游戏或者其他沉浸式应用里,定制手势也是体验中有趣味的部分。但在其他应用里,最好还是使用标准手势,这样用户就不需要额外的努力去发现或者记住它们。

适当时,不同位置的轻触手势能辅助导航和游戏。遥控器可以区分的触控板上下左右的轻触手势。如果要对不同位置的轻触做出响应,前提是你的应用和对应的情境需要该轻触动作,且这一行为是直观的、可发现的。

在游戏里,游戏手柄可以提升可玩性以及增加沉浸感。游戏手柄也能对AppleTV的基于焦点的界面进行导航,省去切换输入设备的需要。

重要:游戏手柄是选购项,用户不一定有购买。但每台AppleTV一定会配置遥控器。如果你的应用可以支持游戏手柄,那么你必须让遥控器也能控制游戏控制。

确认游戏手柄的连接。你的游戏可能随时启动,甚至在没有游戏手柄连接的情况下。为了确保可靠的用户体验,应用启动时应该检查手柄是否就位,如手柄是必要的,可以友好地提示用户连接手柄,还需要告知用户游戏手柄比遥控器多提供的能力。

不要让用户在使用你的应用时切换操作设备。用遥控器和游戏手柄测试你的应用,以及确保它们能在菜单和必要的导航上能使用。考虑一下,在使用遥控器时,你还能使用什么交互。举个例子,在赛车游戏里,你可以让用户在遥控器横屏模式上进行旋转和操作。参阅2.4按钮了解按钮预期行为。

遥控器上除了触控板外,还有些可点击的按钮,例如播放/暂停键也可以用于你的应用或者游戏上。当菜单按钮被按下时,使用游戏控制框架(GameControllerframework)的应用程序也能收到通知并采取适当行动。在你的应用或游戏的情境中,不管用户使用遥控器还是游戏手柄,按钮的行为应该一致且可预测的。

给用户返回到上一屏以及离开你的应用或者游戏的路径。用户预期按下遥控器或者游戏手柄上的菜单按钮时,可以回到上一屏或者AppleTV的首页。当在应用或者游戏首页时,按下菜单按钮应该始终回到AppleTV首页。在游戏过程中,按下菜单按钮应该可以显示或者隐藏游戏中的暂停菜单,里面也应该包括一个选项可以导航回到游戏的主菜单。

始终可以使用Siri遥控器上的播放/暂停按钮。无用的按钮感觉像坏了一样,所以应该始终为播放/暂停按钮提供合理的行为。举一个例子,让用户使用播放/播放键来开始游戏,跳过一页教程说明,或者直接开始播放媒体。在游戏过程中,如果不需要辅助操作,播放/暂停应执行主操作。在一个应用里,如果没有明显的可播放内容,播放/暂停的操作行为等同于点击,用来激活一个焦点选项(focuseditem)。

运用这些设计准则能帮助你创造运行自然的应用,如同AppleTV身临其境体验的一部分。

用户往往不会注意到一个应用的导航,除非它并不符合他们的预期。你的工作是建立既能支持应用的结构和目标,又不会吸引用户注意力的导航。导航应该是自然而熟悉的,它不应该主宰用户界面或让用户从内容中分心。

在AppleTV上,用户在堆叠的页面间移动,浏览内容。每一屏可能放置前往其他屏的入口,并且通过遥控器返回到前一屏或主菜单。一般情况下,使用标准的用户界面元素,如标签栏、表单视图(tableviews)、内容集视图(collectionviews)和分屏视图(splitviews),可以在不同的页面间切换。

设计一个能快速简单到达内容的信息结构。用户想用最少的轻触、滑动,迅速地访问到内容。简化你的信息结构,用最少屏数来组织它。

利用触控来达成流畅性。提供简单的,用最少手势便能在焦点元素中阻力最低地移动的方法。

考虑焦点。AppleTV的导航并不总能一步到位。由于电视采用基于焦点的选择模型,用户需要先通过遥控器,把焦点移动到目标界面元素后,才能与其交互。如果你的导航方案需要太多的手势才能实现目标,用户可能会感到沮丧。参阅3.2焦点和选择。

通过菜单按钮实现后退导航。让用户能通过遥控器上的菜单按钮返回,以创建简单和可预期的导航体验。在玩游戏时,点击菜单按钮应该回到游戏主界面或调起有返回至菜单主界面选项的游戏菜单。在应用或游戏的一级界面,点击菜单按钮会退出至AppleTV的主屏幕。

避免显示返回按钮。用户知道按菜单键能返回,所以不要在你的应用中浪费空间去显示一个额外的重复此功能的控件了。但当界面中只存在购买或删除的按钮时,可以考虑提供取消按钮,便于让用户能返回上一界面。

内容合集在一屏显示比优于在多屏显示。即使一屏的元素非常多,遥控器的手势也能帮助用户快速移动。如果你有个焦点元素的集合,可以考虑用一屏显示,以保持导航的简单。

使用标准的导航组件。如果你的应用用户界面使用UIKit实现,采用标准的导航控件,如页面控制器(pagecontrols)、标签栏(tabbars)、分段控件(segmentedcontrols)、表单视图(tableviews)、内容集视图(collectionviews)和分屏视图(splitviews),用户已经熟悉这些控件,他们将直观地知道如何使用你的应用。你可以在6界面元素了解这些导航组件。

支持内容垂直导航。左右滑动比上下滑动更自然,在选择或设计内容布局时,请考虑这一点。

在iOS设备上,用户直接通过在触控板上轻触或滑动与用户界面交互。AppleTV没有触屏,用户在房间里,通过遥控器直接与屏幕中的元素交互。这一交互模式是基于焦点模型的。通过按下按钮或使用遥控器上的手势,用户可以在元素间变换焦点,停留于某一元素,点击到达内容或激活动作。焦点改变时,微妙的动画和视差效果营造的纵深感,能明确标识出此元素现正处于焦点。

使用标准界面元素,获得相应动效。如果你的应用使用UIKit和focusAPI实现用户界面,你的界面元素的焦点模式会带有相应的动效和视觉效果,这能使你的应用感觉更像一个平台原生应用,并帮助减少用户在界面移动时的阻力。当用户在你的应用使用Siri遥控器时,他们会发现焦点元素间的转换流畅而直观。

按用户预期方向移动焦点。在AppleTV中,几乎都是间接操作——手势在元素间移动焦点,系统滚动界面使焦点元素保持可见。如果你的应用使用间接操作,确认焦点与手势方向一致。如果用户在遥控上点按向右或滑动向右,焦点应该向右移动,即内容应该左移。如果用户点击向上或向上滑动,焦点也应该向上移。而全屏幕元素,如照片,应该采用直接操作,手势移动的实体而不是焦点。举例,向右滑应该从左向右移动相片。

聚焦元素显性化。用户在远处选择并操作屏幕上的元素,因此让他们时刻知道哪个元素正处于焦点中至关重要。通常而言,如果你使用UIKit中的界面元素,系统会自动做到这点。如果你想使用自行开发的焦点模型,请确保焦点元素突出。举例而言,一个图像为主的合集中,图像会有标题,你应该在焦点元素,而不是非焦点元素下显示其标题。

使用视差效果,让焦点元素对用户交互响应更迅速。在遥控器上轻柔地画圈,相应的焦点元素也会实时产生柔和的位移。这样的反馈能提高对内容连接的认知,并强调了正处于聚焦态的元素。这种视差效果内置于UIKit,使用分层图像的方式,赋予焦点元素活力感。使用视差能创造更身临其境的互动体验。要了解更多信息,请参阅1.5焦点和视差和4.5图像分层。

创建尺寸合适的焦点元素。间距恰当的、较大的元素比较小的元素更易浏览和选择。

界面元素的焦点和非焦点态都应设计得美观。在AppleTV上,处于焦点的元素通常会稍微放大。当你设计界面时,应该同时考虑元素的焦点态和非焦点态。为聚焦状态配置较大尺寸,以确保它们看起来始终清晰。你可以在4图标和图片中查看图片尺寸规范。

焦点的改变应是流畅的。一个元素转为聚焦状态时,它会发生颜色改变或伴有微妙的动画;当焦点再次发生变化时,记得让它自然地恢复至非焦点态,而不要让这个过渡显得不和谐。

不要显示光标。用户预期通过改变焦点导航,而不是尝试移动屏幕上一个小小的光标。使用焦点模型来提供行之有效的、一致的体验。

应用图标和图片对创造沉浸式的用户体验至关重要,这样的体验吸引着用户并让他们充满兴趣。

每个应用都需要一个漂亮并令人记忆深刻的图标,在AppStore中吸引用户的注意,在AppleTV首页能跳出来抓人眼球。一瞥之间,图标是第一个向用户传达应用内容的机会。

提供单一的视觉焦点。为应用设计单一、中心的视觉焦点,能立刻抓住眼球并能清晰地表现应用。用户不应该需要仔细分析图标才能理解其代表的意思。

保持背景简洁。不要用太多背景元素塞满你的图标。给图标绘制一个简洁的背景,能够突出上面的图层,但并不过分压制它周围的应用图标。记住,你不必填满整个图标。

保持图标四角是直角。系统会自动用蒙板来生成圆角。

重要:应用图标要求使用分层图片。具体参见4.5图像分层。

应用图标必须有2-5个图层来创造聚焦状态时的纵深感和生动感。

仔细考虑如何分离图层。如果你的图标包含一个LOGO,把它从背景层中分离出来。如果你的图标包含文本,把文本放在前景层,这样在视差效果下就不会被其他图层所遮盖。

仔细考虑渐变和阴影。背景的渐变和花纹可能会与视差效果有冲突,因此使用时要谨慎。关于渐变,推荐使用上到下、浅到深的渐变,记得它们会影响整个图层。

应用图标中,阴影最好看起来是锐利、硬线条、融入背景层的着色,当图标静止时不可见。

利用不同程度的透明度来增强纵深感和活力度。创造性地使用透明度能够使你的图标脱颖而出。举个例子,Photos图标的核心分成多个半透明图层,为设计带来更多活力。

重要:每个应用必须提供一个小尺寸和大尺寸图标。应用图标必须呈递两种尺寸,两者长宽比相同。

小尺寸图标——这个尺寸的图标在AppleTV主屏上使用。

实际尺寸:400pxby240px

安全区域尺寸:370pxby222px

非聚焦态尺寸:300pxby180px

聚焦态尺寸:370pxby222px

大尺寸图标——这个尺寸的图标在AppStore使用。

尺寸:1280pxby768px

大尺寸图标应照搬小尺寸图标的设计。尽管大尺寸图标与小图标使用不同,它仍然是你的应用图标,应该在外观与小图标相匹配。

当用户把你的应用放在AppleTV主屏的最上面一行时,顶部展区(TopShelf)是增加可见度的好机会。应用被选中聚焦时,你能够展示迷人的图片,来鼓励用户使用应用去发掘更多。

重要:最低要求,每个应用至少提供单张顶部展区静态图——当应用在主屏最上面一行且被选中聚焦时使用。

展示引人注目的动态内容。你展示在顶部展区上的图片应该吸引用户、让他们渴望更多。尽管你也可以在顶部展区放静态图片,还是要考虑放置更有魅力的动态图片,比如最新的或者评价最高的内容。

提供视觉丰富的静态图像。当没提供动态图或动态图不可用时,顶部展区展现静态图。静态图不可被选中聚焦,所以利用这个机会展现品牌吧。

顶部展区静态图尺寸:1920pxby720px

个性化内容。用户熟悉他们放在AppleTV主屏最上面一行的应用,他们经常使用这些应用。考虑把体验个性化,在顶部展区展现有针对性的推荐项,比如让用户能够恢复视频播放、继续游戏。

你可以为顶部展区提供单一图层或多图层的图像。具体参见4.5图像分层。

动态顶部图像可以作为一排可聚焦内容或者滚动横幅出现。布局样式为展现你的内容提供了一系列灵活的格式选择。不管使用什么样式,展示用户最为关心的内容,帮助他们快速获得所求。

这一布局样式展现了一行带标签的内容。它通常用于高亮最近浏览内容、新的内容、或者收藏的内容。

行内内容可被聚焦,允许用户按自己想要的速度滚动。当一个内容被聚焦选中时,一个标签会出现,同时,在遥控器触控板上轻轻移动,会让图片活过来。如果需要的话,一个分栏内容行也可以被配置多个标签。

提供足够的内容,构成完整的一行。最低限度,在分栏内容行至少载入能撑满屏宽的内容。此外,为了平台一致性或展现额外信息,至少包含一个标签。

分栏内容行支持多种长宽比的图片,包括以下尺寸:

海报(2:3)

实际尺寸:404pxby608px

安全区域尺寸:380pxby570px

非聚焦态尺寸:333pxby500px

聚焦态尺寸:380pxby570px

方图(1:1)

实际尺寸:608pxby608px

安全区域尺寸:570pxby570px

非聚焦态尺寸:500pxby500px

聚焦态尺寸:570pxby570px

实际尺寸:908pxby512px

安全区域尺寸:852pxby479px

非聚焦态尺寸:782pxby440px

聚焦态尺寸:852pxby479px

注意,当多种图片尺寸混合时,可能会发生额外的缩放。如果你的顶部图区含有多种图片尺寸,图片会自动放大去匹配最高图片的高度。例如,当和海报、方图混合在一排中时,HDTV图片会放大到500px高。

当一个横幅被选中时,在遥控器触控板上轻轻画圈会触发系统聚焦效果:横幅动起来、打光、产生3D效果(如果横幅由多个图层构成的话)。在触控板上滚动,按次序进入下一个或者上一个横幅。使用这种设计展示丰富、引人注目的内容,比如受欢迎的新电影。

提供合理数量的内容确保滚动舒适。滚动横幅区中至少要有3张图片;超过8张的话很难手动导航到某张特定图片。

如果你需要文字,将它加入到你的图片中。这种布局样式在内容下面不显示标签,因此任何文本必须是图像自身的一部分。在分层图片中,应考虑把文字放在最顶层突出出来。

滚动横幅区支持以下尺寸的图片:

实际尺寸:1940pxby624px

安全区域尺寸:1740pxby620px

非聚焦态尺寸:1740pxby560px

聚焦态尺寸:1740pxby620px

如果你的应用是一款游戏,游戏中心会给你更多让用户沉浸在抢眼图像中的机会。

每个成就都需要一张不透明的图标,来直观地表现用户在游戏中达成的成就。系统会自动把成就图标裁切成圆形,所以你需要确保核心内容在图片正中。成就图标是用来展示的,没法被选中。

可见尺寸:200pxby200px

实际尺寸:320pxby320px

这种可选图像出现在你游戏控制面板的顶部。透明度可能被用于让背景从图像中显示出来。控制面板插图不能被选中。

最大尺寸:923pxby150px

你必须为游戏中的排行榜或排行榜集合提供1-3张单层或多层、长宽比为16:9的图像。插图的底层必须是不透明的。在运行时,深色渐变可能会从下往上覆盖图片,你可以在图片右下角放置文本。这些图像可被选中,在遥控器触控板上轻轻画圈会触发聚焦效果。

实际插图尺寸:659pxby371px

安全区域尺寸:618pxby348px

未聚焦尺寸:548pxby309px

聚焦尺寸:618pxby348px

图像分层是AppleTV用户体验中的精髓。结合视差效果一起,能够产生真实、有活力的体验,并且能随着用户与屏幕上内容的交互唤起实体联系感。

一张分层图片由2-5个不同图层叠加而成。通过分离图层和使用透明度来创造景深的感觉。当用户与图片互动时,靠前的图层升起并变大,同时靠后的图层进一步后退,产生3D效果。

重要:应用图标要求使用分层图片。应用中其他可被选中的图像,包括顶部图区图片,并非必需使用分层图片,但我们强烈建议使用。

使用标准的界面元素来显示分层图像。如果应用的用户界面使用UIKit框架和focusAPI,当分层图像被选中聚焦时,会自动被处理成带有视差效果的。

合理地区分前景、中景、背景元素。在前景层展现重要突出的元素,比如游戏中的角色、专辑封面或电影海报中的文字。中景层尤其适合展现次要内容和效果,比如阴影。背景层是不透明的幕布,能够衬出上面的图层、但又不抢风头。

通常,把文字放在前景层。把文字放在最上层以便清晰展现,除非你需要文字是模糊的。

背景层是不透明的。使用不同级别的透明度并让靠下层的内容透出来没问题,但背景层必须是不透明的,否则你会得到错误提示。不透明的背景会确保你的设计在视差效果下、投阴影时、在系统背景上使用时都看起来很好。

保持简单精致的分层。视差被设计成几乎注意不到的效果,过度的3D效果看上去不真实、不和谐。保持图像景深的简洁,让你的设计充满生命力和惊喜。

在核心内容周围预留安全区域。选中时和视差效果中,靠近边缘的图层内容会被裁切或在图像缩放移动时难以看清。为了确保核心内容总是可见的,不要把它摆放的太靠近边缘。安全区域的大小随图片尺寸、图层前后顺序和移动动作变化。前景层会比背景层裁切得更厉害。

在确定分层图像合适的尺寸时,同时需要考虑选中态和非选中态。在视差效果中,背景图层可能会被少量裁切,所以把核心内容设计在安全区域以内,并在区域内适当留白,以确保你的设计在各种情况下都看起来很好。

推荐使用以下公式来计算分层图像的大小,这一算法根据图像非选中态的尺寸来计算。

AppleTV使用CAR和LCR文件加载分层图像。

CAR文件

CAR是苹果定义的一种专有的资源目录运行时文件格式。你并不直接创建CAR文件,Xcode会在编译项目的LSR文件和图像栈时自动为你建立。

LCR文件

LCR是苹果定义的一种专有的运行时分层文件格式,并在内容服务器上使用。如果你的应用运行时需要从服务器获取分层图片,就必须要用LCR格式提供这些图片。LCR图像不应该嵌入在应用本地。

你并不直接创建LCR文件,而是使用Xcode中的layerutil命令行工具,通过LSR文件或Photoshop文件建立。

启动图像在应用启动时展现,即时出现并很快被应用的首屏替代,让用户感觉应用响应速度很快。启动图像并不是艺术表达的窗口,它唯一的意图是增强这样的用户认知:你的应用启动很快,立即就可以使用。启动图像是静态图、不分层。

重要:每个应用必须提供启动图。

尺寸:1920pxby1080px

把启动图设计成与应用首屏几乎一样。如果启动图中含有不同的元素,当启动完成时,用户能够感知到从启动图切换到应用首屏的闪动。

在启动图中避免避免使用文字。因为启动图是静态图,所以任何文字展现不会经过本地适配。

AppleTV充满了一些设计独到并且兼顾体验的应用。以下这些原则可以帮助你设计出可以向用户传达品牌理念的应用。

AppleTV通过UIKit的方式,内置了很多适用于获得焦点、选择、和转场的动画,你可以在自己的应用中利用他们。这些微妙的动画为用户和屏幕内容建立了视觉感受上的联系。内置的动画效果与有品位的自定义动画的结合使用,可以增强内容的沉浸式体验。

避免使用无意义的动画。屏幕上的动画应该只是用于响应用户的操作。非用户行为触发的动画会造成体验的中断和注意力的分散,不要仅仅是为了使用动画而使用动画。

避免过分夸张的动画。多余的跳动或弹簧效果也许让动画在电脑频幕上看起来非常棒,但是呈现在更大的屏幕上的时候,会是非常让人恼火的。考虑下用优雅温和的动画来替代吧。请务必经常测试你的设计,以确保在电视上看起来也棒棒哒。

追求真实可信的动画。AppleTV的设计理念是轻量化,关键的界面组件都在体现轻薄的质感。这些轻量化的组件动起来不应该表现的像有质量似的,比如可以反弹到某个地方或者是从某个地方冒出来。虽然用户乐于接受艺术化的处理,但不合理的或是违背物理定律的运动效果,会让人感到迷惑。

成功的品牌传达不仅是将品牌元素添加到应用中这么简单。成功的应用需要通过明智的选择字体、色彩、配图,来传达品牌独一无二的理念。在应用中应当适度的向用户提供品牌内容,但不要过量。

内容为先,而不是品牌。一条一直存在的顶部栏,除了用来展示品牌什么也做不了,而且还会限制内容的空间。内容为先(的设计方式)则是用一种弱化干扰的方式来呈现品牌。此外还可以考虑去自定义色彩、字体、或者巧妙定义背景。

抵住在应用中到处展现品牌标志的诱惑。除非品牌标志的呈现对使用情景很必要,否则请避免在应用中频繁出现。

在真实的电视上预览色彩。用户在计算机上和电视上看到的色彩并不总是一样的。为了获得最佳的效果,请使用sRGB的色彩格式,并且需要在真实电视上经常测试,可以通过这样的方式熟悉如何选择色彩以及将色彩转投到大屏幕上。如果条件允许,请在多台电视上预览你的应用,因为不同的电视型号可能导致很明显的色彩差异。

柔和的色彩更优。如果你的应用使用自定义色彩模式,请避免使用高饱和度色彩。这些色彩在电视的大屏幕上看上去会非常炫目和喧宾夺主,如果用户调整了他们的显示设置,则更甚。

请考虑色盲以及文化差异对色彩认知的影响。用户看待色彩的方式是不同的。比如有些色盲的人很难区分红色和绿色。所以请避免仅使用红绿色彩差异来区分状态或数值。一些图片编辑工具软件有提供可以验证色盲人群是否可以识别(当前的色彩)的功能。

不仅仅通过色彩来告知焦点状态。在AppleTV上,当元素获得焦点时,微妙的缩放以及响应式的动画是表示可交互的主要手段。

在不同的显示级别上预览色彩。电视的色彩效果取决于不同的生产商,亮度以及显示设置。如果某些设置会导致应用中的内容会混在一起或者变得看不清楚,请考虑重新选择色彩。

AppleTV提供了一种可以在客厅中和各个年龄段的家人共享的家庭影院式体验。整个平台的页面和内容非常的丰富、美观、简单、可参与,相比科技感它更强调那种人和人联系起来的感觉。

电视有很多不同的尺寸。AppleTV上的应用和在IOS上一样不会自动适应屏幕的大小。相反的,应用在每一个显示器上都会呈现完全一样的界面。设计的时候要格外注意,这样应用才能够在各种尺寸的屏幕上都呈现非常赞的布局。

优化大屏显示效果。

将你的应用的界面分辨率设置为1920x1080(1080p)像素,这意味着16:9的界面宽高比。所有得比例都应该是@1x分辨率的。

保持主要内容远离屏幕的边缘。

留意距离界面顶部和底部60像素,以及距离侧边90像素的区域。在这个接近边缘的区域内很难看清楚内容。在一些旧的电视中,为了适应界面尺寸也会裁掉边缘的内容。

有焦点状态的元素之间注意保留适当的间距。

如果你使用UIKit或者focusAPI,元素在获得焦点的时候尺寸会增大。请注意元素在获得焦点时候的视觉样式,确保它们不会无意中遮盖了重要信息。

通过显示一部分当前屏外的内容来暗示隐藏了更多的内容。

呈现大量内容时,会遇到单独一屏不能承载全部内容的情况,可以通过展示一部分当前屏以外的内容来暗示还有更多的内容

构建媒体为主的应用时,使用布局模板。

如果你的应用布局需要少量的定制并且内容呈现要精美。请考虑使用预设的布局模板。详见布局模板。

在AppleTV上,网格有助于更好地呈现内容。这些内容不仅在远距离很容易浏览,还可以使用遥控器快捷地导航,呈现效果非常理想。

以下的网格布局和界面宽度提供了最佳视觉体验。请确保元素在非焦点状态保持适当间距,以防止他们在获得焦点的时候内容重叠。

3栏网格

内容宽度:548像素

水平间距:48像素

垂直间距:100像素

5栏网格

内容宽度:308像素

水平间距:50像素

6栏网格

内容宽度:250像素

9栏网格

内容宽度:148像素

水平间距:51像素

考虑屏幕的安全区域。牢记将内容左右缩进90像素,上下缩进60像素。可以通过在缩进造成的区域中,用溢出的方式展示未在当前屏出现的内容。

为标题行留出额外的垂直间距。如果一行内容有标题,请确定非焦点状态的上一行底部和当前标题行的中间有适当间距。然后,确定该行非焦点状态下标题底部和内容顶部的有适当距离。

请使用一致的间距。不一致的间距会让网格看起来不像网格。

余光的内容保持左右对称。为了可见内容更直观的获得焦点,请保持屏幕安全区域外的溢出内容在各个边缘都保持相同的宽度。

AppleTV提供了样式美观、布局一致、并且凸显内容的模板。这些模板是基于JavaScript和AppleTV的编程语言(TVML)开发的。当应用启用时,它们会动态加载内容。这些模板可以灵活创建丰富的内容,并且这些内容可以很好地在电视屏幕上呈现,非常适合流媒体。

有品位的自定义模板。布局模板的可定制程度很高,你可以控制背景、文字、色彩、尺寸、布局甚至更多。在设计应用的时候,请无论何时都遵从于内容,避免出现分散注意的、跳跃的或突兀的定制内容。

在使用之前了解模板的使用意图。如果你的定制化使得基本模板无法识别,请考虑换个模板或者使用完全自定义的界面。

另请参阅6界面元素中的6.9提醒。

描述性提示模板用于显示大段的长内容,可能要求用户同意某一项操作,比如同意条款或者许可协议。

保持简短,避免滚动。远距离在屏幕上阅读大量文字一点都不好玩,对眼睛简直是折磨。所以请认真斟酌应用需要呈现的文字内容。

显示,而不是讲述。如果可能,避免描述提示内容,可以考虑用更容易理解的方式来展现相同的信息,比如用图片。

按键要仔细摆放。当文字内容可滚动展示时候,请横向并排摆放按键。这样一来,可以通过上下滚动来阅读文字,通过左右滚动来切换按钮的焦点状态。

表单模板用于显示一个或者多个输入框比如名字和邮件地址,包括键盘。

另请参见6界面元素中的6.3文本和搜索。

列表模板用于以列表的形式在屏幕右方呈现电影或电视的节目列表。当聚焦与一项内容时,左边会呈现其对应的内容,比如它的图片或者描述。

当内容在服务器中检索的时候,会出现加载模板,它会时时显示一个进度显示器和一些文字描述。它让用户知道有一些行为正在进行,应用看上去并没有终止。

保持加载文案的简练和准确。如果加载很快,用户也许来不及在文案消失前读完很长的内容,这会让他们以为遗漏了一些信息。

另请参阅6界面元素的6.7进度指示器。

主菜单模板会展示一个带底部菜单的全屏图像。它通常出现在电影的首页,有一个可以播放电影和访问特定章节或其它功能的菜单。

保持菜单栏的整洁。每增加一个元素都会导致更多的选择,并且还增加了应用的复杂度。

将菜单元素保持在屏幕上。当菜单栏获得焦点的时候,它所有的元素都应当可见。一般情况下,短标签应当限制在7个以内,这样能避免由于内容拥挤导致的元素超出当前屏。

另请参见6界面元素的6.1标签栏。

展览式模板通过将当前焦点状态下的组内容,通过旋转的方式进行预览。组内容列表会呈现在右边。聚焦与其中的一项内容,左侧用旋转的方式呈现其内容。

自定义背景时,请仔细考虑图片和文字信息的颜色。默认情况下,背景会呈现出一个产品图片的投影,来制造互补的视觉效果。如果你决定使用自定义背景,请确保他不会与其它内容造成冲突。

评分模板用于让用户对特定元素进行评价,比如电影或一首歌。

搜索模板用于让用户搜索应用中的内容和查看搜索结果。它包括搜索框,键盘和结果列表。

堆栈模板用于成组的展示产品,比如不同流派的电影。每组产品都直接在前一组的下方展示。

在整个系统中,柔软细腻,半透明质感的窗口的呈现,是为了传达一种深度和层次感。这些设计同样也给人沉浸感,但并不引人注意,也不会造成内容的分心。这些质感纹理有多种色彩,适用在多种场景中,看上去非常棒。

考虑使用系统的质感。系统质感能带给你原生应用的感觉,当用户从其它应用切换到你的应用的时候,过渡会非常平滑。下面的质感样式可供选择:

UIBlurEffectStyleExtraLight

大部分全屏模式中会使用这种纹理,效果非常棒。如果你的应用采用透明窗口的背景,系统会默认自动呈现此样式。

UIBlurEffectStyleLight

这种纹理适用于覆盖层,它会模糊屏幕上的部分内容。

使用更轻薄,半透明的质感来提升内容,让它有新鲜感。深色的质感会导致沉重的感觉,这样的质感使内容显得陈旧,与背景混为一体且看不到投影,从而降低了页面纵深感和活力。当你看不到投影的时候,很难区分哪个元素处于获得焦点的状态。

SanFrancisco是AppleTV的系统字体。这个字体有两个变体:SanFranciscoText和SanFranciscoDisplay,在大屏幕上易读性都很高。

在标签或其他界面元素中使用系统字体时,AppleTV会根据选择的磅值自动应用最合适的文本样式。它也会按需自动更改字体并遵循辅助设置。

尽可能减少应用中的文字数量。展示给用户,而不是通过文字来说明。阅读房间对面屏幕上的大量文字十分费劲也并不好玩。认真考虑你的应用实际需要展示的文本数量,尝试用更容易理解的方式来呈现信息,比如使用图片或动画。

在设计时选择合适的系统字体。最重要的是,文字在远处必须清晰易读。当设计应用时,39点或更小的字适合用SanFranciscoText,40点或更大的字用SanFranciscoDisplay更好些。

尽量使用内置的文本样式。内置的文本样式允许你用不同的视觉效果来表达内容,同时保留最优易读性。这些样式使用系统字体并且允许你利用重要的排版功能,比如动态排版(为不同字号自动调整字距和行距)。主要内容使用正文样式,标签和次要内容可以使用注脚样式和说明样式。

使用自定义字体时,在远处需要清晰易读。AppleTV支持自定义字体,但在远处可能难以阅读,尤其当字体笔画过细时。所以,除非你有必须使用自定义字体的理由,比如为了品牌推广或创造沉浸式的游戏体验,否则还是坚持用系统字体吧。

使用自定义字体时,支持辅助特性。系统字体自动会对辅助特性作出反应,比如字体加粗。使用自定义字体的应用,应该检查是否启用了辅助特性并在特性发生变化时接收通知,实现与系统字体相同的行为。

AppleTV的视频播放器让用户能在应用内欣赏视频,而且它专为触屏设计。与Siri遥控器的无缝集成让用户能够流畅、直觉地使用手势来浏览多媒体。

用户可以使用遥控器做这些事:

使用系统视频播放器。内置的视频播放器能够提供很棒的视频播放体验。它的控件极简而低调,让媒体本身成为注意力的中心。除非你的应用确实需要一个自定义播放器,否则请使用系统视频播放器,会创造跨平台统一的多媒体浏览体验。

在视频上展现LOGO或非交互的浮层时,内容为先。一个小小的不引人注目的LOGO或倒计时可能适合放在视频上,避免使用与观看体验无关的又大又让人分心的浮层。用户期望在观看内容时不受打扰,他们会欣赏干净整洁的观看体验。

提供额外的增值信息。通过提供图片,标题,描述和其它有用的信息,来实现视频附加信息的定制化。一般来说,这些内容的高度应当限制在8行以内,以免影响到视频播放。

界面元素是构成应用的基石。用界面元素来展示信息、促进与应用内容的互动。

对于AppleTV的多数应用而言,导航主要以屏幕顶部的标签栏形式呈现。内容区域位于标签栏之下,显示当前选中标签的内容。标签栏让用户知道当前处于应用哪个位置;同时提供一种便捷路径,让用户在不同页面和内容之间移动,或者触发操作行为,如搜索。

当遥控聚焦标签栏时,标签栏出现在屏幕顶部,高度是140px。标签栏默认半透明,可以看到标签栏覆盖区域下的内容。一般而言,标签栏总是位于屏幕顶部,移开聚焦的标签栏时,标签栏消失,屏幕展现完整内容。

对角标进行管理。一个页面不要试图展示大量的新信息或重要信息,这样会让用户无所适从。

对选项数量进行管理。每增加一个选项,既增加应用本身的复杂性、又增大用户选择认知困难。

当聚焦标签栏时,所有的选项都应该要在屏幕内。选项应该使用短标题,从而避免拥挤或者导致有选项超出屏幕显示范围。

保证所有选项都可访问。如果一个选项可见、可用,而其他选项不可见、不可用,那么应用界面状况将不可控。

标签栏适配应用风格。采用颜色提取,或调整透明度,来适配应用的配色方案和风格。

选项标题通常使用文字。一般而言,相比于易被曲解的图标,简明的书面文字更干净、更直接。

采用短的、有意义的名词或动词作为选项标题。标题清晰定义了当前选项内容类型。一般而言,标题应该是名词(如音乐、电影和流派),但某些情况下,动词可能更加合适(如播放和搜索)。

AppleTV包含了一些关于组织和呈现内容集合的标准,帮助用户理解以及导航。

单列表单以滚动形式来呈现数据,可以将它们划分成多个区域或组别。不同量级的信息,使用表单的形式来更清晰有效地展现。

考虑单列表单宽度。窄的列表导致列表标题截断和重叠,让用户很难阅读和快速浏览。同样地,宽的列表也很难阅读和浏览,且占据了内容区域空间。

页面内容采用优先加载模式。不要等待全部内容读取完成后一起加载,而应先加载一部分。优先先加载文字部分,待图片数据读取完毕后,再加载图片内容。这种技术让用户尽可能快的获取有用信息,同时提升应用的用户感知反应。某些情况下,页面没有刷新时,显示旧数据可能是有意义的。

你可以采用标准的单列表单样式,定义表单中内容如何出现。

标准的单列表单样式也允许存在图形元素,如复选标签或标记。当然,增加这些图形元素,会减少列表标题和小标题的显示空间。

保持标题文字简洁性,避免被截断。被截断的词句很难被理解。标准单列表单样式中,标题文字是被自动截断的。而由于文字截断产生问题的多少,取决于采用哪种单列表单样式和定义截断何时发生(给出最大文字字符数,超出截断)。

测试选中态。选中表单内某行内容时,该行内容放大高亮。同时选中态样式包含圆角,这直接影响到该行中图形样式。基于此,如需使用图形元素,可直接采用表单圆角样式,而不增加额外的圆角。

考虑是否增加表单编辑功能。在AppleTV上进行删除和重新排序操作,是一个缓慢而乏味的过程。因此需要考虑是否值得提供此类功能。

当标准样式或网格布局足够满足需求时,避免进行全新设计。一个内容集应该提升用户体验,而非变成视觉焦点。

更容易的聚焦选项。在用户找到感兴趣的内容前,如果很难找到想找的内容选项,他将感到沮丧和丧失兴趣。给图片周围足够留白,以保持内容清晰聚焦,同时避免内容重叠。

考虑使用表单组织文字,代替文字堆叠。在电视屏幕上,滚动列表中的文字信息,通常更简单和更易理解。

根据内容选择效果最好的分屏视图。默认情况下,分屏视图以1:3的比例分隔屏幕空间,一级面板占据屏幕的1/3,二级面板占据2/3。当然屏幕也可按照1:1的比例分隔。基于内容本身,选择适当的分隔比例,以确保面板看上去均衡。

高亮一级面板中选中项。二级面板中内容是可变的,总是对应一级面板中选中项。这有助于用户理解面板之间关系。

每个分屏视图显示单独标题。对于屏幕中多个标题,用户很难找出当前内容。相反,显示单独标题,提供了一个视图对应关系框架。

当二级视图显示了一个内容集合,考虑使用一个聚焦的标题。当二级视图包含了重要内容,考虑在一级视图上显示标题,这样就有更多的空间用来显示内容。

输入区域是一个固定高度、带有圆角的单行文本框,在用户点击输入区域的时候可以自动调起一个键盘屏幕。通过使用输入框获取少量信息,例如电子邮件地址。

在应用中最小化文字输入。键入长段文本内容或是填写大量文字在AppleTV上是极为耗时的。减少输入并且考虑有效的收集展示信息,比如说带有按钮的形式。

文本框中的提示信息增强用户理解。当输入框内没有键入其他文字内容的时候,一个文本框可以展示占位文本–例如邮件地址或是密码。当占位提示文本内容足够清晰时,不要使用单独的标签来描述文本字段。

在条件允许的情况下,使用安全输入框。当你的应用需要获取一些敏感信息的时候,例如密码输入,尽量使用安全输入。

任何时候点击文本框都会自动弹起一个输入面板。屏幕风格由当时使用的输入设备决定。

线性面板。当用户使用Siri遥控器的触摸板时,线性的键盘会展现在屏幕上。这种风格优化了触控体验,使用户更快速更流畅的输入文字。

网格面板。当用户使用Siri遥控器以外的设备时,网格状的键盘会展现在屏幕上。内容布局会基于键盘类型自适应。

虽然你不能控制键盘屏幕风格,但是你可以指定键盘类型。

搜索屏幕是一个专用键盘屏幕,用来执行搜索输入操作。在此屏幕上,搜索结果将以可定制视图形式,显示在键盘下呈现。

允许用户使用近期搜索记录。用户经常在AppleTV上搜索重复内容。在用户开始输入前,通过在键盘下方罗列出流行或近期搜索结果,减少重复输入。

简化搜索结果。不提供需要大量滚动查看的冗长搜索结果列表。使信息易于获取,例如,将搜索结果分为多列,或呈现最匹配的搜索结果信息集合。

考虑让用户手动过滤搜索结果。如果可以,在搜索结果区域设置一个筛选区,以帮助人们方便快捷的过滤搜索结果。

应用特定的启动按钮可以包含一个标题和图标。

一般情况下,使用标题名称或图标来传达按钮的语义。由于按钮空间有限,为了避免拥挤和视觉复杂性,尽量不合并文本和图标。

明确标签和破坏性操作。如果点击一个按钮操作,导致不可逆转的结果,如删除内容,请确保这个按钮的指示性是非常明确的。使用明确描述的标签,如“删除”或相应的图标。在执行破坏性操作之前显示一个警告要求确认,也是很好的做法。

不要使用后退按钮。用户习惯于通过点击遥控器上的菜单按键带他们返回上一级界面或回到主菜单。除非你的应用有正当的理由去使用额外的后退按钮,尽量不要在你的页面上加入返回按钮。

使用简单、可识别图形作为按钮图标。在电视屏幕上,太多细节的图标很难解释。保持图标简洁更好的传达信息。有可能的话,使用通用图标帮助理解,例如放大镜图标代表执行搜索。

如果合适的话,在图标下方显示描述性文本。一个图标通常足够表达含义。但如果附加的文字描述提供了有用的信息内容,则把它放在按钮下方。

使用动词或动词短语来描述一个按钮的操作。以操作行为为特定标题,表示交互性,并且明确了单击该按钮时会发生什么。

确保按钮文本简短,重点突出。过长的文字可能被截断,从而使其难以阅读。

你可以在视窗的顶部增加一个导航栏,用来展示标题、导航按钮、以及其他交互元素。应用设置使用一个导航栏,导航栏的标题用来提供内容信息,让用户随时知道处于应用的哪个位置。

请注意透明度。导航栏默认就是透明的,所以所有在导航栏下面滚动的内容都是清晰可见的。确保导航栏里的交互元素不要与底下内容元素有所冲突。当内容滚动时,考虑把导航栏下的内容元素淡化,从视觉上将它们与导航栏上的元素区分开。

有些应用会把内容分散到多个页面上呈现,一个页面控制器可以清楚地告诉用户总共的页面数量,以及现在处于哪个页面。它的呈现方式就是有一连串小的空心的指示原点,可以从左边滑动到右边,同时呈现出页面数量及顺序。一个实心原点指示的是当前页面。视觉上来说,这些小点的间隔是相同的,如果点数太多的话,屏幕上会省略掉一部分。

页面控制器它本身是一个非交互的元素,只是作为信息呈现的功能使用。它并不真正的具有导航的作用-比如说,你不能点击一个小点去到一个特定的页面。相对应的,真正的页面之间的导航会使用其他的交互机制,比如说手势控制以及分离按钮的按压/点击。

请在完整的屏幕页面上使用页面控制器。当全屏页面的内容很多且是同级情况下,使用页面控制器。在页面间切换时,尽量避免使用额外的交互方式,保持用户注意力集中。

不要展示太多的页面。超过10个小点,用户很难让一眼就数过来;然后超过大约20页的话,用户查看起来就会非常耗时。如果你的应用需要展示超过20个同级页面时,请考虑使用不同的设计方式,比如网格,因为网格不需要按照既定顺序来导航。

不要让用户坐在那死盯着一个静止的屏幕,等待应用加载内容或者呈现冗长的数据处理操作过程。利用动态的指示图标还有进度指示条来让用户知道应用正在加载中,同时告诉他们还要等多久。

保证指示图标是动态显示的。用户会自然而然地将静止的活动图标(也就是本应该活动的东西)当作是死机的迹象,所以让那个小圈圈一直转着可以让他们知道应用正在运作。

进度指示条是用来显示可测量任务的加载进度的,表现为一条从左到右填充的轨迹。

分段控件是指一串线性排布的控件,每个控件都作为一个按钮来呈现不同的视图。分段控件包含两个或两个以上、统一比例的控件,单个控件包含了标题或图标。利用一个分段控件来提供功能联系非常紧密,但是又互不兼容的一些功能,比如说播放列表和唱片集。

考虑在屏幕上,将内容以控件形式分割成多个模块,帮助用户进行信息过滤。在分离模块环境下,用户操作导航定位和内容筛选时,会来得更加轻松。一个控件操作的难易程度,取决于该控件的放置位置。

控制好控件数量。超过7个控件就会使用户很难一眼分辨出来,而且在定位时也会变得非常费时。另外,尽量保证各个控件的大小与它所包含的内容匹配。因为所有的的控件是相同的宽度,如果一些控件里有内容,一些控件里没什么内容,这样看起来就不是很舒服。

避免把文本和图标混在一起。单独的控件可以包含文字标题或者图标,但是不要同时涵盖。最好避免在一些控件里使用文字标题,然后在其他控件里使用图标。否则,你的应用界面内容看起来就会非常多且琐碎。

如果要个性化定制控件的话,要更注重内容元素的排布,要保证内容排布看起来是合理的,尤其是居中的时候。

利用简单、可识别的图形来来作为控件图标。在电视屏幕上,太多细节的图标很难解释。保持图标简洁更好的传达信息。有可能的话,使用通用图标帮助理解。

使用短的,具有含义的名词作为控件标题。一个控件的标题清楚地传达出当控件被选中后,它所呈现的内容类型。一般来说,标题应该使用名词。

确保文本简短,重点突出。过长的文字可能被截断,从而使其难以阅读。

尽量减少提醒弹窗的使用。提醒弹窗会阻断用户体验,除非在非常重要紧急的情况下使用,比如执行毁灭性操作(删除等)、购买、或者出现问题需要告知用户时。提醒弹窗的不时出现会帮助用户对于当前动作提高注意力,设计者要确保每一个提醒都提供非常重要的信息以及有用的选择。

提醒标题使用多词。单个词的标题,比如说“看”或者“租”,很少能够提供有用的信息。

使用一个描述性的提醒标题,就可以代替文字段描述。用户在屏幕上所读取到的文字内容越少越好。考虑使用问问题的方式或者使用两个短句子来作为你的提醒标题,以此来避免增加附加文字段信息。

如果你必须要提供附加文字段提醒信息,保持精简,使用完整的句子。理想话来讲,要确保信息足够短,只需要在1行或者2行内展示,避免滚动查看,使用大写和合适的标点符号。

一般来说,使用含有两个按钮的提醒弹窗。提醒弹窗包含2个简单的选项。如果只有单个按钮,使得用户没有选择的余地;大于等于3个按钮就会增加操作的复杂性。提醒弹窗的按钮应该简洁明了,且标题具有逻辑性。按钮标题最好由1到2个描述结果的单词组成,以下是一些是在设计提醒弹窗按钮时的一些准则:

提醒弹窗的取消标签要易操作。取消提醒弹窗的按钮标签,应该足够明显,比如使用取消或撤销的字眼。

允许使用遥控器来取消提醒弹窗。按下遥控器上的菜单按钮可以产生与单击取消按钮一样的效果,也就是说,你按下遥控器上的菜单按钮也可以退出提醒。如果你的提醒弹窗没有一个取消按钮,可以考虑给你的菜单按钮添加退出提醒弹窗的代码。

===================================================================================================================

不知不觉UXRen社区官网已经一岁半了,在这里小编要感谢那么一如既往支持本站的油茶人。

UXRen.cn欢迎油茶人投稿,提供有价值的资讯、线索、点子及建议。

显示名称

网站网址

UXRen社区发轫于2009年6月,10多年积累成长为覆盖全球的用户体验从业者社区,会员数量超20万。

THE END
1.新手设计师必看的手机APP尺寸1、手机APP设计尺寸的重要性 在移动互联网时代,手机APP的用户体验至关重要,而设计尺寸的合理选择是确保良好用户体验的关键因素之一。不同的手机型号和操作系统有着各自的屏幕尺寸和分辨率,新手设计师需要了解这些尺寸规范,才能设计出适配各种设备的APP界面,避免出现界面显示不全、元素变形等问题,为用户提供清晰、美观、易https://www.bilibili.com/opus/1012258525352558599
2.数字APP图标常见尺寸与设计规范需要提醒的是,在图标设计中请用栅格化系统进行设计。 如果设计尺寸为1024 x 1024 px,尽可能的采用黄金比例设计。能让图标得到更好的显示效果。 二、手机APP设计规范 指对整套APP界面进行视觉设计UI风格的统一,对界面元素的样式、颜色、图标按钮和大小设定统一的规范和使用原则。方便以后协调合作和APP视觉迭代。 APP界https://wenku.baidu.com/view/2e91cb3af4ec4afe04a1b0717fd5360cba1a8d9d.html
3.做图标设计一些常用的设计规范分享应用程序图标设计是将某个概念转换为清晰易读的图形,从而降低用户的理解成本,提高界面的美感。在我们的企业级应用设计范围内,应用图标在界面设计的许多元素中往往只占很小的比例,调用时会缩小到比设计稿小很多倍的尺寸。此外,图形材料极其丰富,易于获取,在产品设计体系中实现一套美观、一致、易用、易于延伸的应用图标https://blog.csdn.net/weixin_44070413/article/details/134040278
4.iOSAPP图标icon尺寸规范,收藏篇!功能图标设计规范虽然图标在应用程序APP界面中的占据不大,但对用户体验产生的影响不容小觑。APP图标尺寸设计的效果,通常直接决定着用户的去留问题。APP图标尺寸是用户能直接感知的,优质的iOS APP图标尺寸往往会留住一大批用户。一篇完整且清晰的iOS APP图标尺寸规范,便成为设计师设计优质iOS APP图标的帮手。 http://www.zzfmdn.com/article/1348310
5.app图标设计尺寸规范(ui图标大小规范)知识库主题:app图标设计尺寸规范(ui图标大小规范)图标设计流程 1.定义主题。定义主题是指把要设计的图标所https://bbs.openke.cn/thread-1333475-1-1.html
6.IOS和Android图标尺寸牛APP说刚开始接触UI的时候,碰到的最多的就是尺寸问题,今天我们就来谈谈IOS和Android 图标设计尺寸吧! 一、IOS篇 1.iOS app图标的圆角半径是多少? (注:现在IOS图标是不需要再画圆角了,直接方形就OK) 比较精确和接近的圆角半径和图标尺寸如下:最右边表示圆角半径 Icon1024.https://www.cnblogs.com/aapps/archive/2004/01/13/6226466.html
7.APP图标设计的尺寸和分辨率/有何标准?在这个手机不离手的时代,APP图标设计无疑成为了每个应用赢得用户首印象的头号战士。作为一名自诩精通互联网技术的文章作者,我自然不能放过为各位揭开APP图标设计中尺寸与分辨率神秘面纱的机会。 首先,标准尺寸是个啥?说白了,就是那些聪明的设计大咖们为了让我们的眼球在看到那些小巧玲珑的APP图标时不至于眼花缭乱而精心http://www.apppark.cn/t-50962.html
8.android手机APP里面的图标设计尺寸是多少?一般来说,安卓手机APP图标的设计尺寸应该在48x48dp、72x72dp或者96x96dp之间。这些尺寸可以保证在不同https://ask.zol.com.cn/x/22273959.html
9.手机app图标icon设计对于App Store,创建一个1024x1024 像素版本的 watch OS 应用图标。其他特定尺寸自定义应用程序app图标尺寸如下所示,所有大小值都是@2x。 如果你有配套的 iPhone 应用程序,还需要提供以下尺寸的 watch OS 应用程序app图标: 3. app图标icon设计总结 掌握好app图标icon设计有助于我们正确设计图标,并与前端工作人员做https://pixso.cn/designskills/shoujitubiao/
10.手机图标ui设计尺寸:ui设计app图标尺寸规范Android APP LOGO尺寸 android 启动图标的尺寸大小和圆角半径大小规范720*1280px的安卓设计界面对应的启动图标尺寸是96px*96px圆角约等于18px1080*1920px的安卓界面设计对应的一个Alpha 通道透明的32位 PNG 图片。由于安卓设备众多,一个应用程序图标需要设计几种不同大小,如: LDPI (Low Density Screen,120 DPIhttps://www.pianshen.com/article/57171625368/
11.2016APP界面视觉设计尺寸规范大全精选app模板 平面素材 图标 插画 平面图形 背景图 字体 mockups样机 UI 样机 包装样机 服装样机 动画样机 插件 PS动作 LR预设 图层样式 笔刷 Procreate笔刷 设计插件 前端资源 Wordpress模板 3d模型 视频教程 设计文章 UI 交互 网页 平面 工具 灵感 教程 其它 设计规范 设计规范 设计尺寸规范 屏幕尺寸规范 iOS 12https://www.25xt.com/appsize
12.手机APP原型设计尺寸规范大全图标尺寸的大小基本就是上面提到的导航栏和标签栏图标的手机 APP 原型设计尺寸了,比较随机。 但要注意的是:手机 APP 移动端的图标原型设计每行同时显示的图标数目不要超过 5 个,一般是 4-5 个,也有 3 个的。图标之间的布局要注意宽度适中,每组图标在手机 APP 原型设计上要均匀合理的分布。 https://js.design/special/article/mobile-app-prototyping-size.html
13.android13启动页图标安卓启动图标设计尺寸App 的桌面图标会被运用在很多不同的地方,比如手机桌面、APP store、手机的设置列表,所以 app 桌面图标需要很多个不同尺寸的切图输出。两个平台对应的桌面图标设计输出尺寸也不尽相同,在输出的时候要把双平台的尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可,手机系统会自动生成圆角效果。 https://blog.51cto.com/u_16099298/11617511
14.百度文心一言app图标全解析:设计之美与功能之韵这种良好的尺寸适应性确保了用户无论在任何设备上使用百度文心一言app,都能获得一致的视觉体验。 五、图标与品牌形象的关联 作为百度旗下的一款人工智能应用,百度文心一言app的图标设计也与百度的品牌形象紧密相连。图标中的“言”字与百度的“搜索”基因相呼应,体现了百度在人工智能领域的持续创新和探索论文ai率怎么https://www.skycaiji.com/aigc/ai14003.html
15.新手如何设计App的图标Logo?想要设计一款App图标logo,却不知道从何下手,也不清楚尺寸规范。针对新手,如何快速搞定app logo图标设计?借助在线设计LOGO神器,今天和大家分享移动App 的logo图标设计,现学现用容易上手的4个小套路! 1.品牌名称的首字母/汉字 提取品牌的首字母进行设计,是App图标最常用的形式,结合产品类型和业务定位,借助英文字母天生https://www.uishe.cn/113204.html
16.AI图标生成器在线生成原创Logo图标和AppIcon设计 生成好的图标可以在线设计logo吗? 当然可以,除了下载到本地外,你还可以点击前往标小智Logo在线编辑器,一键转矢量添加logo文字,生成专业的logo下载。 AI生成的图标可以商用吗? 你所生成的图标版权属于你,下载后可以自由使用,其中包括商业使用权。 https://www.logosc.cn/icon-generator
17.从零开始设计一款APP之Android设计规范篇优设网② 大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。 ③ 用主流尺寸来做设计稿尺寸,极大的提高了视觉还原和其他机型适配。 所以做安卓设计稿时请以1080x1920px来做设计稿 (sketch用户以540 x 960来做设计稿) 界面设计控件尺寸: 4. 安卓图标尺寸 https://www.uisdc.com/android-design-guideline-in-app
18.移动应用界面设计的尺寸规范「建议收藏」腾讯云开发者社区d、通知图标 如果app有通知,要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x24 dp ,图形实际区域为 22 x22 dp 。 注:android规范提供的尺寸单位是dp,若设计稿尺寸设为720 x 1280 ,图标大小需在规范要求的尺寸数字上乘以2。比如操作栏图标32 x 32 dp ,则设计稿上应该是64 x 64 px 。 https://cloud.tencent.com/developer/article/2030078
19.最新iOS设计规范八3大图标和图像规范(IconsandImages)请注意,APP图标只能根据用户的请求进行更改,并且系统始终会向用户提供此类更改的确认。 提供所有尺寸并且视觉上一致的备用图标。与主应用程序图标一样,每个备用图标都作为一组大小不同的相关图像提供。当用户选择备用图标时,该图标的相应大小将替换主屏幕、Spotlight和系统等其他位置的图标。 https://wap.peopleapp.com/article/rmh20689155/rmh20689155
20.iOS和安卓手机的APP图标尺寸规范和图标命名规范安卓手机的APP图标尺寸规范跟命名规范如下信息图。 android图标规范信息图包含了安卓程序启动图标、安卓底部菜单图标、安卓弹出对话框顶部图标、安卓长列表内部列表项图标和安卓底部或顶部tab标签图标。非常齐全。 1. 安卓程序启动图标:ldpi (120 dpi) 小屏mdpi (160 dpi) https://www.douban.com/note/405510581
21.androidappicon图标大小尺寸Android应用程序图标 (Icon)应当是一个 Alpha 通道透明的32位 PNG 图片。由于安卓设备众多,一个应用程序图标需要设计几种不同大小。 在android程序中,在drawable中设置好图标后,但结果在小米2可没有显示出来,但在我自己的htc中和模拟器中显示正常。后来发现小米的dpi不一样。 https://www.jb51.net/article/84853.htm