IOS 12设计规范(5-4)视觉设计:颜⾊ (Color)

点击前往本读书笔记总目录

5.4      颜⾊ (Color)

颜⾊是增加活力,提供视觉连续性,沟通状态信息,响应用户操作的反馈并帮助人们可视化数据的好方法。在挑选 App ⾊调的颜⾊时,请参考系统的⾊彩方案,以保证这些颜⾊无论是单独还是组合、在浅⾊背景还是深⾊背景上都看起来很棒。

IOS12设计规范

明智地使用颜⾊进行沟通: 谨慎地使用颜⾊来强调重要信息。例如,当 App  中其他不重要的信息也使用了红⾊时,警告人们严重问题的红⾊三⻆角形就显得没  有那么明显。

在App内使用互补的颜⾊: 你的App 内的颜⾊应该协调,不会互相冲突和⼲干扰。如果你的 App 风格的基础⾊调是柔和的,那么使用一系列列与之协调的柔和⾊调。

一般来说,选择与你的 App Logo 相符的颜⾊地⾊板: 巧妙地使用颜⾊是一个传达品牌的好办法。

App 中统一使用一种关键⾊来显示可交互性: 在 Note 中,可交互的元素是⻩⾊的。在 Calendar 中,可交互的元素是红⾊的。如果你定义了一种 关键⾊用于传递可交互性,那么你要保证其它颜⾊不会与之冲突。

避免给可交互和不可交互的元素使用相同的颜⾊:如果可交互和不可交互的元素       是同一种颜⾊, 用户就很难知道到底哪里是可点击的。

IOS12设计规范

考虑图像和半透明度如何影响周边元素的颜⾊: 图像的变化有时可以改变附近颜⾊,以保持视觉连续性,并防⽌止界面元素变得太强烈烈或者不能引起用户的注意。例如,地图在使用地图模式时显示浅⾊方案,但在激活卫星模式时切换到       深⾊方案。当放置在半透明元素后面时,或当应用于半透明元素(例 如工具栏) 时,颜⾊也可能会不同。

IOS12设计规范

在多种光线条件下测试你的 App 颜⾊: 光线在室内和室外、房间氛围、不同的时间、气候等条件下会发⽣明显地变化。你的 App 在现实世界中使用  时看到的颜⾊不会一直和你在电脑上看到的颜⾊相同。你应该在不同的光线条件下预 览,来观察颜⾊的真实表现,比如在晴朗的户外。必要时,应当调整颜⾊以求在⼤多数的使用场景下提供最好的视觉体验。

考虑 True Tone 显示屏对颜⾊的影响: True Tone 显示屏利利用了环境光传感器器来⾃动调整显示屏的⽩白点,以适应当前环境下的光线情况。专注于阅读、照片、视频和游戏的App可以通过确定一种⽩白点纠正模式来强化或弱化 True Tone 的效果了解更多实现细节,请参阅 Information Property List Key Reference 。

IOS12设计规范

关注⾊盲用户: 不同的用户看见的颜⾊是不一样的。比如,很多⾊盲用户很难分辨红⾊和绿⾊(以及任何灰⾊),或是蓝⾊和橘⾊。避免把这些颜⾊组合作为区分两种状态或值的唯一方式。比如,用红⾊方块和绿⾊圆形来表示下线和上线状态,而不是用红⾊和绿⾊的圆形。有些图形编辑软件含有能够  帮助你证明你是否是⾊盲的⼯工具。

考虑一下在其他国家和⽂化中如何使用颜⾊:   例如,在某些⽂化中,红⾊代表着危险。在其他⽂化中,红⾊有积极的含义。确保你的App中的颜⾊表达出恰当的信息。

使用足够的颜⾊对比度: 在 App 中,过低的对比度会让内容难以阅读。比如图标和文本可能会和背景融合。网上有颜⾊对比度计算器器能够帮助你精确的分析App中的颜⾊对比度,以确保它符合最佳标准。请确保你的 App 对比度⾄少达到 4:5:1 ,但是 7:1 更好,因为它更符合严格的功能标准。

颜⾊管理

在你的图像中应用颜⾊配置文件: iOS 的默认颜⾊空间是标准 RGB (sRGB)。为了确保颜⾊与这个颜⾊空间的匹配,确保你的图像包含了嵌入的颜⾊配置⽂件。

IOS12设计规范

使用广⾊域来增强在兼容显示器上的视觉体验: ⼴⾊域显示支持P3⾊空间,它能让 sRGB 更丰富、更饱和。因此,使用广⾊域的照片和视频更逼真,使用⼴⾊域的视觉数据和状态指示器器更具影响力。在适当的时候,使用显示P3颜⾊配    置文件的16位/像素(每个通道)并导出图像 png 格式。请注意,需要⼴⾊域显示器器来设计⼴⾊域图像并选择P3颜⾊。

在需要的时候提供空间特定的图像和颜⾊变化:   一般来说,P3的颜⾊和图像会在 sRGB 设备上显示出来。然而,有时在 sRGB 设备上出现两种非常相似的P3 颜⾊可能很难区分。在P3光谱中使用颜⾊的渐变有时也会出现在sRGB 设备上。为了避免这些问题,您可以在 Xcode 项目的资产目录中提供不同 的图像和颜⾊,以确保在宽颜⾊和 sRGB 设备上的视觉保真度。

在实际的sRGB和⼤屏幕上预览你的应用的颜⾊: 根据需要进行调整,以确保在这两种类型的显示器器上都有同样出⾊的视觉体验。

注意: 在 mac 设备中的光⾊域显示器器中,你可以使用系统颜⾊选配置功能来选择和预览P3颜⾊,并将它们与 sRGB 颜⾊进行比较。

文章转载请注明出处,并需展示来源网址!:淘盒子 » IOS 12设计规范(5-4)视觉设计:颜⾊ (Color)

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏