网页设计版式与网页配色(74).ppt

图23：分割线上的压置的图片既打破了页面分割的生硬感， 也使自身得到强调。左边框上的小标签乃点睛之笔。 4.中轴型 ?　　沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。 ?　　 图24：不易觉察的中轴型版式，给人以轻快之感。 5.曲线型 图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。 图25：网站的导航标题沿图形弧线排列。 6.倾斜型 ?　　页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。 图26：文字水平排列，将画框斜置，产生对比与动势，印象被加强。 7.对称型 ?　　 对称的页面给人稳定、严谨、庄重、理性的感受。 ?　　 对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。 ? 　 　四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四个角安排的任何内容都能产生安定感。控制好页面的四个角，也就控制了页面的空间。越是凌乱的页面，越要注意对四个角的控制。 图27：以相对对称手法制作的导航页面。 8.焦点型 ?　　焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况。 （1）中心　以对比强烈的图片或文字置于页面的视觉中心。 ? （2）向心　视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。 ? （3）离心　视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。 图28：通过离心的版式，清晰地传达出网站提供的服务。 9.三角型 ?　　网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。 图29：整体看为正三角形的构图，主体形象稳定而突出。 10.自由型 ?　自由型的页面具有活泼、轻快的风格。 图30：引导视线的图片以散点构成，传达随意、轻松的气氛。 1.图像的格式 　　Web通常使用两种图像格式：GIF和JPEG。除此以外，还有两种适合网络传播但没有被广泛应用的图像格式：PNG和MNG。  2.图像的形式 　　同印刷排版一样，静态图像在网页排版中的运用不外乎四种形式：方形图、退底图、出血图以及这三种形式的结合使用。  　 （1）方形图 　即图形以直线边框来规范和限制，是一种最常见、最简洁、最单纯的形态。方形图使图像内容更突出且将主体形象与环境共融，可以完整地传达主题思想，富有感染性。配置方形图的页面，给人以稳重、可信、严谨、理性、庄重和安静等感觉，但有时也显得平淡、呆板。  图9：典型的方形图，四周留出边框，使图片内容突出。  （2）退底图　将图像中的背景去掉，只留下主题形象。退底图形自由而突出，更具有个性，因而给人印象深刻。配置退底图的页面，轻松、活泼，动态十足，而且图文结合自然，给人以亲和感。但也容易造成凌乱和不整体的感觉。  图10：人物全部退底，文字色块的安排轻松随意，是面向年轻人的设计。 （3）出血图 　 图像的一边或几个边充满页面，有向外扩张和舒展之势。一般用于传达抒情或运动信息的页面，因不受边框限制，感觉上与人更加接近，便于情感与动感的发挥。  图11：四边出血，有强烈的扩张感。 图12：主体形象退底且两边出血。主体形象的方向性 与右侧文字的排列方式具有引导视觉的作用。 3.图像的编排 （1）四角与中轴四点结构 页面的四个角与对角线、中轴四点及水平与垂直的中轴线，具有支配页面结构的作用。 ? 四角是页面边界相交形成的四个点，把四角连接起来的斜线即对角线，交叉点为页面中心。中轴四点指经过页面中心的垂直线和水平线的端点。这四个点可上、下、左、右移动。  ? 通过四角与中轴四点结构的不同组合、变化，可以求得多样的页面结构。在图像排版时紧紧抓住这八个点，可以突出网页的形式美感，网页的版式设计、视觉流程的筹划也得到相应简化。 图13：着重于对左上角和右下角的控制， 右下角的树叶起到呼应与稳定页面的作用。 图14：饱满的页面构图，巧妙地利用表盘稳定住页面四角。 图15：以水平分割为主的页面，右上角与左下角安排了文字，打破呆板的感觉。 图16：多幅图片使水平垂直线规律地等量分割，获得了理性与秩序的美。 图17：图片与文字穿插编排，形成散点组合。