信阳夺你眼球!哪些方法可突出网站网页的关键内容?

编者按:我有特别的抢眼技巧!明天的好文十分值得拜读,@飞屋睿UIdesign 同窗从对比、颜色、字体、留白等方面帮同窗们将最关键的内容出现出来,文末还附上一个特别有效果的检测方法,一眼就能看出你的网站能否合格,周末来充电吧。

对比:引发兴味

为了更好地了解对比在网页设计中的作用,我们先解释下什么是对比。对比就是在一个相对封锁的环境里发作的某种元素间的一种关系,这些元素可以是颜色、纹理、外形、方向和大小。

只是稍稍对字号大小停止调整,或对颜色停止更改,就会马上改动整个界面的视觉效果。例如,当你看到下面这个网页时,把淡色的背景换为深色,首页有目共睹的“try it free”的首要按钮马上在视觉重要性上升级,而最下方的“call us”就会晋级为首要的按钮。

再来看看下图中,颜色和大小是怎样影响我们的界面视觉的。例如,很多人在第一眼审视而过时,不会仅仅就看到了两个圆。理想上,他们在看这两个圆时,曾经取得了这样的信号“一个黑色的大圆和一个白色的小圆”。也就是说,对比关系曾经可以在第一时间就进入人们的大脑中,构成剧烈的印象。

商业工具:颜色,大小和外形

当我们刚末尾设计一个页面的时分,一定不要遗忘了运用这几个弱小的视觉工具:颜色,大小和空间。设计师Alex Bigman就置信颜色和大小在管理着我们的视觉留意,而空间则协助管理视觉元素间的关系。

颜色

复杂说,亮色可以在柔和的颜色中凸显出来。这是显而易见的,而更为重要的是,在设计中,你就可以运用这一关系去吸援用户的留意。另外,特定的颜色也能协助营建网站的全体气氛(例如,蓝色代表安静,白色显得张扬和富有攻击性等)。

下面这个网站采用的是视觉体系中的Z形式,在此形式下,他们运用颜色的技巧是十分巧妙的。水蓝色的背景立刻将首要目的按钮凸显在了顶部,这些目的按钮的颜色可以与“get active”的颜色搭配,暗示这一系列的按钮的相关性。而下方的两个大的矩形区域由于外形的相似又相连,因此也暗示着它们之间的相似性。

大小

说到大小,我们通常在说的其实也就是网页字体的大小。在传统的从左到右自上而下的阅读形式中,这就曾经是个很弱小的元素了。这意味着,大号字体或段落的右下角通常是读者最先阅读的中央。因此,字号大一点发扬的就是一种强调作用。

讲到这一点,不得不提到,著名的网页设计名博Smashing Magazine对50个盛行的网页界面停止调查,他们发现这些网站通常都是采用标题字号18~29px,与此婚配的文章主体字号采用12~14px,只是这项调查针对的是英文字体,而中文字体相对来说应该字号会大一些易于识别。当然,这也只是一个大约的调查,并无相对。但是,你可以从中得知更多关于字号比例的排版设计的知识。

留白

网页设计的目的什么?复杂讲,就是创作一个美丽的页面。那么,你将一切的美丽的元素全部堆叠在网页中就美丽吗?无节制的添加吸引的元素是快速毁掉自己的设计方法之一。一个网页中有可以呼吸的空间是十分重要的,也就是我们总是爱说的留白。增加“视觉噪音”会让页面显得更有重点。

Usaura的开创人Dmitry就曾经指出,适当的留白能增强对网页内容的了解。2004年,一些研讨小组就调查过,适当的留白能让人们对网站内容了解水平增长20%。虽然用户并不会直接对留白的页面做些什么,但它却能影响到用户的满足和体验。大家可以看看下图的页面设计。在每一个主体内容,都保管少量留白,用户的视野流失掉了维护,让观者专注内容,才是最好的体验。

网页设计视觉体系的测试:模糊法

就我所知,有人曾提出这样一个方法来检测自己的网站。尤其是当你的网站有特别要强调的内容时,十分适用。将自己的网站首页,放在PS里模糊5~10个像素,这样来判别那些你想强调的内容能否依然能吸引到留意。

上图的网站经过模糊法测试后,我们会发现那些注册按钮和产品特性依然是很抢眼。这样的元素布置对我们来说就是合理的。

提供最优质的资源集合

立即查看 了解详情