互动媒体设计Ⅰ

admin
admin
数字艺术
免费
  • 69 lessons
  • 0 quizzes
  • 4 week duration

互动媒体设计Ⅰ

6.6 原则五:使用视觉层次结构

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

来源: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最近的重新设计:

 

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