您好,欢迎访问三七文档
超人的电话亭iOS11视觉规范第一大章第一大章预览+应用架构1.1原则iOS设计原则作为一名 App 设计师,你就有机会发布一款能够登上 AppStore 榜首的卓越产品。为此,你的应用在质量和功能上必须精益求精。iOS 与其他平台不同,主要是下面三大原则:•清晰:整个系统中,任何字号的文字都必须清晰易读,图标表答含意/115超人的电话亭iOS11视觉规范第一大章准确易懂,修饰恰到好处,以功能驱动设计。留白、颜色、字体、图形和其他界面元素能够巧妙地突出重点内容并传达交互性。•顺应:流畅的动效和清晰美观的界面有助于用户理解内容并与之交互,且不会干扰用户。当内容占据整屏时,半透明和模糊处理通常会暗示其他更多的内容。减少使用边框、渐变和阴影,使界面尽可能轻量化,从而突显内容。•纵深:清晰的视觉层和生动的动效赋予界面层次感,使其富有活力并有助于理解。使可触发界面元素更容易被找到能提升体验的愉悦感,让用户在触发相应功能或者获取更多内容时不至于茫然无措。当用户浏览内容时,流畅的过渡能够提供纵深感。设计原则要想扩大影响力和延展性,在你设计App时,请牢记以下原则:整体美感:整体美感体现在一款App的视觉外观、交互行为与其功能结合的优异程度。例如,一款协助用户完成重要任务的App应该使用不易察觉且不会造成干扰的图形、标准化控件和可预知的交互行为,从而使用户聚焦在任务本身。反之,一款沉浸式体验的App(如游戏),需要提供一个有吸引力的界面,在鼓励用户探索的同时为用户带来无穷的乐趣和激动。反馈:/215超人的电话亭iOS11视觉规范第一大章反馈能够响应交互操作,呈现结果,便于用户了解情况。系统自带的 iOS 的App对用户的每个操作都提供了明确的反馈。•交互元素在点击时会被高亮显示•进度指示器显示了需要长时间运行的操作进度•动效和声音使用户能够更清晰地感知交互行为的结果隐喻:当一个 App的虚拟对象和行为与用户所熟悉的体验相似时——无论这种体验来源于现实生活亦或是数字世界,用户就能够更快速地学会使用这款App。隐喻在iOS中能够起作用是因为用户与屏幕在进行物理上的交互。•可以通过移动分层视图来显示被遮挡的内容•可以拖拽并滑动对象•可以切换开关,移动滑块,滚动数值选择器•可以通过轻扫来翻阅书籍和杂志用户控制:在iOS中,用户是决策者,而不是App。App可以对用户行为提出建议,对可能造成严重后果的行为发出警告,但不应该直接替用户做决策。优秀的App 在用户主导和避免不想要的结果之间找到平衡。为了让用户拥有掌控性,App可以使用用户熟悉且可预知的交互元素,让用户二次确认破坏性的行为,并且保证可以停止正在执行中的操作。/315超人的电话亭iOS11视觉规范第一大章1.2iPhoneXiPhoneX拥有一个巨大、高分辨率、圆角的无边框屏幕(edge-to-edgedisplay),它在沉浸式和内容丰富性上提供了前所未有的体验。屏幕尺寸在竖屏中,iPhoneX显示屏的宽度与4.7英寸的iPhone6、iPhone7和iPhone8一致。但是iPhoneX显示屏比4.7英寸显示屏高145 pt,为内容增加了大约20%的垂直空间。/415超人的电话亭iOS11视觉规范第一大章 为App中的所有设计创作提供高分辨率的切图。 iPhoneX拥有比例系数为 @3x 的高分辨率显示屏。对于符号、字体和其他平面矢量图形,昀好提供与分辨率无关的 PDF文件。对于栅格化的位图,提供它的@3x和@2x版本。请参阅图像大小和分辨率以及自定义图标。布局(Layout)在iPhoneX上设计App时,你必须确保布局内容填满屏幕,并且不会被设备的圆角、传感器外壳或用于访问主屏幕的指示器所遮挡。竖屏 横屏1125px×2436px(375pt×812pt@3x) 2436px×1125px(812pt×375pt@3x)/515超人的电话亭iOS11视觉规范第一大章大多数使用系统原生UI组件的App能自动适应设备的新外形。当背景扩展到显示屏的边缘时,这些 UI组件能被适当地进行配置和重新定位。(译者注)iPhoneX也能很好的适应具有自定义布局的App,尤其是在你的 App 使用/615注:如下图中iPhone6的界面在X中被自动放大和扩展了超人的电话亭iOS11视觉规范第一大章响应式布局并遵守安全区域和边缘布局指南。在iPhoneX上预览你的App:你可以使用 Simulator(包括Xcode)来预览App,并检查截断和其他布局问题。不过,某些功能(如广色域图像)昀好能在实际设备上预览。提供全屏体验: 确保背景扩展到显示屏的边缘,并且是垂直可滚动的布局,如列表视图和照片精选页面,可以一直延伸到底部。嵌入的重要内容要防止被裁切:一般来说,内容应该是居中对称的,这样它从任何方向看起来效果都很好,不会被圆角、设备的传感器外壳截断或被用于访问主屏幕的指示器遮挡住。为获得昀佳效果,请使用系统自带的界面元素和响应式布局来创建你的界面。所有 App 都应遵循 UIKit定义的安全区域和布局边距,这些区域可以根据设备和上下文进行适当的填充。安全区域还可以防止状态栏、导航栏、工具栏和标签栏被内容覆盖。注意状态栏的高度:在iPhoneX上,状态栏比其他 iPhone 要高。如果你在自己的App中自定义了一个位于状态栏下方的固定元素,则必须更新你/715超人的电话亭iOS11视觉规范第一大章的App 才能根据用户的设备动态地定位该元素。(译者注)请注意,当后台任务如录音和定位,处于激活状态时,iPhoneX上的状态栏高度不变。如果你的App目前隐藏了状态栏,在iPhoneX上需要重新考虑这一设定:状态栏会占据屏幕的一块区域从而导致 App 无法充分利用这部分空间,但由于状态栏可能会显示对用户有用的信息,并且相比于4.7英寸的iPhone,iPhoneX的显示屏在竖向上能显示更多内容,因此,应当重新考虑是否要隐藏iPhoneX上的状态栏。4.7英寸设备全屏图像iPhoneX裁切模式LetterboxingoniPhoneX/815注:例如考虑到本来状态栏是20pt,考虑到它的占用空间你自定义了一个距离顶部20pt的Banner,那么在因为iPhoneX的状态栏更高可能就会导致原本正好的模块边缘出现挤占超人的电话亭iOS11视觉规范第一大章iPhoneX全屏图像Croppingona4.7devicePillarboxingona4.7device在 4.7英寸iPhone和iPhone X重复使用现有设计创作时,请注意两种屏幕的长宽比差异。由于 iPhoneX 的长宽比不同于 4.7 英寸的 iPhone, 所以在 4.7 英寸iPhone上全屏显示的图稿,在iPhoneX上全屏显示时会被裁剪或产生信箱模式。同样,在iPhoneX上全屏显示的图稿,在4.7英寸iPhone上全屏显示时会被裁剪或信筒模式。请确保重要的内容在两种尺寸的设备上都能完整显示。不要将交互式控件放置在屏幕底部和角落:如果放置在屏幕底部,由于用户要使用显示屏底部的滑动手势来访问主屏幕和切换App程序,这些手势可能会使你在此区域中设置的自定义手势失效。如果放置在屏幕上方的两个角落,则用户不能够轻易触及,从而给操作带来不便。不要隐藏或使关键的显示特性太醒目。不要在屏幕顶部和底部放置黑色区块来隐藏设备的圆角、传感器外壳和用于访问主屏幕的指示器。不要使用诸如括号,边框,形状或引导文字等视觉装饰来使这些区域更加醒目。允许自动隐藏访问主屏幕的指示器:当启用自动隐藏时,如果用户几秒钟内/915超人的电话亭iOS11视觉规范第一大章没有触摸屏幕,指示灯将被隐藏。当用户再次触摸屏幕时,指示灯会再次出现。这种行为只适用于被动观看体验吗,如播放视频或照片幻灯片。请参阅适应性和布局颜色iPhoneX的显示器支持P3色彩空间,它能够提供比 sRGB更丰富、更饱和的颜色。使用广色域来增强视觉体验。广色域的照片和视频看起来会更加逼真,广色域的数据可视化和状态指示器更有视觉冲击力。请参阅颜色管理。视频系统提供的视频播放器有两种查看模式:全屏和适应屏幕。默认情况下,系统根据视频的长宽比匹配观看模式,用户可以在暂停时切换模式。对于开发人员指导,请参见 AVPlayerViewController。全屏查看模式。视频等比拉伸填充显示屏。可能会出现屏幕被裁切的情况。这是宽比例视频的默认查看模式(2:1通过2.40:1)。对于开发人员指导,请参阅resizeAspectFill。适应屏幕查看模式。整个视频在屏幕上可见。将会发生呈宽屏显示或呈柱状/1015超人的电话亭iOS11视觉规范第一大章显示。这是标准视频的默认观看模式(4:3,16:9,任何高达2:1)和超宽视频(任何超过2.40:1)。对于开发人员的指导,请参见 resizeAspect。确保自定义视频播放器是用户所期待的。我们的目标是在iPhone x上播放视频时默认全屏,然而,如果在全屏的情况下被裁切过多的画面,视频应该缩小以适应屏幕。你还应该允许用户在全屏和基于个人喜好的屏幕模式上切换对于开发人员指导,请参见 AVPlayerLayer。总是显示视频内容的原始长宽比。如果你的视频内容嵌入到指定的呈宽屏显示或呈柱状显示比例中,iOS将无法根据用户选择的观看模式来正确地缩放视频。视频嵌入边框中会使它在全屏模式和适应屏幕模式中显得更小。它还会让视频在全面屏、非全屏环境中不能正确显示,比如在iPad上的图片模式。/1115超人的电话亭iOS11视觉规范第一大章手势iPhoneX上的显示屏可以通过屏幕边缘的手势操作来访问主屏幕、App切换、通知中心和控制中心。不要干扰系统自带的屏幕边缘手势:用户依靠这些手势在每个App中进行操作。在极少数情况下,沉浸式App(如游戏)自定义的屏幕边缘手势能优先于系统自带的手势——第一次滑动会调用App自定义的手势,而第二次滑动则会调用系统手势。应当谨慎采取这种交互方式(称为边缘保护),因为它会让用户难以使用系统手势。请参阅手势。额外的设计注意事项/1215超人的电话亭iOS11视觉规范第一大章使用正确的身份认证方式:iPhoneX支持人脸身份识别。如果你的 App集成了 ApplePay或其他系统身份认证功能,请不要在 iPhoneX上使用 TouchID。同样,请确保你的 App 不会在支持TouchID的设备上使用 FaceID。请参阅验证。不要提供与系统键盘相重复的功能:在iPhoneX上,即使使用自定义键盘,Emoji/Globe按钮和Dictation按钮也会自动出现在键盘上。你的App不能影响这些按钮,因此不要重复使用它们,造成混乱。请参阅自定义键盘。资源(Resources)在 资源 中下载 Photoshop和Sketch格式的iPhoneXUI设计模板。/1315超人的电话亭iOS11视觉规范第一大章1.3iOS更新内容在 iOS11中,你可以开发比以前更强大、更友好的 App。增强现实:通过增强现实,App 可以提供完美融合虚拟场景与现实世界的沉浸式体验。更醒目的导航栏:为了提高浏览和搜索时的清晰度和语义,App能够提供包含大字号、粗体标题的导航栏。更清晰的图标:填充图形和较粗的描边笔画可以使图标保持较小的形体,并且更能得到凸显。请参阅 自定义图标 和 系统图标。拖拽:拖拽功能允许用户使用一根手指将选定的照片、文本和其他内容从一个位置移动到另一个位置——甚至能够在 iPad上的 App 之间移动。FaceID和TouchID:你的App可以集成系统的生物识别安全系统,为用户提供安全可靠且值得信任的身份验证方式。近距离无线通讯(NFC):在支持 NFC 功能的设备上运行的 App,可以无线读取连接到真实世界的电子标签数据。安全区域布局指南:遵照系统的安全区域,确保内容被恰当地插入到布局中,并防止状态栏、导航栏、工具栏和标签栏被内容覆盖。字体变化:增加文字的大小和字重能提高整个系统的可读性。除了标准的动/1415超人的电话亭iOS11视
本文标题:iOS11规范
链接地址:https://www.777doc.com/doc-4012209 .html