精简版 | iOS人机交互指南——视觉设计

动画

• 谨慎使用动画和运动效果。
• 努力让动画接近真实和可靠。
• 应用内使用一致的动画效果。动画一致性。
• 让动画效果可选。

品牌

成功的品牌植入不仅仅是在应用内增加品牌元素。好的应用通过醒目的字体、颜色、图片等传递品牌概念。

• 提炼出品牌理念。用户使用你的应用时用来或许信息的，而不是来看广告。
• 不要让品牌阻碍良好的应用设计。
• 应该更侧重于内容本身。
• 不要整个应用都显示你的LOGO。
• 遵循苹果的商标指南。可以参考Apple Trademark List和Guidelines for Using Apple Trademarks

颜色

iOS使用的扁平化颜色-来自Apple官网

• 配套的颜色应该贯穿整个应用。使用一致的颜色搭配。
• 一般来说，选择的部分颜色与你的LOGO匹配。精妙地会用颜色是传达品牌的一种不错的方式。
• 整个应用中贯穿一个关键颜色来只是可交互的元素。色调唯一性
  
  

  可交互颜色-来自于Apple官网
• 避免对不能交互和可交互的元素使用相同的颜色。交互指示唯一性
• 考虑插图和透明度是如何影响周围的颜色。
• 你的图片应该是使用正确的颜色模式。iOS的默认模式是sRGB。

• 在兼容的设备上使用更广泛的颜色来提升视觉体验。支持Display P3。

  
  
  

  sRGB和Display P3的色彩空间
• 在不同的光线条件下测试你颜色方案。
• 考虑True Tone display如何影响颜色。更多实现细节可参考Information Property List Key Reference（没懂什么意思）
• 关注色盲人群和不同文化对颜色的看法。
• 充足的颜色对比。对比度至少为4.5:1，7:1更好。

布局

一般人希望可以在任何设备和方向上使用自己希望的应用。在iOS中，界面元素和布局可以根据不同的设备进行自动的改变形状和大小。

• 在环境变化时持续关注当前内容。内容应该最高优先级。
• 确保主要内容在默认大小下是清楚。
• 整个应用内位置一致的外观。
• 使用视觉上的重量和平衡来突出重要的内容。大的事物比小的更能吸引眼球和显得更为重要。一般来说重要的内容放在上半屏，最好事靠近屏幕的左边。
• 使用对齐来组织内容。对齐使用应用看起来更有条理，可以帮助用户在滚动时更容易发现信息。
• 避免无理由地更变布局。用户旋转设备时并不意味着这个布局都需要改变。
• 如果可以的话，同时支持竖屏和横屏。
• 如果你的应用只支持一个方向，确保支持不同的变体（朝上或朝下）
• 根据环境定制你的应用响应旋转。
• 为交互元素提供足够的点击范围。区域至少为44p x 44p。
• 为文本的大小改变作准备。用户期望，当他们在系统设置中改变字体大小，应用可以响设置。关于更多实现细节可以参考Typography。
  更多关于自适应的实现细节，可参考Auto Layout Guide。

排版

San Francisco 是iOS的系统字体，它有两个变体：小于或等于19号的字体，和大于或等于20号的字体。通过这里下载字体。

• 强调重要的信息。通过字体的重量、大小和颜色来高亮重要的信息。
• 如果可以的话使用单一字体。
• 尽可能使用内置的字体样式
• 确保自定义字体是清晰的。iOS支持自定义字体，但不利于阅读。除非你有强烈要求使用自定字体，例如出于品牌目的或需要创造沉浸式的游戏体验，不然坚持使用系统自带的字体。
• 确实自定义字体能响应辅助功能。具体可参考Accessibility

自动字体大小
SF UI字体的两个变体都会显示良好。自动字体大小提供了额外的功能让读者选择合适的字体。

• 当字体大小变化时考虑内容的优先级。不是所有内容都是同等重要的。当用户选择更大号的字体，他们想让内容更加容易被阅读，他们不想屏幕上的每个字体都变大。
  字体使用和间距
• 在界面上使用正确的字体变体。小于等于19号字体时，使用SF UI Text。大于等于20号字体时使用SF UI Display。