iOS系统设计规范

一、基本概念

逻辑像素:

逻辑像素的单位是 PT,它是按照内容的尺寸计算的单位。比如 iPhone 4的逻辑像素是480x320pt。但是由于每个逻辑的点因为视网膜屏密度增加了一倍,即1pt=2px,那么其实 iPhone 4的物理像素是960x640px。

物理像素:

又称设备像素,它是按照像素格计算的,在同一个设备上,它的物理像素是固定的,这是厂商在出厂时就设置好了的,即一个设备的分辨率是固定的。物理像素的单位就是我们常说的 pixel,简写成 PX,它是按照像素格计算的单位。

PPI:

PPI(pixels per inch)指的是屏幕分辨率的单位,表示的是每英寸显示的像素密度。屏幕的 PPI 值越高,那么这个屏幕每英寸能容纳的像素颗粒也就越多,那这个产品的画面的细节度也就越丰富。PPI 值大于300一般我们就无法用肉眼察觉出屏幕上的「马赛克」格子了。但是如果屏幕很大,那么需要呈现视网膜屏的 PPI 值也需要更大,所以 iPhone Plus 系列的 PPI 值比 iPhone6/7/8要大。PPI 在我们设计的工作中其实关系不大,但理解它对于帮助我们理解为什么 iPhone4比 iPhone3GS实际像素大一倍有帮助。

IPhone 手机尺寸

二、启动

提供启动屏幕。设计一个类似于应用程序屏幕且不会引起人们注意的启动屏幕,同时允许加载初始内容,给人应用程序快速响应的印象。

避免事先询问设置信息。为大多数用户设计以用程序,让少数需要不同配置的用户调整设置以满足他们的需要,尽可能从设备设置和默认设置,或通过同步服务获取设置信息。如果必须询问设置信息,在人们首次打开应用程序时提示他们提供设置信息,并让他们稍后在应用程序的设置中对其进行修改。

避免显示应用内许可协议和免责声明。让App Store显示协议和免责声明,以便人们可以在下载您的应用之前阅读它们。如果您必须在应用程序中包括这些项目,请以平衡的方式集成它们,而不会破坏用户体验。

当应用重启时,恢复以前的状态。不要让人们追溯步骤以到达他们在应用中的先前位置。保留并还原应用的状态,以便他们可以从中断的地方继续。

不要鼓励重启。重新启动会花费一些时间,并使应用看起来不可靠且难以使用。如果应用程序存在内存或其他问题,除非系统刚刚启动,否则很难运行,则需要解决这些问题。

避免要求人们对应用程序进行过快或过高的评分。在首次启动后不久(或在人们使用应用程序时过于频繁)询问评级很烦人,并且很可能会减少收到的有用反馈的数量。为鼓励经过深思熟虑的反馈,请人们花时间对应用发表意见,然后再要求进行评级。始终提供一种退出评级提示的方式,绝不要强迫人们对应用进行评级。

三、状态栏和导航栏

状态栏(Status Bars): iPhone 最上方用来显示时间、运营商信息、电池电量的区域。

导航栏(Navigation Bars):状态栏之下的区域,一般来说导航栏中间是页面标题,左右是放置功能图标的区域。

考虑暂时隐藏导航栏以提供更身临其境的体验。例如,查看全屏照片,“照片”会隐藏导航栏和其他界面元素,可使用简单手势来恢复导航栏。

3.1导航栏标题

考虑在导航栏中显示当前视图的标题。

特别强调上下文时,请使用大标题。

3.2导航栏控件

避免在导航栏上挤满太多控件。如果在导航栏中使用分段控件,则该栏不应该含标题或分段控件以外的任何控件。如果为导航栏控件创建自定义标志符号,请使用以下大小,并根据需要进行调整以达到平衡。

自定义标志符号建议大小

使用标准的后退按钮。如果实现自定义的后退按钮,请确保他仍然像后退按钮,且同时提供自定义蒙版图像。iOS在过度期间使用此蒙版为按钮标题设置动画。

不要包括多段面包屑路径。后退按钮始终执行单个操作---返回上衣屏幕,如果没有到当前屏幕的完整路径,请考虑展品应用程序的层次结构。

给带有标题的按钮流出足够的空间。如果导航栏包含多个文本按钮,可在按钮之间插入固定的空格项目来增加分隔。

考虑在导航栏中使用分段控件来展平应用程序的信息层析结构。如果在导航栏中使用分段控件,请仅在层次结构的顶层使用,并确保在较低的级别选择准确的后退按钮标题。(分段控件:两个或多个分段的线性集合,每个分段都充当一个互斥按钮)

分段控件

在 iPhoneX 设计中,状态栏的高度为40pt(132px)。导航栏的高度也是44pt(132px)。这两个区域同样要进行一体化设计。所以它们加起来的高度是84pt(264px)。这里注意一下,因为 iPhone X 的 PPI值为458,所以并不是如 iPhone6/7/8一样1pt=2px换算。

四、标签栏(Tab Bars)

Tab栏(也叫标签栏)指的是 APP 底部的区域,是人们可以在应用程序的不同部分之间快速切换,标签栏是半透明的,可能具有背景颜色,在所有屏幕方向上都保持相同的高度,并且在显示键盘时被隐藏。

标签栏

使用标签栏在应用程序级别组织信息。标签栏是拉平信息层次结构并同时提供多个对等信息类别的或模式的访问的一种好方法。

严格使用标签栏进行导航。不要使用标签栏按钮来启用操作,如果需要提供对当前试图中的元素起作用的控件,请改用工具栏。(下一节)

争取获得正确数量的标签。标签太多会减少每个标签可点击的区域,并增加程序的复杂性。标签太少会使界面显得断开。通常,在IPhone上使用三到五个标签。

当人们导航到应用的其他区域时,请不要隐藏标签栏。标签栏可以为您的应用启用全局导航,因此他在任何地方都应保持可见。

选项卡不可用时,请勿删除或禁用该选项卡。确保所有选项卡始终处于启用状态,并说明为什么选项卡内容不可用。例如,如果iOS设备上没有歌曲,则“音乐”应用中的“立即收听”选项卡将说明如何下载歌曲。

标签栏尺寸

标签栏图标设计规范


标签栏图标因该尽量使用清晰的填充风格

五、工具栏(ToolBars)

工具栏出现在应用程序屏幕的底部,当人们向页面底部滚动时,隐藏工具栏;当向页面顶部滚动或点击屏幕底部时,将其重新显示;当键盘在屏幕时,工具栏也会隐藏。

如果为工具栏按钮创建自定义标志符号,请使用以下尺寸,并根据需要进行调整以达到平衡。

避免在工具栏中使用分段控件。分段控件使人们可以切换页面,工具栏的操作特定于当前屏幕,如果需要提供一种切换页面的方法,请考虑改用标签栏。

六、搜索栏(Search Bars)

搜索栏允许人们通过在字段中键入文本来搜索大量值。搜索栏可以单独显示,也可以显示在导航栏或内容视图中。当显示在导航栏中时,搜索栏可以固定在导航栏中,以便始终可以访问,也可以折叠起来直到用户向下滑动以显示出来。

搜索栏

启用清除按钮,适当时启用“取消”按钮。

清除按钮


取消按钮

范围栏

可以将范围栏添加到搜索栏,以使人们可以缩小搜索范围。

范围栏

与包含范围栏相比,倾向于改善搜索结果。当存在明确定义的搜素类别时,范围栏会很有用,但最好是改善搜索姐过,因此没有必要进行范围界定。

七、模态

  模态是一种设计技术,该技术以与用户先前的当前上下文不同的临时模式来呈现内容,并且需要显式操作才能退出。模态呈现内容可以:

1)帮助人们专注于一个独立的任务或一组紧密相关的选项

2)确保人们收到关键信息,并在必要时采取行动

在有意义时使用模态。仅在将人们的注意力集中在做出选择或执行与当前任务不同的任务上非常关键时,才创建模态体验。

使模态任务简单,简短且重点狭窄。避免在您的应用程序内创建应用程序。如果模态任务必须包含子视图,请提供通过层次结构的单个路径以及完成的清晰路径。除完成任务外,避免将“完成”按钮用于其他任何事情。

始终包含一个用于关闭模式视图的按钮。例如,您可以使用“完成”或“取消”。

卡片

      工作表演示样式显示为一张卡片,其中的卡片部分覆盖了基础内容,并使所有未覆盖的区域变暗以防止与它们进行交互。父视图或上一张卡片的顶部边缘在当前卡片后面可见,以帮助人们记住他们在打开卡片时暂停的任务。

警报

全屏

      全屏演示风格涵盖了整个屏幕。以前的视图已完全覆盖,从而最大程度地减少了视觉干扰。人们通过点击按钮来关闭全屏模式视图。

      使用全屏模式视图获取沉浸式内容(例如视频,照片或相机视图),或使用受益于全屏演示的复杂任务(例如标记文档或编辑照片)。

模态视图

八、报警

警报会传达与应用程序或设备状态有关的重要信息,并经常请求反馈。警报包括标题,可选消息,一个或多个按钮以及用于收集输入的可选文本字段。

最小化警报。警报会破坏用户体验,只应在重要情况下使用,例如确认购买和破坏性行动(例如删除),或向人们通知问题。警报的频率不高有助于确保人们认真对待它们。确保每个警报提供关键信息和有用的选择。

在两个方向上测试警报的外观。警报在横向和纵向模式下可能会有所不同。优化警报文本,使其在任何方向上都可以很好地阅读而无需滚动。

通常,使用两键警报。两键警报提供了两种选择之间的简便选择。单键警报可以通知,但无法控制情况。具有三个或更多按钮的警报会增加复杂性,并可能需要滚动,这是糟糕的用户体验。

将按钮放在人们期望的位置。通常,人们最有可能点击的按钮应该在右侧。取消按钮应始终位于左侧。

正确标记取消按钮。取消警报操作的按钮应始终标记为“取消”。

识别破坏性按钮。如果警报按钮导致破坏性操作(例如删除内容),请将按钮的样式设置为“破坏性”,以便系统获得适当的格式。此外,提供“取消”按钮,以便人们可以安全地退出破坏性操作。通过将取消按钮标记为默认按钮,使其变为粗体。

允许人们通过退出主屏幕来取消警报。看到警报时访问主屏幕将退出该应用程序。它也应产生与点击“取消”按钮相同的效果,即,无需执行任何操作即可关闭警报。如果您的警报没有取消按钮,请考虑在有人退出您的应用程序时运行的代码中执行取消操作。

九、导航

分层导航

每个屏幕选择一个选项,直到到达目的地。要到达另一个目的地,您必须回溯您的步骤或从头开始并做出不同的选择。设置和邮件使用此导航样式。

分层导航

平面导航

在多个内容类别之间切换。音乐和App Store使用此导航样式。


平面导航

内容驱动或体验驱动的导航

在内容之间自由移动,或者内容本身定义导航。游戏,书籍和其他沉浸式应用通常使用这种导航样式。


内容驱动或体验驱动的导航

使用导航栏遍历数据层次结构。导航栏的标题可以显示层次结构中的当前位置,并且使用后退按钮可以轻松返回到先前的位置。

使用标签栏显示内容或功能的同级类别。标签栏使人们可以快速轻松地在类别之间进行切换,而与当前位置无关。

十、操作表

操作表是一种特定的警报样式,它表示与当前上下文有关的两个或多个选择。在较小的屏幕上,操作表从屏幕底部向上滑动;在较大的屏幕上,动作表会以弹出框的形式同时出现。

操作表

在执行潜在的破坏性操作之前,请使用操作表请求确认。要让人们选择与无损任务相关的项目或动作。

提供“取消”按钮,使人们可以重新考虑破坏性操作。“取消”按钮应出现在操作表的底部。

突出显示破坏性选择。将红色用于执行破坏性或危险操作的按钮,并将这些按钮显示在操作表的顶部。

避免让操作表滚动。如果操作表中的选项太多,则人们必须滚动查看所有选项。滚动需要花费额外的时间来做出选择。

十一、安全距离

全面屏给我们带来了使用上的问题:上下左右是圆角、顶部齐刘海使屏幕凹下一块。所以在带有圆角和齐刘海的红色标注区域不应该放置任何功能,仅可在上端放置状态栏,底部圆角区域留白。我们界面竖屏使用时左右临近手机边缘的区域不建议放任何操作,应留出一定的边距。没有明确严格的规定边距是多少,但是一般的 APP 会留出16pt-24pt不等的边距防止用户在屏幕边缘不好点击。不过内容展现却可以呈现在边距里。如果我们横屏使用手机时,左右同样不好点击,所以同样左右需留出一定的边距来。所以我们就得到一个安全距离的矩形,内容可以完整地呈现在这个安全距离内。

IPhone系列由于全面屏出现的不可操作区域

十二、色彩

在 iPhone 上设计怎样的颜色都可以。只要符合产品气质并且在色彩心理学理论上思考,用什么颜色是设计师的自由。官方建议的系统色彩如下:

十三、字体

iOS 中英文使用的是 San Francisco(SF)字体,中文使用的是苹方黑体。设计界面时需要根据信息的逻辑权重分配粗细:标题应该较粗,而说明字体应该较细并且可以设计成灰色。其实字体的设计最重要的考量就是信息层级。苹果认为 APP 的字体信息层级有:大标题(Large Title)、标题一(Title 1)、标题二(Title 2)、标题三(Title 3)、头条(Headline)、正文(Body)、标注(Callout)、副标题(Subhead)、注解(Footnote)、注释一(Caption 1)、注释二(Caption 2)这几种。

字体大小的建议

十四、控件

第一,点击区域基本符合44pt(88px)原则,也就是在手机上大小大概是7mm-9mm,适合手指点击。

第二,要设计操作的不同状态,不要只设计一种状态。

以上文章内容参考:https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/  ; https://www.uisdc.com/iphone-design-specification

你可能感兴趣的:(iOS系统设计规范)