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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
苹果电视 tvOS UI设计规范总结 (四)视觉设计
0.0°
2017-01-26 自译外文 教程 原作者: 未知 举报 5855 36 23 2

(一)概述

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

(三)用户交互

(四)视觉设计

(五)图标和图像

(六)界面元素

(七)资源


布局

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

Image title


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


网格


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


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


Image title


3栏网格

内容宽度:548像素

水平间距:48像素

垂直间距:100像素


5栏网格

内容宽度:308像素

水平间距:50像素

垂直间距:100像素


6栏网格

内容宽度:250像素

水平间距:48像素

垂直间距:100像素


9栏网格

内容宽度:148像素

水平间距:51像素

垂直间距:100像素


如果你使用UIKit提供的内容流的集合样式,网格栏数会根据内容的宽度和间距自动确定。


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


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


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


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


布局模板


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


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

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

Image title



字体排版

San Francisco是Apple TV的系统字体。这个字体有两个变体:San Francisco Text 和 San Francisco Display,在大屏幕上易读性都很高。

Image title



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


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


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


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


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

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


纹理

在整个系统中,柔软,细腻,半透明纹理出现在窗口和覆盖传达深度和层次结构感。这些设计也给用户有方位感,不会分心。纹理设计有多种颜色和各种情况。

Image title


未完待续.......

导航链接:

(一)概述

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

(三)用户交互

(四)视觉设计

(五)图标和图像

(六)界面元素

(七)资源



更新:2017-01-26

收藏

36人已收藏

AaronGuo

www.naoda.net有飘于天际的梦想,才让清晨载满希望。

  • 52

    作品

  • 243

    粉丝

  • 18

    关注

  • 目前最全的Sketch快捷键大全
  • UI适配的那些事(更新版) !
  • IOS11人机交互指南详解
  • 2018欧洲展宣传设计

    猜你喜欢

      2017-01-26 自译外文 教程 原作者: 未知 举报 5855 36 23 2

      苹果电视 tvOS UI设计规范总结 (四)视觉设计

      0.0°

      你确定要举报苹果电视 tvOS UI设计规范总结 (四)视觉设计

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年01月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      23
      36
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录