网页设计创意构图:网站专题构图设计之美

发布时间：2018-05-17浏览次数：868 <p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">构图之美：好的专题都是怎么构图的？</font> </td> </tr></tbody></table> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">一个成功的专题页面，大部分会具有以下几个出彩的要素：色彩、构图、风格创意，细节等。一个页面从无到有，设计师需要对整个页面有全盘的设计和把控，良好的画面分割能够让用户第一眼看到这个页面就能被视觉吸引，甚至不用浏览具体内容就能了解这个页面的很多信息。同样的素材，同样的配色，不同的构图能够让页面出来的效果有天壤之别。如果你还抱着一个专题就是一个出色的头图，下面的内容按部就班的填进去，那你就OUT了。现在的专题设计越来越具有整体画面感，看上去不像网站，更像是精美的杂志或者是精彩的平面设计作品。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">好的页面构图能够让你页面更出彩，也能让你做设计更事半功倍。下面，我们就来看看一些好的专题都是怎么构图的。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">(以下例子均来自互联网)</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><strong style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND-COLOR: transparent">1. 几何切割</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">在现实生活与自然界中，我们随处可见几何图形的存在，简单的三角形、正方形、长方形和圆形甚至几根线条就可以组成很多有趣的图形，也很符合现代审美需求，适当的画面切割能够给页面带来动感与节奏感。加入几根线条，几个块面就能令页面起到意想不到的效果。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">实现的时候需要注意的是素材不适合太过复杂和花哨，一般会是纯色大块搭配渐变，主要突出形状和区块。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><strong style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND-COLOR: transparent">A. 简单切割</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 700px; BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: 600px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; PADDING-RIGHT: 0px; MAX-HEIGHT: 1000px; BACKGROUND-COLOR: transparent" border="0" alt="浅析专题中的构图之美" src="http://www.webjx.com/files/allimg/131218/2036170.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 700px; BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: 600px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; PADDING-RIGHT: 0px; MAX-HEIGHT: 1000px; BACKGROUND-COLOR: transparent" border="0" alt="浅析专题中的构图之美" src="http://www.webjx.com/files/allimg/131218/2036171.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 700px; BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: 600px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; PADDING-RIGHT: 0px; MAX-HEIGHT: 1000px; BACKGROUND-COLOR: transparent" border="0" alt="浅析专题中的构图之美" src="http://www.webjx.com/files/allimg/131218/2036172.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">用一个形状或者素材切分整个页面，画面瞬时变得有趣生动起来，内容区域也能得到有效划分。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">这类构图方式对内容没有过多要求，可随意安排。具体排版可根据内容来处理，也是现在专题页面用得最多，最普遍的一种构图方式。</p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><strong style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND-COLOR: transparent">B. 对称切割</strong></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 700px; BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: 600px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; PADDING-RIGHT: 0px; MAX-HEIGHT: 1000px; BACKGROUND-COLOR: transparent" border="0" alt="浅析专题中的构图之美" src="http://www.webjx.com/files/allimg/131218/2036173.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 700px; BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: 600px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; PADDING-RIGHT: 0px; MAX-HEIGHT: 1000px; BACKGROUND-COLOR: transparent" border="0" alt="浅析专题中的构图之美" src="http://www.webjx.com/files/allimg/131218/2036174.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px"><img style="MAX-WIDTH: 700px; BORDER-TOP: 0px; HEIGHT: auto; BORDER-RIGHT: 0px; WIDTH: 600px; VERTICAL-ALIGN: baseline; BORDER-BOTTOM: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; PADDING-RIGHT: 0px; MAX-HEIGHT: 1000px; BACKGROUND-COLOR: transparent" border="0" alt="浅析专题中的构图之美" src="http://www.webjx.com/files/allimg/131218/2036175.jpg"></p> <p style="WHITE-SPACE: normal; WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT: 14px/26px 'Segoe UI', Tahoma, Arial; PADDING-LEFT: 0px; MARGIN: 1em 0px; ORPHANS: 2; WIDOWS: 2; LETTER-SPACING: normal; PADDING-RIGHT: 0px; BACKGROUND-COLOR: rgb(245,250,255); TEXT-INDENT: 2em; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px">这种构图方式的前提一般是内容分主要两部分，并且这两部分是对立关系的情况下，比如说：对战，男女，冷热等等。页面一分为二，内容划分明确也更加具有视觉冲击力。</p> <p></p>