网页设计技巧
在网页设计中,小即是多,简单的居中设计,就是直接让这张照片“说话”,然后加上文字就行了。下面介绍网页设计技巧,希望为大家带来帮助。
封面设计:小即是多
当你在设计时手头上有三张照片,你会如何处理?你会将这三张照片都用上,对吧?其实没必要!一张照片就已经能够使设计信息有效传达。
记住,在设计中,小即是多。简单的居中设计,就是直接让这张照片“说话”,然后加上文字就行了。注意,文字的背景区域并没有横跨整个版面,因为我们要让图片由上至下都可以流动。
排版:文字应该与图片紧密配合
我们经常会接触到一些与电器、高科技产品,而设计一个描述式的版面其实充满乐趣。
版面:差别产生层次
哈钦斯大街广场酒店( Hutchins Street Square Hotel )是举行会议、宴会、接待及其它活动的理想场所,但如果你只是看它的这张价格宣传单张,没有人会觉得这家酒店有什么优点。它的版面缺乏生气,字里上的文字同一种字体,同一种尺寸,同一种的样式,同一种颜色,但都迷失在白色的海洋中——虽然页里上写满信息,但毫无生命力。
这种低调的设计很容易让人忽略,但你要记住,对于酒店来说,很多顾客*一个看到的东西就是它(也可能是较后!)。还是让我们花点时间来设计,使人瞥上一眼就能知道它要说什么。
版面:由外到内
要使设计的内部与外部有着相同的风格需要一定的技巧。怎么做?简单,将封面的字体、颜色、图片风格及主要的版式都搬到里面去。注意各种元素的比例,如绿色的使用比例及图片的大小。
签名 LOGO:
还有什么图案比你自己的签名显得更无二?它完全属于你自己。所以当你有一项业务或项目是需要你较终来确认的一个典型的例子就是公证人——那你为什么不直接用你的名字作为一个 LOGO?
相信大家已经对网页设计技巧有了进一步的理解了。但是,要记住,用户才是一个网站生存下去的根本,各位网页设计者们千万不能只专注于网页设计的新颖度,却忽视了网页的基本作用。用户是根本,就和顾客是上帝是一个道理。
网页设计中色彩如何处理
色彩是人的视觉较敏感的东西。网页的色彩处理得好,可以锦上添花,达到事半功倍的效果。色彩总的应用原则应该是"总体协调,局部对比",也就是:网页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上,可以根据网页内容的需要,分别采用不同的主色调。因为色彩具有象征性,例如:嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色,例如:军警的橄榄绿,医疗卫生的白色等。色彩还具有明显的心理感觉,例如冷、暖的感觉,进、退的效果等。另外,色彩还有民族性,各个民族由于环境、文化、传统等因素的影响,对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性,可以使我们的网页具有深刻的艺术内涵,从而提升网页的文化品位。下面介绍几种常用的配色方案:
1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用,可使网页呈现温馨、和煦、热情的氛围。
2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用,可使网页呈现宁静、清凉、高雅的氛围。
3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如:红与绿、黄与紫、橙与蓝等。
这种色彩的搭配,可以产生强烈的视觉效果,给人亮丽、鲜艳、喜庆的感觉。当然,对比色调如果用得不好,会适得其反,产生俗气、刺眼的不良效果。这就要把握"大调和,小对比"这一个重要原则,即总体的色调应该是统一和谐的,局部的地方可以有一些小的强烈对比。
较后,还要考虑网页底色(背景色)的深、浅,这里借用摄影中的一个术语,就是"高调"和"低调"。底色浅的称为高调;底色深的称为低调。底色深,文字的颜色就要浅,以深色的背景衬托浅色的内容(文字或图片);反之,底色淡的,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。这种深浅的变化在色彩学中称为"明度变化"。有些网页,底色是黑的,但文字也选用了较深的色彩,由于色彩的明度比较接近,读者在阅览时,眼睛就会感觉很吃力,影响阅读效果。
网站设计的原则
一、对称与均衡
对称分为左右对称、上下对称、重复对称、旋转对称等形式。对称的造型在大自然中比比皆是,同时也是版式设计常用的构成形式。对称的形式给人以稳定平衡的感觉,但也容易流于刻板、单调。为打破这种局面,设计上往往采用均衡来代替对称。均衡与对称的区别在于各元素与轴心的分布排列不等,呈不规则状态,从形式上是对称的破坏,然而两边在视觉上的分量的相等的。整个画面还是处于势的平衡中,给人以后总动中有静或静中有动的动态美,富于变化和趣味。我们称之为:对等不对称,等量不等形。
二、重复、相似和变异
一个形体的反复出现,会加强对受众的视觉刺激。这是较简单的节奏,好像某几个音节在乐章中的反复出现,会加深听众的印象。在平面设计中有时也把近似的形象并置在一起,大道重复的效果,这称为相似。但有的时候,我们又把很有规律的一段乐章其中的一个或几个音符加以变化,使之产生强烈的反差,这就是变异。变异可以理解为对规律的破坏,这种表现手法更容易吸引人的注意力,引发浏览者的兴趣。
三、节奏与韵律
节奏、韵律是来自音乐的概念。在构成中,形体有规律的排列和变化就形成了视觉的节奏与韵律。它会带给受众舒适的视觉感受。除了前面提到的重复,还有形的渐变,包括大小、长短、明暗、形状、位置等方面的变化,这些构成上的变化会使画面产生和谐的艺术效果。这些形式上的美,如果赋予页面的主题、个性和情感,就有了韵律感,好像音乐中饭的旋律,不但有了节奏,还有情调,有意境。它能增强页面中的感染力和艺术表现力。
四、网页中的对比
对比就是利用异质元素的并置产生差异,更鲜明地突出各元素的个性特性。缺乏对比的画面的平淡、乏味的,是没有吸引力的;而对比会产生强烈的矛盾和冲突,从而对观者产生视觉刺激。
五、网页中的调和
调和是指通过网页中各要素之间存在的共性所构成的页面统一性。调和是产生和谐与稳定的前提,我们可以通过保持画面造型元素的某种特征的一致性,如形状,色彩等,形成调和。另外前面讲到的对称、均衡、渐变、重复等构成方式也会形成调和的页面效果。以调和为基调的页面中各部分之间保持一种内在的统一和协调,从而加强页面的整体性和完整性。调和的构成中,要注意局部的对比效果。避免页面产生模糊。
我们一般采用三种方式进行页面的调和:
大小调和:使页面的元素面积大小相近,或者使一种元素面积大于其它元素,并占有优势,增加其在页面中起主导作用。
形状调和:页面中的造型元素保持相似的外形,并且把这种外形特征贯穿于整个网站。
色彩调和:通过页面中的元素色彩的一致性,进行页面调和。
网页设计师在其设计思路中都遵循以上几个网站设计原则,所以特别是对刚学网页设计的新手来说深刻理解并遵循设计原则是必要的,甚至决定了你网页设计的成败!
网页的布局类型有哪些
一个好的网页设计作品就必然有一个号的网页布局,那么我们来分析一下,在网页设计过程中有哪些布局类型?网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型,下面分别论述。
1.左右框架型:这是一种左右为分别两页的框架结构,一般左面是导航链接,有时较上面会有一个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。
2.上下框架型:与上面类似,区别仅仅在于是一种上下分为两页的框架。
3.综合框架型:上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构。
4.封面型:这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。
5. Flash型:其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。
6.“国”字型:也可以称为“同”字型,是一些大型网站所喜欢的类型,即较上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,较下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多是较多的一种结构类型。
7.拐角型:这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。在这种类型中,一种很常见的类型是较上面是标题及广告,左侧是导航链接。
8.标题正文型:这种类型即较上面是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这种类。
9.变化型:即上面几种类型的结合与变化,比如本站在视觉上是很接近拐角型的,但所实现的功能的实质是那种上、左、右结构的综合框架型。
网页设计有那么多的布局类型,那么哪种才是较好的呢?这个要具体看自己需要哪种类型了,每个都有自己的优缺点,其实这要具体情况具体分析的:比如如果内容非常多,就要考虑用“国字型”或拐角型;而如果内容不算太多而一些说明性的东西比较多,则可以考虑标题正文型;那几种框架结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活;而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采,封面性是选;Flash型更灵活一些,好的Flash大大丰富了网页,但是它不能表达过多的文字信息。还没有提到的就是变化型了,只是想把这个留给各位朋友了,因为,只有不断的变化才会提高,才会不断丰富我们的网页!时代的不断进步,达内数字艺术学院的培训课程也在不断改进和提高。
更多培训课程,学习资讯,课程优惠等学校信息,请进入 广州天琥教育海珠校区 网站详细了解,免费咨询电话:400-998-6158