ui设计具体常识（UI设计之对比原则）

ui设计具体常识（UI设计之对比原则）下面的例子可能是一个网站主页的布局。注意字体是如何帮助在标题中增加对比度的。对比的字体大小和样式可以表示标题在从属文本部分之前。它打破了流程，给了读者视觉上的提示，让他们暂停下来，转移他们的注意力，并允许他们处理大块的信息。何时使用对比在界面设计中，我们使用对比来组织信息和引导视线。一面没有对比元素的文本墙阅读起来很无聊。

4.1 UI设计之对比原则

本文章属于《跟我学线框图》系列教程，转载请注明出处。

对比指的是事物之间的差异。

有各种各样的方法来实现对比。一个常见的增加对比的方法是使事物在大小上非常不同。另一种方法是使用对比色。

何时使用对比

在界面设计中，我们使用对比来组织信息和引导视线。

一面没有对比元素的文本墙阅读起来很无聊。

对比的字体大小和样式可以表示标题在从属文本部分之前。它打破了流程，给了读者视觉上的提示，让他们暂停下来，转移他们的注意力，并允许他们处理大块的信息。

下面的例子可能是一个网站主页的布局。注意字体是如何帮助在标题中增加对比度的。

你可以在许多传统报纸上找到类似的例子。这也是视觉层次结构的一个例子，我们将在下面进一步讨论。

我们也用对比来表示重要的信息。

当警告或重要信息需要关注时，使用不同的字体或颜色可以提醒用户。

例如，红色文本块可能会使用户在破坏性操作之前暂停。这个红色的对话框在淡灰色的背景下对比强烈。

你可以在应用程序设计中找到类似的例子，比如 如果你要进入一个含有恶意软件的网站，Google Chrome 浏览器显示警告。

注意白色文本在红色背景下的效果。这是因为白色与红色的背景反差很大。

使用颜色时有一些注意事项。当涉及到线框图时，这些问题就不那么重要了，但是当你进入视觉设计时，请注意下面的一些问题。

注意不要使用对比度不够的颜色，因为它们可能很难阅读。例如，蓝色也不会起作用

当涉及到色彩时，一定要考虑文化规范

颜色在不同的文化中有不同的含义

还要注意，那些视力有色觉障碍的用户也可能难以识别某些颜色

如何使用对比

当事物之间存在很大差异时，对比效果最佳。

在下面的表格中，所有的文字都太相似了。标题和标签几乎没有什么对比，因此用户需要做更多的工作来解析文本，以确定一条信息在哪里结束，另一条信息在哪里开始。

我们可以增加更多的对比度，使信息片段彼此对比。

通过使用缩放和加粗使标题和标题在视觉上脱颖而出，在继续下面的输入之前，可以一目了然地阅读它们。这有助于用户更容易地理解信息。

某些控件可以帮助您轻松地使用对比文本。在 Balsamiq （本教程使用软件），Title 控件默认为40px，文本块(对于正文非常有用)采用默认项目设置(大约13-16px)。

记住使用有意为特定上下文设计的控件，这样可以让你保持有效使用对比度的练习。

关于本教程软件

本教程软件为 Balsamiq 是一个线框图设计软件，可在后台资源下载列表获取。

回复关键字：线框图 获取软件及注册码