好久不更新了，换了工作，忙了许多，责任也更重。

哈哈，其实就是自己浮躁了。这篇是好久前UI中国自动保存的，差点被我删了，发出来就当是笔记吧。继续不定期的更新。

iPhone 11标志着iPhone X的诞生，iPhone X是一款几乎没有挡板的iPhone。 5.8英寸的OLED显示屏比iPhone 8 Plus的5.5英寸显示屏更大，但机身尺寸与iPhone 8大致相同。对于设计师来说，这意味着更多的自由。

更高的屏幕

额外的145点可能意味着额外的一行内容，或者增加一个我们曾经认为太过分的菜单。 这个额外的空间适用于iPhone 8和8 Plus，因为它们分享完全相同的比例，尽管具有不同的分辨率。

内容更多的空间

如果与原来的iPhone相比，我们得到了高达332磅的高度，这相当于7个导航条。 未来的内容看起来棒极了，汉堡包菜单也很暗淡。

当您将iPhone X与原来的iPhone并排放置时，您可以注意到内容的空间几乎翻了一番。一般来说，这意味着现代应用程序需要始终包含所有条形：状态，导航，选项卡和主页指示符。 省略这些栏不仅意味着更差的用户体验，而且还会使您的应用程序与Apple自己的应用程序不一致。

缺口

也许新设计中最有争议的方面是前10％。传感器外壳，也被称为凹槽，是一个分心，并保持iPhone X的屏幕从边缘到边缘的元素。技术上来说，目前不可能，因为它包含了Face ID，相机和扬声器。在设计方面，这是苹果近年来最大的妥协之一。但是，看看其他手机制造商是如何解决这个问题的，不管是额头，下巴还是两者，我不能说他们没有妥协。

苹果建议不要用黑条隐藏缺口。他们的理由是，尽管令人烦恼，但仍然为地位栏和额外内容提供了宝贵的空间。它提供了下面的内容的上下文，并给人一种屏幕更大的感觉。诸如壁纸，地图和颜色等背景元素在被圆角和凹口稍微修剪时不会受到影响。通过隐藏该空间，您的应用程序会感觉更小，并与其他应用程序不一致，如本视频中所述。

大标题

在iOS 11中，屏幕标题一般为34pt。 他们被设置为粗体，黑色。 有趣的是，当你滚动时，标题转换到导航栏，让我们回到那个宝贵的空间。 在横屏模式，它也是很小的停留在导航栏中。 这给设计者一个明确的信息，首先，你应该明智地使用这个额外的空间，其次，你需要使你的设计具有适应性，因为这些额外的空间可能以纵向模式存在，而不是横向模式。

portrait是人像模式，也就是竖屏。landscape是风景模式，也就是横屏。

更大的状态栏

状态栏的高度增加了一倍多，从20pt增加到44pt。 通知现在可以从左上角拖动。 控制中心可以从右上角滑动。 如果快速完成，从底部滑动让位给主屏幕。 或者，要到达屏幕导航器，您必须中断该主屏幕滑动。

安全区域布局指南

在为iPhone X设计时，圆角和凹槽可以剪裁内容。 应该避免在任何时候。 使用安全区域布局指南，您可以推送切口不会出现的内容，从而确保不会发生削波。 一般来说，背景不应该遵循安全区域指南，而文本，图像和按钮等内容应遵循这些指南。

iPhone X在横向空间

在横向空间中，状态栏是隐藏的，以最大化内容空间。 导航栏减至32点，标签栏为30点，居家指示器为23点。 虽然大多数用户不会在iPhone X上切换到横向模式，但仍有一些重要的情况。 例如，查看横向照片，全屏视频或阅读文字较大的文章。 完成后，不得不切换回肖像，特别是如果将设备对接或保持舒适的横向位置。

如果你的应用程序已经适应了iPad，为什么不支持iPhone的空间布置呢？ 大多数现代应用程序都是以适应性布局为设计目标，从而获得最大的收益。

网站在横向空间

如果你是一名产品设计师，那么你有可能在一个网站上工作。 在横向的iPhone X上，您的网站左右两侧会有一个大的空白空间。 这是因为安全区自动启动以避免削波，这是一个更糟糕的结果。 为了避免这种情况，苹果已经创建了一个指导，让您的网站在横向上适应iPhone X。 基本上，您可以扩展背景以填充整个屏幕，同时保持基于安全区域的内容嵌入。

圆角

内容剪辑也可能发生在iPhone X的角落。除非您隐藏状态栏或回家指示符，否则不应该面对此问题，因为它们覆盖了角落区域。 但是，对于大多数全屏使用的应用程序，例如相机，确保角落中有足够的空白是非常重要的。 要完美地遵循圆角，建议为您的按钮提供约16pt的半径。

在iOS模拟器上预览您的应用程序

iPhone X设备还没有出来。 有可能在发布之后，它将被卖完，因此，我们大多数人无法访问。 没有手头的设备，唯一的方法就是通过iOS模拟器。 您可以通过安装Xcode来预览您的应用程序和您的网站。此方法同样适用各版本的iPhone，请充分利用xcode。

汉堡菜单的死亡

十年来，设计师们都在争先恐后地将自己的内容融入到原始iPhone的小屏幕上。 很多设计师决定完全省略Tab栏，因为它占用了太多的垂直空间。 一些有创意，并决定把一个按钮，将从左侧滑动。 那是着名的汉堡菜单的诞生。 虽然一开始很有趣又新鲜，但这是一个可用性的噩梦。 需要更多的水龙头来达到额外的屏幕。 因此，这意味着更少使用辅助选项卡。 人们往往会忘记内容更多。

随着更大的屏幕，单手使用开始受到影响。 苹果甚至可以双击主屏幕按钮来滑动整个用户界面，以使导航栏可以用拇指进入。 这翻译成一个额外的双击，以达到菜单。 汉堡菜单通常放在屏幕的左上角，所以试图触及菜单更令人沮丧。 而且屏幕高得多，不再有争夺内容的空间。 标签栏现在是取代汉堡菜单的明显选择，因为我们可以承受这个空间。 iPhone X巩固了这一方向。 如果您的应用中有多个部分，几乎没有理由不使用选项卡栏。 在横向，标签栏在iOS 11中占用更少的空间。

汉堡菜单在网络上普遍存在，可以说是移动网络体验还没有赶上本地体验的原因之一。 即使React Native也使用本机控件，这对Web技术来说是一个很好的方向。 但是，在iOS中，特别是在iPhone X中，您应该使用Tab栏。

自适应布局和多任务处理

随着越来越多的设备解决方案的处理，使您的布局适应性至关重要。 使用Sketch's Constraints和Xcode的自动布局等工具，您必须设计一种屏幕大小灵活的方式，并且可以根据需要显示额外的菜单。

Stack Views（堆栈视图）

在Xcode中，你还会发现Stack Views，这是一个让你的布局对变化更加反应的奇妙工具。 相同的元素和组可以动态堆叠在一起，所有需要编辑的是间距以及内容如何填充框。 然后，您可以使用“自动布局”完成工作。 苹果建议先使用堆栈视图，然后再使用自动布局。

点和像素

开发人员使用点值，因此了解与像素的差异非常重要。 当iPhone第一次推出时，两个单位是一样的：1pt等于1px。 然后，当视网膜屏幕出现时，1pt变成了2px。 所以，把原始的iPhone视为价值观，把像素视为像素密度（iPhone 4，5，6，7，8 = @ 2x，iPhone 8 Plus，iPhone X = @ 3x）的实际值。 为了更好地理解点和像素之间的差异，我强烈建议观看这个视频 。

iPhone解决方案

iPhone有5个主要分辨率：320 x 480 pt（iPhone 4），320 x 568 pt（iPhone 5），375 x 667 pt（iPhone 8），414 x 736 pt（iPhone 8 Plus）和375 x 812 pt（iPhone X）。 布局不缩放，而是根据分辨率进行扩展。 例如，导航栏只调整宽度，但保持相同的高度。 里面的元素保持不变。

iPhone 8 Plus是唯一在横向模式下更像iPad的iPhone。 换句话说，可能会出现一个左侧导航，替换标签栏的需要。

App Icon

应用程序图标用于您的应用程序的品牌。 这是用户在体验的第一件事。 它突出显示在主屏幕上，App Store中的Spotlight和Settings中。

SUPPORT（支持)

@ 1x资源不再支持iPhone，所以你不需要生成它们。应用程序图标现在有2个分辨率：@ 2x和@ 3x。有三种类型：应用程序图标，聚光灯和设置。对于iPad，使用@ 1x和@ 2x。

SUPER-ELLIPSE（超级椭圆）

自iOS 7以来，圆角已经从简单的圆角转变为超椭圆形状。 请务必注意，不应将图标与面罩一起导出，否则可能会发现黑色伪像。 相反，只需将平方资产导出到App Store即可。

ICON GRID（图标网格）

苹果在他们的一些图标上应用了黄金比例。 这确保了图标是英雄，同时保持良好的比例。 虽然这是一个很好的规则，但这不是一个严格的规定。 即使苹果在许多图标上省略了它。

Colors

iOS使用鲜艳的颜色来显示按钮。 这些颜色倾向于在黑色背景下与白色背景相得益彰。 请记住，颜色应该使用稀疏，呼吁行动和最小的品牌领域，如导航栏。 粗略地说，只有10-20％的设计应该有颜色，否则他们会对内容竞争太多。

iOS经常使用中性色作为背景和菜单区域。 使用与白色背景完全对比的黑色文本来使文本阅读舒适。 最后，柔和的蓝色应用于使按钮脱颖而出。

System Font（系统字体）

系统字体现在称为SF Pro Text，用于小于20磅的文本，SF Pro用于20磅或更大的文本。 需要注意的是，使用系统字体时，您现在可以访问动态类型，可以根据用户的偏好调整字体。

Button and Font Sizes（按钮和字体大小）

一般规则是按钮44pt，小文本12pt，正文文本17pt，标题20pt +。

Spacing and Alignment（间距与对齐)

一般的规则是有一个最小的填充或8点的余量。 这创造了足够的呼吸空间，这使得布局更容易扫描，文本更具可读性。 而且，UI元素应该对齐，文本应该具有相同的基线位置。

Status Bar(状态栏)

建议在尽可能多的地方包含状态栏。 用户依靠它获取信号，时间和电池等重要信息。 文字和图标可以是白色或黑色，但背景可以自定义为任何颜色，并与导航栏合并。

Navigation Bar（导航栏）

导航栏用于获取有关屏幕的快速信息。 左边的部分可以用来放置Back，Profile，Menu按钮，而右边的部分通常用于Add，Edit，Done等动作按钮。 请注意，如果您使用任何这些系统图标，则不需要为它们创建资产。

就像状态栏一样，背景可以自定义为任何颜色，并且通常具有微妙的模糊性，以确保文本始终可读。 当状态栏存在时，两个背景都被合并。

Search Bar（搜索栏）

当你有很多的内容时，总是明智的做到这一点。

Toolbar（工具栏）

当你需要更多空间来放置您的动作按钮和屏幕状态时，您将需要使用工具栏。

Tab Bar（标签栏）

标签栏是多个屏幕之间的主要导航。 如果您有几件物品，请避免汉堡菜单。 始终可见的菜单会增加使用量，因为总是显而易见的胜利。 此外，鼓励在图标旁边添加文本，因为大多数人不会立即识别符号，特别是当他们不是普遍知道的时候。

STATES（状态）

当他们不活跃时，图标将是灰色的。像这样，他们吸引的注意力不足。

Table View（表视图）

Table View是用于列出内容的非常常见的用户界面。 大多数应用程序使用表格视图的形式。 这是因为它可以是非常基本的，或高度可定制的最小的元素。

BASIC STYLES（基本风格）

在基本层面上，您可以使用多种预设风格和配件。

SECTIONS（组合）

单元格也可以分组，上面标题和下面的描述。

Collection View（集合视图）

当你有一个网格样式的行和列，你需要集合视图。 虽然更先进一点，但它可以创造任何你可以梦想的布局。

COLLECTION VIEW LAYOUTS（集合视图布局）

集合视图布局可能看起来像这些，或它们的组合。可能性是无止境的。

Modals（提示框）

弹出式对话框用于传达重要信息并提示快速操作。警报应保持最低限度，退出必须明显。

ACTIVITY MODAL（活动模式）

活动对话栏允许你分享内容（文本，图像，链接）到iOS功能，如空投，收藏夹，书签和应用程序，如邮件，脸书，推特。虽然外观不能定制，选项是。

FULL-SIZE MODAL（全尺寸模式）

当提供的信息不是很短，你可以设计一个全尺寸的模式，通常从幻灯片，淡入淡出，翻转或页面动画出现。像其他模式一样，它必须很容易取消，并保持尽可能短。

Keyboards（键盘）

键盘用于在文本字段（如搜索，聊天或登录）中输入信息。 这是高度可定制的，URL，电子邮件，电话号码，甚至表情符号。 您可以在Light和Dark主题之间进行选择，以及操作按钮的命名方式（返回为默认值）。

Picker（选择）

当您有多个选项可供选择时，您可以使用Picker控件。这对日期来说特别有用，它控制一个动作中的3个字段。

Segmented Control（分段控制）

标签栏导航到主要部分时，分段控件用于子部分。

Sliders（滑块）

滑动条是不太精确的交互式控件，但对于声音，亮度和视频进度等快速设置非常有用。

Progress（进度条）

进度条是一个指示活动已经走了多远的指标。例如，您可以使用它来显示Web视图的加载进度。请注意，高度可以定制。

Switch（开关）

使用它可以快速切换开启和关闭。除了开/关之外，不要使用它。

Stepper

步进器比滑块更慢但更精确，允许用户增加或减少一个值。边框和背景是可定制的。

iOS Icons

这些是透过iOS的原生图标。由于它们是常用的，所以用户可以即时识别它们的含义。将它们用于其他目的可能会让用户感到困惑，所以了解如何在iOS中使用它们非常重要。

当您在这些之外设计自定义图标时，使用众所周知的符号很重要。此外，我强烈建议总是陪同他们一个10pt或更多的小文本。

Resources（资源）

这些模板不仅可以用于学习，还可以重复使用和定制，所以您不必从头开始，这就可能出现错误。随着你越来越舒适，你将能够获得更多的创意。

IOS 11 GUI BY APPLE

如果您正在为iOS设计，则需要使用预制元素，例如状态，导航和选项卡栏。获得所有的颜色，大小，字体和组件的舒适。苹果正式支持。

IOS 11 GUI BY GREAT SIMPLE STUDIO（IOS 11 GUI由伟大简单的工作室）

VECTOR DEVICE MOCKUPS（矢量设备MOCKUPS）

我个人收集了超过260个完整的mockups 这是展示你的设计的完美。这些设备在本书中都有使用。

DESIGN RESOURCES BY FACEBOOK（设计资源）

iOS设计资源的宝库，包括SoundKit，多样化的设备指针和有用的图形用户界面。

什么不可以做

一篇关于iPhone X设计的优秀文章 。包括几个很好的例子，说明在设计iPhone X时不应该做什么。

UI Design Do’s and Don’ts

有一些案例 ，你应该不惜一切代价，特别是如果你是新手到iOS。按照苹果公司的这些简单的例子。即使快速浏览一下可以走很长的路。

IOS GUIDELINES BY IVO MYNTTINEN

如果您想从另一个角度阅读更多关于iOS的内容 ，请查看这本优秀而全面的指南。