欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

网站设计风格及色彩搭配技巧(二):排版

产品经理 夜阑小雨 523℃ 0评论

 二、排版

  网站的排版是让网页浏览者阅读方便,且内容主题明确的重要指针,若网站的排版经过精心规划,将会使浏览者更能迅速的找到所需的资料。就如同一本书,编排得当将会使读者一目了然,且更能了解该书所要阐述的内容。而网站的排版,就如同书册的排版一般重要。网站的排版包含了表格、框架的应用、文字缩排、段落等等,而排版并不是整齐就好,还要有明确的分类,以及主题的适当规划。

  表格的应用是一般大型网站最常见到的编排方式,表格能使多段文字统合整理,达到清楚易懂的效果。表格不见得是有形的表格,何位有形的表格?一般常见的有形表格,多为有框线,或是有底色。表格可多形式的运用,如图形与文字间的排版,表格可将图形与文字做最恰当的编排,充分结合于网页上。

  然而表格的底色或底图,应避免与文字起冲突。常见表格中用的底图或底色因颜色过重,而文字不清楚,表格的重点当然仍是在于文字,不是在作为配角的底图或底色。当底图只是衬饰的作用时,就应让其中的文字清楚明了。而表格的整体配色更是重要,框线及底色都应与网页整体配色为主,若是以表格作为同一网页编排,应尽量使各表格间不致差异太大。当有需要特别彰显内容的表格,才有其必要性作不同的配色。

  框架的应用,对于架设于较慢的网站空间之网页,较适合框架的应用,框架可避免相同网页重复读取,拖累下载速度。但框架因切割整个画面,造成浏览的内页空间大幅度减小,故再使用框架务必要注意到内容主页的易看性。框架编排,最需要注意的是左右滚动条应尽量避免,若一个网页在阅读上,要不断的移动滚动条往右又往左移,将会对浏览者造成很大的不便。

  另,框架也需要注意到连结的正确性,常看到以框架为主体的网页,竟然按下选单框架页中的连结,不是显示在内容框架页中,而是另开窗口,这真是脱着裤子放屁-多此一举!且框架过多的网页,会造成浏览者不知如何找寻资料的窘境。

  举个最常见的例子,很多小型的个人网站,常喜欢以多框架来架构网站,数一数甚至框架页达五六个以上,有时按了左侧的选单,以为内容会出现在内容框架页,却竟然是显示在右上角的某个小角落,这不是特有风格,既不美观也不实际,更难以找到资料!

  框架与表格皆为网页整体编排利器,该如何运用与走出自己风格,就是需要长时间的修饰版面、观摩学习(但绝非模仿抄袭)与经验了。

  三、窗口

  窗口效果的妥善运用,可以使网页有特色,但过度的应用反而会使人厌恶,甚至关闭网页不再造访,若真的因窗口的不当运用,造成浏览者不便而不想再继续浏览,那就是非常可惜的事了。

  全屏幕窗口,通常不为浏览者所喜爱,尤其是强制性的全屏幕浏览,一般上网者对于不同的浏览方式并非都能欣然接受。对于图片浏览的网站,若图片很大可以采用此种方式,以方便一窥全图,但必须于连结前先注明将会开启全屏幕窗口,较不会引起浏览者的反感。

  现有许多个人网站,都特别喜爱使用无工具列窗口,有的网站是将整个无工具列窗口放大至全屏幕,有的网站则是过小的超迷你窗口。前一种会使人难以跳开网页浏览做其它动作,造成很大的不方便;后一种更是糟糕,窗口小到几乎无法浏览,字体小、图形小、内容更少,这种窗口让浏览者的第一感觉就是网站没内涵,又小家子气。

  且这两种网站,几乎都有一个最大的共通点,锁鼠标右键功能。这样的锁定,对于网站本身并无多大助益,除了让浏览者不方便外,其实浏览者根本也无意于抄袭该网站,只会让人觉得网页很没内容又要怕别人抄袭。看到这种网站,大部分的浏览者并不会觉得有风格,若是觉得有风格,也不过是流于通俗的「小气风格」。

  另外则是有些许初学者的网站,特别喜好滥用窗口特效,举凡网页震动、闪烁等等,这些对于内容及个人风格上也无实质助益,能避免应尽量避免。毕竟有规模、有内涵的网站,根本不会有这样乱七八糟的特效。这样的特效的确也造成了某部分的特殊效果,即是网页混乱的特别效果。且越容易滥用窗口特效的网站,大多都无内容,想利用这些来混淆视听,试图造成浏览者的错觉,误以为内容丰富。但实际上欲达成的效果不但没有达到,反而会使浏览者一眼就看穿该网站制作者是一名网页新手,且该站几乎毫无内容可言。若网站本有丰富的内涵,因此而造成浏览者的错觉,岂不可惜?

  并非所有的窗口特效都是负面的评价,也是有某些情况时可以斟酌小心使用。若是资料量少,或是公告等小资料量的文件,可以酌量使用小窗口的开启,这种方式反而有助于网页的整体性,及浏览易读性。

  综合以上所述,一个成功的网站,若要走出自己的风格,并非单就窗口特效来加强,而应先注重内容,并依其网站内容来决定如何采用一些特殊的窗口,达到整个网站的风格一致性。记住,花样越多并不能让网页显得技巧高明,而是在于内容与窗口效果的完美运用。

转载请注明:夜阑小雨 » 网站设计风格及色彩搭配技巧(二):排版

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址