最新iOS设计规范七10大视觉规范Vi

发布时间:2021-9-19

北京中医白癜风怎么样 https://baijiahao.baidu.com/s?id=1683497115202268129&wfr=spider&for=pc
iOS是运行于iPhone、iPad和iPodtouch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率,保证用户良好的体验。本文是iOS设计规范系列第7篇,介绍视觉设计(VisualDesign)。0大视觉规范(VisualDesign)

一、适应性布局(AdaptivityandLayout)

人们通常希望能够在所有设备上和任何环境下使用自己喜欢的应用程序。在iOS应用中,您可以配置界面元素和布局,以在iPad上执行多任务处理时,在拆分视图中,在屏幕旋转时以及在其他设备上自动更改形状和大小。设计一个适应性强的界面在任何环境下都提供出色的体验非常重要。

设备屏幕尺寸和方向

iOS设备具有各种屏幕尺寸,可以纵向或横向使用。在iPhoneX和iPadPro等边对边设备中,显示屏的圆角与设备的整体尺寸非常匹配。其他设备(例如iPhoneSE和iPadAir)具有矩形显示屏。

如果您的应用在特定设备上运行,请确保该应用在该设备的所有屏幕尺寸上运行。换句话说,仅iPhone应用程序必须在每个iPhone屏幕尺寸上运行,而仅iPad应用程序必须在每个iPad屏幕尺寸上运行。

自动布局

自动布局(AutoLayout)是一种构建自适应接口的开发工具。使用“自动布局”,你就可以定义控制APP中内容的规则(称为约束)。例如:无论可用的屏幕空间多大,你都可以约束一个按钮,使其始终水平居中并定位在距离图像下方8pt的位置。

当检测到某些环境变化(称为特征)时,自动布局会根据指定的约束自动调整布局。你可以将APP设置为动态适应各种特征,包括:

不同的设备屏幕尺寸,分辨率和色域(sRGB/P)

不同的设备方向(纵向/横向)

拆分视图

iPad上的多任务处理模式

动态类型文本大小更改

基于区域设置启用的国际化功能(从左到右/从右到左的布局方向,日期/时间/数字格式,字体变化,文本长度)

系统功能可用性(DTouch)

布局指南和安全区域

布局指南中定义的矩形区域实际上在屏幕上不可见,但有助于内容的定位,对齐和间距。该系统包括预定义的布局指南,可轻松在内容周围应用标准边距并限制文本的宽度,以实现最佳的可读性。您还可以定义自定义布局指南。

遵守UIKit定义的安全区域和布局边距。这些布局指南可确保根据设备和上下文进行适当的插入。安全区域还可以防止内容重叠在状态栏,导航栏,工具栏和选项卡栏上。系统提供的标准视图将自动采用安全区域布局指南。

尺寸类型

尺寸类型是根据大小自动分配给内容区域的特征。系统定义了两个尺寸类型,常规/Regular(表示扩展空间)和紧凑/Compact(表示约束空间),它们用来描述视图的高度和宽度。

视图可能包含尺寸类型的任意组合:

常规宽度,常规高度

紧凑宽度,紧凑高度

常规宽度,紧凑高度

紧凑宽度,常规高度

iOS会根据内容区域的尺寸类型动态地进行布局调整。例如:当垂直尺寸类型从紧凑高度变为常规高度时,可能是因为用户将设备从横向旋转到纵向,标签栏可能会变得更高。

.设备尺寸类型。根据屏幕尺寸,不同尺寸类别组合适用于不同设备上的全屏体验。

.多任务尺寸类型。在iPad上,当应用程序在多任务配置运行时,尺寸类型也适用。

布局注意事项

确保主要内容以其默认大小清晰可见。用户没有必要通过水平滚屏来阅读重要文本,或者放大才能查看主要图像,除非用户自己选择改变尺寸。

在整个APP中保持整体一致的外观。通常,具有相似功能的元素应该看起来是相似或者统一的。

使用视觉重量和平衡来传达重要性。大的元素吸引眼球,而且看起来比较小的元素更重要。较大的元素也更容易点击,这对于处在极易分散用户注意力环境下的APP尤为重要,例如用户在厨房或健身房。

通常将主要内容或元素放置在屏幕的上半部分中,并在从左至右的阅读习惯中放置在屏幕的左侧附近。

保持对齐让用户浏览更简单,并传达组织和层级关系。对齐使APP看起来整洁有序,用助于用户在滚动时集中注意力,并使查找信息变得更加容易。缩进和对齐还可以表明内容之间的关系。

如果可以的话,同时支持纵向和横向。用户更喜欢在不同的方向使用APP,因此最好是你能能够满足用户这种期望。

做好更改文本大小的准备。用户希望大多数APP在设置中选择不同的文本大小时都能做出响应。若要适应某些文本大小的更改,你可能需要调整布局

为可交互元素提供充足的点击热区。将所有控件的最小可触碰区域保持在44ptx44pt。

在多个设备上预览你的APP。你可以使用模拟器(Xcode附带)预览你的APP,来检查裁剪以及其他布局问题。如果你的APP支持横向模式,不管设备是左旋转还是右旋转,都要确保你的布局看起来很棒。

在较大的设备上显示文本时,应留有可读性页边距。这些边距使文本行足够短,以确保舒适的阅读体验。

适应上下文的变化

在上下文变化期间确保聚焦在当前内容。内容是APP中优先级最高的。在上下文变化时改变焦点可能会令人迷茫和沮丧,并且可能让用户觉得他们失去了对APP的控制。

避免不必要的布局更改。当有人旋转设备时,整个布局无需更改。例如,如果您的应用在纵向模式下显示图像网格,则不必在横向模式下显示与列表相同的图像。相反,它可能只是调整网格的尺寸。尝试在所有情况下保持可比的体验。

如果必须让您的应用仅横向运行,则左右两种方向必须同时支持。无论用户向左或向右旋转设备,纯横向应用程序都应运行良好。当用户使用您的应用程序时,不要告诉他们旋转设备。如果当有人以不受支持的方向握住设备时您的应用程序不会自动旋转,那么他们会本能地知道如何旋转设备。

根据上下文自定义APP对旋转的响应。例如,一款允许用户通过旋转设备来移动角色的游戏,可能不应在游戏过程中切换方向。但是,它可以基于当前方向显示菜单和介绍序列。

考虑同时支持iPad和iPhone。用户希望能在两种类型的iOS设备上都能使用您的应用程序。如果应用程序的某些功能需要iPhone专用的硬件(例如电话),请考虑在iPad上隐藏或禁用这些功能,并让用户使用您应用程序的其他功能。

图稿在不同设备显示时,请注意宽高比的差异。不同的屏幕尺寸可能具有不同的宽高比,从而导致图稿出现被裁剪,出现字母框或竖框的现象。确保在所有尺寸的显示器上都保留重要的视觉内容。

设计全屏体验

扩大可视元素以填满屏幕。确保背景延伸到显示器的边缘,并且垂直方向可以滚动的布局(如表和集合),一直延伸到底部。

避免在屏幕底部和角落放置交互式控件。用户通常在屏幕底部边缘用滑动手势来访问主屏幕和应用切换器等功能,这些手势可能会取消你在该区域实现的自定义手势。而且屏幕的边角可能是用户难以触及的舒适区域。

插入必要内容,以防止被剪切。通常内容应居中且对称地插入,以使其在任何方向上都不会被圆角夹住、不会被传感器外壳隐藏以及不会被访问主屏幕的指示器遮盖。为了获得最佳结果,请使用系统提供的标准界面元素和“自动布局”来构建您的界面,并遵守布局指南和安全区域定义。当设备以横向放置时,可能适合某些应用程序(例如游戏)将可点击的控件放置在屏幕的下部(在安全区域下方延伸),以便为内容留出更多空间。将控件放在屏幕的顶部和底部时,请使用匹配的插图,并在“Home”指示器周围留出足够的空间,以便人们在尝试与控件进行交互时不会意外地将其作为目标。由于“Home”指示器仍在屏幕上居中,因此它相对于应用程序界面的位置可能会发生变化。

插入全角按钮。延伸到屏幕边缘的按钮可能看起来不像按钮。遵守全角按钮两侧的标准UIKit边距。屏幕底部出现一个全角按钮时,如果该按钮具有圆角并与安全区域的底部对齐,则该按钮最佳,这也确保了它与“Home”指示器不冲突。

对于关键的显示功能,不要掩盖或特殊强调。请勿尝试通过在屏幕顶部和底部放置黑条来隐藏设备的圆角、传感器外壳或用于访问主屏幕的指示器。也不要使用诸如括号、边框、形状或说明文字之类的视觉装饰来引起对这些区域的特别注意。

注意状态栏的高度。全屏iPhone型号的状态栏比其他型号高。如果你的APP采用固定的状态栏高度将内容定位在状态栏下方,则必须更新APP以便于根据用户的设备来动态的定位内容。请注意,当诸如录音和位置跟踪之类的后台任务处于活动状态时,全屏iPhone上的状态栏不会更改高度。

如果你的APP当前隐藏状态栏,请重新考虑全屏iPhone的隐藏与否。与旧款iPhone相比,全屏iPhone的内容垂直空间更大,状态栏占据了你APP可能根本无法充分利用的屏幕区域。状态栏还显示用户认为有用的信息。它只在可以换取附加价值的时候才隐藏起来。

允许自动隐藏指示器以防误点入主屏幕。启用自动隐藏后,如果用户几秒钟未触摸屏幕,指示灯就会淡出。当人们再次触摸屏幕时,它会重新出现。此行为仅适用于被动观看体验,如播放视频或照片幻灯片。

二、动画(Animation)

整个iOS系统中的精美微妙的动画使人与屏幕上的内容之间建立了视觉上的联系。如果使用得当,动画可以传达状态,提供反馈,增强直接操纵的感觉,并帮助用户可视化其动作的结果。

明智地使用动画和运动效果。不要为了使用动画而使用动画。过多或不必要的动画会使人感到与外界分离或分散注意力,尤其是在无法提供身临其境的体验的应用程序中。iOS使用运动效果(例如视差效果)在主屏幕和其他区域创建深度感。这些效果可以增加理解和乐趣,但是过度使用它们会使用户感到迷惑并且难以控制。如果要实现运动效果,请始终测试结果以确保效果良好。

确保动画符合现实且可靠。人们倾向于接受充满艺术的东西,但动画没有意义或似乎违反物理法则时,他们会感到迷失方向。例如:如果有人通过从屏幕顶部向下滑动来显示视图,他们应该也能够通过向上滑动来消除视图。

使用一致的动画。熟悉、流畅的体验会让用户更投入。他们习惯于iOS中使用的微妙动画,例如平滑过渡、设备方向的流畅转换和基于物理的滚动。除非你是创建沉浸式体验,例如游戏,否则你的自定义动画应与系统的内置动画差不多的。

将动画设置为可选。在辅助功能首选项中启用减少动画的选项时,你的APP应该最小化或消除动画。

三、品牌(Branding)

成功的品牌塑造不仅仅是将品牌资产添加到APP中,还通过智能字体、颜色和图像决策来表达独特的品牌标识。在APP的上下文中提供足够的品牌资产,但不要太多,这会让人分心。

自然精致的融合,而不张扬。用户是用你的APP来娱乐、获取信息或完成任务,而不是观看广告。为了获得最佳体验,请将你的品牌巧妙地融入到APP的设计中。例如:在整个界面上下文中贯穿APP图标的颜色,就是一个很好的方法。

不要让品牌妨碍出色的应用设计。最重要的是,让你的APP看起来像一个iOS应用程序。确保它直观、易于导航、易于使用,并专注于内容。即使你的APP在其他平台也可以使用,也要避免通过过分

转载请注明:http://www.ubhdw.com/bfbz/11049.html s

网站简介 | 发布优势 | 服务条款 | 广告合作 | 隐私保护 | 版权申明 | 网站地图

乘车路线:18路、112路、43路、30路、36路、45路 电子邮箱: lidekdfq@163.com
版权所有:手足徐动型