网页的版式设计整理（部分）

时间：2023-09-30 10:18:01 | 来源：网站运营

时间：2023-09-30 10:18:01 来源：网站运营

网页的版式设计整理（部分）： 主要是自己手动打字整理总结的之前的，可能有些不全，是为了防止自己忘记，加深记忆。

网页的版式设计通常包括：视觉元素及其组织形式、页面间的专场以及网站的导航形式等。“视觉元素的组织”包括元素的大小和数量、表格的布局、散点组合与块状组合、主题形象的体现、留白效果的表现、图与文的关系、曲线与直线的组织、水平线与垂直线以及斜线的比较，等等。根据不同的组织形式，可以将网页的版式大致划分为以下几种类型：骨骼型、满版型、分割型、中轴型、倾斜型、对称型、焦点型、三角型、自由型。

骨骼型：网页中骨骼型是一种规范、严谨的分割方式，类似于报刊的版式。常见的网页骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。通常以竖向分栏居多。这种版式给人以和谐、理性的美。

骨骼型版式常为综合门户、新闻媒体类网站所采用。

例如：crl.cn

满版型

满版型页面以图像充满整版。主要以图像为诉求点，可将部分文字置于图像之上。视觉传达效果直观而突出，给人以生动大方的感觉。

满版型版式被各种网站所采用，其中以韩国网站居多。

例如：http:세명대학교

http://www.t1j.co.kr/

http://event.kt.co.kr/


分割型

分割型版式指把真个页面分成上下或左右两部分，分别安排图片或文字内容。两部分形成对比，使图片部分感性而具表现力，文字部分则理性而具说服力。可以调整图片和文字所占的面积比例，来调节对比的强弱。如果图片比例过大，文字字体过于纤细，段落疏松，会造成视觉心理的不平衡，显得生硬。如果通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。

例如：http://www.hitom.co.kr/

http://www.vonosoup.co.kr/


中轴型

中轴型版式指沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。中轴型版式为各类网站所采用。

例如：http://torchrelay.beijing2008.cn/

http://www.samsungypm.com/


倾斜型

倾斜型版式是将页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。

倾斜型版式为各类网站所采用。

例如：휴비스 메인 | Huvis

Welcome previsualsdesign.com - Hostmonster.com

http://www.coca-cola.com.ar/elladococacola/


对称型

对称型版式的页面给人稳定、严谨、理性的感觉。对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。四角型对称也是其中一种，指在页面四角安排相应的视觉元素。

对称型版式为各类网站所采用。

例如：http://pianteepassione/com/

피망 - 즐거움이 다르다! 피망


焦点型

焦点型的网页版式通过对浏览者视线的诱导，可以使页面产生强烈的视觉效果，如集聚感或膨胀感等。

焦点型分三种情况：

中心---将图片或文字置于页面的视觉中心。

向心---视觉元素引导浏览者的视线向页面中心聚拢。

离心---视觉元素引导浏览者的视线向外辐射。

例如：行政書士 講座ナビ

http://musicaltalk.cafe24.com/

Buy Lubricants, Jelly & Sex Toys for Couples online | K-Y®



三角型

三角型版式指网页各视觉元素呈三角形或多角形排流。正三角形最具稳定性，倒三角形则可产生动感。侧三角形构成一种均衡版式，既安定又有动感。

例如：티티호스팅

ペレーダ | molten モルテンスポーツ事業本部

http://orions.co.kr/



自由型

自由型版式的页面具有活泼、轻快的气氛。

自由型版式也可应用于多种网站。

例如：http://9dan.aekung.co.kr/

http://www.sonnorl.co.kr/