互动媒体设计Ⅰ

什么是视觉层次？元素的排列方式暗示了相对重要性。这是设计师尝试引导眼睛感知呈现的信息的顺序。

来源：https://dribbble.com/shots/1315388-Dashboard-Web-App-Product-UI-Design-Job-Summary

    我们感知信息的方式受到几个因素的影响，这些因素有助于我们对布局中内容的层次进行排名。让我们跳入一些层次结构基础知识：

一，版式

什么是好的排版？两个主要因素是易读性和可读性。

易读性是一种字体的先天品质，它使每个单独的字母形式彼此区分开。这完全取决于字体，因此您无法做任何使字体更清晰的事情，因此请适当选择。

可读性取决于您如何操作特定字体以使其更易于理解。

 注意顶部字体比底部字体难读吗？如果不…

现在呢？

   确定某项内容易于阅读的另一个因素是行长。如果行太短，并且阅读器不断在行与行之间跳动，则阅读器很难吸收信息。如果线长太长，也会发生同样的情况-眼睛很快就会疲劳。

   另外，切勿将大块副本居中。对于我们来说，阅读左对齐的文本块要容易得多，因为眼睛可以准确知道下一行的开始位置。

二。留白（又称负空间）

有没有人看过菜单/网站/界面，然后想到：“这看起来很棒，但我不确定为什么吗？”好吧，你现在知道了。答案是空格。空白有助于极大地提高可读性和理解力。一项研究发现，在段落之间以及左右边距中充分利用空白可以将理解力提高近20％。读者发现集中精力和处理宽间隔内容更容易。

 正空间=狗。负空间=猫

   许多人认为空白取决于“味道”。我认为这比这更客观。我们可以有意地使用空白来创建强大的层次结构。让我们看一下HelenTran的网站，以及她如何有意使用空白：

资料来源：https://dribbble.com/shots/2047524-V5-0-Website-Redesign

美的作品集！现在，让我们仔细看看：

注意如何有4个清晰的内容块。让我们进一步细分一下：

Helen使用行高，字体大小，颜色和空白的组合来分隔每个块本身中的内容。这使用户可以轻松自然地浏览这些内容块的各个部分。

三，颜色

颜色理论确实非常复杂。我的目标不是解释颜色理论的全部，而是为您提供一些广泛的概念，您可以立即在UI设计中加以利用。

如果您凝视上面的图片，您会注意到左侧的蓝色方块感觉更远，而右侧的红色方块感觉更近。温暖的色彩朝向您，而冷色逐渐淡入背景。让我们在一个UI示例中看一下：

资料来源：Dribbble

在上面的设计中，我们可以看到设计师如何使用暖红色将号召性用语（立即更新）向前移动，而如何使用较冷的蓝色将导航移到更远的背景中。左图中的情况相同。红色的闪电图标立即在界面的其余部分中脱颖而出。

您还可以使用颜色将相似的界面组件组合在一起：

资料来源：Dribbble

最后，少即是多。颜色越多，每种颜色的影响就越小。一个很好的例子是Instagram最近的重新设计：

颜色的减少不仅使照片更加突出，而且还提高了通知的有效性，因为它们不再与顶部和底部导航栏中的颜色竞争。