译文｜iOS 10 人机界面指南(四)

译文｜iOS10人机界面指南（四）iOS10发布了，苹果遵循了一切从简但又增加了一些提升用户体验的功能，比如向开发者开放了更多接口，设计者又如何跟随iOS的步伐做好产品设计呢？5.图像（Graphics）5.1应用图标（AppIcon）每个app都需要一个精美、令人印象深刻的图标，能在苹果商店和主屏幕夺人眼球。轻瞥图标的瞬间，是你的第一个机会来传达你的app的目的。你的图标也会在系统中经常出现，比如在设置里和在搜索结果里。拥抱简洁。寻找个单一的元素能够表现你的app的精髓，然后通过一个简单但是独特的形状来表现这个元素。谨慎地添加细节部分。如果一个图标的内容或是形状过于复杂，那么细节就很难辨认了，尤其是在更小的尺寸时。提供一个单独的焦点。为图标设计一个单独的、集中的点，使它能快速吸引注意力并且明确地代表你的app。设计一个易于辨识的图标。用户不应通过分析图标才能弄清楚它代表什么。比如，邮件app的图标设计一个易于辨识的图标。用户不应通过分析图标才能弄清楚它代表什么。比如，邮件app的图标使用了一个信封，因为它普遍与邮件联系在一起。花点时间去设计一个好看迷人且精炼的图标，艺术性地传达你的app的目的。让背景简单并且避免使用透明度。确保你的图标是不透明的，并且不要让背景变得杂乱。使用一个简单的背景，这样它就不会过度影响周围的其它图标。你没有必要将整个图标填满内容。只有当logo全部或部分由文字组成时，才在图标使用文字。在主屏幕时，一个app的名称会在图标之下显示。不要包含没有意义的文字重复说明名称或是告诉用户该如何使用你的app，比如“Watch”或“Play”。如果你的设计包含了一些文字，那么请强调文字与你的app提供的实际内容相关。不要包含照片、屏幕截图或是界面元素。影像细节在很小的尺寸会难于辨认。屏幕截图对于一个app图标来说太复杂了，也一般不利于传达app的目的。在图标中的界面元素会令人误解并且困惑。不要复用Apple硬件产品的图形。Apple产品受版权保护，不能在你的图标或是图片中被二次创作。一般来说，避免复用设备的图形，因为硬件设计频繁地更新换代，这会导致你的图标看起来易于过时。不要在界面里到处放置app图标。在app里发现一个图标用于多种目的会让人困惑。反之，考虑使用图标的色彩方案。请参阅Color。在不同的壁纸下测试你的图标。你不能预期用户会为他们的主屏幕选择什么样的壁纸，所以不要只是在一种深色和一种浅色的背景上测试你的图标。而是观察它在不同的照片上如何表现。在有动态背景的真实设备上试用它，因为背景会随着设备移动而改变视角。保证图标的四角是方的。系统会自动覆盖一个遮罩层让图标变成圆角。（1）App图标大小每一个app都必须提供一大一小两个app图标。小图标会出现在主屏幕，并且当你的app被安装后会被系统使用。为不同的设备提供不同尺寸的小图标。确保你的app图标在所有支持的设备上都看起来很棒。大图标会被用在苹果商店。让小图标与大图标类似。尽管大图标有着与小图标不同的用途，但它终究是你的app图标。大图标一般都和小的看起来差不多，但是可以稍微丰富一些，更有细节，因为不会有任何视觉效果叠加在它上面。（2）Spotlight和设置图标每个app都应提供一个小图标，在Spotlight搜索，如果关键词与app名称相符，iOS会展示该图标。同时，需要设置的app同样应该提供一个小图标用于在系统内置的设置app中展示。两个图标都应该清晰标识你的app——更理想地，它们应该与app图标相符。如果你不能提供这些图标，iOS就会压缩你的app主图标展示在上述场合中。不要对用于设置的图标叠加或是描边。iOS会自动为所有图标加上1个像素的描边，以确保它们很好地呈现在设置白色的背景上。Tips：如果你的app能创建自定义文档，你无需额外设计文档图标，因为iOS会利用你的app图标自动创建文档图标。5.2自定义图标（CustomIcons）如果你的app含有不能用系统图标表示的任务或模式，又或是系统图标与你的APP风格不符，你可以设计你自己的图标。自定义图标通常被叫做模板，它不含有色彩信息并且通过mask来创建你在导航栏、标签栏、工具栏或是主屏幕快速操作视图看到的图标样式。创作简单、辨识度高的设计。太多的细节会让图标看起来粗糙且不具可读性。为一个大多数用户都能正确理解并且不会反感的设计而努力。设计一个纯色并带有透明度的、无锯齿、无阴影的图标。iOS会去除所有的色彩信息，所以没必要使用多于一种的填充颜色。允许用透明度来定义图标的形状。使你的自定义图标与系统图标有所区分。你的图标不能轻易地与某个系统图标混淆。如果你想让你的图标看起来与iOS图标家族相似，请使用非常细的描边去绘制它。1pt的描边适用于大多数图标（在@2x分辨率下使用2px）。保持图标之间一致连贯。无论你只使用自定义图标或是混合使用自定义图标和系统图标，在app中的所有图标都应该在大小、细节程度、透视和描边粗细上保持一致。提供两种自定义标签栏图标的版本。为未选中和选中态提供两个图标。选中态的图标经常是未选中态图标的填充版本，但是某些设计会使用不同的方法。比如，苹果的原生app经常会将内部细节反过来填充，增粗或减细描边，以及把图标放在譬如圆形的形状内。不要在自定义标签栏图标内包含文本。如果你需要展示文本，请在标签下面直接加上标题并且适当调节位置。不要复用Apple硬件产品的图形。Apple产品受版权保护，不能在你的图标或是图片中被二次创作。一般来说，避免复用设备的图形，因为硬件设计频繁地更新换代，这会导致你的图标看起来易于过时。自定义图标尺寸：5.3图片大小和分辨率（ImageSizeandResolution）iOS通过坐标系在屏幕上放置内容。该坐标系以点为测量单位，这些点映射到显示器中以像素表示。在一个标准分辨率的屏幕中，1点（pt）（1英尺的72/1）等于一个像素(px)。高分辨率屏幕有更高的像素密度。因为在相同的物理空间内有了更多数量的总像素，所以平均每点有了更多的像素。因此，高分辨率的显示屏需要像素更多的图片。你必须为你的app支持的设备提供所有的高分辨率图像。依据设备的不同，将每张图像的固有像素乘以相应的比例系数，就可以得到该设备所适配的分辨率。一张标准分辨率的图像对应的比例系数为1.0，并被称为@1x图片。高分辨率的图像对应的比例系数为2.0或是3.0，并被称为@2x和@3x图片。打个比方，假设你有一张标准分辨率（@1x）的图片，它的分辨率为100px*100px。那么，这张图片的@2x版本就是200px*200px，@3x版本就是300px*300px。为不同设备准备图片时请参照以下比例系数。5.4启动画面（LaunchScreen）启动画面出现在app刚开始启动时候。随后，启动画面会很快被app的首屏代替，让人感觉你的app是快速响应的。启动画面不是一个炫技的时机，它只是为了增强用户对你的app能够快速启动并且立即被使用的感受。每个app都应该提供一个启动画面。启动画面首屏因为设备屏幕大小不同，启动画面的大小也有所差异。你可以以Xcode故事板或是一组静态(static)图片的形式为你的app所支持的设备提供启动画面。因为Xcode故事板灵活性高且易于适配，所以推荐采用该形式。你可以使用一个单独的故事板来管理你的所有启动画面。了解关于可适配界面的开发细节，请参阅AutoLayoutGuide。设计一个与你的app首屏几乎相似的启动画面。如果你的启动画面包含了与首屏看起来不同的元素，那么用户会在启动画面过渡至app首屏时经历一次不愉快的跳转体验。避免在启动画面包含文本。因为启动画面是静态的(static)，任何展示的本文都不能被定位。淡化启动。用户通常会在不同的app之间频繁切换，所以请设计一个启动画面，能够让app的启动体验不易被人察觉。不要打广告。启动画面不是一个宣传品牌的时机。不要设计一个类似开屏广告或是介绍窗口的登入体验。不要在启动画面包涵logo或是其它品牌元素，除非它们是你的app首屏的静态（static）元素。静态启动画面图片最好使用Xcode故事板制作启动画面，但必要时你也可以提供一组静态图片。根据设备创建不同尺寸的静态图片，并不要忘记包涵状态栏区域。5.5系统图标（SystemIcons）iOS提供了大量表示常用的任务和内容类型的小图标，用来在导航栏、标签栏、工具栏和主屏幕快速操作中使用。因为用户对这些图标很熟悉，所以最好尽可能地使用这些内置的图标。（1）导航栏和工具栏图标Tips：你可以在导航栏和工具栏使用文本代替图标来表示某项。比如，日历app在工具栏使用“今天”、“你可以在导航栏和工具栏使用文本代替图标来表示某项。比如，日历app在工具栏使用“今天”、“日历”和“收件箱”三个字符。你还可以使用固定空间（fixedspace）元素为导航栏和标签栏的图标提供间距。了解开发细节，请参阅UIBarButtonItem。（2）标签栏图标了解开发细节，请参阅UITabBarItem。（3）快速操作图标了解开发细节，请参阅UIApplicationShortcutIcon。6.UI栏6.1导航栏（NavigationBars）导航栏出现在app屏幕的顶部，状态栏之下，它能实现在一系列有层级的app页面间的导航。当进入一个新页面时，导航栏的左侧会出现一个返回按钮，并且一般会标有上一个页面的标题。有时，导航栏右侧还有含有类似编辑或完成按钮的控件，用来管理当前视图的内容。在分屏视图内，导航栏可能只会出现在分屏视图的一个单独窗格。导航栏是半透明的，也可能会有一个背景颜色，并且在适当时可以被隐藏，比如当前屏幕有键盘时、施加了某手势时或是某个视图在调整大小时。Tips：当不需要导航或是你需要多个控件来管理当前内容时，请使用工具栏。请参阅Toolbars。考虑在导航栏显示当前视图的名称。在大多数情况下，名称提供了环境，因为它让用户知道他们在看什么。但是，如果给导航栏命名看起来是多余的，你可以让名称栏空着。比如，备忘录(Notes)不会在当前笔记的导航栏上放名称，因为内容的第一行已经提供了所需的环境线索。考虑在app最高层级的导航栏放置一个分段控件。如果这么做帮助你扁平信息层级，让用户更容易找到他们想要的内容，你会深受其益。如果你在导航栏使用了分段控件，请确保为返回按钮选择了正确的标题。了解更多指导，请参阅SegmentedControls。不要包涵多段的面包屑路径。返回按钮只能执行一个单独的操作，即返回到上一屏。如果你认为用户可能会因为忘记到达当前屏的完整路径而迷路，请考虑扁平你的app层级。避免用过多控件填充导航栏。一般来说，导航栏最多只能包含当前视图的标题、返回按钮以及一个管理当前视图内容的控件。如果你在导航栏使用了分段控件，除此之外，该栏就不应再包含标题或其它控件。给文本按钮留出足够的空间。如果你的导航栏含有多个文本按钮，文本可能会让多个按钮看起来像是同时运行的，导致按钮间难以区分。在按钮之间插入固定空间项使它们隔开。了解开发细节，请参阅UIBarButtonItemClassReference中的UIBarButtonSystemItemFixedSpaceconstantvalue。考虑在显示全屏内容时暂时隐藏导航栏。当你想要关注内容时，导航栏会令人分心。暂时隐藏该栏以提供一个更加沉浸式的体验。地图app在浏览一个全屏地图时会隐藏导航栏及其它界面元素。如果你要隐藏导航栏，允许用户通过简单的手势复原导航栏，比如点击。使用标准的返回按钮。用户已经知道，标准的返回按钮会让他们在信息层级中按原路径返回。但是，如果你使用了自定义的返回按钮，请确保它们看起来像是返回按钮，有直观的表现，和界面的其它部分保持一致，并且在app内统一使用该自定义按钮。如果你用自定义图片替换了系统提供的返回按钮，请同时提供一个自定义遮罩图片(custommaskimage)。iOS使用这个遮罩来实现按钮标题在转场时的过渡动画。了解开发细节，请参阅UINavigationBarClas