APP下载

浅析CRAP在网页设计中的应用

2017-09-24李娜

科学与财富 2017年23期
关键词:重复网页设计对比

摘 要:初学者在学习网页设计课程时,对设计中需要注意的一些设计原则不太清楚,本文将从CRAP中获得了相关的设计原则,提出设计原则在网页设计中的应用,供初学者参考。

关键词:网页设计;对比;重复;对齐;亲密性

CRAP是罗宾?威廉姆斯在《写给大家看的设计书》中提出的基于设计中的Contrast(对比)、Repetition(重复)、Alignment(对齐)和Proximity(亲密性)4个基本原则。随着网络的不断发展,CRAP已经被网页设计师们广泛应用,同时在中职学生的网页设计课程教学中也起到了非常重要的作用。教师可以将此四原则融入到网页设计的教学中,从而提高学生对网页设计的能力。

原则一:Contrast对比。在网页设计中要让各个元素之间各不相同,避免使用基本相似的页面元素,这样可以使网页呈现多元化。例如网页中不同的文字颜色、大小 ,线条的样式与宽度,使用不同的形状。但在使用这些元素时要让各元素之间产生协调,但对于中职学生来说,他们对自主设计网页,不自信,不敢尝试使用不同的元素。其实对于网页设计的初学者来说,可以尝试使用不同的元素,这种尝试会有一些突发状况,但是也常常会带来惊喜。这些元素的使用,可以使页面具有特色,并与众不同。

举个例子,对于新闻类的网页来说,信息量比较大,怎么让你的新闻吸引读者的注意?在首页中先设置一个新闻标题,也就是先给读者一个内容悬念的标题,然后在标题下注明提要,标题字体要大,加上下划线,字体颜色可以有变化,最好使用加粗的字体,提要字体要相对小些。然后是新闻的正文,正文中标题和内容的设置区别要大些,标题可以设置为初号,颜色可以和网页整体色调一致。内容字体也不要使用默认大小,要调整的大一些,可以使用四号。

原则二:Repetition重复。当你打开浏览器时,网页中有许多元素是重复的,比如颜色、形状、纹理、字体、空间关系、大小、图形等。而在网页设计中,重复最多的要数导航栏,几乎大部分网站的导航栏在每个页面中都有,都是重复的,这样使用者就不会陷在那儿,费神思量,试图搞清楚不同条目的位置。

例如《生命时报》、《时代》、《纽约时报》这样的网站,它们都有某些元素,会在网页间重复出现。那么在设计网页时,则要将些元素设置成相同的格式,并且字体大小、颜色、图片都要一致且醒目,并将它们放在页面的同一个位置。那么要实现这样的统一,最好在制作网站时,将这些网页元素的样式设置在外部样式表,这样所有页面在调用外部样式表时,可以保证一致,同时修改时,也可以达到一起修改的效果。

原则三:Alignment(对齐)。在网页设计是,很多人习惯将所有的元素居中显示,其实这样是不利于阅读的。想一想,我们每天都看到的东西,你读过多少本书是居中排列的,有多少报纸杂志的文章是居中排列的,又有多少散文是居中排列的,通常是没有。因为我们人类阅读文字的顺序是从左至右,所以在对齐方式的使用时,请不要让文字在网页上居中,那看上去很糟糕,很难阅读。在网页设计时,考虑到读者的视觉,不能在网页上随意陈列元素,不要在左侧放图片,那是文章开始的地方,也不能随便在網页某处插入图片,在制作时要让它与页面上的元素排列成一个整体。

例如在设计网页中文字与图片的对齐时,可考虑人们阅读的习惯,将文字放在页面的左边,也就是使用左对齐,将图片放置在页面的右边,但要注意,图片所占的区域不能大于文字,如果需要在页面中放置的图片比较好时,可以使用一些特效将图片放在一个组中,使用特效来展示图片,网页中的各个元素之间不能乱,要有一定的规律,使整个页面要给读者有块的感觉。

原则四:Proximity(亲密性)。网页设计中,相互关联的元素应当分组到一起,让它们构成一个视觉单位,比如导航栏的设计要有特点,与同一网页上的其它元素要有区别,但让导航栏在网页上独立存在。在设计中,要将大量的信息进行归类,将归类的类目进行提炼,然后放在导航栏中。同时在设计时,要考虑读者的阅读习惯,他们一般都不愿意滚屏浏览,不会向下浏览到你的下方内容,所以要最大限度利用桌面面积,将网页元素尽可能多的放置在页面上方,这样页面启动时,此处可载入最多内容。但不能为了把所有信息都放在页面上,能使用页面变得拥挤,在设计时还是要给页面留白,这样页面就会让读者不会觉得杂乱了。

以上四原则在实际教学中,教师可以参考,将设计原则应用到自己的教学项目中,在教学项目中提出为什么要这么设计,应用了设计原则中的哪一条,这样CRAP才能让中职学生更容易接受和掌握。

参考文献:

[1] 姜恩正:设计师谈成功网页设计原则.电子工业出版社,2016年

[2]威廉姆斯:写给大家看的设计书.人民邮电出版社.2016年

作者简介:李娜(1982.2),女,湖北十堰人,大学本科学历,湖北省十堰市高级技工学校中级(讲师),主要研究方向:计算机程序设计和网页制作。

作者单位:湖北省十堰市高级技工学校,湖北十堰,442000

猜你喜欢

重复网页设计对比
创伤书写之“重复”
如何走进高三孩子的复习阶段
对技工院校网页设计课程建设的思考
网页设计教学的创新探索
谈计算机网页设计中的布局
探索规律中感悟和认识“重复”的奥妙
少数民族文化艺术元素在网页设计中的运用探讨
中日两国胶囊旅馆业的发展对比及前景展望
克里斯托弗·马洛与陶渊明田园诗的对比
英国电影中“愤青”与“暴青”对比研究