Human Interface Guidelines

Human Interface Guidelines——Dark

2020-01-26  本文已影响0人  轶子

尝试阅读《Human Interface Guidelines》原文翻译学习iOS设计指南。

在 iOS 13.0及以后的版本中,人们可以选择采用“黑暗模式”的全系统黑暗外观。 在黑暗模式下,系统为所有屏幕、视图、菜单和控件使用深色调色板,并且使用更多的活力使前景内容在较暗的背景中脱颖而出。 暗模式支持所有可访问性功能。

人们可以选择暗模式作为他们的默认界面风格,当环境光线较暗,可以设置设备自动切换到暗模式。

专注于你的内容

黑暗模式将焦点放在界面的内容区域上,当周围的用户界面退回到背景中时,内容可以脱颖而出。

测试设计在明亮和黑暗的外观设计

看看你的界面在两种外观上看起来如何,并根据需要调整你的设计以适应每一种外观。 在一个外观上运行良好的设计可能在另一个外观上运行不良。

当您调整对比度和透明度可访问性设置时,请确保您的内容在黑暗模式下仍然清晰可读

在黑暗模式下,你应该用增加对比度和减少透明度来测试你的内容,不管是单独的还是一起的。 你可能会发现黑色的文字在黑色的背景上难以辨认。 您可能还会发现,在黑暗模式下打开增加对比度会导致深色文本和深色背景之间的视觉对比度降低。 尽管视力强的人可能仍然能够阅读对比度较低的文本,但对于有视觉障碍的人来说,这些文本可能难以辨认。 有关指导,请参阅颜色和对比度。

Colors

暗模式的调色板包括深色的背景色和浅色的前景色,这些都是经过精心选择的,以确保对比度,同时保持模式之间的一致感觉。

使用与当前外观相适应的颜色

语义颜色,像分隔符,自动适应当前的外观。 当你需要一个自定义的颜色,添加一个颜色设置资产到您的应用程序的资产目录,并指定颜色的浅色和深色变种,以便它可以适应当前的外观模式。 避免使用硬编码的颜色值或不适应的颜色。

确保在所有外观上有足够的颜色对比度

使用系统定义的颜色确保了前景和背景内容之间适当的对比度。 对于自定义的颜色,目标是7:1的对比度,特别是对于较小的文本。 有关指导,请参阅动态系统颜色。

软化白色背景的颜色

如果你必须在黑暗模式下使用白色背景,选择稍微暗一点的白色,以防止背景在周围的黑暗内容中发光。

Image, Icon, and Symbol Color

该系统使用的 SF 符号,自动看起来很棒的黑暗模式,和全彩色图像,都是优化的光和黑暗的外观。

尽可能使用科幻符号

符号看起来伟大的两种外观模式时,你使用动态的颜色淡化他们或当你添加活力。

必要时,设计光线和黑暗外观的独立符号

在光模式下使用空心轮廓的字形在暗模式下看起来更像实心填充形状。

确保全彩图片和图标看起来不错

相同的内容,如果它在光明和黑暗模式下看起来不错。 如果一个内容在某一种模式下看起来不错,那么修改该内容或者创建单独的明亮和黑暗模式的内容。 使用目录将内容组合成单个命名的图片。

Text Color

活力可以帮助保持文字在深色背景上的良好对比度。

使用系统提供的标签颜色作为标签

初级、次级、三级和四级标签颜色能够自动适应亮色和暗色的外观。 有关指南,请参阅字体设计。

使用系统视图绘制文本字段和文本视图

系统视图和控件使你的应用程序的文本在所有的背景上看起来都很好,可以根据是否有活力自动调整。 如果可以使用系统提供的视图来显示文本,就不要自己绘制文本。 有关开发人员指南,请参阅 UITextField 和 UITextView。


END.THANKS FOR YOUR READING~

如有不当,还请多多指教~

上一篇 下一篇

猜你喜欢

热点阅读