020-85548809,29883069

网站设计、网站优化、微信开发

资讯

分享你我感悟

您当前位置>主页 > 资讯 > 设计中,掌握六大元素丰富网页视觉层次!

设计中,掌握六大元素丰富网页视觉层次!


“会哭的孩子有奶吃”这是老以辈常说的话,孩子哭了,父母就知道孩子饿了;把这句话运用于网页设计中,突出网站中的主题元素,才能够吸引用户的注意。那么如何能够确保你的品牌标志设计真够有效的传播呢?只有让你的设计更富有层次,更精彩!让网页从视觉上虏获用户的心!
那么问题来了,富有视觉层次的网页可以从哪些方面突出呢?

视觉层次结构的一个最重要的功能是帮助作品建立一个焦点,当观众开始浏览你设计作品时给他们一个入口点,并且让他们能够看到你要展示的最重要的信息在哪里。
让我们回顾一些不同的方式,通过突出我们的设计元素,来创建一个清晰的具备焦点和动态的视觉层次:

1.使用大小来加强(或削弱)可见性
把最大的设计元素最吸引眼球。扩大一个对象的大小(其尺寸)和规模(它与其他对象的大小关系)是提高它视觉重要性最简单直接的方法。

另一方面,一些设计元素没那么重要或者你想把它弱化,可以通过减小它的大小来使它不那么明显,以此来降低它的视觉层次。
就像任何的设计准则一样,平衡和适度都是关键。一个太大的视觉焦点会毁掉一个设计,而一个太小的次要信息则会损害其可用性。

2.色彩和对比度:对观众注意力直接的吸引

在视觉上最能引起我们注意的就是色彩,特别是当它被有意图地用在特别重要的信息传达或者图像当中。比如像红色或者黄色这样明亮的色彩,不管它是出现在道路两旁的交通标志上还是挂在当地咖啡馆门头上的招牌上,我们都很难不去注意到它。

然而,如果你想把彩虹当中出现的所有颜色都用于设计中,当你忽略其中任何一种颜色都有可能影响视觉层次的构建。这也是我们提倡带使用尽可能少的颜色并且带有目的性的使用它的关键原理所在。
从另一个角度来说,在色彩和对比度的设计上,也有很多创造性的方法可以应用于引导观众的视线,包括:
色温:色彩可以是冷的(就像蓝色和绿色),暖的(例如红色、橘色和黄色),也可以是中性的(比如黑色、白色、灰色,有些时候出现的棕色或米色)。色温的混搭,特别是出现高对比度的时候,能够产生很大的视觉吸引力。
色值:颜色的色值指的展示为颜色的亮或暗。像色温一样,不同色值的颜色可以通过互相搭配,产生戏剧性的效果,而相似的色值的颜色则会有更均等的视觉重量。
饱和度:一个极其纯的颜色,其明度是100%饱和,越接近灰色,就越不饱和。采用明亮的或柔和的颜色(一种单一的颜色或者与别的颜色相配合)是在设计中实现高对比或者低对比的重要策略。

03. 排版的层次结构:从3个层次来组织你的设计
对于任何以文字为主的设计,文字排版层次是视觉层次中一个不可忽视的部分。若想了解文字排版层次最基本的概念,只要去想想那些报纸或者杂志文章里面的标题,子标题和正文。

这个将文字分为3层次的方法能用个任何的设计里面(从名片到网站)。让我们在更详细的了解一下每个层次并看看他们通常可能被用在哪里。
第一层次:一般来说,你排版中的第一层次会是最重要的内容,这些内容应该是你设计中最容易被看到的元素
第二层次:第二层次的元素一般是为了整合你的设计,或者把相关的信息链接起来。它们不能跟你的第一层级的元素一样出众,但是应该很清楚的指导阅读者区分设计中不同的部分和引导读者。
第三层次:对于一个文字的排版,第三层次一般是指完整的信息,目的或者是设计的细节。它可以是长的或者短的(比如一整片文章,一个简短的注释,一个简介)。但是这部分主要考虑其强烈的可读性,即使文字的大小看起来稍微小。

04. 字体:仔细选择字样类别和风格
排版层次不是文字排列时需要考虑的唯一一个方面。您的字体本身的外观 – 字体类别(无衬线,衬线字体,脚本,或装饰)和样式(粗体,斜体,小盘股等) – 这些因素决定是否造就好的设计
可以把字体想象作为人格类型。你知道有些是响亮而华丽的,有些是安静,但有趣的,其他的一些是灵活的,适用在什么地方,取决于跟谁搭配。
适当地使用这些特性(使之与你项目中的内容相匹配),并有策略地提升你的设计。虽然排版层次将整合你的设计,使之便于浏览,文体的选择则有助于提升设计的整体气质,并创建一个自然的强调方式。

5.间距:让你的布局平衡、流畅以及焦点明确
通常,在设计中最容易忽视的却很重要的原则是白色区域的大小和留白手法。当你在你的设计布局中没有提前为留白区域做准备,尤其是你努力去填充尽可能多的信息的时候,很大可能你最终会得到一个乱七八糟、混乱不堪的设计。这是因为留白在你的设计中是能够帮你分离组织元素,让其看起来有条理,布局平衡的必要元素。
你可能之前看到过:一个网站或传单被信息、文字和图像塞得满满的,你甚至不知道你应该从哪开始看起。不要创造出像那样在浏览顺序上杂乱无章的设计,这样会赶走你的来访者。
时刻计划着空白区域,这是至关重要的事,如:
·让浏览者的眼睛有一片休憩的区域以及畅游设计的路径。
· 将版面分为几部分(这样做一方面能保持良好的间距,另一方面是能减少空间,从而把相关内容连接的更紧密)

06.构图:确定你的设计结构
你能通过我们之前提到的一些技术方法制作的布局来引导访问者,但是,大部分设计更受益于整体结构或者组织规律——这就是我们熟知的构图。
艺术家已经使用构图技巧已经有几个世纪了,它们大部分还在今天使用。让我们来看一看一些最常用的构图方法。
三分法:三分法是一种动态的构图方法,你的焦点预先不是放在中心点上。
相反,这条规则把整体布局分成一个网格,(三条相同距离的水平线和三条相同距离的垂直线)然后,把焦点放在一条线上,或者放在四个相交点其中一点上。

奇数法则:这个法则告诉我们3往往更好。一个创意的周围有一个奇数的对象(或许焦点被其他两个或者四个项目围绕,如下)总是比一个偶数在视觉上看起来更有趣和令人高兴。

隐藏的韵律:这会是一个非常有效的指明重要信息和提供简明设计方案的技巧。怎样创造这种具有动感的设计?视觉导向线。
导向线不必是实实在在的线条(即使它们可以是实实在在的线条)。它们或以实物、形状、重叠式设计元素、正负形交叠的状态出现,或者其余任何能创造一种定向运动的形式。
最常见的除水平的、垂直的,对角的导向线以外,还有S曲线、Z字形线。Z字形线性版式是一种普及的网页布局基础,是利用”Z”的形状为阅读模式的方式。

建立明确的视觉层次在你的设计项目中的重要性。当然,过多的强调点很容易会破坏整个视觉的层次效果。视觉强调不能使用在过多的设计元素中。否则,所有的东西都变得一样了。当所有的东西都被突出,那也就意味着没有一样东西能够被突出。层次建立的基础是要强调某些元素,同时削弱某些元素。

 

,