网页设计之美

提醒:本文最后更新于 5441 天前,文中所描述的信息可能已发生改变,请谨慎使用。

网页把各种信息以最快捷、方便的方式传达给受众。人们对美的追求是不断深入的,网页设计同样如此。网页不光是把各种东西放上去,能看就行,这是远远不够的!要考虑如何受众能更多的和更有效率的接收网页上的信息,从而使他们对给网站留下很好的印象,那就更能促进自己网站的运作。在这种标准的要求下,逐步产生了审美的需求。这需要从审美的方面入手,结合使用方便的要求,就能制作出清晰、整体性好的页面。使人浏览起来心情愉快,接收信息也会更加容易。同时提升网站的形象。

主页的设计主要是网页设计软件的操作与技术应用的问题。但是,要使主页设计、制作得漂亮,必然离不开对主页进行艺术的加工和处理,这就要涉及到美术的一些基本常识。本文将介绍一些主页设计中经常涉及到的艺术处理原则,供各位在进行主页制作的时候参考。

一、风格定位 :

主页的美化首先要考虑风格的定位。任何主页都要根据主题的内容决定其风格与形式,因为只有形式与内容的完美统一,才能达到理想的宣传效果。目前主页的应用范围日益扩大,几乎包括了所有的行业,林林总总,包罗万象,但归纳起来大体有这么几个大类:新闻机构、政府机关、科教文化、娱乐艺术、电子商务、网络中心等。对于不同性质的行业,应体现出不同的主页风格,就像穿着打扮,应依不同的性别以及年龄层次而异一样。例如:政府部门的主页风格一般应比较庄重,而娱乐行业则可以活泼生动一些;文化教育部门的主页风格应该高雅大方,而商务主页则可以贴近民俗,使大众喜闻乐见。

主页风格的形成主要依赖于主页的版式设计,依赖于页面的色调处理,还有图片与文字的组合形式等。这些问题看似简单,但往往需要主页的设计和制作者具有一定的美术素质和修养。   还有,动画效果也不宜在主页设计中滥用,特别是一些内容比较严肃的主页。主页毕竟主要依靠文字和图片来传播信息,它不是动画片,更不是电视或电影。至于在主页中适当链接一些影视作品,那是另外一回事。  

二、网页布局:

网页的布局体现了一个网页的整体结构和气势。布局搭配好的网页,一瞬间就能吸引网友的眼球,而布局不好的网页,就算你的内容在怎么生动,我想网友看的也不是很开心的。对于版面的布局,有多种多样的技巧,它们能让你的版面显得更加的吸引人。这就要求你你做各种各样的尝试,或吸取前人的经验,来丰富自己的网页布局的技巧。比如:

  1. 网页的白色背景太虚,则可以加些色快;
  2. 版面零散,可以用线条和符号串联;
  3. 左面文字过多,右面则可以插一张图片保持平衡;
  4. 表格太规矩,可以改用导角试试。

下面我们来看看我们经常用到的版面布局形式:

1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条,下方左面为主菜单, 右面显示内容的布局,因为菜单条背景教深,整体效果类似英文字母"T",所以我们称之为"T"形布 局。这是网页设计中用的最广返的一种布局方式。(图略) 这种布局的优点是页面结构清晰,主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板,如果细节色彩上不注意,很容易让人"看之无味"。

  • 2."口"型布局。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情连接等,中间是主要内容。(图略) 这种布局的优点是充分利用版面,信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤, 不够灵活。也有将四边空出,只用中间的窗口型设计,例如网易壁纸站。
  • 3."三"型布局。这种布局多用于国外站点,国内用的不多。特点是页面上横向两条色块,将页面整体分割为四部分,色块中大多放广告条。
  • 4.对称对比布局。顾名思义,采取左右或上下对称的布局,一半深色,一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是将两部分有机的结合比较困难。
  • 5.POP布局。POP引自广告术语,就是指页面布局象一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类站点,比如ELLE.com。优点显而易见:漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。以上总结了目前网络上常见的布局,其实还有许许多多别具一格的布局,关键在于你的创意和设计了。
  • 三、版面编排

     

    主页的设计首先涉及到的是页面的版面编排问题。"版面编排"实际上就是中国古代画论中的"经营位置"。主页作为一种版面,既有文字,又有图片。文字有大有小,还有标题和正文之分;图片也有大小,而且有横有竖之别。图片和文字都需要同时展示给观众,总不能简单地罗列在一个页面上,这样往往会搞得杂乱无章。因此必须根据内容的需要,将这些图片和文字按照一定的次序进行合理的编排和布局,使它们组成一个有机的整体,展现给广大的观众。可以依据如下几条来做:

    • 1、主次分明,中心突出。在一个页面上,必然考虑视觉的中心,这个中心一般在屏幕的中央,或者在中间偏上的部位。因此,一些重要的文章和图片一般可以安排在这个部位,在视觉中心以外的地方就可以安排那些稍微次要的内容,这样在页面上就突出了重点,做到了主次有别。
    • 2、大小搭配,相互呼应。较长的文章或标题,不要编排在一起,要有一定的距离,同样,较短的文章,也不能编排在一起。对待图片的安排也是这样,要互相错开,造成大小之间有一定的间隔,这样可以使页面错落有致,避免重心的偏离。
    • 3、图文并茂,相得益彰。文字和图片具有一种相互补充的视觉关系,页面上文字太多,就显得沉闷,缺乏生气。页面上图片太多,缺少文字,必然就会减少页面的信息容量。因此,最理想的效果是文字与图片的密切配合,互为衬托,既能活跃页面,又使主页有丰富的内容。
    • 4、空格使用恰当,错落有致。我觉得,网页的疏松程度在视觉方面也是相当的重要的。如果一个网页因为追求内容而将文字都挤在一块去了,那样也是相当的难看的。我们不妨在段落与段落之间稍稍留些空行,在文字与图片之间,适当留些空格,这样说不定能起到更好的效果。
    • 5、内容排版恰当,吸引人的先说。对于信息类的网页,我认为,第一下抓住网友的心是非常有必要的。如果网友在匆匆一瞥之间认为这个网页没什么可看的,那也许他就不会在看这个网页了。所以,我认为,内容的排版上我们要相得益彰,主次顺序要搞清楚。
    • 6、字体的设置要合理,赋予文字个性。文字的设计要服从于作品的风格特征。文字的设计不能和整个作品的风格特征相脱离,更不能相冲突,否则,就会破坏文字的诉求效果。一般说来,文字的个性大约可以分为以下几种:
      • (1) 端庄秀丽:这一类字体优美清新,格调高雅,华丽高贵。
      • (2) 坚固挺拔:字体造型富于力度,简洁爽朗,现代感强,有很强的视觉冲击力。
      • (3) 深沉厚重:字体造型规整,具有重量感, 庄严雄伟,不可动摇。
      • (4) 欢快轻盈:字体生动活泼,跳跃明快, 节奏感和韵律感都很强,给人一种生机盎然的感受。
      • (5) 苍劲古朴:这类字体朴素无华,饱含古韵,能给人一种对逝去时光的回味体验。
      • (6) 新颖独特:字体的造型奇妙,不同一般,个性非常突出,给人的印象独特而新颖。

    具体的设置要看网页的内容,风格,和制作者的眼光了。关于网页的设计,理论上的吸收是没有多大用的,关键还是要自己理论结合着实践,去不断的实验,在制作与失败中汲取教训,这样才能制作出赏心悦目的网页。

    Avatar
    怡红公子 擅长前端和 Node.js 服务端方向。热爱开源时常在 Github 上活跃,也是博客爱好者,喜欢将所学内容总结成文章分享给他人。

    0 评论